csstools / postcss-preset-env

Convert modern CSS into something browsers understand
https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
Creative Commons Zero v1.0 Universal
2.22k stars 90 forks source link

7.0.1 hangs when used with postcss-inline-svg #231

Closed mrockwood closed 2 years ago

mrockwood commented 2 years ago

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.

romainmenke commented 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!

mrockwood commented 2 years ago

Yes, that looks correct. Thanks for looking into this.

Antonio-Laguna commented 2 years ago

This was released already as 7.0.2 and we've already released 7.1.0 too so this should be solved!