postcss --config: Process CSS in CI
postcss --config runs your CSS through the plugin pipeline defined in a PostCSS config file.
PostCSS is the plugin host behind autoprefixer, nesting, and Tailwind. The CLI applies that pipeline to files as a build step.
What it does
The postcss-cli command reads input CSS, runs it through the plugins named in the config (or via --use), and writes transformed CSS. --config points at the directory or file holding postcss.config.js.
Common usage
postcss src/styles.css --config ./ --output dist/styles.css
# process a whole directory
postcss "src/**/*.css" --dir dist --config ./
# plugins inline without a config
postcss src/styles.css --use autoprefixer -o dist/styles.cssOptions
| Flag | What it does |
|---|---|
| --config <path> | Directory or file with the PostCSS config |
| -o, --output <file> | Write to a single output file |
| -d, --dir <dir> | Write outputs to a directory (glob input) |
| -u, --use <plugin> | Apply a plugin without a config file |
| -m, --map | Emit source maps |
| -w, --watch | Watch mode (not for CI) |
In CI
Keep the browserslist query in package.json or .browserslistrc so autoprefixer targets the same browsers on every runner. Run npx update-browserslist-db@latest occasionally so CI does not warn that the caniuse data is outdated.
Common errors in CI
"Cannot find module \"autoprefixer\"" (or another plugin) means the plugin is not installed but the config references it. "Invalid PostCSS Plugin found" usually means a plugin was passed as a call rather than a reference, or a version mismatch. "You must provide either --dir or --output" means neither output flag was given for a build.