Intro

This is a config driven (i.e., pcss.config.js) post css cli similar to rollup.config.js.

The official postcss-cli takes a more command line driven approach, which is fine, but might not be suitable for some build workflows.

Note: Requires package.json "type": "module"

Usage

• Default to pcss.config.js (Must be esm)
• -c to specify custom config file. All input/output path will be relative to the targeted config file.
• -w to specify watch mode.

1# Install the pcss-cli
2npm install -D pcss-cli

Create a pcss.config.js

Note: autoprefixer, postcss-import, postcss-mixins, and postcss-nested are imported by default (so, you can just add the requires as below)

1const prefixer = (await import('autoprefixer')).default;
2const nested = (await import('postcss-nested')).default;
3const importer = (await import('postcss-import')).default;
4
5const plugins = [
6	prefixer,
7	importer,
8	nested
9];
10
11// NOTE: Paths are relative to the pcss.config.js, not to cwd
12export default {
13	// required. Support single string, or array, will be processed in order
14	input: ['./pcss/main.pcss', './src/**/*.pcss'], 
15
16	// required. single css file supported for now. 
17	output: './css/all-bundle.css',
18
19	// optional. Override the input for watch files
20	watchPath: ['./pcss/**/*.pcss', './src/**/*.pcss'],
21
22	// postcss processor arrays
23	plugins
24}
25
26// Note: module.exports can return an array of the object above, for multiple processing units.

Run

1# will use pcss.config.js
2node ./node_module/.bin/pcss
3
4# will use path/to/pcss.config.js, relative input/output path will be relative to path/to/
5node ./node_module/.bin/pcss -c path/to/pcss.config.js
6
7# will do watch mode
8node ./node_module/.bin/pcss -w -c path/to/pcss.config.js