fix: use pseudo and media for hashing (#24)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitycss/atomic",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "author": "Andrea Moretti (@axyz) <[email protected]>",
   "description": "Atomic CSS composition for yarn workspaces",
   "repository": "utilitycss/atomic",
@@ -57,10 +57,7 @@
     }
   },
   "lint-staged": {
-    "*.js": [
-      "prettier --no-config --write",
-      "git add"
-    ],
+    "*.js": ["prettier --no-config --write", "git add"],
     "*.ts": [
       "prettier --no-config --write",
       "tslint -c tslint.json -p tsconfig.json --fix",

src/postcss/atomic-css-modules.ts

@@ -28,11 +28,31 @@ function hashFunction(string: string, length: number): string {
 
 const CLASS_RE = /\.([\w-]+)/g;
 
-const generateHashableContent = (rule: Rule): string =>
-  rule.nodes
-    .filter((d: Declaration) => d.prop !== "composes")
-    .map((node: Declaration) => node.type + node.prop + node.value)
-    .join(";");
+const generateHashableContent = (rule: Rule): string => {
+  let pseudo = "";
+  let media = "";
+
+  if (rule.selector && rule.selector.indexOf(":") !== -1) {
+    pseudo = `;${rule.selector.split(/:+/)[1]}`;
+  }
+
+  if (
+    rule.parent &&
+    rule.parent.type === "atrule" &&
+    rule.parent.name === "media"
+  ) {
+    media = `;${rule.parent.params}`;
+  }
+
+  return (
+    rule.nodes
+      .filter((d: Declaration) => d.prop !== "composes")
+      .map((node: Declaration) => node.type + node.prop + node.value)
+      .join(";") +
+    pseudo +
+    media
+  );
+};
 
 const getElectronDefinition = (server: AtomsServer, name: any): string => {
   const definitionsMap = new Map();