Hability to have only one background image url

[Karbust]

Result (there's a total of 3429 icons):

.icon-00010 {
  background-image: url(../images/icons-sprite-official.webp);
  background-position: -34px -288px;
  width: 32px;
  height: 64px;
}

Originates this error when not using CSSO:

./src/css/icons-sprite-official.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/css/icons-sprite-official.css)
Module parse failed: Maximum call stack size exceeded
File was processed with these loaders:
 * ./node_modules/css-loader/dist/cjs.js
 * ./node_modules/postcss-loader/src/index.js
You may need an additional loader to handle the result of these loaders.
RangeError: Maximum call stack size exceeded

When using CSSO the minified CSS file still has a lot of background image url, but not enough to trigger the error.

Expected

Something like this:

.icon {
    background-image: url(imagens/icon-sprite.png?20210410224131);
    background-repeat: no-repeat;
    background-size: 2080px 2048px;
    display: inline-block;
}
.icon-00010 { background-position: -320px -320px; width: 32px; height: 64px; }

Environment

I'm using React, with Create React App.

[twolfson]

Usually Maximum call stack size implies a recursion issue, so I'm unsure the problem you've described is correlated to our library. It might be a configuration issue instead (e.g. library A -> library B -> library A -> etc)

That being said, I'll address your question directly:

This low level spritesmith doesn't generate any CSS, instead its output is an image and metadata:

https://github.com/twolfson/spritesmith/tree/3.4.0#getting-started

If you're using gulp.spritesmith or grunt-spritesmith, those both support custom CSS templates via the cssTemplate parameter:

https://github.com/twolfson/gulp.spritesmith/tree/6.11.0#documentation

https://github.com/twolfson/gulp.spritesmith/tree/6.11.0#templating