fix multiple var on a single property (postcss/postcss-custom-properties#210)

Author: ryuran

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

@@ -4,6 +4,10 @@ html {
 
 :root {
 	--color: rgb(255, 0, 0);
+	--color-h: 0;
+	--color-s: 100%;
+	--color-l: 50%;
+	--color-hsl: hsl(var(--color-h), var(--color-s), var(--color-l));
 	--ref-color: var(--color);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
@@ -42,6 +46,10 @@ html {
 	color: var(--ref-color);
 }
 
+.test--color_w_vars {
+	color: var(--color-hsl);
+}
+
 .test--circular_var {
 	color: var(--circular);
 }

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

@@ -4,6 +4,10 @@ html {
 
 :root {
 	--color: rgb(255, 0, 0);
+	--color-h: 0;
+	--color-s: 100%;
+	--color-l: 50%;
+	--color-hsl: hsl(var(--color-h), var(--color-s), var(--color-l));
 	--ref-color: var(--color);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
@@ -47,6 +51,11 @@ html {
 	color: var(--ref-color);
 }
 
+.test--color_w_vars {
+	color: hsl(0, 100%, 50%);
+	color: var(--color-hsl);
+}
+
 .test--circular_var {
 	color: var(--circular);
 }

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

@@ -4,6 +4,10 @@ html {
 
 :root {
 	--color: rgb(255, 0, 0);
+	--color-h: 0;
+	--color-s: 100%;
+	--color-l: 50%;
+	--color-hsl: hsl(var(--color-h), var(--color-s), var(--color-l));
 	--ref-color: var(--color);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
@@ -47,6 +51,11 @@ html {
 	color: var(--ref-color);
 }
 
+.test--color_w_vars {
+	color: hsl(0, 100%, 50%);
+	color: var(--color-hsl);
+}
+
 .test--circular_var {
 	color: var(--circular);
 }

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

@@ -4,6 +4,10 @@ html {
 
 :root {
 	--color: rgb(255, 0, 0);
+	--color-h: 0;
+	--color-s: 100%;
+	--color-l: 50%;
+	--color-hsl: hsl(var(--color-h), var(--color-s), var(--color-l));
 	--ref-color: var(--color);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
@@ -47,6 +51,11 @@ html {
 	color: var(--ref-color);
 }
 
+.test--color_w_vars {
+	color: hsl(0, 100%, 50%);
+	color: var(--color-hsl);
+}
+
 .test--circular_var {
 	color: var(--circular);
 }

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

@@ -28,6 +28,10 @@
 	color: rgb(255, 0, 0);
 }
 
+.test--color_w_vars {
+	color: hsl(0, 100%, 50%);
+}
+
 .test--circular_var {
 	color: var(--circular);
 }

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

@@ -1,6 +1,10 @@
 :root {
 	--ref-color: var(--color);
 	--color: rgb(255, 0, 0);
+	--color-h: 0;
+	--color-s: 100%;
+	--color-l: 50%;
+	--color-hsl: hsl(var(--color-h), var(--color-s), var(--color-l));
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
 	--margin: 0 10px 20px 30px;

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

@@ -2,6 +2,10 @@ module.exports = {
 	customProperties: {
 		'--ref-color': 'var(--color)',
 		'--color': 'rgb(255, 0, 0)',
+		'--color-h': '0',
+		'--color-s': '100%',
+		'--color-l': '50%',
+		'--color-hsl': 'hsl(var(--color-h), var(--color-s), var(--color-l))',
 		'--circular': 'var(--circular-2)',
 		'--circular-2': 'var(--circular)',
 		'--margin': '0 10px 20px 30px',

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

@@ -2,6 +2,10 @@
   "custom-properties": {
     "--ref-color": "var(--color)",
     "--color": "rgb(255, 0, 0)",
+    "--color-h": "0",
+    "--color-s": "100%",
+    "--color-l": "50%",
+    "--color-hsl": "hsl(var(--color-h), var(--color-s), var(--color-l))",
     "--circular": "var(--circular-2)",
     "--circular-2": "var(--circular)",
     "--margin": "0 10px 20px 30px",

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

@@ -1,6 +1,10 @@
 export const customProperties = {
 	'--ref-color': 'var(--color)',
 	'--color': 'rgb(255, 0, 0)',
+	'--color-h': '0',
+	'--color-s': '100%',
+	'--color-l': '50%',
+	'--color-hsl': 'hsl(var(--color-h), var(--color-s), var(--color-l))',
 	'--circular': 'var(--circular-2)',
 	'--circular-2': 'var(--circular)',
 	'--margin': '0 10px 20px 30px',