1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[](https://greenkeeper.io/)
[![tests][tests]][tests-url]
[![cover][cover]][cover-url]
[![chat][chat]][chat-url]
<div align="center">
<img width="100" height="100" title="CLI" src="http://postcss.github.io/postcss-cli/logo.svg">
<a href="https://github.com/postcss/postcss">
<img width="110" height="110" title="PostCSS" src="http://postcss.github.io/postcss/logo.svg" hspace="10">
</a>
<h1>PostCSS CLI</h1>
</div>
<h2 align="center">Install</h2>
```bash
npm i -g|-D postcss-cli
```
<h2 align="center">Usage</h2>
```
Usage:
postcss [input.css] [OPTIONS] [-o|--output output.css] [--watch|-w]
postcss <input.css>... [OPTIONS] --dir <output-directory> [--watch|-w]
postcss <input-directory> [OPTIONS] --dir <output-directory> [--watch|-w]
postcss <input-glob-pattern> [OPTIONS] --dir <output-directory> [--watch|-w]
postcss <input.css>... [OPTIONS] --replace
Basic options:
-o, --output Output file [string]
-d, --dir Output directory [string]
-r, --replace Replace (overwrite) the input file [boolean]
--map, -m Create an external sourcemap
--no-map Disable the default inline sourcemaps
--verbose Be verbose [boolean]
--watch, -w Watch files for changes and recompile as needed [boolean]
--env A shortcut for setting NODE_ENV [string]
Options for when not using a config file:
-u, --use List of postcss plugins to use [array]
--parser Custom postcss parser [string]
--stringifier Custom postcss stringifier [string]
--syntax Custom postcss syntax [string]
Advanced options:
--ext Override the output file extension; for use with --dir [string]
--base Mirror the directory structure relative to this path in the output
directory, for use with --dir [string]
--poll Use polling for file watching. Can optionally pass polling interval;
default 100 ms
--config Set a custom path to look for a config file [string]
Options:
--version Show version number [boolean]
-h, --help Show help [boolean]
Examples:
postcss input.css -o output.css Basic usage
postcss src/**/*.css --base src --dir build Glob Pattern & output
cat input.css | postcss -u autoprefixer > output.css Piping input & output
If no input files are passed, it reads from stdin. If neither -o, --dir, or
--replace is passed, it writes to stdout.
If there are multiple input files, the --dir or --replace option must be passed.
Input files may contain globs (ie: src/**/*.css). If you pass an input directory, it will process
all files in the directory and any subdirectories, respecting the glob pattern.
```
> ℹ️ More details on custom parsers, stringifiers and syntaxes, can be found [here](https://github.com/postcss/postcss#syntaxes).
### [Config](https://github.com/michael-ciniawsky/postcss-load-config)
If you need to pass options to your plugins, or have a long plugin chain, you'll want to use a configuration file.
**postcss.config.js**
```js
module.exports = {
parser: 'sugarss',
plugins: [
require('postcss-import')({ ...options }),
require('postcss-url')({ url: 'copy', useHash: true })
]
}
```
Note that you **can not** set the `from` or `to` options for postcss in the config file. They are set automatically based on the CLI arguments.
### Context
For more advanced usage it's recommend to to use a function in `postcss.config.js`, this gives you access to the CLI context to dynamically apply options and plugins **per file**
| Name | Type | Default | Description |
| :-------: | :--------: | :--------------------------------: | :------------------- |
| `env` | `{String}` | `'development'` | process.env.NODE_ENV |
| `file` | `{Object}` | `dirname, basename, extname` | File |
| `options` | `{Object}` | `map, parser, syntax, stringifier` | PostCSS Options |
**postcss.config.js**
```js
module.exports = ctx => ({
map: ctx.options.map,
parser: ctx.file.extname === '.sss' ? 'sugarss' : false,
plugins: {
'postcss-import': { root: ctx.file.dirname },
cssnano: ctx.env === 'production' ? {} : false
}
})
```
> ⚠️ If you want to set options via CLI, it's mandatory to reference `ctx.options` in `postcss.config.js`
```bash
postcss input.sss -p sugarss -o output.css -m
```
**postcss.config.js**
```js
module.exports = ctx => ({
map: ctx.options.map,
parser: ctx.options.parser,
plugins: {
'postcss-import': { root: ctx.file.dirname },
cssnano: ctx.env === 'production' ? {} : false
}
})
```
[npm]: https://img.shields.io/npm/v/postcss-cli.svg
[npm-url]: https://npmjs.com/package/postcss-cli
[node]: https://img.shields.io/node/v/postcss-cli.svg
[node-url]: https://nodejs.org/
[deps]: https://img.shields.io/gemnasium/postcss/postcss-cli.svg
[deps-url]: https://gemnasium.com/postcss/postcss-cli
[tests]: http://img.shields.io/travis/postcss/postcss-cli/master.svg
[tests-url]: https://travis-ci.org/postcss/postcss-cli
[cover]: https://img.shields.io/coveralls/postcss/postcss-cli/master.svg
[cover-url]: https://coveralls.io/github/postcss/postcss-cli
[chat]: https://img.shields.io/gitter/room/postcss/postcss.svg
[chat-url]: https://gitter.im/postcss/postcss
|
