lost background-repeat

[perfey]

/ Input / .comment { background: url(images/sprite/ico-comment.png) no-repeat 0 0; } .bubble { background: url(images/sprite/ico-bubble.png) no-repeat 0 0; }

/ ---------------- /

/ Output / .comment { background-image: url(images/sprite.png); background-position: 0 0; } .bubble { background-image: url(images/sprite.png); background-position: 0 -50px; }

I want output / Output / .comment { background-image: url(images/sprite.png); background-position: 0 0; background-repeat: no-repeat; } .bubble { background-image: url(images/sprite.png); background-position: 0 -50px; background-repeat: no-repeat; }

background-repeat: no-repeat; is lost.

[vvasilev-]

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.

[perfey]

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.

[jednano]

Tell them:

1. It's not a bug.
2. It's by design.
3. The background-repeat declaration is superfluous and has no place in a sprite image.
4. The author confirmed all of this.

☝️ all true

[gqbre]

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?

[vvasilev-]

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

[jednano]

@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.

[gqbre]

@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.

[jednano]

@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,
    },
};

[gqbre]

@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.

[jednano]

Where are you specifying these rem units? In the image dimensions? That doesn't sound like a good idea.

[gqbre]

@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