search

systemjs / plugin-css

CSS loader plugin
MIT License
92 stars 60 forks source link

postCSS mangling SVG #121

Closed rj33 closed 6 years ago

rj33 commented 7 years ago

I have CSS with styles like this:

.ct-piece-style-merida-gradient .ct-piece-whitepawn { background-image:
url("data:image/svg xml;charset=US-ASCII,<svg text-rendering="geometricPrecision" fill-rule="evenodd" viewBox="0 0 50 50" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a" y2="37.469" gradientUnits="userSpaceOnUse" x2="77.764" gradientTransform="matrix(1 0 0 .97324 0 1.243)" y1="37.346" x1="21.13"><stop stop-color="#fff" offset="0"/><stop stop-color="#fff" stop-opacity="0" offset="1"/></linearGradient></defs><path fill="#1f1a17" d="M25 46.448H11.606a13.13 13.13 0 0 1-.991-5.043c0-2.975.864-5.644 2.599-8.018 1.736-2.365 3.971-4.054 6.698-5.067a6.823 6.823 0 0 1-2.862-2.398c-.737-1.071-1.101-2.283-1.101-3.634 0-1.689.576-3.156 1.736-4.392 1.151-1.244 2.574-1.961 4.267-2.151-1.346-.98-2.015-2.282-2.015-3.889 0-1.351.491-2.513 1.482-3.477.982-.964 2.175-1.442 3.581-1.442 1.388 0 2.582.478 3.573 1.442s1.49 2.126 1.49 3.477c0 1.607-.669 2.909-2.015 3.889 1.693.19 3.116.907 4.267 2.151 1.16 1.236 1.736 2.703 1.736 4.392 0 1.351-.373 2.563-1.126 3.634a7.05 7.05 0 0 1-2.862 2.398c2.726 1.013 4.961 2.702 6.697 5.067 1.736 2.374 2.6 5.043 2.6 8.018 0 1.739-.322 3.42-.966 5.043H25z"/><path d="M25 44.808h12.175c.347-1.153.525-2.291.525-3.403 0-2.513-.711-4.787-2.142-6.831s-3.277-3.552-5.52-4.516c-1.584-.62-1.643-.659-1.643-1.738 0-.849.559-1.475 1.668-1.879 1.533-1.046 2.303-2.431 2.303-4.153 0-1.244-.432-2.324-1.287-3.263-.863-.931-1.905-1.467-3.124-1.615-.999-.083-1.49-.626-1.49-1.64 0-.453.177-.873.542-1.261.897-.675 1.346-1.557 1.346-2.653 0-.898-.339-1.673-.999-2.315-.661-.643-1.448-.965-2.354-.965-.94 0-1.744.322-2.396.965a3.135 3.135 0 0 0-.974 2.315c0 1.08.44 1.961 1.338 2.653.364.355.542.775.542 1.261 0 1.014-.483 1.557-1.465 1.64a4.901 4.901 0 0 0-3.133 1.615c-.855.939-1.278 2.019-1.278 3.263 0 1.722.77 3.107 2.303 4.153 1.109.412 1.668 1.046 1.668 1.879 0 1.079-.067 1.118-1.668 1.738-2.244.964-4.081 2.472-5.503 4.516-1.423 2.044-2.134 4.318-2.134 6.831 0 1.195.178 2.324.525 3.403H25z" fill="url(#a)"/></svg>");
background-repeat: no-repeat; }

the fill="url(#a)" is proving problematic, as the bundling process is converting that to: fill="url(dist/styles/pieces/merida-gradient/#a)"

Note that the '#a' in the url here is an internal reference from the svg to the lineargradient to be used, i.e:

I'm not sure how easy this is to fix. It looks like it might be tricky to special case these. I'm lucky in that I don't need any of this kind of rebasing, so I've just modified the atUrl postCSS plugin to always return the unmodified filename passed into it. From memory, I had similar issues when cleanCss was being used in older versions, so this isn't a new issue from that point of view, but thought it was worth pointing out. Regards, Richard.
guybedford commented 7 years ago

Which version of plugin-css are you using here? The latest version should definitely only be using safe PostCSS optimizations.

guybedford commented 7 years ago

Also it would be worth posting this bug against postCSS otherwise as well.

rj33 commented 6 years ago

Sorry, didn't notice your reply until now. Looks like I was probably using systemjs-plugin-css@0.1.32.

guybedford commented 6 years ago

Do you still get the issue on the latest version?

rj33 commented 6 years ago

I'll get back to you on this. Tried to upgrade to 0.20 and having some issues I need to resolve first before I can test again.

rj33 commented 6 years ago

I've just tested, and it looks like the problem no longer exists, although it looks like I also changed the encoding on the svg data:image/svg slightly, which might have made the fill=url someone more opaque to the optimiser, but either way it works now, so feel free to close.