@adamlui/scss-to-css 1.4.1 → 1.5.0

package/README.md

@@ -4,7 +4,7 @@
 
 <a href="https://www.npmjs.com/package/@adamlui/scss-to-css"><img height=31 src="https://img.shields.io/npm/dt/%40adamlui%2Fscss-to-css?logo=npm&logoColor=white&labelColor=464646&style=for-the-badge"></a>
 <a href="#%EF%B8%8F-mit-license"><img height=31 src="https://img.shields.io/badge/License-MIT-fcde7b.svg?logo=internetarchive&logoColor=white&labelColor=464646&style=for-the-badge"></a>
-<a href="https://www.npmjs.com/package/@adamlui/scss-to-css?activeTab=versions"><img height=31 src="https://img.shields.io/badge/Latest_Build-1.4.1-fc7811.svg?logo=icinga&logoColor=white&labelColor=464646&style=for-the-badge"></a>
+<a href="https://www.npmjs.com/package/@adamlui/scss-to-css?activeTab=versions"><img height=31 src="https://img.shields.io/badge/Latest_Build-1.5.0-fc7811.svg?logo=icinga&logoColor=white&labelColor=464646&style=for-the-badge"></a>
 <a href="https://www.npmjs.com/package/@adamlui/scss-to-css?activeTab=code"><img height=31 src="https://img.shields.io/npm/unpacked-size/%40adamlui%2Fscss-to-css?style=for-the-badge&logo=ebox&logoColor=white&labelColor=464646"></a>
 
 <img height=8px width="100%" src="https://github.com/adamlui/js-utils/blob/main/docs/images/aqua-separator.png">
@@ -28,9 +28,11 @@ npm install -D @adamlui/scss-to-css
 The basic **global command** is:
 
 ```
-scsstocss
+scss-to-css
 ```
 
+**💡 Note:** Pass `-n` or `--dry-run` to only see what files will be processed.
+
 Sample output:
 
 <img src="https://github.com/adamlui/js-utils/blob/main/scss-to-css/media/images/sample-output.png">
@@ -42,7 +44,7 @@ Sample output:
 To specify **input/output** paths:
    
 ```
-scsstocss [input_path] [output_path]
+scss-to-css [input_path] [output_path]
 ```
 
 - `[input_path]`: Path to SCSS file or directory containing SCSS files to be compiled, relative to the current working directory. 
@@ -52,7 +54,7 @@ scsstocss [input_path] [output_path]
 
 #
 
-To use as a **package script**, edit your project's `package.json` like this:
+To use as a **package script**, in your project's `package.json`:
 
 ```json
   "scripts": {
@@ -60,7 +62,7 @@ To use as a **package script**, edit your project's `package.json` like this:
   },
 ```
 
-Replace `<scss-to-css-cmd>` with `scsstocss` + optional args. Then, `npm run build:css` can be used to run the command.
+Replace `<scss-to-css-cmd>` with `scss-to-css` + optional args. Then, `npm run build:css` can be used to run the command.
 <br><br>
 
 ## 📃 Example commands:
@@ -68,27 +70,35 @@ Replace `<scss-to-css-cmd>` with `scsstocss` + optional args. Then, `npm run bui
 - Compile all SCSS files in the **current directory** (outputs to `css/`):
 
    ```
-   scsstocss
+   scss-to-css
    ```
 
 - Compile all SCSS files in a **specific directory** (outputs to `path/to/your/directory/css/`):
 
    ```
-   scsstocss path/to/your/directory
+   scss-to-css path/to/your/directory
    ```
 
 - Compile a **specific file** (outputs to `path/to/your/css/file.min.css`):
 
    ```
-   scsstocss path/to/your/file.scss
+   scss-to-css path/to/your/file.scss
    ```
 
 - Specify both **input and output** directories (outputs to `output_folder/`):
 
    ```
-   scsstocss input_folder output_folder
+   scss-to-css input_folder output_folder
    ```
 
+**💡 Note:** Output CSS is minified unless `-M` or `--no-minify` is passed.
+<br><br>
+
+## 💖 Support
+
+Please consider giving a ⭐ on [GitHub](https://github.com/adamlui/js-utils) if this helped you!
+<br><br>
+
 ## 🏛️ MIT License
 
 **Copyright (c) 2024 [Adam Lui](https://github.com/adamlui)**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamlui/scss-to-css",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Recursively compile all SCSS files into minified CSS",
   "author": {
     "name": "Adam Lui",

package/scss-to-css.js

@@ -15,20 +15,23 @@ const nc = '\x1b[0m', // no color
 if (process.argv.some(arg => /^--?h(?:elp)?$/.test(arg))) {
 
     // Print help
-    console.info(`\n${by}scsstocss [inputPath] [outputPath] [options]${nc}`);
+    console.info(`\n${by}scss-to-css [inputPath] [outputPath] [options]${nc}`);
     console.info('\nPath arguments:');
-    printWrappedMsg(' [inputPath]                 '
+    printWrappedMsg(' [inputPath]                  '
         + 'Path to SCSS file or directory containing SCSS files to be compiled,'
         + ' relative to the current working directory.');
-    printWrappedMsg(' [outputPath]                '
+    printWrappedMsg(' [outputPath]                 '
         + 'Path to file or directory where CSS + sourcemap files will be stored,'
         + ' relative to original file location (if not provided, css/ is used).');
     console.info('\nConfig options:');
-    printWrappedMsg(' -dd, --include-dotfolders   Include dotfolders in file search.');
-    printWrappedMsg(' -S, --disable-source-maps   Prevent source maps from being generated.');
+    printWrappedMsg(' -n, --dry-run                Don\'t actually compile the file(s),'
+        + ' just show if they will be processed.');
+    printWrappedMsg(' -dd, --include-dotfolders    Include dotfolders in file search.');
+    printWrappedMsg(' -S, --disable-source-maps    Prevent source maps from being generated.');
+    printWrappedMsg(' -M, --no-minify              Disable minification of output CSS.');
     console.info('\nInfo commands:');
-    printWrappedMsg(' -h, --help                  Display this help screen.');
-    printWrappedMsg(' -v, --version               Show version number.');
+    printWrappedMsg(' -h, --help                   Display this help screen.');
+    printWrappedMsg(' -v, --version                Show version number.');
 
 // Show VERSION number if -v or --version passed
 } else if (process.argv.some(arg => /^--?ve?r?s?i?o?n?$/.test(arg))) {
@@ -48,16 +51,20 @@ if (process.argv.some(arg => /^--?h(?:elp)?$/.test(arg))) {
     if (inputArg && !fs.existsSync(inputPath)) {
         console.error(`\n${br}Error: First arg must be an existing file or directory.`
             + `\n${ inputPath } does not exist.${nc}`
-            + '\n\nExample valid command: \n>> scsstocss . output.min.css');
+            + `\n\n${bg}Example valid command: \n>> scss-to-css . output.min.css${nc}`
+            + `\n\n${by}For all command options: \n>> scss-to-css --help${nc}`);
         process.exit(1);
     }
 
     // Load flag settings
     const config = { 
+        dryRun: process.argv.some(arg => /^--?(?:n|dry-?run)$/.test(arg)),
         includeDotFolders: process.argv.some(arg =>
             /^--?(?:dd|(?:include-)?dot-?(?:folder|dir(?:ector(?:y|ie))?)s?)$/.test(arg)),
         disableSourceMaps: process.argv.some(arg =>
-            /^--?(?:S|(?:exclude|disable)-so?u?rce?-?maps?)$/.test(arg))
+            /^--?(?:S|(?:exclude|disable)-so?u?rce?-?maps?)$/.test(arg)),
+        noMinify: process.argv.some(arg =>
+            /^--?(?:M|(?:disable|no)-minif(?:y|ication))$/.test(arg))
     };
 
     // Recursively find all eligible SCSS files or arg-passed file
@@ -75,48 +82,59 @@ if (process.argv.some(arg => /^--?h(?:elp)?$/.test(arg))) {
         });
     })(inputPath);
 
-    // Compile SCSS files to CSS
-    let cssGenCnt = 0, srcMapGenCnt = 0;
-    console.log(''); // line break before first log
-    scssFiles.forEach(scssPath => {
-        console.info(`Compiling ${ scssPath }...`);
-        try { // to compile it
-            const outputDir = path.join(
-                path.dirname(scssPath), // path of file to be minified
-                /(?:src|s[ac]ss)$/.test(path.dirname(scssPath)) ? '../css' // + ../css/ if in *(src|sass|scss)/
-                    : outputArg.endsWith('.css') ? path.dirname(outputArg) // or path from file output arg
-                    : outputArg || 'css' // or path from folder output arg or css/ if no output arg passed
-            );
-            const outputFilename = (
-                outputArg.endsWith('.css') && inputArg.endsWith('.scss')
-                    ? path.basename(outputArg).replace(/(\.min)?\.css$/, '')
-                    : path.basename(scssPath, '.scss')
-            ) + '.min.css';
-            const outputPath = path.join(outputDir, outputFilename),
-                  compileResult = sass.compile(scssPath, { style: 'compressed', sourceMap: !config.disableSourceMaps });
-            if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });
-            fs.writeFileSync(outputPath, compileResult.css, 'utf8'); cssGenCnt++;
-            if (!config.disableSourceMaps) {
-                fs.writeFileSync(outputPath + '.map', JSON.stringify(compileResult.sourceMap), 'utf8');
-                srcMapGenCnt++;
+    if (scssFiles.length === 0) { // print nothing found
+        console.info(`\n${by}No SCSS files found.${nc}`);
+
+    } else if (config.dryRun) { // print files to be processed
+        console.info(`\n${by}SCSS files to be compiled:${nc}`);
+        scssFiles.forEach(file => console.info(file));
+
+    } else { // actually compile SCSS files
+
+        let cssGenCnt = 0, srcMapGenCnt = 0;
+        console.log(''); // line break before first log
+        scssFiles.forEach(scssPath => {
+            console.info(`Compiling ${ scssPath }...`);
+            try { // to compile it
+                const outputDir = path.join(
+                    path.dirname(scssPath), // path of file to be minified
+                    /(?:src|s[ac]ss)$/.test(path.dirname(scssPath)) ? '../css' // + ../css/ if in *(src|sass|scss)/
+                        : outputArg.endsWith('.css') ? path.dirname(outputArg) // or path from file output arg
+                        : outputArg || 'css' // or path from folder output arg or css/ if no output arg passed
+                );
+                const outputFilename = (
+                    outputArg.endsWith('.css') && inputArg.endsWith('.scss')
+                        ? path.basename(outputArg).replace(/(\.min)?\.css$/, '')
+                        : path.basename(scssPath, '.scss')
+                ) + '.min.css';
+                const outputPath = path.join(outputDir, outputFilename),
+                      compileResult = sass.compile(scssPath, {
+                          style: config.noMinify ? 'expanded' : 'compressed',
+                          sourceMap: !config.disableSourceMaps });
+                if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });
+                fs.writeFileSync(outputPath, compileResult.css, 'utf8'); cssGenCnt++;
+                if (!config.disableSourceMaps) {
+                    fs.writeFileSync(outputPath + '.map', JSON.stringify(compileResult.sourceMap), 'utf8');
+                    srcMapGenCnt++;
+                }
+            } catch (err) {
+                console.error(`${br}Error compiling ${ scssPath }: ${ err.message }${nc}`);
             }
-        } catch (err) {
-            console.error(`${br}Error compiling ${ scssPath }: ${ err.message }${nc}`);
-        }
-    });
+        });
 
-    // Print final summary
-    if (cssGenCnt) {
-        console.info(`\n${bg}Compilation complete!${nc}`);
-        console.info(`${ cssGenCnt } CSS file${ cssGenCnt > 1 ? 's' : '' }`
-            + ( srcMapGenCnt ? ` + ${ srcMapGenCnt } source map${ srcMapGenCnt > 1 ? 's' : '' }` : '' )
-            + ' generated.');
-    } else console.info(`${by}No SCSS files found.${nc}`);
+        // Print final summary
+        if (cssGenCnt) {
+            console.info(`\n${bg}Compilation complete!${nc}`);
+            console.info(`${ cssGenCnt } CSS file${ cssGenCnt > 1 ? 's' : '' }`
+                + ( srcMapGenCnt ? ` + ${ srcMapGenCnt } source map${ srcMapGenCnt > 1 ? 's' : '' }` : '' )
+                + ' generated.');
+        } else console.info(`${by}No SCSS files processed successfully.${nc}`);
+    }
 }
 
-function printWrappedMsg(msg) { // truncates msg, indents 2nd+ lines
+function printWrappedMsg(msg) { // wraps msg, indents 2nd+ lines
     const terminalWidth = process.stdout.columns || 80,
-          indentation = 29, lines = [], words = msg.match(/\S+|\s+/g);
+          indentation = 30, lines = [], words = msg.match(/\S+|\s+/g);
 
     // Split msg into lines of appropriate lengths
     let currentLine = '';