@master/css-cli 2.0.0-rc.68 → 2.0.0-rc.70

package/README.md

@@ -20,11 +20,11 @@
             <img alt="NPM Version" src="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github">
         </picture>
     </a>
-    <a aria-label="NPM Package" href="https://www.npmjs.com/package/@master/create-css">
+    <a aria-label="NPM Package" href="https://www.npmjs.com/package/@master/css-cli">
         <picture>
-            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dm/@master/create-css?color=212022&label=%20&logo=npm&style=for-the-badge">
-            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dm/@master/create-css?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
-            <img alt="NPM package ( download / month )" src="https://img.shields.io/npm/dm/@master/create-css?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dm/@master/css-cli?color=212022&label=%20&logo=npm&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dm/@master/css-cli?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
+            <img alt="NPM package ( download / month )" src="https://img.shields.io/npm/dm/@master/css-cli?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
         </picture>
     </a>
     <a aria-label="Discord Community" href="https://discord.gg/sZNKpAAAw6">
@@ -41,16 +41,50 @@
             <img alt="Follow @mastercorg" src="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
         </picture>
     </a>
-    <a aria-label="Github Actions" href="https://github.com/master-co/css/actions/workflows/release.yml">
+    <a aria-label="Github Actions" href="https://github.com/master-co/css/actions/workflows/ci-release.yml">
         <picture>
-            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=rc&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge">
-            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
-            <img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/ci-release.yml?branch=rc&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/ci-release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+            <img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/master-co/css/ci-release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
         </picture>
     </a>
 </p>
 
 </div>
 
-## Documentation
-Check out the official [documentation](https://rc.css.master.co/reference/cli).
+## Installation
+
+```bash
+npm install -D @master/css-cli
+```
+
+Run the package binary directly with `npx @master/css-cli`. The package does not expose `mcss` or `mastercss` aliases.
+
+## Commands
+
+### `npx @master/css-cli [source paths]`
+
+Scan source files, detect Master CSS classes, generate CSS rules, and write the generated CSS file.
+
+```bash
+npx @master/css-cli index.html main.js
+```
+
+When no source paths are passed, the CLI scans the current project with the default scanner `include` and `exclude` options.
+
+```bash
+npx @master/css-cli
+```
+
+Options:
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `-o, --output <path>` | `string` | `master.css` | Generated CSS output path. |
+| `-v, --verbose <level>` | `number` | `1` | Logging level. Use `0` to silence terminal output. |
+| `-w, --watch` | `boolean` | `false` | Watch files and rebuild continuously. |
+
+## Related docs
+
+- [Static rendering guide](https://rc.css.master.co/guide/installation)
+- [Scanner package](../scanner)

package/dist/bin/index.mjs

@@ -1,4 +1,4 @@
 #!/usr/bin/env node
 import runProgram from '../core.mjs';
 
-runProgram();
+await runProgram();

package/dist/core.mjs

@@ -3,18 +3,33 @@ import { Command } from 'commander';
 import { readJSONFileSync } from '@techor/fs';
 import { dirname } from 'path';
 import { fileURLToPath } from 'url';
-import commandExtract from './commands/extract.mjs';
-import commandRender from './commands/render.mjs';
+import runScan, { DEFAULT_SCAN_OUTPUT } from './scan.mjs';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const pkg = readJSONFileSync(resolve(__dirname, '../package.json'));
-function runProgram(argv = process.argv) {
+const __filename$1 = fileURLToPath(import.meta.url);
+const __dirname$1 = dirname(__filename$1);
+const pkg = readJSONFileSync(resolve(__dirname$1, '../package.json'));
+const removedCommands = new Set([
+    'extract',
+    'render',
+    'scan'
+]);
+function errorRemovedCommand(program, command) {
+    program.error(`The "${command}" command was removed. Use "${pkg.name}" directly, for example "${pkg.name} -w".`);
+}
+async function runProgram(argv = process.argv) {
     const program = new Command();
-    program.name(pkg.name).description(pkg.description).version(pkg.version || '0.0.0');
-    commandExtract(program);
-    commandRender(program);
-    program.parse(argv);
+    program.name(pkg.name).description(pkg.description).version(pkg.version || '0.0.0').argument('[source paths...]', 'The glob pattern paths to scan sources').option('-w, --watch', 'Watch file changes and generate CSS rules.').option('-o, --output <path>', 'Specify your CSS file output path', DEFAULT_SCAN_OUTPUT).option('-v, --verbose <level>', 'Verbose logging 0~N', '1').option('--no-export', 'Print only CSS results.').action((sourcePaths, options)=>{
+        const removedCommand = sourcePaths[0];
+        if (removedCommand && removedCommands.has(removedCommand)) {
+            errorRemovedCommand(program, removedCommand);
+        }
+        return runScan(sourcePaths, options);
+    });
+    const firstArgument = argv[2];
+    if (firstArgument && removedCommands.has(firstArgument)) {
+        errorRemovedCommand(program, firstArgument);
+    }
+    await program.parseAsync(argv);
     return program;
 }
 

package/dist/scan.mjs

@@ -0,0 +1,181 @@
+import { createExtractedCSS, registerStyleCSSSource } from '@master/css-stylesheet';
+import { findCSSManifestEntryFiles } from '@master/css-project/entries';
+import log from '@techor/log';
+import { explorePathsSync } from '@techor/glob';
+import bytes from 'bytes';
+import chokidar from 'chokidar';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const DEFAULT_SCAN_OUTPUT = 'master.css';
+const DEFAULT_SOURCE_PATTERNS = [
+    '**/*.{html,htm,js,jsx,mjs,cjs,ts,tsx,mts,cts,svelte,astro,vue,md,mdx,pug,php}'
+];
+async function registerManagedCSSEntries(scanner, styleCSSSources) {
+    styleCSSSources.clear();
+    for (const entry of (await findCSSManifestEntryFiles(scanner.cwd))){
+        await registerStyleCSSSource(scanner, styleCSSSources, entry, fs.readFileSync(entry, 'utf8'), {
+            projectDir: scanner.cwd
+        });
+    }
+    scanner.resetDependencies = [
+        ...new Set(Array.from(styleCSSSources.values()).flatMap((source)=>source.dependencies))
+    ];
+}
+function normalizeSourcePatterns(specifiedSourcePaths) {
+    return specifiedSourcePaths?.length ? specifiedSourcePaths : DEFAULT_SOURCE_PATTERNS;
+}
+function resolveSourcePaths(scanner, sourcePatterns, ignore = []) {
+    return explorePathsSync(sourcePatterns, {
+        cwd: scanner.cwd,
+        ignore
+    }).filter(Boolean);
+}
+async function scanSourceFile(scanner, source) {
+    const filepath = path.resolve(scanner.cwd, source);
+    await scanner.scan(source, fs.readFileSync(filepath, 'utf8'));
+}
+async function scanSourceFiles(scanner, sourcePaths) {
+    await Promise.all(sourcePaths.map((source)=>scanSourceFile(scanner, source)));
+}
+async function prepareScanner(scanner, styleCSSSources, sourcePaths) {
+    await registerManagedCSSEntries(scanner, styleCSSSources);
+    await scanSourceFiles(scanner, sourcePaths);
+}
+function exportCSS(scanner, css, filename = DEFAULT_SCAN_OUTPUT) {
+    const filepath = path.resolve(scanner.cwd, filename);
+    const dir = path.dirname(filepath);
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, {
+            recursive: true
+        });
+    }
+    fs.writeFileSync(filepath, css);
+    if (scanner.options.verbose) {
+        log.ok`**${filename}** exported ${bytes(css.length)}`;
+    }
+    scanner.emit('export', filename, filepath);
+}
+function formatWatchedPath(cwd, file) {
+    return path.isAbsolute(file) ? path.relative(cwd, file) : file;
+}
+async function waitForWatcherReady(watcher) {
+    await new Promise((resolve)=>watcher.once('ready', resolve));
+    // Let chokidar finish registering native watchers before callers mutate files.
+    await new Promise((resolve)=>setTimeout(resolve, 0));
+}
+async function runScan(specifiedSourcePaths = [], options = {}) {
+    const CSSScanner = (await import('@master/css-scanner')).default;
+    const { watch, output, verbose, cwd } = options;
+    const scanner = new CSSScanner({}, cwd);
+    const styleCSSSources = new Map();
+    const sourcePatterns = normalizeSourcePatterns(specifiedSourcePaths);
+    const writeOutput = async ()=>{
+        const css = await createExtractedCSS({
+            scanner,
+            styleCSSSources,
+            projectDir: scanner.cwd
+        });
+        if (options.export) {
+            exportCSS(scanner, css, output);
+        } else {
+            console.log(css);
+        }
+    };
+    scanner.on('init', (options)=>{
+        if (!specifiedSourcePaths.length) {
+            if (!options.exclude?.includes('**/node_modules/**')) {
+                options.exclude?.push('**/node_modules/**');
+            }
+            if (!options.exclude?.includes('node_modules')) {
+                options.exclude?.push('node_modules');
+            }
+        }
+        options.verbose = verbose ? +verbose : options.verbose;
+    });
+    await scanner.init();
+    const scanPaths = ()=>resolveSourcePaths(scanner, sourcePatterns, specifiedSourcePaths.length ? [] : scanner.options.exclude);
+    if (watch) {
+        const watchers = [];
+        let restarting = false;
+        let writing = Promise.resolve();
+        const queueWrite = ()=>{
+            writing = writing.then(writeOutput);
+            return writing;
+        };
+        const closeWatchers = async ()=>{
+            await Promise.all(watchers.splice(0).map((watcher)=>watcher.close()));
+        };
+        const startWatchers = async ()=>{
+            const sourcePaths = scanPaths();
+            if (sourcePaths.length) {
+                const sourceWatcher = chokidar.watch(sourcePaths, {
+                    cwd: scanner.cwd,
+                    ignoreInitial: true
+                });
+                sourceWatcher.on('add', (source)=>{
+                    void scanSourceFile(scanner, source).then(queueWrite);
+                });
+                sourceWatcher.on('change', (source)=>{
+                    void scanSourceFile(scanner, source).then(queueWrite);
+                });
+                watchers.push(sourceWatcher);
+                await waitForWatcherReady(sourceWatcher);
+            }
+            if (scanner.resetDependencies.length) {
+                const planWatcher = chokidar.watch(scanner.resetDependencies, {
+                    ignoreInitial: true
+                });
+                const handlePlanChange = async (resetDependency)=>{
+                    if (restarting) return;
+                    restarting = true;
+                    try {
+                        if (scanner.options.verbose) {
+                            log``;
+                            log`[change] **${formatWatchedPath(scanner.cwd, resetDependency)}**`;
+                        }
+                        await closeWatchers();
+                        await scanner.reset(scanner.customOptions, {
+                            emit: false
+                        });
+                        await prepareScanner(scanner, styleCSSSources, scanPaths());
+                        await queueWrite();
+                        await startWatchers();
+                        log``;
+                        log.t`Restart watching source changes`;
+                        scanner.emit('resetDependencyChange');
+                    } finally{
+                        restarting = false;
+                    }
+                };
+                planWatcher.on('add', (resetDependency)=>{
+                    void handlePlanChange(resetDependency);
+                });
+                planWatcher.on('change', (resetDependency)=>{
+                    void handlePlanChange(resetDependency);
+                });
+                planWatcher.on('unlink', (resetDependency)=>{
+                    void handlePlanChange(resetDependency);
+                });
+                watchers.push(planWatcher);
+                await waitForWatcherReady(planWatcher);
+            }
+        };
+        process.once('SIGTERM', ()=>{
+            void closeWatchers().finally(()=>process.exit(0));
+        });
+        process.once('SIGINT', ()=>{
+            void closeWatchers().finally(()=>process.exit(0));
+        });
+        await prepareScanner(scanner, styleCSSSources, scanPaths());
+        await queueWrite();
+        await startWatchers();
+        log``;
+        log.t`Start watching source changes`;
+    } else {
+        await prepareScanner(scanner, styleCSSSources, scanPaths());
+        await writeOutput();
+    }
+}
+
+export { DEFAULT_SCAN_OUTPUT, runScan as default };

package/package.json

@@ -1 +1 @@
-{"name":"@master/css-cli","scripts":{"build":"techor build \"src/**/*.ts\" --formats esm","dev":"pnpm build --watch","lint":"eslint","type-check":"tsc --noEmit","test":"vitest"},"type":"module","license":"MIT","description":"Master CSS CLI","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/cli"},"keywords":["cli","css","mastercss"],"bin":{"mcss":"./dist/bin/index.mjs","mastercss":"./dist/bin/index.mjs"},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css":"^2.0.0-rc.68","@master/css-explore-config":"^2.0.0-rc.68","@master/css-extractor":"^2.0.0-rc.68","@master/css-server":"^2.0.0-rc.68","@techor/extend":"^3.2.0","@techor/fs":"^3.2.0","@techor/glob":"^3.2.0","@techor/log":"^3.2.0","bytes":"^3.1.2","commander":"^12.0.0","minimatch":"^9.0.3","pretty-hrtime":"^1.0.3"},"devDependencies":{"@types/pretty-hrtime":"^1.0.3","fast-glob":"^3.3.2","shared":"^2.0.0-rc.68"},"version":"2.0.0-rc.68"}
+{"name":"@master/css-cli","scripts":{"build":"techor build \"src/**/*.ts\" --formats esm","dev":"pnpm build --watch","lint":"eslint","type-check":"tsc --noEmit","test":"vitest"},"type":"module","license":"MIT","description":"Master CSS CLI","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/cli"},"keywords":["cli","css","mastercss"],"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css":"^2.0.0-rc.70","@master/css-project":"^2.0.0-rc.70","@master/css-scanner":"^2.0.0-rc.70","@master/css-stylesheet":"^2.0.0-rc.70","@techor/fs":"^3.2.5","@techor/glob":"^3.2.5","@techor/log":"^3.2.5","bytes":"^3.1.2","chokidar":"^5.0.0","commander":"^14.0.3"},"devDependencies":{"@master/css-lexer":"^2.0.0-rc.70","@types/bytes":"^3.1.5","upath":"^2.0.1"},"version":"2.0.0-rc.70"}

package/dist/commands/extract.mjs

@@ -1,54 +0,0 @@
-import { options } from '@master/css-extractor';
-import log from '@techor/log';
-
-var commandExtract = ((program)=>program.command('extract').argument('[source paths]', 'The glob pattern path to extract sources').option('-w, --watch', 'Watch file changed and generate CSS rules.').option('-o, --output <path>', 'Specify your CSS file output path', options.output).option('-v, --verbose <level>', 'Verbose logging 0~N', '1').option('--no-export', 'Print only CSS results.').option('--options <path>', 'Specify your extractor options sources', 'master.css-extractor').action(async function(specifiedSourcePaths, options) {
-        const CSSExtractor = (await import('@master/css-extractor')).default;
-        const { watch, output, verbose, cwd, options: customOptions } = options || {};
-        const extractor = new CSSExtractor(customOptions, cwd);
-        extractor.on('init', (options)=>{
-            if (specifiedSourcePaths?.length) {
-                options.include = specifiedSourcePaths;
-                options.exclude = [];
-            } else {
-                if (!options.exclude?.includes('**/node_modules/**')) {
-                    options.exclude?.push('**/node_modules/**');
-                }
-                if (!options.exclude?.includes('node_modules')) {
-                    options.exclude?.push('node_modules');
-                }
-            }
-            options.output = output;
-            options.verbose = verbose ? +verbose : options.verbose;
-        });
-        extractor.init();
-        if (watch) {
-            extractor.on('watchStart', async ()=>{
-                await extractor.prepare();
-                log``;
-                log.t`Start watching source changes`;
-            }).on('reset', async ()=>{
-                await extractor.reset();
-                log``;
-                log.t`Restart watching source changes`;
-            }).on('change', ()=>{
-                if (options?.export) {
-                    extractor.export();
-                } else {
-                    console.log(extractor.css.text);
-                }
-            }).on('watchClose', ()=>{
-                log``;
-                log.t`Stop watching source changes`;
-            });
-            await extractor.startWatch();
-        } else {
-            await extractor.prepare();
-            if (options?.export) {
-                extractor.export();
-            } else {
-                console.log(extractor.css.text);
-            }
-        }
-    }));
-
-export { commandExtract as default };

package/dist/commands/render.mjs

@@ -1,64 +0,0 @@
-import log from '@techor/log';
-import prettyHartime from 'pretty-hrtime';
-import { explorePathsSync } from '@techor/glob';
-import exploreConfig from '@master/css-explore-config';
-import { readFile, writeFileSync } from 'fs';
-import { brotliCompressSync } from 'zlib';
-import bytes from 'bytes';
-
-var commandRender = ((program)=>program.command('render').description('Scans HTML and injects generated CSS rules').argument('<source paths>', 'The path in glob patterns of the source of the HTML file').option('-c --config <path>', 'The source path of the Master CSS configuration', 'master.css').option('-a --analyze', 'Analyze injected CSS and HTML size ( brotli ) without writing to file').action(async function(filePatterns, options = {
-        config: 'master.css'
-    }) {
-        const { render } = await import('@master/css-server');
-        const sourcePaths = explorePathsSync(filePatterns);
-        if (sourcePaths.length) {
-            const renderStart = process.hrtime();
-            const col1Width = Math.max(sourcePaths.reduce((max, current)=>{
-                if (current.length > max.length) {
-                    return current;
-                } else {
-                    return max;
-                }
-            }).length + 10, 20);
-            const col2Width = 8;
-            const config = typeof options.config === 'string' ? exploreConfig({
-                name: options.config
-            }) : undefined;
-            log``;
-            log`${'  Source Files'.padEnd(col1Width)}${'CSS Size'.padStart(col2Width)}`;
-            await Promise.all(sourcePaths.map(async (filename)=>new Promise((resolve, reject)=>{
-                    readFile(filename, {
-                        encoding: 'utf-8'
-                    }, (err, content)=>{
-                        if (err) reject(err);
-                        const { html, css } = render(content, config);
-                        const renderedCSSText = css?.text;
-                        const renderedCSSSize = renderedCSSText ? options.analyze ? brotliCompressSync(renderedCSSText).length : renderedCSSText.length : 0;
-                        if (!options.analyze) {
-                            if (content !== html) {
-                                writeFileSync(filename, html);
-                            }
-                        }
-                        const prettifiedCSSSize = bytes(renderedCSSSize);
-                        log.ok`**${filename}**${' '.repeat(col1Width - filename.length - 2)}${prettifiedCSSSize?.padStart(col2Width)}`;
-                        resolve();
-                    });
-                })));
-            const renderTime = process.hrtime(renderStart);
-            if (options.analyze) {
-                log`${' '.repeat(col1Width)}${'(Brotli)'.padStart(col2Width)}`;
-                log``;
-                log.success`**${sourcePaths.length}** files analyzed in ${prettyHartime(renderTime).replace(' ', '')}`;
-                log``;
-                log.i`The CSS output will be smaller because it doesn't yet consider the bytes shared with HTML.`;
-            } else {
-                log`${' '.repeat(col1Width)}${'(Raw)'.padStart(col2Width)}`;
-                log``;
-                log.success`**${sourcePaths.length}** files rendered in ${prettyHartime(renderTime).replace(' ', '')}`;
-            }
-        } else {
-            log.i`No **${filePatterns}** files found`;
-        }
-    }));
-
-export { commandRender as default };