Non-iframed Editor: Compound selectors within :where are not prefixed correctly

[aaronrobertshaw]

Description

When the editor is not iframed, styles have their selectors prefixed with .editor-styles-wrapper. An issue arises when the style's selector being processed contains a compound selector within a :where() css function.

The result is incorrect as the selectors within the :where(), other than the first, also get the .editor-styles-wrapper prefixed. This means part of the final selector doubles up on the .editor-styles-wrapper class causing those styles to not be applied as intended.

Step-by-step reproduction instructions

1. Activate TT4 (which has button styles) and navigate to the post editor
2. Ensure the editor is not iframed. This can be done by enabling the Custom Fields preference via the top right menu More > Preferences > Custom Fields, then reloading the editor.
3. Edit a post and add some buttons, then save
4. Inspect the buttons and find the matched style with the following selector:
   .editor-styles-wrapper :where(.wp-element-button, .editor-styles-wrapper .wp-block-button__link)
5. Note the injection of the second .editor-styles-wrapper within that

Screenshots, screen recording, code snippet

Environment info

• 6.6.0
• Gutenberg trunk

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[aaronrobertshaw]

This appears to be a shortcoming of the postcss-prefixwrap plugin or how it is being leveraged within transformStyle.

For debugging purposes, the following diff will help as it isolates a single problematic :where selector and will log the direct results from postcss-prefixwrap's wrap() function to the console.

Debugging diff

diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js
index 9d57de3fa3..d66a5d5ac3 100644
--- a/packages/block-editor/src/utils/transform-styles/index.js
+++ b/packages/block-editor/src/utils/transform-styles/index.js
@@ -71,6 +71,27 @@ const transformStyles = ( styles, wrapperSelector = '' ) => {
 		cache = new WeakMap();
 		cacheByWrapperSelector.set( wrapperSelector, cache );
 	}
+	console.debug( {
+		transformedStyles: transformStyle(
+			{
+				css: ':where(.wp-block-button, .wp-block-button__link){background: pink}',
+			},
+			'.editor-styles-wrapper'
+		),
+		wrappedStyles: postcss(
+			[
+				wrap( '.editor-styles-wrapper', {
+					ignoredSelectors: [
+						'.editor-styles-wrapper',
+						/:where\(([^)]*)\)/,
+					],
+				} ),
+			].filter( Boolean )
+		).process(
+			':where(.wp-block-button, .wp-block-button__link){background: pink}',
+			{}
+		).css,
+	} );
 	return styles.map( ( style ) => {
 		let css = cache.get( style );
 		if ( ! css ) {

Possible steps forward include:

1. Trying to update any compound selectors generated for global styles that are wrapped in :where() to be split out individually
2. Get this use case fixed upstream in postcss-prefixwrap

@andrewserong with your recent work with transformStyle do you have any additional insights before I submit upstream issues?

[andrewserong]

@andrewserong with your recent work with transformStyle do you have any additional insights before I submit upstream issues?

No, I don't have any additional insights there. Unfortunately my experience with transformStyle was mostly limited to hacking around until the body based rules appeared to be replaced correctly, but this one looks a bit different.

Thanks for digging in 👍

[talldan]

I've reported an upstream issue for this - dbtedman/postcss-prefixwrap#515