How to passed prefix to customTemplates

[adrianyanglinde]

const templateFunction = function (data) {
console.log(data.sprites[0].image);
var shared = @mixin sprite_${prefix} { background-image: url(I); background-size: SWpx SHpx; }
.replace('I', data.sprites[0].image)
.replace('SW', data.spritesheet.width)
.replace('SH', data.spritesheet.height);
var perSprite = data.sprites
.map(function (sprite) {
return '@mixin N { width: Wpx; height: Hpx;background-position: Xpx Ypx; }'
.replace('N', sprite.name)
.replace('W', sprite.width)
.replace('H', sprite.height)
.replace('X', sprite.offset_x)
.replace('Y', sprite.offset_y);
})
.join('\n');

return shared + '\n' + perSprite;

};

function getWebpackSpriteConfig() {
const filesName = getAllDirs(getDevPath('./images/'));
const plugins = filesName.map((fileName) => {
const prefix = /^sprite_(\w+)/.exec(fileName)[1];

    return new SpritesmithPlugin({
        src: {
            cwd: getDevPath(`./images/sprite_${prefix}`),
            glob: '*.png'
        },
        target: {
            image: getDevPath(`./images/sprite_${prefix}.png`),
            css: [
                [
                    getDevPath(`./sass/sprite_${prefix}.scss`),
                    {
                        format: 'function_based_template'
                    }
                ]
            ]
        },
        customTemplates: {
            function_based_template: templateFunction
        },
        apiOptions: {
            cssImageRef: `../images/sprite_${prefix}.png?v=` + Date.parse(new Date())
        },
        spritesmithOptions: {
            algorithm: 'binary-tree',
            padding: 8
        }
    });
});
const config = {
    mode: 'development',
    plugins: [...plugins]
};
return config;

}

[mixtur]

Wrap your template in a closure I guess?

const templateFunction = prefix => data => {
    console.log(data.sprites[0].image);
    var shared = `@mixin sprite_${prefix} { background-image: url(I); background-size: SWpx SHpx; }`
        .replace('I', data.sprites[0].image)
        .replace('SW', data.spritesheet.width)
        .replace('SH', data.spritesheet.height);
    var perSprite = data.sprites
        .map(function(sprite) {
            return '@mixin N { width: Wpx; height: Hpx;background-position: Xpx Ypx; }'
                .replace('N', sprite.name)
                .replace('W', sprite.width)
                .replace('H', sprite.height)
                .replace('X', sprite.offset_x)
                .replace('Y', sprite.offset_y);
        })
        .join('\n');

    return shared + '\n' + perSprite;
};

function getWebpackSpriteConfig() {
    const filesName = getAllDirs(getDevPath('./images/'));
    const plugins = filesName.map((fileName) => {
        const prefix = /^sprite_(\w+)/.exec(fileName)[1];

        return new SpritesmithPlugin({
            src: {
                cwd: getDevPath(`./images/sprite_${prefix}`),
                glob: '*.png'
            },
            target: {
                image: getDevPath(`./images/sprite_${prefix}.png`),
                css: [
                    [
                        getDevPath(`./sass/sprite_${prefix}.scss`),
                        {
                            format: 'function_based_template'
                        }
                    ]
                ]
            },
            customTemplates: {
                function_based_template: templateFunction(prefix)
            },
            apiOptions: {
                cssImageRef: `../images/sprite_${prefix}.png?v=` + Date.parse(new Date())
            },
            spritesmithOptions: {
                algorithm: 'binary-tree',
                padding: 8
            }
        });
    });
    const config = {
        mode: 'development',
        plugins: [...plugins]
    };
    return config;
}