esifycss - npm Package Compare versions

Comparing version 1.3.6 to 1.3.7

CHANGELOG.md

@@ -0,1 +1,11 @@
+<a name="1.3.7"></a>
+## [1.3.7](https://github.com/kei-ito/esify/compare/v1.3.6...v1.3.7) (2019-10-30)
+
+
+### Bug Fixes
+
+* remove spaces ([dbb3cbb](https://github.com/kei-ito/esify/commit/dbb3cbb))
+
+
+
 <a name="1.3.6"></a>
@@ -2,0 +12,0 @@ ## [1.3.6](https://github.com/kei-ito/esify/compare/v1.3.5...v1.3.6) (2019-09-20)

lib/bin/esifycss.js

@@ -30,2 +30,1 @@ #!/usr/bin/env node
 }
-//# sourceMappingURL=esifycss.js.map

lib/bin/loadParameters.js

@@ -22,2 +22,1 @@ "use strict";
 };
-//# sourceMappingURL=loadParameters.js.map

lib/bin/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map

lib/helper/index.js

@@ -1,9 +0,3 @@
-const style = document.createElement('style');
-let buffer = [];
 const dictionary = ['ESIFYCSS DICTIONARY'];
-const charToInteger = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='.split('')
-    .reduce((map, char, index) => {
-    map[char] = index;
-    return map;
-}, {});
+const charToInteger = JSON.parse('{"0":52,"1":53,"2":54,"3":55,"4":56,"5":57,"6":58,"7":59,"8":60,"9":61,"A":0,"B":1,"C":2,"D":3,"E":4,"F":5,"G":6,"H":7,"I":8,"J":9,"K":10,"L":11,"M":12,"N":13,"O":14,"P":15,"Q":16,"R":17,"S":18,"T":19,"U":20,"V":21,"W":22,"X":23,"Y":24,"Z":25,"a":26,"b":27,"c":28,"d":29,"e":30,"f":31,"g":32,"h":33,"i":34,"j":35,"k":36,"l":37,"m":38,"n":39,"o":40,"p":41,"q":42,"r":43,"s":44,"t":45,"u":46,"v":47,"w":48,"x":49,"y":50,"z":51,"+":62,"/":63,"=":64}');
 const decode = (encoded) => {
@@ -16,4 +10,4 @@ if (typeof encoded === 'object') {
     let shift = 0;
-    const { length } = encoded;
-    for (let index = 0; index < length; index++) {
+    const end = encoded.length;
+    for (let index = 0; index < end; index++) {
         let integer = charToInteger[encoded[index]];
@@ -34,3 +28,3 @@ if (0 <= integer) {
         else {
-            throw new Error(`Unexpected token: ${encoded[index]} '${encoded}'[${index}]`);
+            throw new Error(`EsifyCSS:UnexpectedToken:${encoded[index]}:'${encoded}'[${index}]`);
         }
@@ -40,2 +34,3 @@ }
 };
+const style = document.createElement('style');
 export const addStyle = (rules) => {
@@ -45,22 +40,4 @@ if (!style.parentNode) {
     }
-    if (rules) {
-        buffer = buffer.concat(rules);
-    }
-    const sheet = style.sheet;
-    const skipped = [];
-    while (1) {
-        const words = buffer.shift();
-        if (words) {
-            if (dictionary) {
-                sheet.insertRule(decode(words), sheet.cssRules.length);
-            }
-            else {
-                skipped.push(words);
-            }
-        }
-        else {
-            break;
-        }
-    }
-    buffer = buffer.concat(skipped);
+    const cssStyleSheet = style.sheet;
+    rules.forEach((words) => cssStyleSheet.insertRule(decode(words), cssStyleSheet.cssRules.length));
 };

lib/helper/index.ts

@@ -1,12 +0,8 @@
-const style = document.createElement('style');
-let buffer: Array<string> = [];
 const dictionary: Array<string> = ['ESIFYCSS DICTIONARY'];
-const charToInteger = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='.split('')
-.reduce<{[char: string]: number}>(
-    (map, char, index) => {
-        map[char] = index;
-        return map;
-    },
-    {},
-);
+// const charToInteger = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='.split('')
+// .reduce<{[char: string]: number}>((map, char, index) => {
+//     map[char] = index;
+//     return map;
+// }, {});
+const charToInteger: {[key: string]: number} = JSON.parse('{"0":52,"1":53,"2":54,"3":55,"4":56,"5":57,"6":58,"7":59,"8":60,"9":61,"A":0,"B":1,"C":2,"D":3,"E":4,"F":5,"G":6,"H":7,"I":8,"J":9,"K":10,"L":11,"M":12,"N":13,"O":14,"P":15,"Q":16,"R":17,"S":18,"T":19,"U":20,"V":21,"W":22,"X":23,"Y":24,"Z":25,"a":26,"b":27,"c":28,"d":29,"e":30,"f":31,"g":32,"h":33,"i":34,"j":35,"k":36,"l":37,"m":38,"n":39,"o":40,"p":41,"q":42,"r":43,"s":44,"t":45,"u":46,"v":47,"w":48,"x":49,"y":50,"z":51,"+":62,"/":63,"=":64}');
 const decode = (encoded: string | {esifycss: string}): string => {
@@ -19,4 +15,4 @@ if (typeof encoded === 'object') {
     let shift = 0;
-    const {length} = encoded;
-    for (let index = 0; index < length; index++) {
+    const end = encoded.length;
+    for (let index = 0; index < end; index++) {
         let integer = charToInteger[encoded[index]];
@@ -36,3 +32,3 @@ if (0 <= integer) {
         } else {
-            throw new Error(`Unexpected token: ${encoded[index]} '${encoded}'[${index}]`);
+            throw new Error(`EsifyCSS:UnexpectedToken:${encoded[index]}:'${encoded}'[${index}]`);
         }
@@ -43,24 +39,10 @@ }
 
-export const addStyle = (rules?: Array<string>): void => {
+const style = document.createElement('style');
+
+export const addStyle = (rules: Array<string>): void => {
     if (!style.parentNode) {
         document.head.appendChild(style);
     }
-    if (rules) {
-        buffer = buffer.concat(rules);
-    }
-    const sheet = style.sheet as CSSStyleSheet;
-    const skipped: typeof buffer = [];
-    while (1) {
-        const words = buffer.shift();
-        if (words) {
-            if (dictionary) {
-                sheet.insertRule(decode(words), sheet.cssRules.length);
-            } else {
-                skipped.push(words);
-            }
-        } else {
-            break;
-        }
-    }
-    buffer = buffer.concat(skipped);
+    const cssStyleSheet = style.sheet as CSSStyleSheet;
+    rules.forEach((words) => cssStyleSheet.insertRule(decode(words), cssStyleSheet.cssRules.length));
 };

lib/index.js

@@ -16,2 +16,1 @@ "use strict";
 __export(require("./minifier/createOptimizedIdentifier"));
-//# sourceMappingURL=index.js.map

lib/minifier/createOptimizedIdentifier.js

@@ -11,2 +11,1 @@ "use strict";
 };
-//# sourceMappingURL=createOptimizedIdentifier.js.map

lib/minifier/extractCSSFromScript.js

@@ -33,2 +33,1 @@ "use strict";
 };
-//# sourceMappingURL=extractCSSFromScript.js.map

lib/minifier/minifyCSSInScript.js

@@ -16,2 +16,1 @@ "use strict";
 };
-//# sourceMappingURL=minifyCSSInScript.js.map

lib/minifier/minifyScripts.js

@@ -19,2 +19,1 @@ "use strict";
 };
-//# sourceMappingURL=minifyScripts.js.map

lib/minifier/parseScripts.js

@@ -21,2 +21,1 @@ "use strict";
 };
-//# sourceMappingURL=parseScripts.js.map

lib/minifier/setDictionary.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setDictionary = (code, words) => code.replace(/\[\s*(['"])ESIFYCSS DICTIONARY\1\s*\]/, JSON.stringify(words));
-//# sourceMappingURL=setDictionary.js.map
+exports.setDictionary = (code, words) => {
+    const longestWordLength = 2 + words.reduce((longest, { length }) => longest < length ? length : longest, 0);
+    const dictionarySize = words.length;
+    const step = 10 <= 120 / longestWordLength ? 10 : 5;
+    const lines = [];
+    for (let offset = 0; offset < dictionarySize; offset += step) {
+        lines.push(`${words.slice(offset, offset + step).map((word) => JSON.stringify(word).padStart(longestWordLength)).join(', ')},`);
+    }
+    return code.replace(/\[\s*(['"])ESIFYCSS DICTIONARY\1\s*\]/, `[\n${lines.join('\n')}\n]`);
+};

lib/minifier/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map

lib/parser/compileOverwrites.js

@@ -56,2 +56,1 @@ "use strict";
 };
-//# sourceMappingURL=compileOverwrites.js.map

lib/parser/constants.js

@@ -23,2 +23,1 @@ "use strict";
 };
-//# sourceMappingURL=constants.js.map

lib/parser/getCubicBezierFunction.js

@@ -30,2 +30,1 @@ "use strict";
 };
-//# sourceMappingURL=getCubicBezierFunction.js.map

lib/parser/getDirection.js

@@ -18,2 +18,1 @@ "use strict";
 };
-//# sourceMappingURL=getDirection.js.map

lib/parser/getFillMode.js

@@ -18,2 +18,1 @@ "use strict";
 };
-//# sourceMappingURL=getFillMode.js.map

lib/parser/getStepFunction.js

@@ -48,2 +48,1 @@ "use strict";
 };
-//# sourceMappingURL=getStepFunction.js.map

lib/parser/getStepPosition.js

@@ -18,2 +18,1 @@ "use strict";
 };
-//# sourceMappingURL=getStepPosition.js.map

lib/parser/getTimingFunction.js

@@ -23,2 +23,1 @@ "use strict";
 };
-//# sourceMappingURL=getTimingFunction.js.map

lib/parser/isSameCubicBezierPoints.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isSameCubicBezierPoints = (a, b) => Boolean(a && b && a.every((value, index) => value === b[index]));
-//# sourceMappingURL=isSameCubicBezierPoints.js.map

lib/parser/isSameTimingFunction.js

@@ -17,2 +17,1 @@ "use strict";
 };
-//# sourceMappingURL=isSameTimingFunction.js.map

lib/parser/parseAnimationShorthand.js

@@ -22,2 +22,1 @@ "use strict";
 };
-//# sourceMappingURL=parseAnimationShorthand.js.map

lib/parser/serializeAnimationShorthand.js

@@ -32,2 +32,1 @@ "use strict";
 };
-//# sourceMappingURL=serializeAnimationShorthand.js.map

lib/parser/serializeTimingFunction.js

@@ -39,2 +39,1 @@ "use strict";
 };
-//# sourceMappingURL=serializeTimingFunction.js.map

lib/parser/timeToNumber.js

@@ -20,2 +20,1 @@ "use strict";
 };
-//# sourceMappingURL=timeToNumber.js.map

lib/parser/types.js

@@ -49,2 +49,1 @@ "use strict";
 })(CSSStepPosition = exports.CSSStepPosition || (exports.CSSStepPosition = {}));
-//# sourceMappingURL=types.js.map

lib/postcssPlugin/createTransformer.js

@@ -25,2 +25,1 @@ "use strict";
 };
-//# sourceMappingURL=createTransformer.js.map

lib/postcssPlugin/getDependencies.js

@@ -22,2 +22,1 @@ "use strict";
 };
-//# sourceMappingURL=getDependencies.js.map

lib/postcssPlugin/getImports.js

@@ -19,2 +19,1 @@ "use strict";
 };
-//# sourceMappingURL=getImports.js.map

lib/postcssPlugin/getMatchedImport.js

@@ -13,2 +13,1 @@ "use strict";
 };
-//# sourceMappingURL=getMatchedImport.js.map

lib/postcssPlugin/getPluginConfiguration.js

@@ -16,2 +16,1 @@ "use strict";
 });
-//# sourceMappingURL=getPluginConfiguration.js.map

lib/postcssPlugin/mangleIdentifiers.js

@@ -41,2 +41,1 @@ "use strict";
 };
-//# sourceMappingURL=mangleIdentifiers.js.map

lib/postcssPlugin/mangleKeyFrames.js

@@ -30,2 +30,1 @@ "use strict";
 };
-//# sourceMappingURL=mangleKeyFrames.js.map

lib/postcssPlugin/minify.d.ts

 import * as postcss from 'postcss';
+interface INodeRaws extends postcss.NodeRaws {
+    value?: {
+        value: string;
+        raw: string;
+    };
+}
+export declare const removeSpaces: ({ raws }: {
+    raws: INodeRaws;
+}) => void;
 export declare const minify: (root: postcss.Root) => void;
+export {};

lib/postcssPlugin/minify.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeSpaces = ({ raws }) => {
+    if (raws.before) {
+        raws.before = raws.before.trim();
+    }
+    if (raws.after) {
+        raws.after = raws.after.trim();
+    }
+    if (raws.between) {
+        raws.between = raws.between.trim();
+    }
+    if (raws.afterName) {
+        raws.afterName = ' ';
+    }
+    if (raws.left) {
+        raws.left = raws.left.trim();
+    }
+    if (raws.right) {
+        raws.right = raws.right.trim();
+    }
+    if (raws.important) {
+        raws.important = raws.important.trim();
+    }
+    if (raws.semicolon) {
+        raws.semicolon = false;
+    }
+    if (raws.value) {
+        raws.value.raw = raws.value.value;
+    }
+};
 exports.minify = (root) => {
-    root.walk((node) => {
-        switch (node.type) {
-            case 'atrule':
-            case 'rule':
-                node.raws.before = node.raws.between = node.raws.after = '';
-                break;
-            case 'decl':
-                node.raws.before = node.raws.after = '';
-                node.raws.between = ':';
-                break;
-            case 'comment':
-                node.remove();
-                break;
-            default:
-        }
-    });
+    root.walkComments((comment) => comment.remove());
+    exports.removeSpaces(root);
+    root.walk(exports.removeSpaces);
 };
-//# sourceMappingURL=minify.js.map

lib/postcssPlugin/parseImport.js

@@ -18,2 +18,1 @@ "use strict";
 };
-//# sourceMappingURL=parseImport.js.map

lib/postcssPlugin/plugin.js

@@ -13,2 +13,1 @@ "use strict";
 });
-//# sourceMappingURL=plugin.js.map

lib/postcssPlugin/removeImportsAndRaws.js

@@ -20,2 +20,1 @@ "use strict";
 };
-//# sourceMappingURL=removeImportsAndRaws.js.map

lib/postcssPlugin/transformDeclarations.js

@@ -35,2 +35,1 @@ "use strict";
 };
-//# sourceMappingURL=transformDeclarations.js.map

lib/postcssPlugin/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map

lib/runner/extractPluginResult.js

@@ -20,2 +20,1 @@ "use strict";
 };
-//# sourceMappingURL=extractPluginResult.js.map

lib/runner/getCSSParserConfiguration.js

@@ -12,2 +12,1 @@ "use strict";
 });
-//# sourceMappingURL=getCSSParserConfiguration.js.map

lib/runner/getSessionConfiguration.js

@@ -38,2 +38,1 @@ "use strict";
 };
-//# sourceMappingURL=getSessionConfiguration.js.map

lib/runner/parseCSS.js

@@ -9,2 +9,1 @@ "use strict";
 };
-//# sourceMappingURL=parseCSS.js.map

lib/runner/Session.js

@@ -132,2 +132,1 @@ "use strict";
 exports.Session = Session;
-//# sourceMappingURL=Session.js.map

lib/runner/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map

lib/runner/waitForInitialScanCompletion.js

@@ -13,2 +13,1 @@ "use strict";
 };
-//# sourceMappingURL=waitForInitialScanCompletion.js.map

lib/scriptGenerator/generateScript.js

@@ -21,2 +21,1 @@ "use strict";
 };
-//# sourceMappingURL=generateScript.js.map

lib/util/createDirectoryFor.js

@@ -23,2 +23,1 @@ "use strict";
 };
-//# sourceMappingURL=createDirectoryFor.js.map

lib/util/createIdentifier.js

@@ -26,2 +26,1 @@ "use strict";
 };
-//# sourceMappingURL=createIdentifier.js.map

lib/util/createTemporaryDirectory.js

@@ -11,2 +11,1 @@ "use strict";
 };
-//# sourceMappingURL=createTemporaryDirectory.js.map

lib/util/encodeString.js

@@ -13,2 +13,1 @@ "use strict";
 exports.decodeString = (encoded, words) => vlq.decode(encoded).map((index) => words[index]).join('');
-//# sourceMappingURL=encodeString.js.map

lib/util/ensureArray.js

@@ -9,2 +9,1 @@ "use strict";
 };
-//# sourceMappingURL=ensureArray.js.map

lib/util/fs.js

@@ -53,2 +53,1 @@ "use strict";
 };
-//# sourceMappingURL=fs.js.map

lib/util/getHash.js

@@ -12,2 +12,1 @@ "use strict";
 };
-//# sourceMappingURL=getHash.js.map

lib/util/normalizePath.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizePath = (input) => input.split('\\').join('/');
-//# sourceMappingURL=normalizePath.js.map

lib/util/tokenizeString.js

@@ -25,2 +25,1 @@ "use strict";
 };
-//# sourceMappingURL=tokenizeString.js.map

lib/util/write.js

@@ -9,2 +9,1 @@ "use strict";
 };
-//# sourceMappingURL=write.js.map

package.json

 {
     "name": "esifycss",
-    "version": "1.3.6",
+    "version": "1.3.7",
     "description": "Generates .js or .ts exports class names and custom properties",
@@ -24,3 +24,3 @@ "author": {
     "scripts": {
-        "lint": "eslint --ext .ts src scripts",
+        "lint": "eslint --ext .ts src scripts @types",
         "build:cleanup": "rimraf lib src/helper/index.js",
@@ -50,9 +50,9 @@ "build:helper:tsc": "tsc --project tsconfig.helper.json",
     "dependencies": {
-        "@nlib/nbnf": "^3.13.3",
-        "acorn": "^7.0.0",
+        "@nlib/nbnf": "^3.13.5",
+        "acorn": "^7.1.0",
         "acorn-dynamic-import": "^4.0.0",
         "acorn-walk": "^7.0.0",
-        "chokidar": "^3.1.1",
-        "commander": "^3.0.1",
-        "postcss": "^7.0.18",
+        "chokidar": "^3.2.3",
+        "commander": "^3.0.2",
+        "postcss": "^7.0.21",
         "postcss-selector-parser": "^6.0.2",
@@ -64,3 +64,3 @@ "vlq": "^1.0.1"
         "@commitlint/config-conventional": "^8.2.0",
-        "@nlib/lint": "^3.13.3",
+        "@nlib/lint": "^3.14.0",
         "@types/acorn-dynamic-import": "file:@types/acorn-dynamic-import",
@@ -71,20 +71,20 @@ "@types/acorn-walk": "file:@types/acorn-walk",
         "@types/micromatch": "3.1.0",
-        "@types/node": "^12.7.5",
-        "@types/selenium-webdriver": "^4.0.2",
-        "@typescript-eslint/eslint-plugin": "^2.3.0",
-        "@typescript-eslint/parser": "^2.3.0",
+        "@types/node": "^12.12.0",
+        "@types/selenium-webdriver": "^4.0.5",
+        "@typescript-eslint/eslint-plugin": "^2.6.0",
+        "@typescript-eslint/parser": "^2.6.0",
         "ava": "^2.4.0",
         "browserstack-local": "^1.4.2",
-        "conventional-changelog-cli": "^2.0.23",
+        "conventional-changelog-cli": "^2.0.25",
         "cpy-cli": "^2.0.0",
-        "eslint": "^6.4.0",
-        "husky": "^3.0.5",
-        "lint-staged": "^9.2.5",
+        "eslint": "^6.6.0",
+        "husky": "^3.0.9",
+        "lint-staged": "^9.4.2",
         "npm-run-all": "^4.1.5",
         "postcss-nested": "4.1.2",
         "rimraf": "^3.0.0",
-        "rollup": "^1.21.4",
+        "rollup": "^1.26.0",
         "selenium-webdriver": "^4.0.0-alpha.5",
         "ts-node": "^8.4.1",
-        "typescript": "^3.6.3"
+        "typescript": "^3.6.4"
     },
@@ -115,3 +115,6 @@ "ava": {
                 "parserOptions": {
-                    "project": "scripts/tsconfig.json"
+                    "project": "./tsconfig.base.json"
+                },
+                "rules": {
+                    "no-bitwise": "off"
                 }
@@ -121,8 +124,6 @@ },
                 "files": [
-                    "src/helper/**/*",
-                    "test/*/src/*"
+                    "@types/**/*.ts"
                 ],
-                "env": {
-                    "node": false,
-                    "browser": true
+                "parserOptions": {
+                    "project": "./tsconfig.base.json"
                 }
@@ -132,9 +133,14 @@ },
                 "files": [
-                    "src/helper/**/*"
+                    "test/**/*.ts",
+                    "*.test.ts",
+                    "*.for-test.ts"
                 ],
                 "rules": {
-                    "no-bitwise": "off"
+                    "no-process-env": "off",
+                    "max-lines-per-function": "off",
+                    "class-methods-use-this": "off",
+                    "@typescript-eslint/no-unnecessary-condition": "off"
                 },
                 "parserOptions": {
-                    "project": "./tsconfig.helper.json"
+                    "project": "./tsconfig.base.json"
                 }
@@ -144,30 +150,9 @@ },
                 "files": [
-                    "src/helper/**/*.js"
+                    "src/helper/**/*"
                 ],
                 "rules": {
-                    "brace-style": "off",
-                    "indent": "off",
-                    "object-curly-spacing": "off",
-                    "prefer-destructuring": "off"
-                }
-            },
-            {
-                "files": [
-                    "*.test.ts"
-                ],
-                "rules": {
-                    "max-lines-per-function": "off"
-                }
-            },
-            {
-                "files": [
-                    "test/**/*.ts"
-                ],
-                "rules": {
-                    "no-process-env": "off",
-                    "require-atomic-updates": "off",
-                    "@typescript-eslint/triple-slash-reference": "off"
+                    "no-bitwise": "off"
                 },
                 "parserOptions": {
-                    "project": "./tsconfig.base.json"
+                    "project": "./tsconfig.helper.json"
                 }
@@ -177,6 +162,9 @@ },
                 "files": [
-                    "sample/*"
+                    "src/helper/**/*",
+                    "test/*/src/*",
+                    "sample/**/*"
                 ],
-                "rules": {
-                    "no-console": "off"
+                "env": {
+                    "node": false,
+                    "browser": true
                 }
@@ -186,6 +174,6 @@ },
                 "files": [
-                    "src/util/createSandbox.for-test.ts"
+                    "src/helper/**/*.js"
                 ],
                 "rules": {
-                    "class-methods-use-this": "off"
+                    "brace-style": "off"
                 }
@@ -195,6 +183,7 @@ },
                 "files": [
-                    "scripts/*"
+                    "src/util/tokenizeString.ts",
+                    "src/minifier/extractCSSFromScript.ts"
                 ],
                 "rules": {
-                    "no-bitwise": "off"
+                    "@typescript-eslint/no-unnecessary-condition": "off"
                 }
@@ -201,0 +190,0 @@ }

README.md

@@ -9,34 +9,103 @@ # EsifyCSS
 
-Generates modules from CSS.
+## Introduction
 
-Assume you have [`style.css`](sample/01-mangle/sample.css) below.
+EsifyCSS finds CSS files in your project and generates ES modules for each of
+them.
 
-![A screen shot of style.css](images/style.css.png)
+Assume that you have `src/style1.css` and `src/style2.css`. They have the same
+contents:
 
-Then, run the `esifycss` command.
+```css
+/* src/style1.css, src/style2.css */
+@keyframes FadeIn {
+    0%: {opacity: 0}
+  100%: {opacity: 0}
+}
+@keyframes Rotate {
+    0%: {transform: rotate(  0deg)}
+  100%: {transform: rotate(360deg)}
+}
+#container {
+  animation: 0.2s linear FadeIn;
+}
+.icon {
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+.icon.rotate {
+  animation-name: Rotate;
+}
+```
 
-![A video of the result](images/esifycss.gif)
+Then, run `esifycss --helper src/helper.js src`. `--helper src/helper.js` is
+where the helper script is written. The last `src` specifies the directory that
+contains the file to be processed by EsifyCSS.
 
-You'll get [`style.css.js`](sample/01-mangle/sample.css.js) (and [`helper.js`](sample/01-mangle/helper.js)).
+The process finds CSS files, parses them, extracts identifiers, replaces them with
+ values.
 
-![A screen shot of style.css.js](images/style.css.js.png)
+After the process, you'll get `src/style1.css.js` and `src/style2.css.js`:
 
-You can import the generated script from
-It exports `className`, `id`, and `keyframes` that are shortened uniquely.
-The uniqueness makes styles modular. This means you don't have to concern about
-naming somethings in CSS.
+```javascript
+// src/style1.css.js
+import {addStyle} from './helper.js';
+addStyle(["WYIGqCCQSCaAQEcSCaAUEE","WYIGsCCQSCeAgBiBIIQkBmBEcSCeAgBiByBkBmBEE","0BGQC2BA4BKOA6BoBIqBIGqCKE","sBGUCOM8BAUoBKOM+BMgCAiCKOMkCMmCAqBKE","sBG2CG4CCOMoCAGsCKE"]);
+export const className = {
+    "icon": "_1",
+    "rotate": "_2"
+};
+export const id = {
+    "container": "_0"
+};
+export const keyframes = {
+    "FadeIn": "_3",
+    "Rotate": "_4"
+};
+```
 
-Each string given to `addStyle` represents a CSS string.
-They are inserted to the document's stylesheet by the helper script.
+```javascript
+// src/style2.css.js
+import {addStyle} from './helper.js';
+addStyle(["WYIGuBCQSCaAQEcSCaAUEE","WYIGwBCQSCeAgBiBIIQkBmBEcSCeAgBiByBkBmBEE","0BGuCC2BA4BKOA6BoBIqBIGuBKE","sBGwCCOM8BAUoBKOM+BMgCAiCKOMkCMmCAqBKE","sBGyCG0CCOMoCAGwBKE"]);
+export const className = {
+    "icon": "_6",
+    "rotate": "_7"
+};
+export const id = {
+    "container": "_5"
+};
+export const keyframes = {
+    "FadeIn": "_8",
+    "Rotate": "_9"
+};
+```
 
-EsifyCSS consists of a **PostCSS plugin** and a **Runner**.
+The two modules are almost the same, but the exported objects are different. And
+there will be `src/helper.js` which exports the `addStyle` function which
+applies the style to documents. You can see the code at
+[sample/01-mangle/helper.js](sample/01-mangle/helper.js).
 
-## PostCSS plugin
+The exported objects are mappings of identifiers of `className`, `id`, and
+`keyframes` that were replaced in the process. You should import them and use
+the replaced identifiers instead of original in the code:
 
-The plugin converts the identifiers in CSS and minifies them.
-It outputs the result of minifications using [Root.warn()].
+```javascript
+import style from './style1.css.js';
+const element = document.createElement('div');
+element.classList.add(style.className.icon);
+```
 
+## Tools
+
+EsifyCSS consists of **PostCSS plugin**, **Runner** and **CLI**.
+
+### PostCSS plugin
+
+The plugin converts the identifiers in CSS and minifies them. It outputs the
+result of minifications using [Root.warn()].
+
 [Root.warn()]: http://api.postcss.org/Root.html#warn
 
-## Runner
+### Runner
 
@@ -46,11 +115,5 @@ A runner process `.css` files in your project with PostCSS and output the
 
-## Installation
+### CLI
 
-```bash
-npm install --save-dev esifycss
 ```
-
-## Usage
-
-```
 Usage: esifycss [options] <include ...>
@@ -68,7 +131,14 @@
 
+## Installation
+
+```bash
+npm install --save-dev esifycss
+```
+
 ## `@import` Syntax
 
-You can use `@import` syntax when the style declarations requires names in external files.
+You can use `@import` syntax if the style declarations requires identifiers
+declared in other files.
 
-Example: Assume you have the following `a.css` and `b.css`.
+For example, Assume you have the following `a.css` and `b.css`.
 
@@ -85,5 +155,4 @@ ```css
 
-The `container` class names will be shortened to unique names like
-`_0` and `_1`.
-You can import the shortened names with the `@import` syntax.
+The `container` class names will be shortened to unique names like `_0` and
+`_1`. You can import the shortened names with the `@import` syntax.
 
@@ -90,0 +159,0 @@ ```css

No alert changes

Improved metrics

Number of lines in readme file

303

increased by29.49%

Worsened metrics

Total package byte prevSize

105508

decreased by-30.34%

Number of package files

122

decreased by-31.84%

Lines of code

1748

decreased by-0.29%

Dependency changes

• Updated@nlib/nbnf@^3.13.5

• Updatedacorn@^7.1.0

• Updatedchokidar@^3.2.3

• Updatedcommander@^3.0.2

• Updatedpostcss@^7.0.21