Error while traversing the CSS: property missing ':'

[strarsis]

Describe the bug
When using production (minified), valid CSS styles also as editor styles,
the Gutenberg editor script has issues parsing it, no editor styles are applied.

Error while traversing the CSS: Error: [...]: property missing ':'.
According to the line and column number, the parser has issues with the = for inline SVG:

background:url("data:image/svg+xml;charset=utf-8,%3Csvg [...]

This is valid CSS and works in all modern browsers, it is also valid for the W3C CSS validator.

To reproduce
Steps to reproduce the behavior:

1. Load a theme stylesheet using add_editor_style that encodes a SVG using data:image/svg+xml;....
2. Open the Gutenberg editor with that theme being used.
3. Notice that the theme styles aren't applied in editor, but they are held in some internal Gutenberg stuff (you can find it by using Ctrl + F in Developer Console DOM view and search for text/selectors in the theme style file.
   In Console you can find the error
   Error while traversing the CSS: Error: [...]: property missing ':'.

Expected behavior
The CSS parser should be able to parse all valid, working, usual CSS.

[epiqueras]

Can you provide a bigger excerpt of your CSS to reproduce the issue, please?

I am running the following and it works as expected:

const input = `h1{color:red;background:url("data:image/svg+xml;charset=utf-8,%3Csvg")}`;
const output = traverse( input, ( node ) => {
		if ( node.type === 'rule' ) {
				return {
						...node,
						selectors: node.selectors.map(
						( selector ) => 'namespace ' + selector
				),
		};
}

return node;

[keithdevon]

I get the same issue and I also have inline SVGs in my CSS. If I remove these, the issue is resolved.

+1 that we should be able to use valid CSS in our themes without the editor styles breaking.

[strarsis]

There is a PR for reimplementing the CSS wrapping using a CSS library. However, some issues stalled the progress for now.

[kraftner]

Any news on this? Also @strarsis could you reference the PR you are talking about?

[keithdevon]

Today I tried escaping the single quotes (with \) in my SVG string and it seemed to work. If the issue comes back I'll update this thread.

[strarsis]

@kraftner: The PR: #25514

[strarsis]

@keithdevon: Are you doing this in an automated fashion, like using a PostCSS plugin?
Is the SVG still parseable by the browsers? Doesn't this also increase the size of the embedded SVG?

[oxyc]

There's also a patch for the current reworkcss parser that fixes this but I closed it in favor of #25514. Maybe it's worth revisiting due to the size of css-tree #17146

[strarsis]

@oxyc: Here is a proof of concept for parsing and modifying the styles directly with native browser APIs:
https://codepen.io/strarsis/pen/MWmMQgy
(Just a very small CSS selector library (~2.8kb) is used (as there is no browser API for them yet), but it could be replaced by some simple string manipulation, if needed.)

No styles are applied before processing is finished (no flash of select-unwrapped styles) and the function accepts an input CSS string and returns an output CSS string.

[Azragh]

FYI I just got a similar error trying to use @container {} in my editor stylesheet.

[strarsis]

New editor styles transformation approach using PostCSS is now merged (many thanks @zaguiini)!