Allow combined selectors (postcss/postcss-custom-properties#199)

Author: ryuran

plugins/postcss-custom-properties/src/lib/get-custom-properties-from-root.js

@@ -48,8 +48,8 @@ const rootSelectorRegExp = /^:root$/i;
 const customPropertyRegExp = /^--[A-z][\w-]*$/;
 
 // whether the node is an html or :root rule
-const isHtmlRule = node => node.type === 'rule' && htmlSelectorRegExp.test(node.selector) && Object(node.nodes).length;
-const isRootRule = node => node.type === 'rule' && rootSelectorRegExp.test(node.selector) && Object(node.nodes).length;
+const isHtmlRule = node => node.type === 'rule' && node.selector.split(',').some(item => htmlSelectorRegExp.test(item)) && Object(node.nodes).length;
+const isRootRule = node => node.type === 'rule' && node.selector.split(',').some(item => rootSelectorRegExp.test(item)) && Object(node.nodes).length;
 
 // whether the node is an custom property
 const isCustomDecl = node => node.type === 'decl' && customPropertyRegExp.test(node.prop);

plugins/postcss-custom-properties/test/basic.css

@@ -11,6 +11,11 @@ html {
 	color: var(--color);
 }
 
+:root,
+[data-theme=light] {
+	--theme-color: #053;
+}
+
 .ignore-line {
 	/* postcss-custom-properties: ignore next */
 	color: var(--color);
@@ -67,3 +72,7 @@ html {
 		blue
 	)/*rtl:red*/;
 }
+
+.test--combined-selector {
+	color: var(--theme-color);
+}

plugins/postcss-custom-properties/test/basic.expect.css

@@ -12,6 +12,11 @@ html {
 	color: var(--color);
 }
 
+:root,
+[data-theme=light] {
+	--theme-color: #053;
+}
+
 .ignore-line {
 	/* postcss-custom-properties: ignore next */
 	color: var(--color);
@@ -77,3 +82,8 @@ html {
 		blue
 	)/*rtl:red*/;
 }
+
+.test--combined-selector {
+	color: #053;
+	color: var(--theme-color);
+}

plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css

@@ -12,6 +12,11 @@ html {
 	color: var(--color);
 }
 
+:root,
+[data-theme=light] {
+	--theme-color: #053;
+}
+
 .ignore-line {
 	/* postcss-custom-properties: ignore next */
 	color: var(--color);
@@ -77,3 +82,8 @@ html {
 		blue
 	)/*rtl:red*/;
 }
+
+.test--combined-selector {
+	color: #053;
+	color: var(--theme-color);
+}

plugins/postcss-custom-properties/test/basic.import.expect.css

@@ -12,6 +12,11 @@ html {
 	color: var(--color);
 }
 
+:root,
+[data-theme=light] {
+	--theme-color: #053;
+}
+
 .ignore-line {
 	/* postcss-custom-properties: ignore next */
 	color: var(--color);
@@ -78,3 +83,8 @@ html {
 		blue
 	)/*rtl:red*/;
 }
+
+.test--combined-selector {
+	color: #053;
+	color: var(--theme-color);
+}

plugins/postcss-custom-properties/test/basic.preserve.expect.css

@@ -55,3 +55,7 @@
 .test--loose-formatting {
 	color: rgb(255, 0, 0)/*rtl:red*/;
 }
+
+.test--combined-selector {
+	color: #053;
+}

plugins/postcss-custom-properties/test/export-properties.css

@@ -4,4 +4,5 @@
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
 	--margin: 0 10px 20px 30px;
+	--theme-color: #053;
 }

plugins/postcss-custom-properties/test/export-properties.js

@@ -4,6 +4,7 @@ module.exports = {
 		'--color': 'rgb(255, 0, 0)',
 		'--circular': 'var(--circular-2)',
 		'--circular-2': 'var(--circular)',
-		'--margin': '0 10px 20px 30px'
+		'--margin': '0 10px 20px 30px',
+		'--theme-color': '#053'
 	}
 };

plugins/postcss-custom-properties/test/export-properties.json

@@ -4,6 +4,7 @@
     "--color": "rgb(255, 0, 0)",
     "--circular": "var(--circular-2)",
     "--circular-2": "var(--circular)",
-    "--margin": "0 10px 20px 30px"
+    "--margin": "0 10px 20px 30px",
+    "--theme-color": "#053"
   }
 }

plugins/postcss-custom-properties/test/export-properties.mjs

@@ -3,5 +3,6 @@ export const customProperties = {
 	'--color': 'rgb(255, 0, 0)',
 	'--circular': 'var(--circular-2)',
 	'--circular-2': 'var(--circular)',
-	'--margin': '0 10px 20px 30px'
+	'--margin': '0 10px 20px 30px',
+	'--theme-color': '#053'
 };