Simple CLI for postcss. To be used in Makefiles. If you are looking for more options check out postcss-cli. More on the history of this project.
npm install postcss-cli-simple
postcss [options] -o output-file input-file
In Makefile you can use it with pattern rules:
deploy/%.css: %.css
./node_modules/.bin/postcss \
--use postcss-url --postcss-url.url=rebase \
--use autoprefixer --autoprefixer.browsers "> 5%" \
--use cssnano --no-cssnano.discardUnused
--output $@ $<
--output|-o
Output file name.
--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.
Plugin options can be specified using yargs dot notation. For example, to pass browsers
option to autoprefixer
one can use --autoprefixer.browsers "> 5%"
. To set plugin option to false
use yargs boolean negation. For example, to switch off discardUnused
in cssnano
try: --no-cssnano.discardUnused
.
--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--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. Although you might be better off writing your own plugin.
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"],
"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
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
MIT