Skip to content

chrispelzer/postcss-cli

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

75 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status Dependency Status NPM version

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] [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 or --dir option, but not both of them, need to be specified. --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 is required unless specified within config file.

--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"
    }
}

-s, --syntax

Optional module to use as a custom PostCSS syntax.

-p, --parser

Optional module to use as a custom PostCSS input parser.

-t, --stringifier

Optional module to use as a custom PostCSS output stringifier.

-h, --help

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

Licence

MIT

About

CLI for postcss

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 61.0%
  • Makefile 25.2%
  • CSS 13.8%