Gutenberg: 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 https://github.com/reworkcss/css/issues/67. I can also confirm this only happens when the css is minified as mentioned here https://github.com/reworkcss/css/issues/67#issuecomment-258090104

[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 https://github.com/WordPress/gutenberg/issues/16408#issuecomment-523862740.

I have a working PR for this https://github.com/WordPress/gutenberg/pull/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: https://github.com/WordPress/gutenberg/issues/21569
Relevant PR: https://github.com/WordPress/gutenberg/pull/21936