diff --git a/package.json b/package.json index 3adf29f..2bcc94b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@utilitycss/atomic", - "version": "0.8.0", + "version": "0.9.0", "author": "Andrea Moretti (@axyz) ", "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", diff --git a/src/postcss/atomic-css-modules.ts b/src/postcss/atomic-css-modules.ts index 3adbc82..6cd0223 100644 --- a/src/postcss/atomic-css-modules.ts +++ b/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();