Add text for root selector text in middle of selector

WordPress · Jul 31, 2024 · f7690e3 · f7690e3
1 parent 0a8062f
commit f7690e3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/packages/block-editor/src/utils/test/__snapshots__/transform-styles.js.snap b/packages/block-editor/src/utils/test/__snapshots__/transform-styles.js.snap
@@ -40,6 +40,12 @@ exports[`transformStyles selector wrap should ignore font-face selectors 1`] = `
 ]
 `;
 
+exports[`transformStyles selector wrap should ignore ignored selectors 1`] = `
+[
+  ".my-namespace h1, body { color: red; }",
+]
+`;
+
 exports[`transformStyles selector wrap should ignore keyframes 1`] = `
 [
   "
@@ -51,12 +57,6 @@ exports[`transformStyles selector wrap should ignore keyframes 1`] = `
 ]
 `;
 
-exports[`transformStyles selector wrap should ignore selectors 1`] = `
-[
-  ".my-namespace h1, body { color: red; }",
-]
-`;
-
 exports[`transformStyles selector wrap should replace :root selectors 1`] = `
 [
   "
@@ -66,7 +66,7 @@ exports[`transformStyles selector wrap should replace :root selectors 1`] = `
 ]
 `;
 
-exports[`transformStyles selector wrap should replace root tags 1`] = `
+exports[`transformStyles selector wrap should replace root selectors 1`] = `
 [
   ".my-namespace, .my-namespace h1 { color: red; }",
 ]

diff --git a/packages/block-editor/src/utils/test/transform-styles.js b/packages/block-editor/src/utils/test/transform-styles.js
@@ -96,7 +96,7 @@ describe( 'transformStyles', () => {
 			expect( output ).toMatchSnapshot();
 		} );
 
-		it( 'should ignore selectors', () => {
+		it( 'should ignore ignored selectors', () => {
 			const input = `h1, body { color: red; }`;
 			const output = transformStyles(
 				[
@@ -111,7 +111,7 @@ describe( 'transformStyles', () => {
 			expect( output ).toMatchSnapshot();
 		} );
 
-		it( 'should replace root tags', () => {
+		it( 'should replace root selectors', () => {
 			const input = `body, h1 { color: red; }`;
 			const output = transformStyles(
 				[
@@ -125,6 +125,21 @@ describe( 'transformStyles', () => {
 			expect( output ).toMatchSnapshot();
 		} );
 
+		it( `should not try to replace 'body' in the middle of a classname`, () => {
+			const prefix = '.my-namespace';
+			const input = `.has-body-text { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				prefix
+			);
+
+			expect( output ).toEqual( [ `${ prefix } ${ input }` ] );
+		} );
+
 		it( 'should ignore keyframes', () => {
 			const input = `
 			@keyframes edit-post__fade-in-animation {