CSSMonster

CSSMonster helps developers manage normalize.css, sass, and PurgeCSS with ease.

Requries Nodejs version 16.0.0 or later.

Installation

Install the NPM packages:

npm i -D cssmonster sass@1

Prepare the npm script:

"scripts": {
    "build:css": "cssmonster"
}

Add the config file:

cssmonster.config.json

{
    "sources": "./src", // Also accepts an array
}

Run the command:

npm run build:css

Configuration

Out of the box CSSMonster does not require a config file. The exmample below will show the default values.

cssmonster.config.json

{
    "env": "production", // Accepts 'production' or 'dev' or 'development', is overridden by the --env flag
    "outDir": "cssmonster",
    "sources": "./src", // Also accepts an array
    "minify": true, // Forced to false when env is 'dev' or 'development' -- setting to false disables on production
    "purge": false, // Forced to false when env is 'dev' or 'development' -- setting to false disables on produciton
    "purgeCSS": null,
    "blacklist": [],
    "include": [], // Paths that will be included while compiling the SCSS
    "autoresolve": false, // when true files with the same name are merged together
}

Note: purgeCSS accepts the purgecss options object. See https://www.purgecss.com/configuration#options for additional information.

CLI Flags

The --env flag will override the config env value.

    --env       # development | dev | production
    --config    # Path to config file

Normalize CSS

This project uses normalize.css and a custom preflight.css to create a base for developers to work off of. The files are merged together and output as a single file named normalize.css

You can extend the file by creating your own normalize.css or normalize.scss file within one of the provided sources directories. The file will be appended to the output CSS file.