CSS transformation: Fix mangled selectors by switching to a different postcss plugin for prefixing

packages/block-editor/package.json

@@ -73,7 +73,7 @@
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"postcss": "^8.4.21",
-		"postcss-prefixwrap": "^1.41.0",
+		"postcss-prefix-selector": "^1.16.0",
 		"postcss-urlrebase": "^1.4.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^5.0.6",

packages/block-editor/src/utils/test/__snapshots__/transform-styles.js.snap

@@ -57,12 +57,6 @@ exports[`transformStyles selector wrap should ignore selectors 1`] = `
 ]
 `;
 
-exports[`transformStyles selector wrap should not double wrap selectors 1`] = `
-[
-  " .my-namespace h1, .my-namespace .red { color: red; }",
-]
-`;
-
 exports[`transformStyles selector wrap should replace :root selectors 1`] = `
 [
   "

packages/block-editor/src/utils/test/transform-styles.js

@@ -197,7 +197,7 @@ describe( 'transformStyles', () => {
 		} );
 
 		it( 'should not double wrap selectors', () => {
-			const input = ` .my-namespace h1, .red { color: red; }`;
+			const input = ` .my-namespace h1, .my-namespace .red { color: red; }`;
 
 			const output = transformStyles(
 				[
@@ -208,7 +208,24 @@ describe( 'transformStyles', () => {
 				'.my-namespace'
 			);
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ input ] );
+		} );
+
+		it( 'should not try to wrap items within `:where` selectors', () => {
+			const input = `:where(.wp-element-button:active, .wp-block-button__link:active) { color: blue; }`;
+			const prefix = '.my-namespace';
+			const expected = [ `${ prefix } ${ input }` ];
+
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				prefix
+			);
+
+			expect( output ).toEqual( expected );
 		} );
 	} );
 

packages/block-editor/src/utils/transform-styles/index.js

@@ -2,38 +2,62 @@
  * External dependencies
  */
 import postcss, { CssSyntaxError } from 'postcss';
-import wrap from 'postcss-prefixwrap';
+import prefixSelector from 'postcss-prefix-selector';
 import rebaseUrl from 'postcss-urlrebase';
 
 const cacheByWrapperSelector = new Map();
 
+// Ordering is important since `:root` would also match `:root :where(body)`.
+const ROOT_SELECTOR_REGEX =
+	/^(:root :where\(body\)|:where\(body\)|:root|html|body)/;
+
 function transformStyle(
 	{ css, ignoredSelectors = [], baseURL },
 	wrapperSelector = ''
 ) {
-	// When there is no wrapper selector or base URL, there is no need
+	// When there is no wrapper selector and no base URL, there is no need
 	// to transform the CSS. This is most cases because in the default
 	// iframed editor, no wrapping is needed, and not many styles
 	// provide a base URL.
 	if ( ! wrapperSelector && ! baseURL ) {
 		return css;
 	}
-	const postcssFriendlyCSS = css
-		.replace( /:root :where\(body\)/g, 'body' )
-		.replace( /:where\(body\)/g, 'body' );
 	try {
 		return postcss(
 			[
 				wrapperSelector &&
-					wrap( wrapperSelector, {
-						ignoredSelectors: [
-							...ignoredSelectors,
-							wrapperSelector,
-						],
+					prefixSelector( {
+						prefix: wrapperSelector,
+						exclude: [ ...ignoredSelectors, wrapperSelector ],
+						transform( prefix, selector, prefixedSelector ) {
+							// Avoid prefixing an already prefixed selector.
+							if (
+								prefixedSelector.startsWith(
+									`${ prefix } ${ prefix }`
+								)
+							) {
+								prefixedSelector = prefixedSelector.replace(
+									`${ prefix } ${ prefix }`,
+									prefix
+								);
+							}
+
+							// `html`, `body` and `:root` need some special handling since they
+							// generally cannot be prefixed with a classname and produce a valid
+							// selector. Instead we replace the whole root part of the selector.
+							if ( ROOT_SELECTOR_REGEX.test( selector ) ) {
+								return selector.replace(
+									ROOT_SELECTOR_REGEX,
+									prefix
+								);
+							}
+
+							return prefixedSelector;
+						},
 					} ),
 				baseURL && rebaseUrl( { rootUrl: baseURL } ),
 			].filter( Boolean )
-		).process( postcssFriendlyCSS, {} ).css; // use sync PostCSS API
+		).process( css, {} ).css; // use sync PostCSS API
 	} catch ( error ) {
 		if ( error instanceof CssSyntaxError ) {
 			// eslint-disable-next-line no-console