postcss-cli
    Overview
    Documentation
    Code
    Playground
    Issues
    Insights
    Contributors
    Dependencies
    Versions
    Alternatives

postcss-cli

CLI for PostCSS

6.1.3  •  Published 2 months ago  •  by postcss  •  MIT License

npm node Greenkeeper badge tests cover chat

PostCSS CLI

Install

npm i -g|-D postcss-cli

Usage

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]
  --include-dotfiles  Enables glob to match files/dirs that begin with "."  [boolean]

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 directory 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 (e.g. 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.

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

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

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

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

Popularity

Weekly Downloads
89.8K
Stars
430

Maintenance

Development

Last ver 2 months ago
Created 5 years ago
Last commit 2 months ago
5 days between commits

Technology

Node version: 12.3.0
30.1K unpacked

Legal and Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

39 contributors
RyanZim
Maintainer, 142 commits, 76 merges, 26 PRs
Works at ExodusMovement
Damian Krzeminski
Maintainer, 90 commits
greenkeeper[bot]
35 commits
Michael Ciniawsky
34 commits, 5 PRs
FND
20 commits
Daijiro Wachi
Maintainer, 16 commits, 2 merges, 7 PRs

Tags

cli
postcss
postcss-runner