postcss-process-and-watch

PostCSS process and watch

Functionality

Compile CSS with support for CSS imports, variables, vendor prefixing and minification using PostCSS.

This setup works out-of-the-box. It also includes a watcher which re-compiles the CSS whenever a CSS file changes.

Usage

Write modern CSS

You can write modern CSS with support for CSS imports and CSS variables without worrying about vendor prefixes.

PostCSS is pre-configured to compile all your CSS in the src/ directory using the following processors:

• CSS @imports to write modular CSS.
• Custom properties (CSS variables) for parametrised CSS.
• Color functions to adjust colors using modifier functions.
• RGBA color fallback adds a hex fallback value to every rgba value.
• Pixrem adds pixel fallback before every rem value.
• Pre calculation for better calc support.
• Autoprefixer to auto vendor prefix your CSS.
• cssnano to minify your CSS for production.

src/index.css is the main entry point for the CSS compile script. So be sure to start there.

Note: the aim of this recipe is to write spec compliant CSS. All processors are selected to enable this and improve browser support. Processors adding non-standard features are avoided.

Add & configure processors

You can configure the processors mentioned above or add your own processors in scripts/postcss.js.

Compile CSS

To compile your CSS for production (incl. minification), run:

npm run build:css

Or simply npm run build as this will also run build:css.

The compiled CSS plus its sourcemap is written to the dist/ directory.

Development

To compile your CSS (excl. minification) whenever you make a change to a CSS file:

npm run watch:css

Or simply npm run watch as this will also run watch:css.

These scripts are configured in package.json.