Hability to have only one background image url
Karbust opened this issue · 1 comments
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.
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