fix: rename & deconflict together (#820)

@Morklympious found a bug where if you exercise both the renaming & deconflicting logic the rename (via `identifierfy`) gets lost and the resulting variable name is no longer valid. So now it's fixed.
tivac · Apr 8, 2022 · ea6a0e9 · ea6a0e9
1 parent 2c69783
commit ea6a0e9
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 4 deletions.
diff --git a/packages/css-to-js/css-to-js.js b/packages/css-to-js/css-to-js.js
@@ -30,15 +30,16 @@ const {
     isValue,
 } = Processor;
 
-const deconflict = (map, ident) => {
-    let proposal = identifierfy(ident);
+const deconflict = (map, source) => {
+    const safe = identifierfy(source);
     let idx = 0;
+    let proposal = safe;
 
     while(map.has(proposal)) {
-        proposal = `${ident}${++idx}`;
+        proposal = `${safe}${++idx}`;
     }
 
-    map.set(proposal, ident);
+    map.set(proposal, source);
 
     return proposal;
 };

diff --git a/packages/rollup/test/__snapshots__/rollup.test.js.snap b/packages/rollup/test/__snapshots__/rollup.test.js.snap
@@ -426,6 +426,27 @@ console.log(css);
 }
 `;
 
+exports[`/rollup.js should support @value camelCase overlap 1`] = `
+Object {
+  "assets/value-camel-overlap.css": "
+/* packages/rollup/test/specimens/value-camel-overlap.css */
+",
+  "value-camel-overlap.js": "
+const colorBlack = \\"#000\\";
+const colorBlack1 = \\"#000\\";
+const $values = {
+    colorBlack,
+\\"color-black\\" : colorBlack1,
+};
+var css = {
+    $values
+};
+
+console.log(css);
+",
+}
+`;
+
 exports[`/rollup.js should support external @value aliases 1`] = `
 Object {
   "assets/external-value-aliasing.css": "

diff --git a/packages/rollup/test/rollup.test.js b/packages/rollup/test/rollup.test.js
@@ -346,6 +346,22 @@ describe("/rollup.js", () => {
         ).toMatchRollupSnapshot();
     });
 
+    it("should support @value camelCase overlap", async () => {
+        const bundle = await rollup({
+            input   : require.resolve("./specimens/value-camel-overlap.js"),
+            plugins : [
+                createPlugin(),
+            ],
+        });
+
+        expect(
+            await bundle.generate({
+                format,
+                assetFileNames,
+            })
+        ).toMatchRollupSnapshot();
+    });
+
     it("should output classes in topological order", async () => {
         const bundle = await rollup({
             input   : require.resolve("./specimens/topological-order/topological-order.js"),

diff --git a/packages/rollup/test/specimens/value-camel-overlap.css b/packages/rollup/test/specimens/value-camel-overlap.css
@@ -0,0 +1,2 @@
+@value colorBlack: #000;
+@value color-black: #000;
diff --git a/packages/rollup/test/specimens/value-camel-overlap.js b/packages/rollup/test/specimens/value-camel-overlap.js
@@ -0,0 +1,3 @@
+import css from "./value-camel-overlap.css";
+
+console.log(css);