Closed mrockwood closed 2 years ago
@mrockwood Thank you for reporting this.
I just tried this:
color
added to check that postcss-preset-env
is running
:--inverse .divider-icon {
color: lab(40% 56.6 39);
background-image: svg-load("basic.svg", stroke=rgba(255, 255, 255, 0.2), fill=none);
}
with a random svg example from mdn :
<svg viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg">
<path d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"/>
</svg>
And was able to reproduce it with these plugins and settings :
require('postcss-preset-env')({ stage: 0 })
require('postcss-inline-svg')()
We have been hard at work to migrate all plugins to a different value parser and in that version it no longer hangs and outputs this :
:--inverse .divider-icon {
color: rgb(179, 35, 35);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.2)' fill='none'%3E %3Cpath d='M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z'/%3E %3C/svg%3E");
}
Is that output fully correct for the inputs or do you spot anything unexpected here?
We hope to have a release ready soon!
Yes, that looks correct. Thanks for looking into this.
This was released already as 7.0.2 and we've already released 7.1.0 too so this should be solved!
After updating from 6.7.0 to 7.0.1 my builds began to hang. I was able to trace the problem back to some lines that use postcss-inline-svg. Here is an example:
:--inverse .divider-icon { background-image: svg-load("../images/backgrounds/divider-icon.svg", stroke=rgba(255, 255, 255, 0.2), fill=none); }
I was able to get around the problem by adding quotes around the stroke color:
stroke="rgba(255, 255, 255, 0.2)"
The fix was easy enough, but the documentation for postcss-inline-svg does not include the quotes. I imagine others will run into this same issue.