stylus-lemonade

Automatically Generate CSS Sprites from Images with Stylus

npm install stylus-lemonade
1 downloads in the last day
1 downloads in the last week
10 downloads in the last month

Stylus-Lemonade

Stylus-Lemonade is a plugin for Node.js Stylus which allows you to use functions like sprite-position(), sprite-height(), image-width(), sprite-map(), etc. within your *.styl markup to automatically fetch images and generate css sprites at render time.

If you come from the Ruby on Rails community, you will immediately recognize conventions from Spriting with Compass/SASS, originally Lemonade.

Install

sudo apt-get install libgd2-xpm-dev # on ubuntu; a libgd dependency
npm install stylus-lemonade

Use in Javascript

For the very latest and most comprehensive example, see test/integration/server.js.

var stylus = require('stylus');
stylus(markup_input)
  .plugin('stylus-lemonade')
  .render(function(err, css_output){
    console.log(css_output);
  });

Use in Stylus

For the very latest and most comprehensive examples, see test/fixtures/private/stylesheets/application.styl.

$animated_flame = sprite-map('flame')
#flame
  background: url(sprite-url($animated_flame)) no-repeat
  height: sprite-height($animated_flame, 'flame_a_0001')
  width: sprite-width($animated_flame, 'flame_a_0001')
.flame-frame-1
  background-position: sprite-position($animated_flame, 'flame_a_0001') !important
.flame-frame-2
  background-position: sprite-position($animated_flame, 'flame_a_0002') !important
.flame-frame-3
  background-position: sprite-position($animated_flame, 'flame_a_0003') !important
.flame-frame-4
  background-position: sprite-position($animated_flame, 'flame_a_0004') !important
.flame-frame-5
  background-position: sprite-position($animated_flame, 'flame_a_0005') !important
.flame-frame-6
  background-position: sprite-position($animated_flame, 'flame_a_0006') !important

Will output CSS like this:

#flame {
  background: url(../images/flame-4e9c94d3fa.png) no-repeat;
  height: 512px;
  width: 512px;
}
.flame-frame-1 {
  background-position: 0 0 !important;
}
.flame-frame-2 {
  background-position: 0 -512px !important;
}
.flame-frame-3 {
  background-position: 0 -1024px !important;
}
.flame-frame-4 {
  background-position: 0 -1536px !important;
}
.flame-frame-5 {
  background-position: 0 -2048px !important;
}
.flame-frame-6 {
  background-position: 0 -2560px !important;
}

And the image will turn out like this:

Test

npm test # build coffee, run mocha unit test, run chrome browser integration test
npm loves you