assetgraph/assetgraph-sprite

AssetGraph plugin for creating sprites from background images

assetgraph-sprite's Issues

Support percentage dimensions

See this discussion: https://twitter.com/rachelnabors/status/573232079900581889

Resources: https://github.com/rachelnabors/pet-rachel https://github.com/rachelnabors/pet-rachel/blob/master/scss/_mixins.scss

http://rachelnabors.com/blackbrickroad/ and the style sheet is important: http://rachelnabors.com/blackbrickroad/css/styles.css

Example from stylesheet:

  /* line 112, ../sass/_mixins.scss */
  .photo7-scrap2 {
    background-position: 0 97.41567%;
    width: 1.15321%;
    padding-top: 1.15321%;
    height: 0;
    left: 16.72158%;
    top: 77.35%;
    -moz-background-size: 6171.42857% auto;
    -o-background-size: 6171.42857% auto;
    -webkit-background-size: 6171.42857% auto;
    background-size: 6171.42857% auto;
  }

  /* line 123, ../sass/_mixins.scss */
  .photo7 .scrap2 {
    background-position: 0 97.18663%;
    width: 71.16969%;
    padding-top: 22.40527%;
    height: 0;
    left: 13.34432%;
    top: 16.35%;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }

Investigate why the spriting isn't always deterministic

canvas-heroku

This package might be interesting in order to avoid cairo as an OS dependency of assetgraph-sprite: https://github.com/LearnBoost/node-canvas/wiki/Installation-on-Heroku#using-a-fork-of-node-canvas

Emit warning on non-supported background-size

When the background-size of the individual image is <percentage>, cover, contain or inherit we should not include the image in the sprite sheet and instead emit a warning.

Refs #13

Paddings and offsets

I've fixed some problems with wrong sprite positioning when there is added padding and there is a previous background positioning in the selector. See e3fe75b

Please publish a new version

Different bin packing algorithm

I found this: https://github.com/unfold/spriter/blob/master/lib/renderers/packer.js

The project it comes from is quite good as well.

Sprite instructions don't get removed from the CSS

When building sprites so far these two vendor specific selectors, which are only there for assetgraph-sprite, don't get removed from the resulting CSS:

-one-allow-selector-merge:true;
-one-sprite-selector:.icon;

We might want to kill every property starting with -one- before outputting to production.

Multiple definitions of sprite

I have a setup where sprite sheets are defined in sass files that are included in multiple other toplevel sass files. The result is that each output css file has a redefinition of the same sprite sheet. I hit the "Multiple definitions of spriteGroupName sprite"-error.

Is there a way to avoid this?

Ideally I'd want assetgraph-sprite to handle this case more gracefully, but I'm also ok with having to do some manual workarounds in my assetgraph transform queue.

Retina images (pixel density)

What about pixel density? I have @2x images and I can't get assetgraph-sprite to calculate the position right. Could it perhaps read the @2x filename suffix or optional background-size rules from the CSS to determine image dimensions?

spriting fails

Assetgraph got a major API revision in 6c23f75
Assetgraph-sprite got adapted to the new API in 2190980

Assetgraph got released after the API changes, but assetgraqph-sprite didn't.

This breaks assetgraph-builder from v1.3.2