esifycss - npm Package Compare versions

Comparing version 1.4.4 to 1.4.6

CHANGELOG.md

@@ -0,1 +1,17 @@
+<a name="1.4.6"></a>
+## [1.4.6](https://github.com/kei-ito/esifycss/compare/v1.4.5...v1.4.6) (2020-01-21)
+
+
+
+<a name="1.4.5"></a>
+## [1.4.5](https://github.com/kei-ito/esifycss/compare/v1.4.4...v1.4.5) (2020-01-21)
+
+
+### Bug Fixes
+
+* addStyle accepts an array of css objects ([38faafc](https://github.com/kei-ito/esifycss/commit/38faafc))
+* update minifier not to use RegExp ([6702084](https://github.com/kei-ito/esifycss/commit/6702084))
+
+
+
 <a name="1.4.4"></a>
@@ -2,0 +18,0 @@ ## [1.4.4](https://github.com/kei-ito/esifycss/compare/v1.4.3...v1.4.4) (2020-01-20)

lib/helper/default.js

@@ -5,3 +5,3 @@ const dictionary = ['ESIFYCSS DICTIONARY'];
     if (typeof encoded === 'object') {
-        return encoded.esifycss;
+        return encoded.$$esifycss;
     }
@@ -8,0 +8,0 @@ const result = [];

lib/helper/default.ts

@@ -8,5 +8,5 @@ const dictionary: Array<string> = ['ESIFYCSS DICTIONARY'];
 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 => {
+const decode = (encoded: string | {$$esifycss: string}): string => {
     if (typeof encoded === 'object') {
-        return encoded.esifycss;
+        return encoded.$$esifycss;
     }
@@ -40,3 +40,3 @@ const result: Array<string> = [];
 
-export const addStyle = (rules: Array<string>): void => {
+export const addStyle = (rules: Array<string | {$$esifycss: string}>): void => {
     if (!style.parentNode) {
@@ -43,0 +43,0 @@ document.head.appendChild(style);

lib/index.d.ts

@@ -9,5 +9,5 @@ export * from './parser/parseAnimationShorthand';
 export * from './util/tokenizeString';
-export * from './minifier/extractCSSFromScript';
+export * from './minifier/parseCSSModuleScript';
 export * from './minifier/setDictionary';
 export * from './minifier/minifyCSSInScript';
 export * from './minifier/createOptimizedIdentifier';

lib/index.js

@@ -12,5 +12,5 @@ "use strict";
 __export(require("./util/tokenizeString"));
-__export(require("./minifier/extractCSSFromScript"));
+__export(require("./minifier/parseCSSModuleScript"));
 __export(require("./minifier/setDictionary"));
 __export(require("./minifier/minifyCSSInScript"));
 __export(require("./minifier/createOptimizedIdentifier"));

lib/minifier/minifyCSSInScript.d.ts

@@ -1,3 +0,3 @@
-import { IParseResult } from './types';
+import { ICSSRange } from './types';
 import { IIdentifier } from '../util/createIdentifier';
-export declare const minifyCSSInScript: (script: string, cssRanges: IParseResult[], identifier: IIdentifier) => string;
+export declare const minifyCSSInScript: (script: string, cssRanges: ICSSRange[], identifier: IIdentifier) => string;

lib/minifier/minifyScripts.d.ts

@@ -1,4 +0,5 @@
-export declare const minifyScripts: (output: {
-    type: "script" | "css";
-    path: string;
-}, files: string[]) => Promise<void>;
+export declare const minifyScripts: (props: {
+    files: string[];
+    cssKey: string;
+    dest: string;
+}) => Promise<void>;

lib/minifier/minifyScripts.js

@@ -8,29 +8,11 @@ "use strict";
 const setDictionary_1 = require("./setDictionary");
-const removeAddStyle_1 = require("./removeAddStyle");
-exports.minifyScripts = async (output, files) => {
-    const parseResult = await parseScripts_1.parseScripts(files);
+exports.minifyScripts = async (props) => {
+    const parseResult = await parseScripts_1.parseScripts(props);
     const identifier = createOptimizedIdentifier_1.createOptimizedIdentifier(parseResult.tokens);
-    const outputPath = output.path;
-    if (output.type === 'script') {
-        await Promise.all([...parseResult.scripts].map(async ([file, { script, cssRanges }]) => {
-            const minified = minifyCSSInScript_1.minifyCSSInScript(script, cssRanges, identifier);
-            await fs_1.writeFile(file, minified);
-        }));
-        const helperCode = setDictionary_1.setDictionary(await fs_1.readFile(outputPath, 'utf8'), identifier.idList);
-        await fs_1.writeFile(outputPath, helperCode);
-    }
-    else {
-        const cssList = await Promise.all([...parseResult.scripts].map(async ([file, { script, cssRanges }]) => {
-            const cssList = [];
-            let code = script;
-            for (let index = cssRanges.length; index--;) {
-                const range = cssRanges[index];
-                cssList[index] = range.css;
-                code = `${code.slice(0, range.start)}'CSS${index}'${code.slice(range.end)}`;
-            }
-            await fs_1.writeFile(file, removeAddStyle_1.removeAddStyle(code));
-            return cssList.join('\n');
-        }));
-        await fs_1.writeFile(outputPath, cssList.join('\n'));
-    }
+    await Promise.all([...parseResult.scripts].map(async ([file, { script, ranges }]) => {
+        const minified = minifyCSSInScript_1.minifyCSSInScript(script, ranges, identifier);
+        await fs_1.writeFile(file, minified);
+    }));
+    const helperCode = setDictionary_1.setDictionary(await fs_1.readFile(props.dest, 'utf8'), identifier.idList);
+    await fs_1.writeFile(props.dest, helperCode);
 };

lib/minifier/parseScripts.d.ts

 import { IParseScriptsResult } from './types';
-export declare const parseScripts: (files: string[]) => Promise<IParseScriptsResult>;
+export declare const parseScripts: ({ files, cssKey }: {
+    files: string[];
+    cssKey: string;
+}) => Promise<IParseScriptsResult>;

lib/minifier/parseScripts.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const fs_1 = require("../util/fs");
-const extractCSSFromScript_1 = require("./extractCSSFromScript");
+const parseCSSModuleScript_1 = require("./parseCSSModuleScript");
 const tokenizeString_1 = require("../util/tokenizeString");
-exports.parseScripts = async (files) => {
+exports.parseScripts = async ({ files, cssKey }) => {
     const scripts = new Map();
     const tokens = new Map();
     await Promise.all(files.map(async (file) => {
-        const script = (await fs_1.readFile(file, 'utf8'));
-        const cssRanges = extractCSSFromScript_1.extractCSSFromScript(script);
-        for (const { css } of cssRanges) {
+        const code = await fs_1.readFile(file, 'utf8');
+        const data = parseCSSModuleScript_1.parseCSSModuleScript({ code, cssKey });
+        for (const { css } of data.ranges) {
             for (const token of tokenizeString_1.tokenizeString(css)) {
@@ -17,5 +17,5 @@ tokens.set(token, (tokens.get(token) || 0) + 1);
         }
-        scripts.set(file, { script, cssRanges });
+        scripts.set(file, { ...data, script: code });
     }));
     return { scripts, tokens };
 };

lib/minifier/types.d.ts

@@ -1,9 +0,15 @@
-export interface IParseResult {
-    css: string;
+export interface IRange {
     start: number;
     end: number;
 }
-export interface IScriptData {
+export interface ICSSRange extends IRange {
+    css: string;
+}
+export interface IParseResult {
+    ranges: Array<ICSSRange>;
+    addStyle: IRange;
+    statements: Array<IRange>;
+}
+export interface IScriptData extends IParseResult {
     script: string;
-    cssRanges: Array<IParseResult>;
 }
@@ -10,0 +16,0 @@ export interface IParseScriptsResult {

lib/runner/generateScript.d.ts

@@ -8,2 +8,3 @@ import * as postcss from 'postcss';
     root?: postcss.Root | undefined;
+    cssKey: string;
 }) => string;

lib/runner/generateScript.js

@@ -14,3 +14,3 @@ "use strict";
         `import {addStyle} from '${helperPath}';`,
-        `addStyle([${(props.root.nodes || []).map((node) => `{esifycss: ${JSON.stringify(node.toString())}}`).join(',')}]);`,
+        `addStyle([${(props.root.nodes || []).map((node) => `{${props.cssKey}: ${JSON.stringify(node.toString())}}`).join(',')}]);`,
         `export const className = ${JSON.stringify(props.result.className, null, 4)};`,
@@ -17,0 +17,0 @@ `export const id = ${JSON.stringify(props.result.id, null, 4)};`,

lib/runner/getSessionConfiguration.js

@@ -28,3 +28,4 @@ "use strict";
         postcssOptions: parameters.postcssOptions || {},
+        cssKey: '$$esifycss',
     };
 };

lib/runner/Session.js

@@ -14,2 +14,3 @@ "use strict";
 const createExposedPromise_1 = require("../util/createExposedPromise");
+const minifyScriptsForCSS_1 = require("../minifier/minifyScriptsForCSS");
 class Session {
@@ -62,2 +63,3 @@ constructor(parameters = {}) {
             root: postcssResult.root,
+            cssKey: this.configuration.cssKey,
         });
@@ -68,3 +70,11 @@ exposedPromise.resolve();
     async minifyScripts() {
-        await minifyScripts_1.minifyScripts(this.configuration.output, [...this.processedFiles].map((file) => `${file}${this.configuration.ext}`));
+        const files = [...this.processedFiles].map((file) => `${file}${this.configuration.ext}`);
+        const { cssKey } = this.configuration;
+        const dest = this.configuration.output.path;
+        if (this.configuration.output.type === 'css') {
+            await minifyScriptsForCSS_1.minifyScriptsForCSS({ files, cssKey, dest });
+        }
+        else {
+            await minifyScripts_1.minifyScripts({ files, cssKey, dest });
+        }
     }
@@ -78,5 +88,3 @@ async waitCurrentTasks() {
         const removeTask = () => this.tasks.delete(exposedPromise.promise);
-        exposedPromise.promise
-            .then(removeTask)
-            .catch(removeTask);
+        exposedPromise.promise.then(removeTask).catch(removeTask);
         return exposedPromise;
@@ -83,0 +91,0 @@ }

lib/runner/types.d.ts

@@ -39,2 +39,3 @@ /// <reference types="node" />
     readonly postcssOptions: postcss.ProcessOptions;
+    readonly cssKey: string;
 }
@@ -41,0 +42,0 @@ export interface ICSSParserParameters {

package.json

 {
     "name": "esifycss",
-    "version": "1.4.4",
+    "version": "1.4.6",
     "description": "Generates .js or .ts exports class names and custom properties",
@@ -183,3 +183,3 @@ "author": {
                     "src/util/tokenizeString.ts",
-                    "src/minifier/extractCSSFromScript.ts"
+                    "src/minifier/parseCSSModuleScript.ts"
                 ],
@@ -186,0 +186,0 @@ "rules": {

No alert changes

Improved metrics

Total package byte prevSize

117397

increased by2.69%

Number of package files

141

increased by4.44%

Lines of code

1957

increased by3.54%

No dependency changes