Repository: tivac/modular-css
Pull request #820 (2022-04-08 06:04:00)

fix: rename & deconflict together
@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.

codesee-maps[bot]: ### CodeSee Review Map:
[![Review these changes using an interactive CodeSee Map](https://s3.us-east-2.amazonaws.com/maps.codesee.io/images/github/tivac/modular-css/820/89798342/9cb530d1c0ee5d4b48d4d325b74374841eaa0497.svg)](https://app.codesee.io/r/reviews?pr=820&src=https%3A%2F%2Fgithub.com%2Ftivac%2Fmodular-css)

Review [in an interactive map](https://app.codesee.io/r/reviews?pr=820&src=https%3A%2F%2Fgithub.com%2Ftivac%2Fmodular-css)

View [more CodeSee Maps](https://app.codesee.io/r/maps?src=https%3A%2F%2Fgithub.com%2Ftivac%2Fmodular-css)

#### Legend
![CodeSee Map Legend](https://app.codesee.io/Legend_v2.png)
netlify[bot]: ### <span aria-hidden="true">✅</span> Deploy Preview for *m-css* ready!


|  Name | Link |
|---------------------------------|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 9cb530d1c0ee5d4b48d4d325b74374841eaa0497 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/m-css/deploys/624fd051ac78c40008ce2b8f |
|<span aria-hidden="true">😎</span> Deploy Preview | https://deploy-preview-820--m-css.netlify.app |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTgyMC0tbS1jc3MubmV0bGlmeS5hcHAifQ.Ro-l_oDO1gmkApDgrHL-7Iwxda5ejzdidj2twMTQtts)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---

_To edit notification comments on pull requests, go to your [Netlify site settings](https://app.netlify.com/sites/m-css/settings/deploys#deploy-notifications)._
codecov[bot]: # [Codecov](https://codecov.io/gh/tivac/modular-css/pull/820?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) Report
> Merging [#820](https://codecov.io/gh/tivac/modular-css/pull/820?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) (83fdf8b) into [main](https://codecov.io/gh/tivac/modular-css/commit/a636c9beb3d3bb61c1a5fb7fc6c79e39c2b05deb?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) (a636c9b) will **increase** coverage by `0.00%`.
> The diff coverage is `100.00%`.

```diff
@@           Coverage Diff           @@
##             main     #820   +/-   ##
=======================================
  Coverage   99.58%   99.58%           
=======================================
  Files          37       37           
  Lines        1434     1435    +1     
  Branches      232      232           
=======================================
+ Hits         1428     1429    +1     
  Misses          6        6           
```


| [Impacted Files](https://codecov.io/gh/tivac/modular-css/pull/820?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) | Coverage Δ | |
|---|---|---|
| [packages/css-to-js/css-to-js.js](https://codecov.io/gh/tivac/modular-css/pull/820/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit#diff-cGFja2FnZXMvY3NzLXRvLWpzL2Nzcy10by1qcy5qcw==) | `100.00% <100.00%> (ø)` | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/tivac/modular-css/pull/820?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/tivac/modular-css/pull/820?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit). Last update [a636c9b...83fdf8b](https://codecov.io/gh/tivac/modular-css/pull/820?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit).


Patch:
diff --git a/packages/css-to-js/css-to-js.js b/packages/css-to-js/css-to-js.js
index 95b7897b..6ad73b7a 100644
--- 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;
 };


Test patch:
diff --git a/packages/rollup/test/__snapshots__/rollup.test.js.snap b/packages/rollup/test/__snapshots__/rollup.test.js.snap
index c99cacea..33618203 100644
--- 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
index 8bceb205..0ce82a52 100644
--- 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
new file mode 100644
index 00000000..0de1ed44
--- /dev/null
+++ 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
new file mode 100644
index 00000000..24406e34
--- /dev/null
+++ b/packages/rollup/test/specimens/value-camel-overlap.js
@@ -0,0 +1,3 @@
+import css from "./value-camel-overlap.css";
+
+console.log(css);