From 4cb75924a0023944769f352aaee9efe3aa447890 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 31 Jul 2024 17:36:32 +0800
Subject: [PATCH] Also avoid double-prefix of root selectors

---
 .../src/utils/test/transform-styles.js        | 17 +++++++++
 .../src/utils/transform-styles/index.js       | 35 +++++++++++--------
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/utils/test/transform-styles.js b/packages/block-editor/src/utils/test/transform-styles.js
index fb61c61145ba3c..f0d89711af3413 100644
--- a/packages/block-editor/src/utils/test/transform-styles.js
+++ b/packages/block-editor/src/utils/test/transform-styles.js
@@ -226,6 +226,23 @@ describe( 'transformStyles', () => {
 			expect( output ).toEqual( [ input ] );
 		} );
 
+		it( 'should not double prefix a root selector', () => {
+			const input = 'body .my-namespace h1  { color: goldenrod; }';
+
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+
+			expect( output ).toEqual( [
+				'.my-namespace h1  { color: goldenrod; }',
+			] );
+		} );
+
 		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';
diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js
index fec11d31282bc2..9e5a6259abbc55 100644
--- a/packages/block-editor/src/utils/transform-styles/index.js
+++ b/packages/block-editor/src/utils/transform-styles/index.js
@@ -11,6 +11,15 @@ const cacheByWrapperSelector = new Map();
 const ROOT_SELECTOR_REGEX =
 	/^(:root :where\(body\)|:where\(body\)|:root|html|body)/;
 
+function replaceDoublePrefix( selector, prefix ) {
+	// Avoid prefixing an already prefixed selector.
+	const doublePrefix = `${ prefix } ${ prefix }`;
+	if ( selector.startsWith( doublePrefix ) ) {
+		return selector.replace( doublePrefix, prefix );
+	}
+	return selector;
+}
+
 function transformStyle(
 	{ css, ignoredSelectors = [], baseURL },
 	wrapperSelector = ''
@@ -30,29 +39,25 @@ function transformStyle(
 						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
+							// generally cannot be prefixed with a class name and produce a valid
 							// selector. Instead we replace the whole root part of the selector.
 							if ( ROOT_SELECTOR_REGEX.test( selector ) ) {
-								return selector.replace(
+								const updatedRootSelector = selector.replace(
 									ROOT_SELECTOR_REGEX,
 									prefix
 								);
+
+								return replaceDoublePrefix(
+									updatedRootSelector,
+									prefix
+								);
 							}
 
-							return prefixedSelector;
+							return replaceDoublePrefix(
+								prefixedSelector,
+								prefix
+							);
 						},
 					} ),
 				baseURL && rebaseUrl( { rootUrl: baseURL } ),