@adamlui/scss-to-css 1.6.1 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -25
- package/package.json +1 -1
- package/scss-to-css.js +40 -23
package/README.md
CHANGED
|
@@ -18,9 +18,9 @@
|
|
|
18
18
|
|
|
19
19
|
### Recursively compile all SCSS files into minified CSS.
|
|
20
20
|
|
|
21
|
-
<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>
|
|
22
|
-
<a href="#%EF%B8%8F-mit-license"><img height=31 src="https://img.shields.io/badge/License-MIT-
|
|
23
|
-
<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.
|
|
21
|
+
<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&color=af68ff&logoColor=white&labelColor=464646&style=for-the-badge"></a>
|
|
22
|
+
<a href="#%EF%B8%8F-mit-license"><img height=31 src="https://img.shields.io/badge/License-MIT-orange.svg?logo=internetarchive&logoColor=white&labelColor=464646&style=for-the-badge"></a>
|
|
23
|
+
<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.7.0-44cc11.svg?logo=icinga&logoColor=white&labelColor=464646&style=for-the-badge"></a>
|
|
24
24
|
<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&color=blue&labelColor=464646"></a>
|
|
25
25
|
<a href="https://sonarcloud.io/component_measures?metric=new_vulnerabilities&id=adamlui_js-utils:scss-to-css/scss-to-css.js"><img height=31 src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fsonarcloud.io%2Fapi%2Fmeasures%2Fcomponent%3Fcomponent%3Dadamlui_js-utils%3Ascss-to-css%2Fscss-to-css.js%26metricKeys%3Dvulnerabilities&query=%24.component.measures.0.value&style=for-the-badge&logo=sonarcloud&logoColor=white&labelColor=464646&label=Vulnerabilities&color=gold"></a>
|
|
26
26
|
|
|
@@ -31,19 +31,19 @@
|
|
|
31
31
|
As a **global utility**:
|
|
32
32
|
|
|
33
33
|
```
|
|
34
|
-
npm install -g @adamlui/scss-to-css
|
|
34
|
+
$ npm install -g @adamlui/scss-to-css
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
As a **dev dependency** (e.g. for build scripts), from your project root:
|
|
38
38
|
|
|
39
39
|
```
|
|
40
|
-
npm install -D @adamlui/scss-to-css
|
|
40
|
+
$ npm install -D @adamlui/scss-to-css
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
As a **runtime dependency** (e.g. for on-the-fly compilation), from your project root:
|
|
44
44
|
|
|
45
45
|
```
|
|
46
|
-
npm install @adamlui/scss-to-css
|
|
46
|
+
$ npm install @adamlui/scss-to-css
|
|
47
47
|
```
|
|
48
48
|
|
|
49
49
|
## 💻 Command line usage
|
|
@@ -51,7 +51,7 @@ npm install @adamlui/scss-to-css
|
|
|
51
51
|
The basic **global command** is:
|
|
52
52
|
|
|
53
53
|
```
|
|
54
|
-
scss-to-css
|
|
54
|
+
$ scss-to-css
|
|
55
55
|
```
|
|
56
56
|
|
|
57
57
|
Sample output:
|
|
@@ -65,7 +65,7 @@ Sample output:
|
|
|
65
65
|
To specify **input/output** paths:
|
|
66
66
|
|
|
67
67
|
```
|
|
68
|
-
scss-to-css [input_path] [output_path]
|
|
68
|
+
$ scss-to-css [input_path] [output_path]
|
|
69
69
|
```
|
|
70
70
|
|
|
71
71
|
- `[input_path]`: Path to SCSS file or directory containing SCSS files to be compiled, relative to the current working directory.
|
|
@@ -91,25 +91,25 @@ Replace `<scss-to-css-cmd>` with `scss-to-css` + optional args. Then, `npm run b
|
|
|
91
91
|
Compile all SCSS files in the **current directory** (outputs to `css/`):
|
|
92
92
|
|
|
93
93
|
```
|
|
94
|
-
scss-to-css
|
|
94
|
+
$ scss-to-css
|
|
95
95
|
```
|
|
96
96
|
|
|
97
97
|
Compile all SCSS files in a **specific directory** (outputs to `path/to/your/directory/css/`):
|
|
98
98
|
|
|
99
99
|
```
|
|
100
|
-
scss-to-css path/to/your/directory
|
|
100
|
+
$ scss-to-css path/to/your/directory
|
|
101
101
|
```
|
|
102
102
|
|
|
103
103
|
Compile a **specific file** (outputs to `path/to/your/css/file.min.css`):
|
|
104
104
|
|
|
105
105
|
```
|
|
106
|
-
scss-to-css path/to/your/file.scss
|
|
106
|
+
$ scss-to-css path/to/your/file.scss
|
|
107
107
|
```
|
|
108
108
|
|
|
109
109
|
Specify both **input and output** directories (outputs to `output_folder/`):
|
|
110
110
|
|
|
111
111
|
```
|
|
112
|
-
scss-to-css input_folder output_folder
|
|
112
|
+
$ scss-to-css input_folder output_folder
|
|
113
113
|
```
|
|
114
114
|
|
|
115
115
|
**💡 Note:** Output CSS is minified unless `-M` or `--no-minify` is passed.
|
|
@@ -148,32 +148,35 @@ import * as scssToCSS from '@adamlui/scss-to-css';
|
|
|
148
148
|
const scssToCSS = require('@adamlui/scss-to-css');
|
|
149
149
|
```
|
|
150
150
|
|
|
151
|
-
### compile(inputPath, options)
|
|
151
|
+
### `compile(inputPath[, options])`
|
|
152
152
|
|
|
153
|
-
|
|
153
|
+
Compiles SCSS found in the `inputPath` provided into CSS data.
|
|
154
154
|
|
|
155
155
|
If a **file path** is passed, the file's code is compiled to CSS, then an object containing `srcPath` + `code` + `error` is returned:
|
|
156
156
|
|
|
157
157
|
```js
|
|
158
158
|
const compileResult = scssToCSS.compile('assets/style.scss');
|
|
159
|
-
|
|
160
|
-
console.log(compileResult.
|
|
159
|
+
|
|
160
|
+
console.log(compileResult.error); // outputs runtime error, or `undefined` if no error
|
|
161
|
+
console.log(compileResult.code); // outputs compiled CSS from assets/style.scss
|
|
161
162
|
```
|
|
162
163
|
|
|
163
164
|
If a **directory path** is passed, SCSS files are searched for (recursively by default), each one's code is loaded then compiled, then an array of objects containing `srcPath` + `code` + `error` is returned:
|
|
164
165
|
|
|
165
166
|
```js
|
|
167
|
+
// Outputs paths to SCSS files in working directory + all nested directories
|
|
166
168
|
const results = scssToCSS.compile('.');
|
|
167
|
-
results.forEach(result =>
|
|
168
|
-
|
|
169
|
-
|
|
169
|
+
results.forEach(result => console.log(result.srcPath));
|
|
170
|
+
|
|
171
|
+
// Outputs compiled CSS from 2nd SCSS file if found, or `undefined` if not found
|
|
172
|
+
console.log(results[1].code);
|
|
170
173
|
```
|
|
171
174
|
|
|
172
175
|
Options are boolean, passed as object properties. For example:
|
|
173
176
|
|
|
174
177
|
```js
|
|
178
|
+
// Returns array of data objects where `.code` contains unminified CSS
|
|
175
179
|
scssToCSS.compile(inputDir, { minify: false });
|
|
176
|
-
// returns data objects where `.code` contains unminified CSS
|
|
177
180
|
```
|
|
178
181
|
|
|
179
182
|
Possible parameters (and their default settings) are:
|
|
@@ -187,15 +190,15 @@ Possible parameters (and their default settings) are:
|
|
|
187
190
|
sourceMaps (true) Generate CSS source maps.
|
|
188
191
|
```
|
|
189
192
|
|
|
190
|
-
### findSCSS(searchDir, options)
|
|
193
|
+
### `findSCSS(searchDir[, options])`
|
|
191
194
|
|
|
192
|
-
|
|
195
|
+
Searches for all SCSS files within the `searchDir` string passed (useful for discovering what files [`compile()`](#compileinputpath-options) will process) and returns an array containing their filepaths.
|
|
193
196
|
|
|
194
197
|
Options are boolean, passed as object properties. For example:
|
|
195
198
|
|
|
196
199
|
```js
|
|
200
|
+
// Returns array containing filepaths to SCSS files in exactly `searchDir`
|
|
197
201
|
scssToCSS.findSCSS(searchDir, { recursive: false });
|
|
198
|
-
// returns array containing filepaths to SCSS files in exactly `searchDir`
|
|
199
202
|
```
|
|
200
203
|
|
|
201
204
|
Possible parameters (and their default settings) are:
|
|
@@ -203,7 +206,7 @@ Possible parameters (and their default settings) are:
|
|
|
203
206
|
```
|
|
204
207
|
recursive (true) Recursively search for nested files if dir path
|
|
205
208
|
passed.
|
|
206
|
-
verbose (
|
|
209
|
+
verbose (true) Show logging in console/terminal.
|
|
207
210
|
dotFolders (false) Include dotfolders in file search.
|
|
208
211
|
```
|
|
209
212
|
|
|
@@ -211,7 +214,7 @@ Possible parameters (and their default settings) are:
|
|
|
211
214
|
|
|
212
215
|
## 💖 Support
|
|
213
216
|
|
|
214
|
-
Please consider [giving a GitHub ⭐](https://github.com/adamlui/js-utils)
|
|
217
|
+
Please consider [giving a GitHub ⭐](https://github.com/adamlui/js-utils) or [funding](https://github.com/sponsors/adamlui) this project if it helped you!
|
|
215
218
|
<br><br>
|
|
216
219
|
|
|
217
220
|
## 🏛️ MIT License
|
package/package.json
CHANGED
package/scss-to-css.js
CHANGED
|
@@ -8,29 +8,45 @@ const fs = require('fs'),
|
|
|
8
8
|
// Define MAIN functions
|
|
9
9
|
|
|
10
10
|
function findSCSS(searchDir, options = {}) {
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
|
|
12
|
+
// Init options
|
|
13
|
+
const defaultOptions = { recursive: true, verbose: true, dotFolders: false };
|
|
14
|
+
options = { ...defaultOptions, ...options };
|
|
15
|
+
|
|
16
|
+
// Search for SCSS
|
|
13
17
|
const dirFiles = fs.readdirSync(searchDir), scssFiles = [];
|
|
18
|
+
if (options.verbose && !options.isRecursing) console.info('\nSearching for SCSS files...');
|
|
14
19
|
dirFiles.forEach(file => {
|
|
15
20
|
const filePath = path.resolve(searchDir, file);
|
|
16
21
|
if (fs.statSync(filePath).isDirectory() && file != 'node_modules'
|
|
17
|
-
&& (options.dotFolders || !file.startsWith('.')) && options.recursive)
|
|
18
|
-
if (options.verbose) console.info(`Searching for SCSS files in: ${filePath}...`);
|
|
22
|
+
&& (options.dotFolders || !file.startsWith('.')) && options.recursive)
|
|
19
23
|
scssFiles.push( // recursively find SCSS in eligible dir
|
|
20
24
|
...findSCSS(filePath, { ...options, isRecursing: true }));
|
|
21
|
-
|
|
25
|
+
else if (file.endsWith('.scss')) // SCSS file found
|
|
22
26
|
scssFiles.push(filePath); // store it for compilation
|
|
23
27
|
});
|
|
24
|
-
|
|
25
|
-
|
|
28
|
+
|
|
29
|
+
// Log/return final result
|
|
30
|
+
if (!options.isRecursing && options.verbose) {
|
|
31
|
+
console.info('Search complete. '
|
|
32
|
+
+ ( scssFiles.length === 0 ? 'No' : scssFiles.length )
|
|
33
|
+
+ ` file${ scssFiles.length > 1 ? 's' : '' } found.`);
|
|
34
|
+
}
|
|
35
|
+
return options.isRecursing || scssFiles.length > 0 ? scssFiles : [];
|
|
26
36
|
}
|
|
27
37
|
|
|
28
38
|
function compile(inputPath, options = {}) {
|
|
39
|
+
|
|
40
|
+
// Init options
|
|
29
41
|
const defaultOptions = { minify: true, sourceMaps: true, recursive: true, verbose: true, dotFolders: false };
|
|
30
42
|
options = { ...defaultOptions, ...options };
|
|
43
|
+
|
|
44
|
+
// Validate inputPath
|
|
31
45
|
if (typeof inputPath !== 'string')
|
|
32
46
|
return console.error('ERROR:'
|
|
33
47
|
+ ' First argument must be a string representing a file/folder path.');
|
|
48
|
+
|
|
49
|
+
// Compile SCSS based on inputPath
|
|
34
50
|
const compileOptions = { style: options.minify ? 'compressed' : 'expanded', sourceMap: options.sourceMaps };
|
|
35
51
|
if (fs.existsSync(inputPath)) { // compile based on path arg
|
|
36
52
|
if (inputPath.endsWith('.scss')) { // file path passed
|
|
@@ -40,9 +56,9 @@ function compile(inputPath, options = {}) {
|
|
|
40
56
|
return { code: compileResult.css, srcMap: compileResult.sourceMap, srcPath: inputPath };
|
|
41
57
|
} catch (err) { console.error(`\nERROR: ${ err.message }\n`); return { error: err }; }
|
|
42
58
|
} else { // dir path passed
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
?.map(scssPath => { // compile found SCSS files
|
|
59
|
+
return findSCSS(inputPath, { recursive: options.recursive, verbosity: options.verbose,
|
|
60
|
+
dotFolders: options.dotFolders
|
|
61
|
+
})?.map(scssPath => { // compile found SCSS files
|
|
46
62
|
if (options.verbose) console.info(`Compiling ${ scssPath }...`);
|
|
47
63
|
try { // to compile found file
|
|
48
64
|
const compileResult = sass.compile(scssPath, compileOptions);
|
|
@@ -60,7 +76,7 @@ if (require.main !== module) module.exports = { compile, findSCSS };
|
|
|
60
76
|
else { // run as CLI tool
|
|
61
77
|
|
|
62
78
|
// Init UI colors
|
|
63
|
-
const nc = '\x1b[0m',
|
|
79
|
+
const nc = '\x1b[0m', // no color
|
|
64
80
|
br = '\x1b[1;91m', // bright red
|
|
65
81
|
by = '\x1b[1;33m', // bright yellow
|
|
66
82
|
bg = '\x1b[1;92m'; // bright green
|
|
@@ -69,14 +85,14 @@ else { // run as CLI tool
|
|
|
69
85
|
const config = {
|
|
70
86
|
dryRun: process.argv.some(arg => /^--?(?:n|dry-?run)$/.test(arg)),
|
|
71
87
|
includeDotFolders: process.argv.some(arg =>
|
|
72
|
-
/^--?(?:dd?|(?:include-?)?dot-?(?:folder|dir(?:ector(?:y|ie))?)s?)$/.test(arg)),
|
|
88
|
+
/^--?(?:dd?|(?:include-?)?dot-?(?:folder|dir(?:ector(?:y|ie))?)s?=?(?:true|1)?)$/.test(arg)),
|
|
73
89
|
noSourceMaps: process.argv.some(arg =>
|
|
74
|
-
/^--?(?:S|(?:exclude|disable|no)-?so?u?rce?-?maps?)$/.test(arg)),
|
|
90
|
+
/^--?(?:S|(?:exclude|disable|no)-?so?u?rce?-?maps?|so?u?rce?-?maps?=(?:false|0))$/.test(arg)),
|
|
75
91
|
noRecursion: process.argv.some(arg =>
|
|
76
|
-
/^--?(?:R|(?:disable|no)-?recursion)$/.test(arg)),
|
|
92
|
+
/^--?(?:R|(?:disable|no)-?recursion|recursion=(?:false|0))$/.test(arg)),
|
|
77
93
|
noMinify: process.argv.some(arg =>
|
|
78
|
-
/^--?(?:M|(?:disable|no)-?minif(?:y|ication))$/.test(arg)),
|
|
79
|
-
quietMode: process.argv.some(arg => /^--?q(?:uiet)?$/.test(arg))
|
|
94
|
+
/^--?(?:M|(?:disable|no)-?minif(?:y|ication)|minif(?:y|ication)=(?:false|0))$/.test(arg)),
|
|
95
|
+
quietMode: process.argv.some(arg => /^--?q(?:uiet)?(?:-?mode)?$/.test(arg))
|
|
80
96
|
};
|
|
81
97
|
|
|
82
98
|
// Show HELP screen if -h or --help passed
|
|
@@ -125,19 +141,20 @@ else { // run as CLI tool
|
|
|
125
141
|
}
|
|
126
142
|
|
|
127
143
|
// Find all eligible JavaScript files or arg-passed file
|
|
128
|
-
printIfNotQuiet('Searching for SCSS files...');
|
|
129
144
|
const scssFiles = inputArg.endsWith('.scss') ? [inputPath]
|
|
130
|
-
: findSCSS(inputPath, { recursive: !config.noRecursion });
|
|
145
|
+
: findSCSS(inputPath, { recursive: !config.noRecursion, verbose: !config.quietMode });
|
|
131
146
|
|
|
132
|
-
if (config.dryRun
|
|
133
|
-
|
|
134
|
-
|
|
147
|
+
if (config.dryRun) { // -n or --dry-run passed
|
|
148
|
+
if (scssFiles.length > 0) { // print files to be processed
|
|
149
|
+
console.info(`\n${by}SCSS files to be compiled:${nc}`);
|
|
150
|
+
scssFiles.forEach(file => console.info(file));
|
|
151
|
+
} else console.info(`${by}\nNo SCSS files will be compiled.${nc}`);
|
|
135
152
|
|
|
136
153
|
} else { // actually compile SCSS files
|
|
137
154
|
|
|
138
155
|
// Build array of compilation data
|
|
139
156
|
const failedPaths = [];
|
|
140
|
-
const compileData = scssFiles
|
|
157
|
+
const compileData = scssFiles.map(scssPath => {
|
|
141
158
|
const compileResult = compile(scssPath, {
|
|
142
159
|
minify: !config.noMinify, sourceMaps: !config.noSourceMaps, verbose: !config.quietMode });
|
|
143
160
|
if (compileResult.error) failedPaths.push(scssPath);
|
|
@@ -170,7 +187,7 @@ else { // run as CLI tool
|
|
|
170
187
|
printIfNotQuiet(`${ compileData.length } CSS file${ cssCntSuffix }`
|
|
171
188
|
+ ( !config.noSourceMaps ? ` + ${ compileData.length } source map${ cssCntSuffix }` : '' )
|
|
172
189
|
+ ' generated.');
|
|
173
|
-
} else printIfNotQuiet(`${by}No SCSS files processed
|
|
190
|
+
} else printIfNotQuiet(`${by}No SCSS files processed.${nc}`);
|
|
174
191
|
if (failedPaths.length > 0) {
|
|
175
192
|
printIfNotQuiet(`\n${br}`
|
|
176
193
|
+ `${ failedPaths.length } file${ failedPaths.length > 1 ? 's' : '' }`
|