Fix/icss hashing (#52)

* fix: icss hashing

* bump version

* remove console log

* remove other console logs

integration-test/packages/atoms/all/atom.css.snap

@@ -22,27 +22,56 @@
   display: flex;
   border: 1px solid red;
 }
-/* custom static css (e.g. normalize) can be added here */._1RrCqF {
+._9M8f-j {
+  color: red;
+}.o3-BnE {
+  color: blue;
+  width: 100px;
+  display: flex;
+  border: 1px solid red;
+}/* custom static css (e.g. normalize) can be added here */._1RrCqF {
     color: #1a1a1a
 }.pQ96hs:hover {
     color: #fafafa
 }.dgII7d {
     font-weight: bold
 }
 
-.n4oS1I {
+.hZEeRw {
   height: 100%;
 }
 
-.i6EUck {
+.Gpf-P8 {
 
   text-decoration: underline;
 }
 
-._8F86eH {
+._3XV0Ef {
 
   font-size: 4em;
 }
+._9M8f-j {
+  color: red;
+}
+
+.sMmOaU {
+  color: blue
+}
+
+.sMmOaU .R2GDg- {
+    color: green;
+  }
+._9M8f-j {
+  color: red;
+}
+
+.sMmOaU {
+  color: blue
+}
+
+.sMmOaU .R2GDg- {
+    color: green;
+  }
 /* custom static css (e.g. normalize) can be added here */._1RrCqF {
     color: #1a1a1a
 }.DJ9tNH:hover {

integration-test/packages/atoms/duplicate-classes-a/.npmignore

@@ -0,0 +1,3 @@
+**/*.tsx
+**/*.ts
+!**/*.d.ts

integration-test/packages/atoms/duplicate-classes-a/index.css

@@ -0,0 +1,15 @@
+:import("@my-org/simple-class/module.css") {
+  single-declaration: singleDeclaration;
+}
+
+.simpleDeclaration {
+  composes: single-declaration;
+}
+
+.withSharedVar {
+  color: blue;
+
+  .nested {
+    color: green;
+  }
+}

integration-test/packages/atoms/duplicate-classes-a/index.d.ts.snap

@@ -0,0 +1,4 @@
+declare const simpleDeclaration: string;
+declare const withSharedVar: string;
+declare const nested: string
+export { simpleDeclaration, withSharedVar, nested }

integration-test/packages/atoms/duplicate-classes-a/index.esm.js.snap

@@ -0,0 +1,3 @@
+export var simpleDeclaration = "_9M8f-j";
+export var withSharedVar = "sMmOaU";
+export var nested = "R2GDg-"

integration-test/packages/atoms/duplicate-classes-a/index.js.snap

@@ -0,0 +1,5 @@
+module.exports = {
+  simpleDeclaration: "_9M8f-j",
+  withSharedVar: "sMmOaU",
+  nested: "R2GDg-"
+};

integration-test/packages/atoms/duplicate-classes-a/module.css.json.snap

@@ -0,0 +1 @@
+{"simpleDeclaration":"_9M8f-j","withSharedVar":"sMmOaU","nested":"R2GDg-"}

integration-test/packages/atoms/duplicate-classes-a/module.css.snap

@@ -0,0 +1,15 @@
+:import("@my-org/simple-class/module.css") {
+  single-declaration: singleDeclaration;
+}
+
+.simpleDeclaration {
+  composes: single-declaration;
+}
+
+.withSharedVar {
+  color: blue
+}
+
+.withSharedVar .nested {
+    color: green;
+  }

integration-test/packages/atoms/duplicate-classes-a/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@my-org/duplicate-classes-a",
+  "version": "0.0.1",
+  "main": "index.js",
+  "module": "index.esm.js",
+  "sideEffects": false,
+  "dependencies": {
+    "@my-org/simple-class": "0.0.1"
+  }
+}

integration-test/packages/atoms/duplicate-classes-a/result.css.snap

@@ -0,0 +1,11 @@
+._9M8f-j {
+  color: red;
+}
+
+.sMmOaU {
+  color: blue
+}
+
+.sMmOaU .R2GDg- {
+    color: green;
+  }

integration-test/packages/atoms/duplicate-classes-b/.npmignore

@@ -0,0 +1,3 @@
+**/*.tsx
+**/*.ts
+!**/*.d.ts

integration-test/packages/atoms/duplicate-classes-b/index.css

@@ -0,0 +1,15 @@
+:import("@my-org/simple-class/module.css") {
+  single-declaration: singleDeclaration;
+}
+
+.simpleDeclaration {
+  composes: single-declaration;
+}
+
+.withSharedVar {
+  color: blue;
+
+  .nested {
+    color: green;
+  }
+}

integration-test/packages/atoms/duplicate-classes-b/index.d.ts.snap

@@ -0,0 +1,4 @@
+declare const simpleDeclaration: string;
+declare const withSharedVar: string;
+declare const nested: string
+export { simpleDeclaration, withSharedVar, nested }

integration-test/packages/atoms/duplicate-classes-b/index.esm.js.snap

@@ -0,0 +1,3 @@
+export var simpleDeclaration = "_9M8f-j";
+export var withSharedVar = "sMmOaU";
+export var nested = "R2GDg-"

integration-test/packages/atoms/duplicate-classes-b/index.js.snap

@@ -0,0 +1,5 @@
+module.exports = {
+  simpleDeclaration: "_9M8f-j",
+  withSharedVar: "sMmOaU",
+  nested: "R2GDg-"
+};

integration-test/packages/atoms/duplicate-classes-b/module.css.json.snap

@@ -0,0 +1 @@
+{"simpleDeclaration":"_9M8f-j","withSharedVar":"sMmOaU","nested":"R2GDg-"}

integration-test/packages/atoms/duplicate-classes-b/module.css.snap

@@ -0,0 +1,15 @@
+:import("@my-org/simple-class/module.css") {
+  single-declaration: singleDeclaration;
+}
+
+.simpleDeclaration {
+  composes: single-declaration;
+}
+
+.withSharedVar {
+  color: blue
+}
+
+.withSharedVar .nested {
+    color: green;
+  }

integration-test/packages/atoms/duplicate-classes-b/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@my-org/duplicate-classes-b",
+  "version": "0.0.1",
+  "main": "index.js",
+  "module": "index.esm.js",
+  "sideEffects": false,
+  "dependencies": {
+    "@my-org/simple-class": "0.0.1"
+  }
+}

integration-test/packages/atoms/duplicate-classes-b/result.css.snap

@@ -0,0 +1,11 @@
+._9M8f-j {
+  color: red;
+}
+
+.sMmOaU {
+  color: blue
+}
+
+.sMmOaU .R2GDg- {
+    color: green;
+  }

integration-test/packages/atoms/icss-import/index.css

@@ -1,6 +1,6 @@
 :import("@my-org/simple-class/module.css") {
-  single: single-declaration;
-  multiple: multiple-declarations;
+  single: singleDeclaration;
+  multiple: multipleDeclarations;
 }
 
 :root {

integration-test/packages/atoms/icss-import/index.esm.js.snap

@@ -1,5 +1,5 @@
-export var localClass = "n4oS1I";
-export var localComposes = "i6EUck n4oS1I dgII7d";
-export var simpleComposes = "";
-export var complexComposes = "i6EUck n4oS1I dgII7d _1RrCqF pQ96hs";
-export var extend = "_8F86eH"
+export var localClass = "hZEeRw";
+export var localComposes = "Gpf-P8 hZEeRw dgII7d";
+export var simpleComposes = "_9M8f-j";
+export var complexComposes = "_9M8f-j o3-BnE Gpf-P8 hZEeRw dgII7d _1RrCqF pQ96hs";
+export var extend = "_3XV0Ef o3-BnE"

integration-test/packages/atoms/icss-import/index.js.snap

@@ -1,7 +1,7 @@
 module.exports = {
-  localClass: "n4oS1I",
-  localComposes: "i6EUck n4oS1I dgII7d",
-  simpleComposes: "",
-  complexComposes: "i6EUck n4oS1I dgII7d _1RrCqF pQ96hs",
-  extend: "_8F86eH"
+  localClass: "hZEeRw",
+  localComposes: "Gpf-P8 hZEeRw dgII7d",
+  simpleComposes: "_9M8f-j",
+  complexComposes: "_9M8f-j o3-BnE Gpf-P8 hZEeRw dgII7d _1RrCqF pQ96hs",
+  extend: "_3XV0Ef o3-BnE"
 };

integration-test/packages/atoms/icss-import/module.css.json.snap

@@ -1 +1 @@
-{"localClass":"n4oS1I","localComposes":"i6EUck n4oS1I dgII7d","simpleComposes":"","complexComposes":"i6EUck n4oS1I dgII7d _1RrCqF pQ96hs","extend":"_8F86eH"}
+{"localClass":"hZEeRw","localComposes":"Gpf-P8 hZEeRw dgII7d","simpleComposes":"_9M8f-j","complexComposes":"_9M8f-j o3-BnE Gpf-P8 hZEeRw dgII7d _1RrCqF pQ96hs","extend":"_3XV0Ef o3-BnE"}

integration-test/packages/atoms/icss-import/module.css.snap

@@ -1,6 +1,6 @@
 :import("@my-org/simple-class/module.css") {
-  single: single-declaration;
-  multiple: multiple-declarations;
+  single: singleDeclaration;
+  multiple: multipleDeclarations;
 }
 
 :root {

integration-test/packages/atoms/icss-import/result.css.snap

@@ -1,4 +1,11 @@
-/* custom static css (e.g. normalize) can be added here */._1RrCqF {
+._9M8f-j {
+  color: red;
+}.o3-BnE {
+  color: blue;
+  width: 100px;
+  display: flex;
+  border: 1px solid red;
+}/* custom static css (e.g. normalize) can be added here */._1RrCqF {
     color: #1a1a1a
 }.pQ96hs:hover {
     color: #fafafa
@@ -15,16 +22,16 @@
   --large: 4em;
 }
 
-.n4oS1I {
+.hZEeRw {
   height: 100%;
 }
 
-.i6EUck {
+.Gpf-P8 {
 
   text-decoration: underline;
 }
 
-._8F86eH {
+._3XV0Ef {
 
   font-size: var(--large);
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitycss/atomic",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "author": "Andrea Moretti (@axyz) <[email protected]>",
   "description": "Atomic CSS composition for yarn workspaces",
   "repository": "utilitycss/atomic",

src/postcss/atomic-css-modules/generateScopedName.ts

@@ -11,7 +11,6 @@ const generateScopedName: generateScopedName = ({
   trackClasses,
   importedElectronRE,
   importedModuleRE,
-  ICSSImportRE,
   root,
   server,
 }) =>
@@ -22,13 +21,14 @@ const generateScopedName: generateScopedName = ({
     const definitionsMap = new Map();
     const isElectron = importedElectronRE.test(filename);
     root.walkRules(new RegExp(`(\.${name}|:import)`), (rule): any => {
-      // ensure that a rule that appear multiple times has the same hash
-      // e.g. inside media queries or when ICSS imported in a different atom.
-      // in the context of ICSS import and composes the filename will point
-      // to the imported module as relative imports are forbidden in atoms
-      // we can safely check for @scope/something patterns to get the correct
-      // package name
       if (isElectron) {
+        // ensure that a rule that appear multiple times has the same hash
+        // e.g. inside media queries or when ICSS imported in a different atom.
+        // in the context of ICSS import and composes the filename will point
+        // to the imported module as relative imports are forbidden in atoms
+        // we can safely check for @scope/something patterns to get the correct
+        // package name
+
         // check for @scope/electrons pattern in the filename
         pkgName = filename.match(importedElectronRE)[1];
         const key = `${pkgName};${name}`;
@@ -43,10 +43,9 @@ const generateScopedName: generateScopedName = ({
           const key = `${pkg};${name}`;
           trackClasses.set(key, hash);
         }
-
         // short circuit: electron definition for a given name is always
         // highest priority and unique source of truth.
-        return DEVELOPMENT ? `${name.toUpperCase()}_${hash}` : hash;
+        return;
       } else if (importedModuleRE.test(filename)) {
         // check for @scope/xxx pattern in the filename
         const importedPackage = filename.match(importedModuleRE)[1];
@@ -58,20 +57,6 @@ const generateScopedName: generateScopedName = ({
         } else {
           pkgName = importedPackage;
         }
-      } else if (/:import/.test(rule.selector)) {
-        // check for @scope/xxx pattern in the ICSS selector
-        const importedPackage = rule.selector.match(ICSSImportRE)[1];
-        const pkg = <{ [key: string]: any }>(
-          server.readFileSync(`pkg:${importedPackage}`)
-        );
-        if (pkg.proxy) {
-          // check if it is a proxy atom (passthrough for utility electrons)
-          // in that case we can use the same hash of the respective electron
-          // and avoid a duplicate for each defined rule
-          pkgName = pkg.proxy;
-        } else {
-          pkgName = importedPackage;
-        }
       } else {
         // base case: use the package name from package.json
         const pkg = <{ [key: string]: any }>(
@@ -86,8 +71,8 @@ const generateScopedName: generateScopedName = ({
       }
 
       const key = `${pkgName};${name}`;
-      // if the hash was generated on a different source file we should use it
 
+      // if the hash was generated on a different source file we should use it
       if (trackClasses.has(key)) {
         hash = trackClasses.get(key);
       } else {

templates/package.json.hbs

@@ -7,7 +7,7 @@
     "start": "atomic start"
   },
   "devDependencies": {
-    "@utilitycss/atomic": "^0.16.0",
+    "@utilitycss/atomic": "^0.17.0",
     "lerna": "3.13.3"
   },
   "workspaces": {