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
index 35b2adfae17249..9da07667d0a3e0 100644
--- a/packages/block-editor/src/utils/test/__snapshots__/transform-styles.js.snap
+++ b/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; }",
 ]
diff --git a/packages/block-editor/src/utils/test/transform-styles.js b/packages/block-editor/src/utils/test/transform-styles.js
index 105c92348113a9..8245ce62831078 100644
--- a/packages/block-editor/src/utils/test/transform-styles.js
+++ b/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(
 				[
 					{
diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js
index 95eb43e874fd28..9d57de3fa3833c 100644
--- a/packages/block-editor/src/utils/transform-styles/index.js
+++ b/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(
 			[