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

Traditional CLI for postcss

Installation

npm install postcss-cli

postcss-cli version	postcss version
1.x	4.x
2.x	5.x

Usage

postcss [options] [-o output-file|-d output-directory|-r] [input-file]

--output|-o

Output file name. If no output file is specified, postcss will write to stdout, however plugins that rely on output file location will not work properly.

Similarly, if no input file is specified, postcss will read from stdin. Plugins that rely on input file location will not work properly.

--dir|-d

Output files location. Either --output, --dir or --replace option, but not all of them, need to be specified. --dir or --replace needs to be used if multiple input file is provided.

--replace|-r

Replace input file(s) with generated output. Either --output, --dir or --replace option, but not all of them, need to be specified. --replace or --dir needs to be used if multiple input file is provided.

--use|-u

Plugin to be used. Multiple plugins can be specified. At least one plugin needs to be specified either with --use option or in the config file.

--map|-m

Activate source map generation. By default inline maps are generated. To generate source maps in a separate .map file use --map file or --no-map.inline.

You can use advances source map options - some examples:

• --no-map - do not generated source maps - even if previous maps exist
• --map.annotation <path> - specify alternaive path to be used in source map annotation appended to CSS
• --no-map.annotation - supress adding annotation to CSS
• --no-map.sourcesContent - remove origin CSS from maps

--local-plugins

Look up plugins starting from node_modules located in the current working directory. Without this option, postcss-cli will look for the plugins in the node_modules in which it is installed - specifically if it is installed globally it will only look for plugins that are globally installed.

--watch|-w

Observe file system changes and recompile as source files change.

When inlining CSS imports, add an update handler to your JavaScript configuration file to ensure referenced modules are taken into account:

{
  "postcss-import": {
    onImport: function(sources) {
      global.watchCSS(sources, this.from);
    }
  }
}

For postcss-import, this handler is added automatically.

--config|-c

JSON file with plugin configuration. Plugin names should be the keys.

{
    "autoprefixer": {
        "browsers": "> 5%"
    },
    "postcss-cachify": {
        "baseUrl": "/res"
    }
}

JavaScript configuration can be used if functions are allowed as plugins parameters:

module.exports = {
  "postcss-url": {
    url: function(url) { return "http://example.com/" + url; }
  },
  autoprefixer: {
    browsers: "> 5%"
  }
};

Alternatively configuration options can be passed as --plugin.option parameters.

Note that command-line options can also be specified in the config file:

{
    "use": ["autoprefixer", "postcss-cachify"],
    "input": "screen.css",
    "output": "bundle.css",
    "local-plugins": true,
    "autoprefixer": {
        "browsers": "> 5%"
    },
    "postcss-cachify": {
        "baseUrl": "/res"
    }
}

--syntax|-s

Optional module to use as a custom PostCSS syntax.

--parser|-p

Optional module to use as a custom PostCSS input parser.

--stringifier|-t

Optional module to use as a custom PostCSS output stringifier.

--help|-h

Show help

Examples

Use autoprefixer as a postcss plugin pass parameters from a json file

postcss --use autoprefixer -c options.json -o screen.css screen.css

Use more than one plugin and pass config parameters

postcss --use autoprefixer --autoprefixer.browsers "> 5%" \
    --use postcss-cachify --postcss-cachify.baseUrl /res \
    -o screen.css screen.css

Use multiple plugins and multiple input files

postcss -u postcss-cachify -u autoprefixer -d build *.css

License

MIT

Changelog

2.4.1 / 2016-01-27

• improve warning disply format