Transform Styles: Update selector so that styles work when custom fie…

…lds panel is active (WordPress#62121)

* Transform Styles: Update selector so that styles work when custom fields panel is active

* Try to fix snapshot

* Chain new and old selectors to catch margin rule

Unlinked contributors: gyurmey2.

Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

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

@@ -24,7 +24,7 @@ exports[`transformStyles URL rewrite should rewrite relative paths 1`] = `
 ]
 `;
 
-exports[`transformStyles error handling should handle multiple instances of \`:where(body)\` 1`] = `
+exports[`transformStyles error handling should handle multiple instances of \`:root :where(body)\` 1`] = `
 [
   ".my-namespace { color: pink; } .my-namespace { color: orange; }",
 ]

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

@@ -52,8 +52,8 @@ describe( 'transformStyles', () => {
 			);
 		} );
 
-		it( 'should handle multiple instances of `:where(body)`', () => {
-			const input = `:where(body) { color: pink; } :where(body) { color: orange; }`;
+		it( 'should handle multiple instances of `:root :where(body)`', () => {
+			const input = `:root :where(body) { color: pink; } :root :where(body) { color: orange; }`;
 			const output = transformStyles(
 				[
 					{

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

@@ -18,7 +18,9 @@ function transformStyle(
 	if ( ! wrapperSelector && ! baseURL ) {
 		return css;
 	}
-	const postcssFriendlyCSS = css.replace( /:where\(body\)/g, 'body' );
+	const postcssFriendlyCSS = css
+		.replace( /:root :where\(body\)/g, 'body' )
+		.replace( /:where\(body\)/g, 'body' );
 	try {
 		return postcss(
 			[