Comments (7)
In doing this refactoring I think we should rename the commands. If we're not in CSS domain any more the prefix can go. Also I think a sprite group is the base trigger for if an image is a part of a sprite or not, so that's the most common use case. We should drop the '-group' part to make it more easily accessible.
So my suggestion is image.png?sprite=foo&sprite-option=bar
Also I think we should introduce a new sprite group. A global sprite group. One that things will go into if no specific group is mentioned. That enables the following syntax: image.png?sprite
, which I feel would be a very common use case for most people. Just a single sprite with no need for naming.
from assetgraph-builder.
Post processing a sprite
This requires a bit more thought. We could make it chainable through cgi-params, like has already been done in the image post processing with the order being significant.
But we are going to run into trouble because post processing the sprite sheet itself is going to pull in post processing instructions from a number of different images. In the worst case this will cause a conflict in settings and/or a post processing step that was unintended for the rest of the images in the sprite sheet.
I think we need to find a way to define a post processing step of sprite sheets outside the image url's. Maybe stick to the concept of vendor prefixed css properties for defining a specific sprite sheets options.
In that case the only sprite related cgi param would be the sprite group name. And the configuration and post processing would be handled somewhere else. A CSS block maybe?
from assetgraph-builder.
Wasn't this solved by https://github.com/One-com/assetgraph-builder/blob/master/lib/transforms/buildProduction.js#L45-L49 ?
from assetgraph-builder.
Yeah, pretty much. I'm not sure there's much left, except the 2nd bullet:
- Explore whether this syntax change makes the spriting applicable to sprite images referred to from eg. HTML. Eg.
<img src="foo.png?sprite=abc">
⇒<img src="blank.png" style="background-image:url(sprite.png);background-position: ...">
... which probably isn't that interesting anyway.
from assetgraph-builder.
Postprocessing a sprite is still a bit ugly. You have to do something like this:
.foo {
-sprite-selector-for-group: theGroup;
-sprite-location: url(?pngquant=128);
background: red !important; /* optional, will be preserved */
}
.bar {
background-image: url(bar.png?sprite=theGroup);
}
But I wasn't able to come up with something better. The only really ugly part is the -sprite-location
bit.
from assetgraph-builder.
Well, it is what it is. Open a new issue if you have a good idea about how to get rid of the -sprite-location
ugliness.
from assetgraph-builder.
I have no new ideas on this. I think we've improved on the common use case. Post processing a sprite sheet other than the default optimizations, which we do anyway, doesn't seem to be that big of a use case.
from assetgraph-builder.
Related Issues (20)
- Dedupe source maps HOT 1
- RSS feed link gets updated wrong
- When browsers list is not configured, look for it in package.json HOT 2
- Support .browserslistrc and browserslist key in package.json HOT 5
- Is it possible to wrap the built JS in a function to not expose define() ? HOT 4
- Throws when encountering Html Svg island with inline style HOT 1
- Generates invalid syntax from ES6 code HOT 4
- `node-zopfli` package seems no longer maintained HOT 5
- Ruby Sass is deprecated HOT 2
- Add `--preflight-check` cmdline option HOT 7
- `npm audit` complaints HOT 6
- Breaks await expression HOT 4
- Breaks relative ES6 module paths HOT 4
- ⚠ WARN: Cannot read property 'length' of null HOT 2
- [Q] CHANGELOG? HOT 4
- make assetgraph to not process svg HOT 2
- Translation not working HOT 1
- How to customize? HOT 3
- a vulnerability CVE-2020-7598 is introduced in assetgraph-builder
- Svgo is not a constructor HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from assetgraph-builder.