From 4ca991d34e1158f6ee33e2ab03f59141ef0ea759 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 3 Oct 2023 07:52:10 +0400
Subject: [PATCH] Block Editor: Avoid double-wrapping selectors when
 transforming the styles (#54981)

* Block Editor: Avoid double-wrapping selectors when transforming the styles
* Include space in the check
---
 .../test/__snapshots__/wrap.js.snap           | 19 +++++++++++++------
 .../transform-styles/transforms/test/wrap.js  |  9 +++++++++
 .../utils/transform-styles/transforms/wrap.js |  5 +++++
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap b/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap
index b55f74cfd7bb0..b9815cdc700b3 100644
--- a/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap
+++ b/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap
@@ -22,6 +22,19 @@ color: red;
 }"
 `;
 
+exports[`CSS selector wrap should not double wrap selectors 1`] = `
+".my-namespace h1,
+.my-namespace .red {
+color: red;
+}"
+`;
+
+exports[`CSS selector wrap should replace :root selectors 1`] = `
+".my-namespace {
+--my-color: #ff0000;
+}"
+`;
+
 exports[`CSS selector wrap should replace root tags 1`] = `
 ".my-namespace,
 .my-namespace h1 {
@@ -49,9 +62,3 @@ color: red;
 }
 }"
 `;
-
-exports[`CSS selector wrap should replace :root selectors 1`] = `
-".my-namespace {
---my-color: #ff0000;
-}"
-`;
diff --git a/packages/block-editor/src/utils/transform-styles/transforms/test/wrap.js b/packages/block-editor/src/utils/transform-styles/transforms/test/wrap.js
index c26bd3761212b..a1f4f141d21c9 100644
--- a/packages/block-editor/src/utils/transform-styles/transforms/test/wrap.js
+++ b/packages/block-editor/src/utils/transform-styles/transforms/test/wrap.js
@@ -83,4 +83,13 @@ describe( 'CSS selector wrap', () => {
 
 		expect( output ).toMatchSnapshot();
 	} );
+
+	it( 'should not double wrap selectors', () => {
+		const callback = wrap( '.my-namespace' );
+		const input = ` .my-namespace h1, .red { color: red; }`;
+
+		const output = traverse( input, callback );
+
+		expect( output ).toMatchSnapshot();
+	} );
 } );
diff --git a/packages/block-editor/src/utils/transform-styles/transforms/wrap.js b/packages/block-editor/src/utils/transform-styles/transforms/wrap.js
index e61c78dc7e452..74b940f80352b 100644
--- a/packages/block-editor/src/utils/transform-styles/transforms/wrap.js
+++ b/packages/block-editor/src/utils/transform-styles/transforms/wrap.js
@@ -27,6 +27,11 @@ const wrap =
 				return selector;
 			}
 
+			// Skip the update when a selector already has a namespace + space (" ").
+			if ( selector.trim().startsWith( `${ namespace } ` ) ) {
+				return selector;
+			}
+
 			// Anything other than a root tag is always prefixed.
 			{
 				if ( ! selector.match( IS_ROOT_TAG ) ) {