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.
--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 (e.g. with postcss-import), 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);
}
}
}
--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",
"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