postcss-cli

What is postcss-cli?

The postcss-cli package is a command-line interface for PostCSS, a tool for transforming CSS with JavaScript plugins. It allows you to process CSS files using various PostCSS plugins directly from the command line.

What are postcss-cli's main functionalities?

Basic CSS Processing

This command processes the input CSS file (input.css) and outputs the transformed CSS to the specified output file (output.css).

postcss input.css -o output.css

Using Plugins

This command uses the 'autoprefixer' plugin to add vendor prefixes to the CSS rules in the input file and outputs the result to the specified output file.

postcss --use autoprefixer -o output.css input.css

Config File

This command uses a configuration file (postcss.config.js) to specify the plugins and options for processing the CSS file.

postcss -c postcss.config.js -o output.css input.css

Watch Mode

This command watches the input CSS file for changes and automatically processes it whenever it is modified, outputting the result to the specified output file.

postcss input.css -o output.css --watch

Other packages similar to postcss-cli

gulp-postcss

gulp-postcss is a Gulp plugin for PostCSS. It allows you to integrate PostCSS processing into your Gulp build pipeline. Compared to postcss-cli, gulp-postcss is more suitable for complex build processes where you are already using Gulp.

webpack

Webpack is a module bundler that can be configured to use PostCSS through loaders like 'postcss-loader'. It is more powerful and flexible than postcss-cli, making it suitable for larger projects with more complex build requirements.

grunt-postcss

grunt-postcss is a Grunt plugin for PostCSS. It allows you to use PostCSS in your Grunt build tasks. Similar to gulp-postcss, it is more suitable for projects that are already using Grunt for their build process.

README

PostCSS CLI

Install

npm i -g|-D postcss-cli

Usage

postcss [input.css] [OPTIONS] [-o|--output output.css] [-w|--watch]

⚠️ If there are multiple input files, the --dir or --replace option must be passed.

cat input.css | postcss [OPTIONS] > output.css

⚠️ If no input files are passed, it reads from stdin. If neither -o, --dir, or --replace is passed, it writes to stdout.

Options

Name	Type	Default	Description
-d, --dir	{String}	undefined	Output Directory
-b, --base	{String}	undefined	Use together with --dir for keeping directory structure.
-x, --ext	{String}	extname(output)	Output File Extension
-o, --output	{String}	undefined	Output File
-r, --replace	{String}	undefined	Replace Input <=> Output
-p, --parser	{String}	undefined	Custom PostCSS Parser
-s, --syntax	{String}	undefined	Custom PostCSS Syntax
-t, --stringifier	{String}	undefined	Custom PostCSS Stringifier
-w, --watch	{Boolean}	false	Enable Watch Mode
--poll	{Boolean}	false	Use polling for file watching
-u, --use	{Array}	[]	PostCSS Plugins
-m, --map	{Boolean}	{ inline: true }	External Sourcemaps
--no-map	{Boolean}	false	Disable Sourcemaps
-e, --env	{String}	process.env.NODE_ENV	Sets $NODE_ENV
-c, --config	{String}	dirname(file)	PostCSS Config Path postcss.config.js
-h, --help	{Boolean}	false	CLI Help
-v, --version	{Boolean}	false	CLI Version

ℹ️ More details on custom parsers, stringifiers and syntaxes, can be found here.

Config

If you need to pass options to your plugins, or have a long plugin chain, you'll want to use a configuration file.

postcss.config.js

module.exports = {
  parser: 'sugarss',
  plugins: [
    require('postcss-import')({...options}),
    require('postcss-url')({ url: 'copy', useHash: true })
  ]
}

Note that you can not set the from or to options for postcss in the config file. They are set automatically based on the CLI arguments.

Context

For more advanced usage it's recommend to to use a function in postcss.config.js, this gives you access to the CLI context to dynamically apply options and plugins per file

Name	Type	Default	Description
env	{String}	'development'	process.env.NODE_ENV
file	{Object}	dirname, basename, extname	File
options	{Object}	map, parser, syntax, stringifier	PostCSS Options

postcss.config.js

module.exports = (ctx) => ({
  map: ctx.options.map,
  parser: ctx.file.extname === '.sss' ? 'sugarss' : false,
  plugins: {
    'postcss-import': { root: ctx.file.dirname }),
    'cssnano': ctx.env === 'production' ? {} : false
  }
})

⚠️ If you want to set options via CLI, it's mandatory to reference ctx.options in postcss.config.js

postcss input.sss -p sugarss -o output.css -m

postcss.config.js

module.exports = (ctx) => ({
  map: ctx.options.map,
  parser: ctx.options.parser,
  plugins: {
    'postcss-import': { root: ctx.file.dirname },
    'cssnano': ctx.env === 'production' ? {} : false
  }
})

Changelog

4.0.0 / 2017-05-09

• BREAKING: Upgrade postcss to v6.x