@adamlui/scss-to-css 1.0.1 → 1.1.1

package/README.md

@@ -1,81 +1,118 @@
-# { } scss-to-css.js 
-
-<a href="#%EF%B8%8F-mit-license"><img height=25 src="https://img.shields.io/badge/License-MIT-fcde7b.svg?logo=internetarchive&logoColor=white&labelColor=464646&style=for-the-badge"></a>
-
-Recursively compile all SCSS files into minified CSS.
-
-<img height=10px width="100%" src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/aqua.png">
-
-## ⚡ Installation
-
-- As a global utility:
-
-   ```
-   npm install -g @adamlui/scss-to-css
-   ```
-
-- As a dev dependency, from your project root:
-
-   ```
-   npm install -D @adamlui/scss-to-css
-   ```
-
-## 💻 Usage
-
-### Globally:
-
-Run the following command from a folder to recursively compile all SCSS:
-
-```
-scss-to-css
-```
-
-Sample output:
-
-![](https://raw.githubusercontent.com/adamlui/js-utils/main/scss-to-css/media/images/sample-output.png)
-
-### Dev dependency:
-
-1. Add build script to project's `package.json`:
-
-    ```json
-      "scripts": {
-        "build:css": "scss-to-css"
-      },
-    ```
-
-2. Run script from a folder to recursively compile all SCSS:
-
-    ```
-    npm run build:css
-    ```
-
-## 🏛️ MIT License
-
-**Copyright (c) 2024 [Adam Lui](https://github.com/adamlui)**
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-<br>
-
-<img height=6px width="100%" src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/aqua.png">
-
-<a href="https://github.com/adamlui">**Home**</a> /
-<a href="https://github.com/adamlui/js-utils/discussions">Discuss</a> /
-<a href="#--scss-to-cssjs">Back to top ↑</a>
+# { } scss-to-css.js 
+
+### Recursively compile all SCSS files into minified CSS.
+
+<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"><img height=31 src="https://img.shields.io/badge/Latest_Build-1.1.1-fc7811.svg?logo=npm&logoColor=white&labelColor=464646&style=for-the-badge"></a>
+
+<img height=8px width="100%" src="https://raw.githubusercontent.com/adamlui/js-utils/main/media/images/separators/aqua.png">
+
+## ⚡ Installation
+
+As a **global utility**:
+
+```
+npm install -g @adamlui/scss-to-css
+```
+
+As a **dev dependency**, from your project root:
+
+```
+npm install -D @adamlui/scss-to-css
+```
+
+## 💻 Usage
+
+The basic **global command** is:
+
+```
+scss-to-css
+```
+
+Sample output:
+
+<img src="https://github.com/adamlui/js-utils/blob/main/scss-to-css/media/images/sample-output.png">
+
+**💡 Note:** Source maps are also generated.
+
+#
+
+To specify **input/output** directories:
+   
+```
+scss-to-css <input_path> <output_path>
+```
+
+- `<input_path>`: Path to directory containing SCSS files to be compiled, relative to the current working directory. 
+- `<output_path>`: Path to directory where CSS/sourcemap files will be stored, relative to original file location. (If not provided, same location is used.)
+
+**💡 Note:** The paths can be either folders or specific files. If folders are passed, files will be processed recursively.
+
+#
+
+To use as a **package script**, edit your project's `package.json` like this:
+
+```json
+  "scripts": {
+    "build:css": "<scss-to-css-cmd>"
+  },
+```
+
+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:
+
+- Compile all SCSS files in the **current directory** (outputs to same directory`):
+
+   ```
+   scss-to-css
+   ```
+
+- Compile all SCSS files in a **specific directory** (outputs to `path/to/your/directory/`):
+
+   ```
+   scss-to-css path/to/your/directory
+   ```
+
+- Compile a **specific file** (outputs to `path/to/your/minified/file.min.css`):
+
+   ```
+   scss-to-css path/to/your/file.scss
+   ```
+
+- Specify both **input and output** directories (outputs to `output_folder/`):
+
+   ```
+   scss-to-css input_folder output_folder
+   ```
+
+## 🏛️ MIT License
+
+**Copyright (c) 2024 [Adam Lui](https://github.com/adamlui)**
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+<br>
+
+<img height=6px width="100%" src="https://raw.githubusercontent.com/adamlui/js-utils/main/media/images/separators/aqua.png">
+
+<a href="https://github.com/adamlui/js-utils">**Home**</a> /
+<a href="https://github.com/adamlui/js-utils/discussions">Discuss</a> /
+<a href="#--scss-to-cssjs">Back to top ↑</a>

package/package.json

@@ -1,37 +1,43 @@
-{
-  "name": "@adamlui/scss-to-css",
-  "version": "1.0.1",
-  "description": "Recursively compile all SCSS files into minified CSS",
-  "author": {
-    "name": "Adam Lui",
-    "email": "adam@kudoai.com",
-    "url": "https://github.com/adamlui"
-  },
-  "homepage": "https://github.com/adamlui/js-utils",
-  "license": "MIT",
-  "main": "scss-to-css.js",
-  "bin": {
-    "scss-to-css": "scss-to-css.js"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/adamlui/js-utils.git"
-  },
-  "keywords": [
-    "scss",
-    "sass",
-    "css",
-    "stylesheets",
-    "compiler",
-    "minifier"
-  ],
-  "bugs": {
-    "url": "https://github.com/adamlui/js-utils/issues"
-  },
-  "dependencies": {
-    "sass": "^1.70.0"
-  }
-}
+{
+  "name": "@adamlui/scss-to-css",
+  "version": "1.1.1",
+  "description": "Recursively compile all SCSS files into minified CSS",
+  "author": {
+    "name": "Adam Lui",
+    "email": "adam@kudoai.com",
+    "url": "https://github.com/adamlui"
+  },
+  "homepage": "https://github.com/adamlui/js-utils",
+  "license": "MIT",
+  "main": "scss-to-css.js",
+  "bin": {
+    "scss-to-css": "scss-to-css.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "bump:patch": "bash utils/bump.sh patch",
+    "bump:minor": "bash utils/bump.sh minor",
+    "bump:major": "bash utils/bump.sh major",
+    "publish:patch": "bash utils/bump.sh patch --publish",
+    "publish:minor": "bash utils/bump.sh minor --publish",
+    "publish:major": "bash utils/bump.sh major --publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/adamlui/js-utils.git"
+  },
+  "keywords": [
+    "scss",
+    "sass",
+    "css",
+    "stylesheets",
+    "compiler",
+    "minifier"
+  ],
+  "bugs": {
+    "url": "https://github.com/adamlui/js-utils/issues"
+  },
+  "dependencies": {
+    "sass": "^1.70.0"
+  }
+}

package/scss-to-css.js

@@ -1,63 +1,71 @@
 #!/usr/bin/env node
 
 // Import libs
-const { execSync } = require('child_process'),
-      fs = require('fs'),
-      path = require('path');
+const fs = require('fs'),
+      path = require('path'),
+      sass = require('sass');
 
 // Init UI colors
 const nc = '\x1b[0m', // no color
       br = '\x1b[1;91m', // bright red
+      by = '\x1b[1;33m', // bright yellow
       bg = '\x1b[1;92m'; // bright green
 
-// Check for Sass
-try { execSync('sass --version'); }
-catch (err) {
-    console.error(`\n${br}Error: Sass not installed. `
-        + `\n${nc}Please run 'npm i @adamlui/scss-to-css -D' to ensure all dependencies are present.`);
+// Clean leading slashes from args to avoid parsing system root
+const inputArg = process.argv[2] ? process.argv[2].replace(/^\/*/, '') : '',
+      outputArg = process.argv[3] ? process.argv[3].replace(/^\/*/, '') : '';
+
+// Validate input arg (output arg can be anything)
+if (process.argv[2] && !fs.existsSync(inputArg)) {
+    console.error(`\n${br}Error: First arg must be an existing file or path.${nc}`
+        + '\nExample valid command: \n>> scss-to-css . output.min.css');
     process.exit(1);
 }
 
-// Locate first parent dir w/ package.json to indicate project root
-const userProjectDir = (() => {
-    let currentDir = process.cwd();
-    while (!fs.existsSync(path.join(currentDir, 'package.json'))) {
-        const parentDir = path.dirname(currentDir);
-        if (parentDir === currentDir) {
-            console.error(`\n${br}Error: Could not find package.json in any parent directory.`
-                + `\n${nc}Please add a manifest to your project to indicate a root.`);
-            process.exit(1);
-        }
-        currentDir = parentDir;
-    }
-    return currentDir;
-})();
-
-// Recursively find all SCSS files in project directory
-const scssFiles = (() => {
-    const fileList = [];
-    const findSCSSfiles = dir => {
-        const files = fs.readdirSync(dir);
-        files.forEach(file => {
-            const filePath = path.join(dir, file);
-            if (fs.statSync(filePath).isDirectory()) findSCSSfiles(filePath);
-            else if (file.endsWith('.scss')) fileList.push(filePath);
-        });
-    };
-    findSCSSfiles(userProjectDir); return fileList;
-})();
+// Recursively find all SCSS files or arg-passed file
+const inputPath = path.resolve(process.cwd(), inputArg);
+const scssFiles = inputArg.endsWith('.scss') ? [inputPath]
+  : (() => {
+        const fileList = [];
+        (function findSCSSfiles(dir) {
+            const files = fs.readdirSync(dir);
+            files.forEach(file => {
+                const filePath = path.resolve(dir, file);
+                if (fs.statSync(filePath).isDirectory())
+                    findSCSSfiles(filePath); // recursively find SCSS
+                else if (/\.scss$/.test(file)) // SCSS file found
+                    fileList.push(filePath); // store it for minification
+            });
+        })(inputPath); return fileList;
+    })();
 
 // Compile SCSS files to CSS
-if (scssFiles.length === 0) console.info('\nNo SCSS files found.');
-else {
-    scssFiles.forEach(scssPath => {
-        const inputDir = path.dirname(scssPath);
-        const outputPath = path.join(inputDir,
-            inputDir.includes('scss') ? '..' : '', 'css', // build to ../css/ if from scss/
-            path.basename(scssPath, '.scss') + '.min.css'
+let generatedCnt = 0;
+console.log(''); // line break before first log
+scssFiles.forEach(scssPath => {
+    try { // to compile it
+        const outputDir = path.join(
+            path.dirname(scssPath), // path of file to be minified
+            outputArg.endsWith('.css') ? path.dirname(outputArg) : outputArg, // path from output arg
+            path.dirname(scssPath).endsWith('scss') ? '../css' : '' // ../css/ if in scss/
         );
-        console.info(`\nCompiling ${ scssPath } to ${ outputPath }...`);
-        execSync(`sass --style compressed "${ scssPath }" "${ outputPath }"`);
-        console.info(`${bg}Compilation complete!${nc}`);
-    });
-}
+        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);
+        console.info(`Compiling ${ scssPath }...`);
+        const compileResult = sass.compile(scssPath, { style: 'compressed', sourceMap: true });
+        if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });
+        fs.writeFileSync(outputPath, compileResult.css, 'utf8');
+        fs.writeFileSync(outputPath + '.map', JSON.stringify(compileResult.sourceMap), 'utf8');
+        generatedCnt+= 2;
+    } catch (err) {
+        console.error(`${br}Error compiling ${ scssPath }: ${ err.message }${nc}`);
+    }
+});
+
+// Print final summary
+if (generatedCnt) console.info(`\n${bg}Compilation complete!${nc}\n${ generatedCnt } files generated.`);
+else console.info(`\n${by}No SCSS files found.${nc}`);