Source Map + Inline Images = Invalid CSS

[IdanCo]

BUG: When processing embed images in css with the SourceMap flag set to true, invalid css is outputted. Originated from bootstrap 4.

I'm trying to compile the following css:

.element {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

code is based on this

When the SourceMap flag is off, all is fine and well. But for some reason, when the SourceMap flag is on, it is compiled to this invalid css -

.element {
  background-image: url("http://localhost:8080/\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5")' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

notice that http://localhost:8080/ suddenly popped at the beginning, which makes the css invalid.

Turning off URL handling doesn't work as mentioned here - #44 (comment)

The webpack rule looks like this -

  {
    test: /\.(css)$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader',
      options: {
        sourceMap: true // toggle this flag to see the issue
      }
    }]
  },

I've bangged my head around this one for a long time and couldn't come up with anything. I'd be very glad if someone could point me in the right direction.

Webpack: 2.3.3
css-loader: 0.27.3

UPDATE:
Not sure if it helps, but notice this:
stroke='rgba(0, 0, 0, 0.5)' // before
stroke='rgba(0, 0, 0, 0.5")' // after
This extra quote sign can't be good...

[alexander-akait]

@IdanCo added tests #491, all works fine, can you create minimal repo to reproduce?

[alexander-akait]

@IdanCo also you %3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E seems invalid.

Data should be <svg><rect>...</rect></svg> (but it is not support IE, maybe Edge) or encoded (use for this http://meyerweb.com/eric/tools/dencoder/) %3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%2523007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E

[michael-ciniawsky]

@IdanCo #491 landed see @evilebottnawi comments and if still any regressions feel free to reopen or open a new issue :)

[IdanCo]

Wow, kudos for the quick reply and the excellent test!

I'm reopening this because for some reason (not sure how i missed it before) this only reproduces when sass-loader is present. Now, i now the reasonable thing would be to head out to their repo and report this issue, but before i do so there is still something strange the seems to originate from css-loader: the sourcemap flag still switches this bug on and off.

I've created a demo branch - https://github.com/IdanCo/webpack-modular/tree/inline-images
notice this line here, it's what switches the bug on and off.

Any chance you can take a look at it? even if it's a sass-loader issue, the reason css-loader manifests it may be relevant. If there's any further information i can supply feel free.

[IdanCo]

@evilebottnawi - thanks for the tip! this code is taken from Bootstrap 4 -
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L616
and they insist on supporting IE10, but i'll look for a third way and maybe do a to fix it...

[alexander-akait]

@IdanCo near future i try to investigate this

[alexander-akait]

@IdanCo and yep bootstrap have weird lines with svg, maybe this is due to something special in sass (but i don't think), can you create issue with reference here to clarify all 😄

[alexander-akait]

@IdanCo wip

[alexander-akait]

@IdanCo trouble not in css-loader, in style-loader webpack-contrib/style-loader#214

[alexander-akait]

we can close this issue in favor webpack-contrib/style-loader#214 i can try resolve this issue in near future

[alexander-akait]

@IdanCo just update style-loader to latest version in your package.json, it should be solve your problem, feel free reopen if it is don't help ⭐

[IdanCo]

You're all awesome. Best response(s) i ever got on github! Ill let you know if there's any news

[alexander-akait]

@IdanCo also i found why bootstrap don't encoded all url more infomation about this https://css-tricks.com/probably-dont-base64-svg/

[IdanCo]

just for reference, you were spot on - upgrading style-loader fixed the issue.