stc-sprite

A css sprite bundler for stcjs

Usage no npm install needed!

<script type="module">
  import stcSprite from 'https://cdn.skypack.dev/stc-sprite';
</script>

README

stc-sprite

A css sprite bundler for stcjs

Usage

// stc.config.js
stc.workflow({
  sprite: {
    plugin: sprite,
    include: /\.css$/,
    options: {} // see below
  },
});

Options

{
  spriteFolders: '' // can also be an array of folders.
  outputType: "png", // jpg or png.
  algorithm: "binary-tree", // "top-down" or "left-right" or "diagonal" or "alt-diagonal" or "binary-tree".
  background: "#FFFFFF", // Available when using jpg. For png files, we will only support transparent background.
  retina: ture, // Resolve "@2x" files and make "@1x" file automatically.
  margin: 4, // Margin between pictures. When displaying in retina mode, a larger margin can prevent bleeding.
}

For all layout algorithm, see explanations here.

Roadmap

  • basic support
  • append background-position after all attribute set
  • margin support
  • jpg support
  • background color support
  • retina support