Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pirxpilot/postcss-cli
Simple CLI for postcss
https://github.com/pirxpilot/postcss-cli
Last synced: 10 days ago
JSON representation
Simple CLI for postcss
- Host: GitHub
- URL: https://github.com/pirxpilot/postcss-cli
- Owner: pirxpilot
- Created: 2015-03-12T03:43:29.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2024-02-06T14:09:56.000Z (9 months ago)
- Last Synced: 2024-05-23T05:32:11.396Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 165 KB
- Stars: 175
- Watchers: 12
- Forks: 17
- Open Issues: 1
-
Metadata Files:
- Readme: Readme.md
- Changelog: History.md
Awesome Lists containing this project
README
[![NPM version][npm-image]][npm-url]
[![Build Status][build-image]][build-url]
[![Dependency Status][deps-image]][deps-url]
# 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][history].
## Installation
npm install postcss-cli-simple
## Usage
postcss [options] -o output-file input-file
In Makefile you can use it with [pattern rules]:
````Make
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][source-map-options] - some examples:
- `--no-map` - do not generated source maps - even if previous maps exist
- `--map.annotation ` - 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.
````json
{
"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.
````js
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:
````json
{
"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](https://github.com/postcss/postcss#syntaxes).
#### `--parser|-p`
Optional module to use as a [custom PostCSS input parser](https://github.com/postcss/postcss#syntaxes).
#### `--stringifier|-t`
Optional module to use as a [custom PostCSS output stringifier](https://github.com/postcss/postcss#syntaxes).
#### `--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
[postcss]: https://npmjs.org/package/postcss
[postcss-cli]: https://npmjs.org/package/postcss-cli
[history]: https://github.com/postcss/postcss/issues/154#issuecomment-177278640
[source-map-options]: https://github.com/postcss/postcss/blob/master/docs/source-maps.md
[pattern rules]: https://www.gnu.org/software/make/manual/html_node/Pattern-Rules.html
[yargs dot notation]: https://www.npmjs.com/package/yargs#dot-notation
[yargs boolean negation]: https://www.npmjs.com/package/yargs#negate-fields
[npm-image]: https://img.shields.io/npm/v/postcss-cli-simple.svg
[npm-url]: https://npmjs.org/package/postcss-cli-simple
[build-image]: https://img.shields.io/github/workflow/status/pirxpilot/postcss-cli/check
[build-url]: https://github.com/pirxpilot/postcss-cli/actions/workflows/check.yaml
[deps-image]: https://img.shields.io/librariesio/release/npm/postcss-cli-simple
[deps-url]: https://libraries.io/npm/postcss-cli-simple