2createStudio / postcss-sprites

Generate sprites from stylesheets.
MIT License
413 stars 50 forks source link

Webpack Question: supposed to support hot swapping images? #83

Closed jednano closed 7 years ago

jednano commented 7 years ago

I have to restart my dev server if I want to change a sprite image to a new asset. I can't hot swap sprite images, so I'm just wondering if it's supposed to work this way or not. Is there a file watch going on somehow? Does anyone have hot swapping working with webpack?

FWIW, here's my plugin setup:

export default function postcssInit({ sheetName }) {
    return loadPlugins.call(this, {
        sheetName: sheetName || basename(this.resourcePath, '.css')
    });
}

function loadPlugins({ sheetName }) {
    const plugins = [/* plugins that are not postcss-sprites  */];

    const stylesheetPath = isDev
        ? 'styles/sheets'
        : 'build/public/css';
    const spritePath = isDev
        ? 'public/images/sprites/sprite.png'
        : 'build/public/images/sprites/sprite.png';
    plugins.push(postcssSprites({
        stylesheetPath,
        spritePath,
        hooks: {
            onUpdateRule: (rule, token, image) => {
                postcssSpritesCore.updateRule(rule, token, image);
                ['width', 'height'].forEach(prop => {
                    rule.insertAfter(rule.last, postcss.decl({
                        prop,
                        value: `${image.coords[prop]}px`
                    }));
                });
            },
            onSaveSpritesheet: (opts, spritesheet) => {
                return join(
                    opts.spritePath,
                    spritesheet.groups.concat('png').join('.')
                );
            }
        },
        groupBy: () => Promise.resolve(sheetName),
        retina: true,
        spritesmith: {
            padding: 10
        }
    }));

    return plugins;
}