fix: local references as references

Fixes an issue where importing an alias could get you the alias raw value instead of the expected source value.
tivac · Jul 18, 2021 · aeba154 · aeba154
1 parent e961578
commit aeba154
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 16 deletions.
diff --git a/packages/processor/plugins/before/values-local.js b/packages/processor/plugins/before/values-local.js
@@ -28,12 +28,18 @@ module.exports = () => ({
                     if(parsed.type !== "assignment") {
                         return;
                     }
-
-                    values[parsed.name] = {
-                        value  : parsed.value,
-                        source : rule.source,
-                    };
-
+
+                    // References to existing values are handled as object references,
+                    // so they're always kept up-to-date
+                    if(values[parsed.value]) {
+                        values[parsed.name] = values[parsed.value];
+                    } else {
+                        values[parsed.name] = {
+                            value  : parsed.value,
+                            source : rule.source,
+                        };
+                    }
+
                     rule.remove();
                 },
             },

diff --git a/packages/processor/test/__snapshots__/values.test.js.snap b/packages/processor/test/__snapshots__/values.test.js.snap
@@ -19,8 +19,7 @@ exports[`/processor.js values should support exporting imported variables 1`] =
 
 .mc_green {
     color: green;
-}
-"
+}"
 `;
 
 exports[`/processor.js values should support importing variables from a file 1`] = `
@@ -32,8 +31,7 @@ exports[`/processor.js values should support importing variables from a file 1`]
 
 .mc_green {
     color: green;
-}
-"
+}"
 `;
 
 exports[`/processor.js values should support local values in value composition 1`] = `
@@ -46,6 +44,15 @@ exports[`/processor.js values should support local values in value composition 1
 "
 `;
 
+exports[`/processor.js values should support several layers of value references 1`] = `
+"/* packages/processor/test/specimens/values.css */
+/* packages/processor/test/specimens/value-references.css */
+.mc_aliased {
+    color: blue;
+    background: blue;
+}"
+`;
+
 exports[`/processor.js values should support simple values 1`] = `
 "/* values.css */
 .mc_a {
@@ -61,8 +68,7 @@ exports[`/processor.js values should support value aliasing 1`] = `
 .mc_aliased {
     color: red;
     background: blue;
-}
-"
+}"
 `;
 
 exports[`/processor.js values should support value composition 1`] = `
@@ -71,8 +77,7 @@ exports[`/processor.js values should support value composition 1`] = `
 .mc_red {
     color: red;
     background: blue;
-}
-"
+}"
 `;
 
 exports[`/processor.js values should support value namespaces 1`] = `
@@ -88,8 +93,7 @@ exports[`/processor.js values should support value namespaces 1`] = `
 
 .mc_other {
     color: #000;
-}
-"
+}"
 `;
 
 exports[`/processor.js values should support value replacement in :external(...) 1`] = `

diff --git a/packages/processor/test/specimens/value-references.css b/packages/processor/test/specimens/value-references.css
@@ -0,0 +1,6 @@
+@value * as vals from "./values.css";
+
+.aliased {
+    color: vals.alias;
+    background: vals.alias2;
+}
diff --git a/packages/processor/test/specimens/values.css b/packages/processor/test/specimens/values.css
@@ -2,3 +2,6 @@
 @value b: blue;
 @value base: #FFF;
 @value base-other: #000;
+
+@value alias: b;
+@value alias2: alias;
diff --git a/packages/processor/test/values.test.js b/packages/processor/test/values.test.js
@@ -172,5 +172,13 @@ describe("/processor.js", () => {
 
             expect(css).toMatchSnapshot();
         });
+
+        it("should support several layers of value references", async () => {
+            await processor.file(require.resolve("./specimens/value-references.css"));
+
+            const { css } = await processor.output();
+
+            expect(css).toMatchSnapshot();
+        });
     });
 });