npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@adamlui/scss-to-css

v1.10.19

Published

Recursively compile all SCSS files into minified CSS

Downloads

1,773

Readme

{ } scss-to-css

Recursively compile all SCSS files into minified CSS.

⚡ Installation

As a global utility:

$ npm install -g @adamlui/scss-to-css

As a dev dependency (e.g. for build scripts), from your project root:

$ npm install -D @adamlui/scss-to-css

As a runtime dependency (e.g. for on-the-fly compilation), from your project root:

$ npm install @adamlui/scss-to-css

💻 Command line usage

The basic global command is:

$ scss-to-css

Sample output:

📝 Note: Source maps are also generated by default unless -S or --no-source-maps is passed.

To specify input/output paths:

$ 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.
  • [output_path]: Path to file or directory where CSS + source map files will be stored, relative to original file location (if not provided, css/ is used).

📝 Note: If folders are passed, files will be processed recursively unless -R or --no-recursion is passed.

To use as a package script, in your project's package.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.

Example commands

Compile all SCSS files in the current directory (outputs to css/):

$ scss-to-css

Compile all SCSS files in a specific directory (outputs to path/to/your/directory/css/):

$ scss-to-css path/to/your/directory

Compile a specific file (outputs to path/to/your/css/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

📝 Note: Output CSS is minified unless -M or --no-minify is passed.

Command line options

Boolean options:
 -n, --dry-run               Don't actually compile the file(s), just
                             show if they will be processed.
 -d, --include-dotfolders    Include dotfolders in file search.
 -S, --no-source-maps        Prevent source maps from being generated.
 -M, --no-minify             Disable minification of output CSS.
 -R, --no-recursion          Disable recursive file searching.
 -c, --copy                  Copy compiled CSS to clipboard instead of
                             writing to file if single source file is
                             processed.
 -q, --quiet                 Suppress all logging except errors.

Parameter options:
 --ignore-files="file1.scss,file2.scss"   Files to exclude from
                                          compilation.
 --comment="comment"                      Prepend header comment to
                                          compiled CSS. Separate by
                                          line using '\n'.
Info commands:
 -h, --help                  Display help screen.
 -v, --version               Show version number.

🔌 API usage

You can also import scss-to-css into your app to use its API methods, both as an ECMAScript module or a CommonJS module.

ECMAScript*:

import scssToCSS from '@adamlui/scss-to-css';

CJS:

const scssToCSS = require('@adamlui/scss-to-css');
*Node.js version 14 or higher required

compile(input[, options])

💡 Compiles SCSS based on the string input supplied.

If source code is passed, it is directly compiled, then an object containing srcPath + code + srcMap + error is returned:

const srcCode = 'h1 { font-size: 40px ; code { font-face: Roboto Mono }}',
      compileResult = scssToCSS.compile(srcCode);

console.log(compileResult.error); // outputs runtime error, or `undefined` if no error
console.log(compileResult.code);  // outputs minified CSS: 'h1{font-size:40px}h1 code{font-face:Roboto Mono}'

If a file path is passed, the file's code is loaded then compiled to CSS, returning an object like above.

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 + srcMap + error is returned:

// Outputs paths to SCSS files in working directory + all nested directories
const compileResults = scssToCSS.compile('.');
compileResults.forEach(result => console.log(result.srcPath));

// Outputs compiled CSS from 2nd SCSS file if found, or `undefined` if not found
console.log(compileResults[1].code);

Options are boolean, passed as object properties. For example:

// Returns array of data objects where `.code` contains unminified CSS
scssToCSS.compile(inputDir, { minify: false });

Available parameters (and their default settings) are:

Name | Type | Desciption | Default value --------------|---------|-------------------------------------------------------------------------|--------------- recursive | Boolean | Recursively search for nested files if dir path passed. | true verbose | Boolean | Show logging in console/terminal. | true dotFolders | Boolean | Include dotfolders in file search. | false minify | Boolean | Minify output CSS. | true sourceMaps | Boolean | Generate CSS source maps. | true ignoreFiles | Array | Files (by name) to exclude from compilation. | [] comment | String | Header comment to prepend to compiled CSS. Separate by line using '\n'. | ''

findSCSS(searchDir[, options])

💡 Searches for all SCSS files within the searchDir string passed (useful for discovering what files compile() will process) and returns an array containing their filepaths.

Options are boolean, passed as object properties. For example:

// Search for SCSS files in exactly assets/scss
const searchResults = scssToCSS.findSCSS('assets/scss', { recursive: false });
console.log(searchResults);

/* sample output:

findSCSS() » Searching for SCSS files...
findSCSS() » Search complete! 2 files found.
findSCSS() » Check returned array.
[
  'E:\\js\\utils\\scss-to-css\assets\\scss\\foo.scss',
  'E:\\js\\utils\\scss-to-css\assets\\scss\\bar.scss'
]
*/

Available parameters (and their default settings) are:

Name | Type | Desciption | Default value --------------|---------|----------------------------------------------------------|--------------- recursive | Boolean | Recursively search for nested files in searchDir passed. | true verbose | Boolean | Show logging in console/terminal. | true dotFolders | Boolean | Include dotfolders in file search. | false ignoreFiles | Array | Files (by name) to exclude from search results. | []

🏛️ MIT License

Copyright © 2024 Adam Lui & contributors

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.

🛠️ Related utilities

🖼️ img-to-webp

Recursively compress all images to WEBPs. Download / Discuss

</> minify.js  

Recursively minify all JavaScript files. Install / Readme / CLI usage / API usage / Discuss

More JavaScript utilities / Discuss / Back to top ↑