iq-scm / postcss-cli

Simple CLI for postcss

postcss-cli-simple

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.

Installation

npm install postcss-cli-simple

Usage

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

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

License

MIT