postcss

Parse and transform a CSS file

$ postcss [path/to/file]

$ postcss [path/to/file] --output [path/to/file]

$ postcss [path/to/file] --dir [path/to/directory]

$ postcss [path/to/file] --replace

$ postcss [path/to/file] --parser [parser]

$ postcss [path/to/file] --syntax [syntax]

$ postcss [path/to/file] --watch

$ postcss --help

postcss [options] <input-file(s)>
postcss [options] --dir <output-directory> <input-file(s)>
postcss --help

-o, --output <file>
    Specifies the output file for the processed CSS. If multiple input files are processed, use with --dir or individual output files.

-d, --dir <directory>
    Specifies an output directory for processed files when handling multiple input files. The directory must exist.

-e, --ext <extension>
    Changes the output file extension. Useful when processing files with a non-CSS extension or to rename output.

-r, --replace
    Replaces the original input files with the processed output. Use with caution as this overwrites files.

-w, --watch
    Watches input files for changes and recompiles them automatically when modifications are detected.

-u, --use <plugin>
    Specifies a PostCSS plugin to use for transformation. This option can be used multiple times to include multiple plugins. Plugins must be installed via npm.

-c, --config <file>
    Specifies a custom PostCSS configuration file (e.g., postcss.config.js). This file typically defines plugins and their options.

-m, --map
    Enables source map generation. By default, an inline source map is generated.

--no-map
    Disables source map generation entirely.

--env <environment>
    Sets the environment for the PostCSS config file (e.g., 'development', 'production'), allowing conditional plugin loading.

-h, --help
    Displays the help message, showing command usage and available options.

-v, --version
    Displays the version of the postcss-cli package.

PostCSS is an indispensable tool for transforming CSS with JavaScript plugins. The postcss command, provided by postcss-cli, offers a direct command-line interface to this powerful ecosystem. Instead of being a traditional CSS preprocessor, PostCSS functions as a CSS parser that allows developers to apply a wide array of JavaScript-based transformations to their CSS code. This modular approach means that PostCSS itself is lightweight and gains its functionality through plugins.

Common use cases for postcss and its plugins include automatically adding vendor prefixes (Autoprefixer), minifying CSS (cssnano), linting code, compiling future CSS syntaxes, or even inlining assets. It reads input CSS files, processes them through the configured plugins, and then outputs the transformed CSS. Its flexibility and extensibility make it a core component in many modern web development build pipelines, enabling highly customized and efficient CSS processing workflows.

The postcss command is not a native Linux utility; it is part of the Node.js ecosystem. To use it, you must have Node.js and a package manager like npm or yarn installed on your system. Furthermore, PostCSS itself does not perform transformations without plugins. Users must explicitly install and configure specific PostCSS plugins (e.g., autoprefixer, cssnano) via npm or yarn for postcss to be functional. Configuration can become complex when dealing with multiple plugins, different environments, or advanced source map requirements.

PostCSS's core power comes from its plugin ecosystem. To use a plugin, you first need to install it via npm, for example: npm install autoprefixer cssnano. Then, you can either specify them directly on the command line using the --use flag (e.g., postcss --use autoprefixer input.css -o output.css) or, for more complex setups, create a configuration file named postcss.config.js in your project root. This file exports an object that defines your plugins and their settings, providing a more robust and manageable way to configure PostCSS for various build processes.

PostCSS was created by Andrey Sitnik in 2013, initially conceived as a flexible tool for CSS processing, rather than a monolithic preprocessor. Its design allows developers to define transformations through small, single-purpose JavaScript plugins. This modularity set it apart from established preprocessors like Sass and Less. The postcss-cli package was developed to provide a straightforward command-line interface, making the power of PostCSS and its plugin ecosystem accessible without requiring complex build tools like Webpack or Gulp. It quickly gained traction for its performance, flexibility, and the ability to adopt future CSS features today through polyfills and transformations.

npm(1), node(1), sass(1), less(1)