esifycss - npm Package Compare versions

Comparing version 1.4.31 to 1.4.32

lib/index.d.ts

@@ -46,2 +46,4 @@ export * from './minifier/ast';
 export * from './util/getBase64UrlHash';
+export * from './util/ignoreNoEntryError';
+export * from './util/isRecordLike';
 export * from './util/normalizePath';
@@ -52,2 +54,3 @@ export * from './util/postcss';
 export * from './util/tokenizeString';
-export * from './util/writeFilep';
+export * from './util/updateFile';
+export * from './util/wait';

lib/index.js

@@ -58,2 +58,4 @@ "use strict";
 __exportStar(require("./util/getBase64UrlHash"), exports);
+__exportStar(require("./util/ignoreNoEntryError"), exports);
+__exportStar(require("./util/isRecordLike"), exports);
 __exportStar(require("./util/normalizePath"), exports);
@@ -64,3 +66,4 @@ __exportStar(require("./util/postcss"), exports);
 __exportStar(require("./util/tokenizeString"), exports);
-__exportStar(require("./util/writeFilep"), exports);
+__exportStar(require("./util/updateFile"), exports);
+__exportStar(require("./util/wait"), exports);
 //# sourceMappingURL=index.js.map

lib/minifier/minifyScripts.js

@@ -9,3 +9,3 @@ "use strict";
 const setDictionary_1 = require("./setDictionary");
-const writeFilep_1 = require("../util/writeFilep");
+const updateFile_1 = require("../util/updateFile");
 const { readFile } = fs.promises;
@@ -17,8 +17,8 @@ const minifyScripts = async (props) => {
         const minified = (0, minifyCSSInScript_1.minifyCSSInScript)(script, ranges, identifier);
-        await (0, writeFilep_1.writeFilep)(file, minified);
+        await (0, updateFile_1.updateFile)(file, minified);
     }));
     const helperCode = (0, setDictionary_1.setDictionary)(await readFile(props.dest, 'utf8'), identifier.idList);
-    await (0, writeFilep_1.writeFilep)(props.dest, helperCode);
+    await (0, updateFile_1.updateFile)(props.dest, helperCode);
 };
 exports.minifyScripts = minifyScripts;
 //# sourceMappingURL=minifyScripts.js.map

lib/minifier/minifyScriptsForCSS.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.minifyScriptsForCSS = exports.minifyScriptForCSS = void 0;
-const writeFilep_1 = require("../util/writeFilep");
+const updateFile_1 = require("../util/updateFile");
 const parseScripts_1 = require("./parseScripts");
@@ -16,3 +16,3 @@ const minifyScriptForCSS = async ([file, data]) => {
         .replace(/\n\s*\n/g, '\n');
-    await (0, writeFilep_1.writeFilep)(file, code);
+    await (0, updateFile_1.updateFile)(file, code);
     return cssList.join('\n');
@@ -23,6 +23,12 @@ };
     const parseResult = await (0, parseScripts_1.parseScripts)(props);
-    const cssList = await Promise.all([...parseResult.scripts].map(exports.minifyScriptForCSS));
-    await (0, writeFilep_1.writeFilep)(props.dest, cssList.join('\n'));
+    const cssList = [];
+    for (const script of parseResult.scripts) {
+        const css = await (0, exports.minifyScriptForCSS)(script).catch((error) => {
+            throw error;
+        });
+        cssList.push(css);
+    }
+    await (0, updateFile_1.updateFile)(props.dest, cssList.join('\n'));
 };
 exports.minifyScriptsForCSS = minifyScriptsForCSS;
 //# sourceMappingURL=minifyScriptsForCSS.js.map

lib/minifier/parseScripts.js

@@ -13,6 +13,3 @@ "use strict";
         const code = await readFile(file, 'utf8');
-        const data = (0, parseCSSModuleScript_1.parseCSSModuleScript)({
-            code,
-            cssKey,
-        });
+        const data = (0, parseCSSModuleScript_1.parseCSSModuleScript)({ code, cssKey });
         for (const { css } of data.ranges) {
@@ -19,0 +16,0 @@ for (const token of (0, tokenizeString_1.tokenizeString)(css)) {

lib/runner/Session.js

@@ -16,3 +16,3 @@ "use strict";
 const deleteFile_1 = require("../util/deleteFile");
-const writeFilep_1 = require("../util/writeFilep");
+const updateFile_1 = require("../util/updateFile");
 const serialize_1 = require("../util/serialize");
@@ -89,2 +89,3 @@ const { copyFile } = fs.promises;
         }
+        this.log(`written: ${output.path}`);
     }
@@ -106,2 +107,3 @@ async waitCurrentTasks() {
         const onError = this.onError.bind(this);
+        let postUpdate = async () => await Promise.resolve();
         this.watcher = chokidar.watch(this.configuration.path, this.configuration.chokidar)
@@ -115,11 +117,11 @@ .on('error', onError)
             }
-            promise.catch(onError);
+            promise.then(postUpdate).catch(onError);
         })
             .on('change', (file, stats) => {
             this.log(`[change] ${file}`);
-            this.onChange(file, stats).catch(onError);
+            this.onChange(file, stats).then(postUpdate).catch(onError);
         })
             .on('unlink', (file) => {
             this.log(`[unlink] ${file}`);
-            this.onUnlink(file).catch(onError);
+            this.onUnlink(file).then(postUpdate).catch(onError);
         });
@@ -129,3 +131,9 @@ await (0, waitForInitialScanCompletion_1.waitForInitialScanCompletion)(this.watcher);
         this.initialTask = null;
-        if (!this.configuration.watch) {
+        if (this.configuration.watch) {
+            if (this.configuration.output.type === 'css') {
+                await this.minifyScripts();
+                postUpdate = this.minifyScripts.bind(this);
+            }
+        }
+        else {
             await this.minifyScripts();
@@ -168,3 +176,3 @@ await this.stop();
         const { dest, code } = await this.processCSS(file);
-        await (0, writeFilep_1.writeFilep)(dest, code);
+        await (0, updateFile_1.updateFile)(dest, code);
         this.log(`written: ${dest}`);
@@ -171,0 +179,0 @@ }

lib/runner/Session.test.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const path = require("path");
+const fs = require("fs");
 const stream = require("stream");
+const events = require("events");
 const ava_1 = require("ava");
+const postcss = require("postcss");
 const scss = require("postcss-scss");
@@ -11,4 +14,21 @@ const animationParser = require("@hookun/parse-animation-shorthand");
 const runCode_for_test_1 = require("../util/runCode.for-test");
-const writeFilep_1 = require("../util/writeFilep");
+const updateFile_1 = require("../util/updateFile");
+const __1 = require("..");
 const test = ava_1.default;
+const isRule = (input) => input.type === 'rule';
+const createMessageListener = () => {
+    const messageListener = new events.EventEmitter();
+    const waitForMessage = async (expected) => await new Promise((resolve, reject) => {
+        const timeoutId = setTimeout(() => reject(new Error(`Timeout: waiting ${expected}`)), 1000);
+        const onData = (message) => {
+            if (typeof expected === 'string' ? message.includes(expected) : expected.test(message)) {
+                clearTimeout(timeoutId);
+                messageListener.removeListener('message', onData);
+                resolve();
+            }
+        };
+        messageListener.on('message', onData);
+    });
+    return { messageListener, waitForMessage };
+};
 test.beforeEach(async (t) => {
@@ -148,3 +168,3 @@ t.context.directory = await (0, createTemporaryDirectory_1.createTemporaryDirectory)();
             const filePath = path.join(t.context.directory, file.path);
-            await (0, writeFilep_1.writeFilep)(filePath, file.content.join('\n'));
+            await (0, updateFile_1.updateFile)(filePath, file.content.join('\n'));
         }));
@@ -183,2 +203,171 @@ const helper = path.join(t.context.directory, 'helper.js');
 });
+test('ignore output even if it is covered by the "include" pattern.', async (t) => {
+    const files = [
+        {
+            path: 'input1.css',
+            content: [
+                '.a1 {color: a1; width: 10%}',
+                '.b1 {color: b1; width: 20%}',
+            ],
+        },
+        {
+            path: 'input2.css',
+            content: [
+                '@charset "utf-8";',
+                '.a2 {color: a2; width: 30%}',
+                '.b2 {color: b2; width: 40%}',
+            ],
+        },
+    ];
+    await Promise.all(files.map(async (file) => {
+        await (0, updateFile_1.updateFile)(path.join(t.context.directory, file.path), file.content.join('\n'));
+    }));
+    const cssPath = path.join(t.context.directory, 'output.css');
+    const writable = new stream.Writable({
+        write(chunk, _encoding, callback) {
+            t.log(`${chunk}`.trim());
+            callback();
+        },
+    });
+    const session = t.context.session = new Session_1.Session({
+        css: cssPath,
+        include: t.context.directory,
+        watch: false,
+        stdout: writable,
+        stderr: writable,
+    });
+    await session.start();
+    await t.throwsAsync(async () => {
+        await fs.promises.stat(`${cssPath}.js`);
+    }, { code: 'ENOENT' });
+    await session.start();
+    await t.throwsAsync(async () => {
+        await fs.promises.stat(`${cssPath}.js`);
+    }, { code: 'ENOENT' });
+    const outputScriptPath1 = path.join(t.context.directory, 'input1.css.js');
+    const outputScript1 = await fs.promises.readFile(outputScriptPath1, 'utf-8');
+    t.log(`==== outputScript1 ====\n${outputScript1.trim()}\n===================`);
+    t.false(outputScript1.includes('addStyle'));
+    const result1 = await (0, runCode_for_test_1.runCode)(outputScriptPath1);
+    t.deepEqual(result1.className, {
+        a1: '_0',
+        b1: '_1',
+    });
+    const outputScriptPath2 = path.join(t.context.directory, 'input2.css.js');
+    const outputScript2 = await fs.promises.readFile(outputScriptPath2, 'utf-8');
+    t.log(`==== outputScript2 ====\n${outputScript2.trim()}\n===================`);
+    t.false(outputScript2.includes('addStyle'));
+    const result2 = await (0, runCode_for_test_1.runCode)(outputScriptPath2);
+    t.deepEqual(result2.className, {
+        a2: '_2',
+        b2: '_3',
+    });
+    const resultCSS = await fs.promises.readFile(cssPath, 'utf8');
+    t.log(`==== resultCSS ====\n${resultCSS}\n===================`);
+    const root = postcss.parse(resultCSS);
+    t.log(root.toJSON());
+    t.truthy(root.nodes.find((node) => isRule(node) && node.selector === `.${result1.className.a1}`));
+    t.truthy(root.nodes.find((node) => isRule(node) && node.selector === `.${result1.className.b1}`));
+    t.truthy(root.nodes.find((node) => isRule(node) && node.selector === `.${result2.className.a2}`));
+    t.truthy(root.nodes.find((node) => isRule(node) && node.selector === `.${result2.className.b2}`));
+});
+test('watch', async (t) => {
+    const cssPath = path.join(t.context.directory, '/components/style.css');
+    const helper = path.join(t.context.directory, 'helper.js');
+    const codePath = `${cssPath}${path.extname(helper)}`;
+    const { messageListener, waitForMessage } = createMessageListener();
+    const writable = new stream.Writable({
+        write(chunk, _encoding, callback) {
+            const message = `${chunk}`.trim();
+            messageListener.emit('message', message);
+            t.log(message);
+            callback();
+        },
+    });
+    t.context.session = new Session_1.Session({
+        helper,
+        watch: true,
+        include: t.context.directory,
+        stdout: writable,
+        stderr: writable,
+    });
+    await (0, updateFile_1.updateFile)(cssPath, [
+        '@keyframes foo {0%{color:red}100%{color:green}}',
+        '.foo#bar {animation: 1s 0.5s linear infinite foo}',
+    ].join(''));
+    t.context.session.start().catch(t.fail);
+    await waitForMessage(`written: ${codePath}`);
+    const result1 = await (0, runCode_for_test_1.runCode)(codePath);
+    await (0, updateFile_1.updateFile)(cssPath, [
+        '@keyframes foo {0%{color:red}100%{color:green}}',
+        '.foo#bar {animation: 2s 1s linear infinite foo}',
+    ].join(''));
+    await waitForMessage(`written: ${codePath}`);
+    const result2 = await (0, runCode_for_test_1.runCode)(codePath);
+    await (0, __1.deleteFile)(cssPath);
+    await waitForMessage(`deleted: ${codePath}`);
+    await t.throwsAsync(async () => await fs.promises.stat(codePath), { code: 'ENOENT' });
+    t.deepEqual(result1.className, result2.className);
+    t.deepEqual(result1.id, result2.id);
+    t.deepEqual(result1.keyframes, result2.keyframes);
+    const nodes1 = result1.root.nodes || [];
+    const nodes2 = result2.root.nodes || [];
+    {
+        const atRule1 = nodes1[0];
+        const atRule2 = nodes2[0];
+        t.is(atRule1.name, 'keyframes');
+        t.is(atRule2.name, 'keyframes');
+        t.is(atRule1.params, result1.keyframes.foo);
+        t.is(atRule1.params, result1.keyframes.foo);
+    }
+    {
+        const rule1 = nodes1[1];
+        const rule2 = nodes2[1];
+        t.is(rule1.selector, `.${result1.className.foo}#${result1.id.bar}`);
+        t.is(rule2.selector, `.${result1.className.foo}#${result1.id.bar}`);
+        const declarations1 = (rule1.nodes || []);
+        const declarations2 = (rule2.nodes || []);
+        t.is(declarations1.length, 1);
+        t.is(declarations1[0].prop, 'animation');
+        t.is(declarations2.length, 1);
+        t.is(declarations2[0].prop, 'animation');
+        t.deepEqual(animationParser.parse(declarations1[0].value), animationParser.parse(`1s 0.5s linear infinite ${result1.keyframes.foo}`));
+        t.deepEqual(animationParser.parse(declarations2[0].value), animationParser.parse(`2s 1s linear infinite ${result1.keyframes.foo}`));
+    }
+});
+test('watch-css', async (t) => {
+    const cssPath = path.join(t.context.directory, '/components/style.css');
+    const cssOutputPath = path.join(t.context.directory, 'output.css');
+    const { messageListener, waitForMessage } = createMessageListener();
+    const writable = new stream.Writable({
+        write(chunk, _encoding, callback) {
+            const message = `${chunk}`.trim();
+            messageListener.emit('message', message);
+            t.log(message);
+            callback();
+        },
+    });
+    t.context.session = new Session_1.Session({
+        css: cssOutputPath,
+        watch: true,
+        include: t.context.directory,
+        stdout: writable,
+        stderr: writable,
+    });
+    await (0, updateFile_1.updateFile)(cssPath, [
+        '@keyframes foo {0%{color:red}100%{color:green}}',
+        '.foo#bar {animation: 1s 0.5s linear infinite foo}',
+    ].join(''));
+    await t.context.session.start().catch(t.fail);
+    const outputCss1 = await fs.promises.readFile(cssOutputPath, 'utf-8');
+    await (0, updateFile_1.updateFile)(cssPath, [
+        '@keyframes foo {0%{color:red}100%{color:green}}',
+        '.foo#bar {animation: 2s 1s linear infinite foo}',
+    ].join(''));
+    await waitForMessage(`written: ${cssOutputPath}`);
+    const outputCss2 = await fs.promises.readFile(cssOutputPath, 'utf-8');
+    t.log('outputCss1', outputCss1);
+    t.log('outputCss2', outputCss2);
+    t.true(outputCss1 !== outputCss2);
+});
 //# sourceMappingURL=Session.test.js.map

lib/util/deleteFile.test.js

@@ -8,3 +8,3 @@ "use strict";
 const deleteFile_1 = require("./deleteFile");
-const writeFilep_1 = require("./writeFilep");
+const updateFile_1 = require("./updateFile");
 const { stat, mkdir } = fs.promises;
@@ -14,3 +14,3 @@ (0, ava_1.default)('delete a file', async (t) => {
     const filePath = path.join(testDirectory, 'file');
-    await (0, writeFilep_1.writeFilep)(filePath, filePath);
+    await (0, updateFile_1.updateFile)(filePath, filePath);
     t.true((await stat(filePath)).isFile());
@@ -38,3 +38,3 @@ await (0, deleteFile_1.deleteFile)(filePath);
     const filePath = path.join(directory, 'file');
-    await (0, writeFilep_1.writeFilep)(path.join(directory, 'file'), directory);
+    await (0, updateFile_1.updateFile)(path.join(directory, 'file'), directory);
     t.true((await stat(filePath)).isFile());
@@ -41,0 +41,0 @@ await (0, deleteFile_1.deleteFile)(rootDirectory);

lib/util/runCode.for-test.js

@@ -9,6 +9,6 @@ "use strict";
 const createSandbox_for_test_1 = require("../util/createSandbox.for-test");
-const writeFilep_1 = require("./writeFilep");
+const updateFile_1 = require("./updateFile");
 const runCode = async (file) => {
     const testCodePath = `${file}-import.js`;
-    await (0, writeFilep_1.writeFilep)(testCodePath, `import * as imported from './${path.basename(file)}';exports = imported;`);
+    await (0, updateFile_1.updateFile)(testCodePath, `import * as imported from './${path.basename(file)}';exports = imported;`);
     const bundle = await rollup.rollup({ input: testCodePath });
@@ -15,0 +15,0 @@ const { output: [output, undef] } = await bundle.generate({ format: 'es' });

package.json

 {
     "name": "esifycss",
-    "version": "1.4.31",
+    "version": "1.4.32",
     "description": "Generates .js or .ts exports class names and custom properties",
@@ -5,0 +5,0 @@ "author": {

No alert changes

Improved metrics

Total package byte prevSize

233099

increased by3%

Number of package files

232

increased by1.31%

Lines of code

3101

increased by2.51%

Number of low supply chain risk alerts

14

decreased by-6.67%

No dependency changes