From 3c38fce7421855489b9a5577a89eea00cdf792bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corn=C3=A9=20Dorrestijn?= <corne.dorrestijn@gmail.com>
Date: Tue, 22 Jan 2019 15:51:17 +0100
Subject: [PATCH] Fix: :root no longer causes invalid selectors (#13325)

---
 .../transforms/test/__snapshots__/wrap.js.snap        |  6 ++++++
 .../editor/src/editor-styles/transforms/test/wrap.js  | 11 +++++++++++
 packages/editor/src/editor-styles/transforms/wrap.js  |  4 ++--
 3 files changed, 19 insertions(+), 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
index 873091eacb77d8..9060dda7470295 100644
--- 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
index 5500d4a747e41a..2a39ff3db3115b 100644
--- 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
index dad6df2b0c8e6a..6c89562d78a9ae 100644
--- 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' ) {