fix: plugin will parse fallback until it finds a known value (postcss/postcss-custom-properties#240)

calebdwilliams · romainmenke · commit b815e83b895f · 2021-12-15T17:03:37.000+01:00
diff --git a/plugins/postcss-custom-properties/src/lib/transform-properties.js b/plugins/postcss-custom-properties/src/lib/transform-properties.js
@@ -9,7 +9,16 @@ export default (root, customProperties, opts) => {
 		if (isTransformableDecl(decl) && !isRuleIgnored(decl)) {
 			const originalValue = decl.value;
 			const valueAST = parse(originalValue);
-			const value = String(transformValueAST(valueAST, customProperties));
+			let value = String(transformValueAST(valueAST, customProperties));
+
+			// protect against circular references
+			const valueSet = new Set();
+
+			while (customPropertiesRegExp.test(value) && !valueSet.has(value)) {
+				valueSet.add(value);
+				const parsedValueAST = parse(valueAST);
+				value = String(transformValueAST(parsedValueAST, customProperties));
+			}
 
 			// conditionally transform values that have changed
 			if (value !== originalValue) {
diff --git a/plugins/postcss-custom-properties/test/basic.css b/plugins/postcss-custom-properties/test/basic.css
@@ -38,7 +38,7 @@ html {
 
 .test {
 	--skip: gray;
-	color: var(--color);
+	color: var(--override, var(--color));
 }
 
 .test--color_spacing {
diff --git a/plugins/postcss-custom-properties/test/basic.expect.css b/plugins/postcss-custom-properties/test/basic.expect.css
@@ -41,7 +41,7 @@ html {
 .test {
 	--skip: gray;
 	color: rgb(255, 0, 0);
-	color: var(--color);
+	color: var(--override, var(--color));
 }
 
 .test--color_spacing {
diff --git a/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css b/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css
@@ -41,7 +41,7 @@ html {
 .test {
 	--skip: gray;
 	color: rgb(255, 0, 0);
-	color: var(--color);
+	color: var(--override, var(--color));
 }
 
 .test--color_spacing {
diff --git a/plugins/postcss-custom-properties/test/basic.import.expect.css b/plugins/postcss-custom-properties/test/basic.import.expect.css
@@ -41,7 +41,7 @@ html {
 .test {
 	--skip: gray;
 	color: rgb(255, 0, 0);
-	color: var(--color);
+	color: var(--override, var(--color));
 }
 
 .test--color_spacing {
diff --git a/plugins/postcss-custom-properties/yarn.lock b/plugins/postcss-custom-properties/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ html {`
`38`	`38`
`39`	`39`	`.test {`
`40`	`40`	`--skip: gray;`
`41`		`- color: var(--color);`
	`41`	`+ color: var(--override, var(--color));`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`.test--color_spacing {`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ html {`
`41`	`41`	`.test {`
`42`	`42`	`--skip: gray;`
`43`	`43`	`color: rgb(255, 0, 0);`
`44`		`- color: var(--color);`
	`44`	`+ color: var(--override, var(--color));`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`.test--color_spacing {`