Unknown word: 7.0.0 fails with inlined base64 svg

[pau-santesmasses]

Error message:

CssSyntaxError: postcss-env-fn: <css input>:1:19: Unknown word

> 1 | data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+Cjwvc3ZnPg==
    |                   ^

Didn't seem to be a problem on 6.7.0. Removing the data url or replacing the base64 with the actual svg makes it work again..

[romainmenke]

Thank you for reporting this!

It looks like a css-values-parser message.

Can you add the surrounding css so that we can add a test and pinpoint the cause?

for example :

.foo {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVy...');
}

Can you also try quoting the data string? Might be related to this issue : https://github.com/shellscape/postcss-values-parser/issues/140

It might surface now when upgrading postcss-preset-env because we use css-values-parser in more cases instead of regexp find/replace.

[pau-santesmasses]

Sure! thanks for taking a look!

My real situation was a large file from a package (built by vite) and imported from node_modules. But to isolate it, I did test with similar css to your .foo example.

html {
  background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+Cjwvc3ZnPg==);
}

Again, the original file is built by vite so I can't really add the quotes myself (the data url is indeed unquoted though). I can test if that does solve it and report the issue in the vite repo.

Thanks for pointing out the postcss-values-parser issue. Will keep an eye on it.

[romainmenke]

I think it would also be safest if we update all plugins using postcss-values-parser and catch errors.

They could still be emitted as warnings but shouldn't break builds. If a value can't be parsed in a specific plugin it might be better to ignore that value.

[Antonio-Laguna]

@pau-santesmasses we've just released a new version (7.0.1) that hopefully fixes your issue entirely. If you could try that'd be great. We've tested internally but can't be 100% sure without all of your code.

[pau-santesmasses]

@Antonio-Laguna it works now. Thank you! It still says it failed to parse data:image/svg+xml;base64... but it doesn't prevent the dev server from starting up or the builds from completing.

[romainmenke]

@pau-santesmasses That is correct. We added warnings for this and similar cases. We don't want to fully ignore and silence these because then real bugs might slip through unnoticed.

For example rgb(0, 0, 255;); would also be an error and is definitely wrong.

An improvement on this would be to correctly parse unquoted data urls.

[Antonio-Laguna]

Closing as it's confirmed to be fixed :)

[mrockwood]

Documenting in case others run across this issue. 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]

@mrockwood Can you open a new issue for your case so that we can track this down?

[Antonio-Laguna]

@romainmenke I feel this will probably go away with all the things we've been doing lately but it'll be good to test this for sure