Fix: :root no longer causes invalid selectors (#13325)

WordPress · Mar 6, 2019 · 2e655a6 · 2e655a6
1 parent 18da4d9
commit 2e655a6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap b/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap
@@ -41,3 +41,9 @@ exports[`CSS selector wrap should wrap regular selectors 1`] = `
 color: red;
 }"
 `;
+
+exports[`CSS selector wrap should replace :root selectors 1`] = `
+".my-namespace {
+--my-color: #ff0000;
+}"
+`;
diff --git a/packages/editor/src/editor-styles/transforms/test/wrap.js b/packages/editor/src/editor-styles/transforms/test/wrap.js
@@ -61,4 +61,15 @@ describe( 'CSS selector wrap', () => {
 
 		expect( output ).toMatchSnapshot();
 	} );
+
+	it( 'should replace :root selectors', () => {
+		const callback = wrap( '.my-namespace' );
+		const input = `
+		:root {
+			--my-color: #ff0000;
+		}`;
+		const output = traverse( input, callback );
+
+		expect( output ).toMatchSnapshot();
+	} );
 } );
diff --git a/packages/editor/src/editor-styles/transforms/wrap.js b/packages/editor/src/editor-styles/transforms/wrap.js
@@ -6,7 +6,7 @@ import { includes } from 'lodash';
 /**
  * @const string IS_ROOT_TAG Regex to check if the selector is a root tag selector.
  */
-const IS_ROOT_TAG = /^(body|html).*$/;
+const IS_ROOT_TAG = /^(body|html|:root).*$/;
 
 const wrap = ( namespace, ignore = [] ) => ( node ) => {
 	const updateSelector = ( selector ) => {
@@ -20,7 +20,7 @@ const wrap = ( namespace, ignore = [] ) => ( node ) => {
 		}}
 
 		// HTML and Body elements cannot be contained within our container so lets extract their styles.
-		return selector.replace( /^(body|html)/, namespace );
+		return selector.replace( /^(body|html|:root)/, namespace );
 	};
 
 	if ( node.type === 'rule' ) {