Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
postcss-cli
Advanced tools
The postcss-cli package is a command-line interface for PostCSS, a tool for transforming CSS with JavaScript plugins. It allows you to process CSS files using various PostCSS plugins directly from the command line.
Basic CSS Processing
This command processes the input CSS file (input.css) and outputs the transformed CSS to the specified output file (output.css).
postcss input.css -o output.css
Using Plugins
This command uses the 'autoprefixer' plugin to add vendor prefixes to the CSS rules in the input file and outputs the result to the specified output file.
postcss --use autoprefixer -o output.css input.css
Config File
This command uses a configuration file (postcss.config.js) to specify the plugins and options for processing the CSS file.
postcss -c postcss.config.js -o output.css input.css
Watch Mode
This command watches the input CSS file for changes and automatically processes it whenever it is modified, outputting the result to the specified output file.
postcss input.css -o output.css --watch
gulp-postcss is a Gulp plugin for PostCSS. It allows you to integrate PostCSS processing into your Gulp build pipeline. Compared to postcss-cli, gulp-postcss is more suitable for complex build processes where you are already using Gulp.
Webpack is a module bundler that can be configured to use PostCSS through loaders like 'postcss-loader'. It is more powerful and flexible than postcss-cli, making it suitable for larger projects with more complex build requirements.
grunt-postcss is a Grunt plugin for PostCSS. It allows you to use PostCSS in your Grunt build tasks. Similar to gulp-postcss, it is more suitable for projects that are already using Grunt for their build process.
npm i -g|-D postcss-cli
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.
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
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.
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
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
inpostcss.config.js
postcss input.sss -p sugarss -o output.css -m
postcss.config.js
module.exports = ctx => ({
map: ctx.options.map,
parser: ctx.options.parser,
plugins: {
'postcss-import': { root: ctx.file.dirname },
cssnano: ctx.env === 'production' ? {} : false
}
})
5.0.1 / 2018-06-18
FAQs
CLI for PostCSS
The npm package postcss-cli receives a total of 466,146 weekly downloads. As such, postcss-cli popularity was classified as popular.
We found that postcss-cli demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.