transformStyles not working correctly

[pascalknecht]

Describe the bug
When loading custom css via add_editor_styles not every style is applied when any element has an svg background encoded as a data:image/svg.

To reproduce
Steps to reproduce the behavior:

1. Enter the following code into the console
   wp.editor.transformStyles([{css: ".navbar-light .navbar-toggler-icon {↵background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\")}"}], '.editor-styles-wrapper');

Expected behavior
The styles should be transformed with .editor-styles-wrapper in front.

Additional context

• Gutenberg 6.0.0

[oxyc]

I just hit this as well when having having swiper included. It breaks at https://github.com/nolimits4web/swiper/blob/1c4dfa3b08727f7febd9238980d8249d89202702/dist/css/swiper.css#L490

See reworkcss/css#67. I can also confirm this only happens when the css is minified as mentioned here reworkcss/css#67 (comment)

[noisysocks]

This seems to be working for me. When I paste the snippet into my console I get:

[
	".editor-styles-wrapper .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }"
]

[oxyc]

@noisysocks I think the test case was wrong. See the upstream bug report I mentioned in #16408 (comment).

I have a working PR for this #17146

A reproducible test is (notice that the second selector does not become prefixed):

wp.editor.transformStyles([{css: `.foo {background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\")} .bar {background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\")}`}], '.editor-styles-wrapper');

Or simpler:

wp.editor.transformStyles([{css: `.foo {background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg stroke='rgba(0, 0, 0, 0.5)'%3C/svg%3E\")} .bar {background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg stroke='rgba(0, 0, 0, 0.5)'%3C/svg%3E\")}`}], '.editor-styles-wrapper');

Even simpler:

wp.editor.transformStyles([{css: `.a { b: url(")"); d: url(";a"); }`}], '.editor-styles-wrapper');

[noisysocks]

Thanks @oxyc—you're totally right and that second example there demonstrates the bug when I run it locally.

[strarsis]

Similar issue: #21569
Relevant PR: #21936

[strarsis]

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

[skorasaurus]

This is now fixed thanks to the work of @zaguiini and @strarsis !

This will be included in gutenberg 17.0; was specifically #49521

before #49521

after:

@oxyc I've also confirmed that the merged PR fixes your reduced test cases as well.