Comments (11)
Tell them:
- It's not a bug.
- It's by design.
- The
background-repeat
declaration is superfluous and has no place in a sprite image. - The author confirmed all of this.
☝️ all true
from postcss-sprites.
Hi @perfey,
I don't think that you should need the background-repeat
declaration at all. Although, you can use the onUpdateRule
hook to add it to the output. Please see this example on how you can get the desired output - https://github.com/2createStudio/postcss-sprites/blob/master/examples/output-dimensions.md.
from postcss-sprites.
I don't think I need background-repeat
either. But I provide tools for my team to use. Some people think this is a bug in my tool.
from postcss-sprites.
But when the sprites comes from only one image, there might be some unnecessary repeat show up. Add "background-repeat: no-repeat;" can fix it. Is it considerable to fix?
from postcss-sprites.
Hi @gqbre,
This is something that we won't fix. Please keep in mind that is bad practice to use a sprite image within an element that doesn't have fixed dimensions.
If background-repeat
is must have for you, you can use the onUpdateRule
hook to tweak the plugin's output.
Example - https://github.com/2createStudio/postcss-sprites/blob/master/examples/output-dimensions.md
from postcss-sprites.
@gqbre sprites shouldn't have any repeat issues unless you're talking about a sprite image with no padding between the individual images inside of it, in which case, you just need to use more padding. I tend to use 10px padding with no issues.
from postcss-sprites.
@vvasilev- @jedmao in my new project, I found that it appears other icon at the edge in some android devices. I had set spritesmith with padding: 20, but the problem is that the builded sprite image width no padding at the edge itself, that is the reason.
I add onUpdateRule hook to fix it.
from postcss-sprites.
@gqbre did you do it like this?
const postcssSpriteOptions = {
spritesmith: {
padding: 10,
},
};
If not, then that's why it wasn't working. Otherwise, I don't know what to tell you, because it totally works for me!
I'll share my entire config if it helps anyone:
const postcssSpriteOptions = {
stylesheetPath: path.join(styles, 'sheets'),
spritePath: path.join(styles, 'images', 'sprites'),
hooks: {
onUpdateRule: function onUpdateRule(rule, token, image) {
if (isDev) {
this.addDependency(image.path);
}
postcssSpritesCore.updateRule(rule, token, image);
['width', 'height'].forEach(prop => {
let value = image.coords[prop];
if (image.retina) {
value /= image.ratio;
}
rule.insertAfter(rule.last, postcss.decl({
prop,
value: `${value}px`,
}));
});
},
onSaveSpritesheet: (opts, spritesheet) => path.join(
opts.spritePath,
spritesheet.groups.concat([
revHash(spritesheet.image),
spritesheet.extension,
]).join('.')
),
},
retina: true,
spritesmith: {
padding: 10,
},
};
from postcss-sprites.
@jedmao yes, I did it by this way.
I think the problem appears becasuse of using rem units , it makes difference in android and iOS devices. Thanks.
from postcss-sprites.
Where are you specifying these rem units? In the image dimensions? That doesn't sound like a good idea.
from postcss-sprites.
@jedmao Yes, you are right. Rem layout is popular in China, it is convenient to set dimensions in different screen size devices. You can try it,but now maybe turn to vw/vh units to solve the problems
from postcss-sprites.
Related Issues (20)
- Issue with Spritesmith & incorrect output HOT 2
- Issue with "getImageUrl" function
- Upgrade to postcss 7.x HOT 3
- Move postcss to peerDependencies
- npm audit moderate security issue HOT 1
- postcss-sprites: An error occurred while processing files - Invalid file signature
- look for unique image url HOT 1
- The file path changes HOT 1
- How to supported retina @2x, @3x HOT 5
- Has a wrong result when the width and height of node is bigger then its background-image's HOT 2
- http2 AggressiveSplitting
- PostCSS declaration sources are being lost
- Support for retina? HOT 1
- sprite.png 404 (Not Found) HOT 14
- a lot of App hot update.. HOT 2
- combile with the webpack-dev-server, my browser reload many time! HOT 4
- Duplicate output sprite -- using Laravel Mix HOT 4
- how to use in Webpack 3 HOT 1
- use vue-cli 2.9.x create project
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 postcss-sprites.