# postcss

**Repository Path**: mirrors_f/postcss

## Basic Information

- **Project Name**: postcss
- **Description**: Transforming CSS with JS plugins
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PostCSS [![Build Status][ci-img]][ci] [![Gitter][chat-img]][chat]

<img align="right" width="95" height="95"
     title="Philosopher’s stone, logo of PostCSS"
     src="http://postcss.github.io/postcss/logo.svg">

PostCSS is a tool for transforming CSS with JS plugins.
These plugins can support variables and mixins, transpile future CSS syntax,
inline images, and more.

PostCSS is used by industry leaders including Google, Twitter, Alibaba,
and Shopify. The [Autoprefixer] PostCSS plugin is one of the most popular
CSS processors.

PostCSS can do the same work as preprocessors like Sass, Less, and Stylus.
But PostCSS is modular, 3-30 times faster, and much more powerful.

Twitter account: [@postcss](https://twitter.com/postcss).
VK.com page:     [postcss](https://vk.com/postcss).

[chat-img]: https://img.shields.io/badge/Gitter-Join_the_PostCSS_chat-brightgreen.svg
[ci-img]:   https://img.shields.io/travis/postcss/postcss.svg
[chat]:     https://gitter.im/postcss/postcss
[ci]:       https://travis-ci.org/postcss/postcss

[Examples](#what-is-postcss) | [Features](#features) | [Usage](#usage) | [Plugins](#plugins) | [Write Your Own Plugin](#how-to-develop-postcss-plugin) | [Options](#options)
--- | --- | --- | --- | --- | ---

<a href="https://evilmartians.com/?utm_source=postcss">
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54">
</a>

[Autoprefixer]: https://github.com/postcss/autoprefixer

## What is PostCSS

PostCSS itself is very small. It includes only a CSS parser,
a CSS node tree API, a source map generator, and a node tree stringifier.

All CSS transformations are made by plugins. And these plugins are just
small plain JS functions, which receive a CSS node tree, transform it,
and return a modified tree.

You can use the [cssnext] plugin pack and write future CSS code right now:

```css
:root {
    --mainColor: #ffbbaaff;
}
@custom-media    --mobile (width <= 640px);
@custom-selector --heading h1, h2, h3, h4, h5, h6;

.post-article :--heading {
    color: color( var(--mainColor) blackness(+20%) );
}
@media (--mobile) {
    .post-article :--heading {
        margin-top: 0;
    }
}
```

Or if you like the Sass syntax, you could combine
[`postcss-nested`] and [`postcss-mixins`]:

```css
@define-mixin social-icon $network $color {
    &.is-$network {
        background: $color;
    }
}

.social-icon {
    @mixin social-icon twitter  #55acee;
    @mixin social-icon facebook #3b5998;

    padding: 10px 5px;
    @media (max-width: 640px) {
        padding: 0;
    }
}
```

[cssnext]: http://cssnext.io/

## Features

Preprocessors are template languages, where you mix styles with code
(like PHP does with HTML).

In contrast, in PostCSS you write a custom subset of CSS.
All code can only be in JS plugins.

As a result, PostCSS offers three main benefits:

* **Performance:** PostCSS, written in JS, is [3 times faster] than libsass,
  which is written in C++.
* **Future CSS:** PostCSS plugins can read and rebuild an entire document,
  meaning that they can provide new language features. For example, [cssnext]
  transpiles the latest W3C drafts to current CSS syntax.
* **New abilities:** PostCSS plugins can read and change every part of CSS.
  It makes many new classes of tools possible. [Autoprefixer], [`rtlcss`],
  [`doiuse`] or [`postcss-colorblind`] are good examples.

[3 times faster]: https://github.com/postcss/benchmark

## Usage

Start using PostCSS in just two steps:

1. Add PostCSS to your build tool.
2. Select plugins from the list below and add them to your PostCSS process.

There are plugins for [Grunt], [Gulp], [webpack], [Broccoli],
[Brunch] and [ENB].

```js
gulp.task('css', function () {
    var postcss = require('gulp-postcss');
    return gulp.src('src/**/*.css')
        .pipe( postcss([ require('cssnext')(), require('cssnano')() ]) )
        .pipe( gulp.dest('build/') );
});
```

For other environments, you can use the [CLI tool] or the JS API:

```js
var postcss = require('postcss');
postcss([ require('cssnext')(), require('cssnano')() ])
    .process(css, { from: 'src/app.css', to: 'app.css' })
    .then(function (result) {
        fs.writeFileSync('app.css', result.css);
        if ( result.map ) fs.writeFileSync('app.css.map', result.map);
    });
```

You can also use PostCSS plugins with Stylus by using [`poststylus`].

Read the [PostCSS API] for more details about the JS API.

[`poststylus`]: https://github.com/seaneking/poststylus
[PostCSS API]:  https://github.com/postcss/postcss/blob/master/docs/api.md
[Broccoli]:     https://github.com/jeffjewiss/broccoli-postcss
[CLI tool]:     https://github.com/code42day/postcss-cli
[webpack]:      https://github.com/postcss/postcss-loader
[Brunch]:       https://github.com/iamvdo/postcss-brunch
[Grunt]:        https://github.com/nDmitry/grunt-postcss
[Gulp]:         https://github.com/postcss/gulp-postcss
[ENB]:          https://github.com/theprotein/enb-postcss

## Plugins

### Control

There are two ways to make PostCSS magic more explicit.

Limit a plugin's local stylesheet context using [`postcss-plugin-context`]:

```css
.css-example.is-test-for-css4-browsers {
    color: gray(255, 50%);
}
@context cssnext {
    .css-example.is-fallback-for-all-browsers {
        color: gray(255, 50%);
    }
}
```

Or enable plugins directly in CSS using [`postcss-use`]:

```css
@use autoprefixer(browsers: ['last 2 versions']);

:fullscreen a {
    display: flex
}
```

[`postcss-plugin-context`]: https://github.com/postcss/postcss-plugin-context
[`postcss-use`]:            https://github.com/postcss/postcss-use

### Packs

* [`atcss`] contains plugins that transform your CSS according
  to special annotation comments.
* [`cssnano`] contains plugins that optimize CSS size for use in production.
* [`cssnext`] contains plugins that allow you to use future CSS features today.
* [`precss`] contains plugins that allow you to use Sass-like CSS.
* [`rucksack`] contains plugins to speed up CSS development with new features and shortcuts.
* [`stylelint`] contains plugins that lint your stylesheets.

[`stylelint`]: https://github.com/stylelint/stylelint
[`rucksack`]:  https://github.com/simplaio/rucksack
[`cssnano`]:   https://github.com/ben-eb/cssnano
[`cssnext`]:   http://cssnext.io/
[`atcss`]:     https://github.com/morishitter/atcss

### Future CSS Syntax

* [`postcss-color-function`] supports functions to transform colors.
* [`postcss-color-gray`] supports the `gray()` function.
* [`postcss-color-hex-alpha`] supports `#rrggbbaa` and `#rgba` notation.
* [`postcss-color-hwb`] transforms `hwb()` to widely compatible `rgb()`.
* [`postcss-color-rebeccapurple`] supports the `rebeccapurple` color.
* [`postcss-conic-gradient`] supports the `conic-gradient` background.
* [`postcss-custom-media`] supports custom aliases for media queries.
* [`postcss-custom-properties`] supports variables, using syntax from
  the W3C Custom Properties.
* [`postcss-custom-selectors`] adds custom aliases for selectors.
* [`postcss-font-variant`] transpiles human-readable `font-variant`
  to more widely supported CSS.
* [`postcss-host`] makes the Shadow DOM’s `:host` selector work properly
  with pseudo-classes.
* [`postcss-media-minmax`] adds `<=` and `=>` statements to media queries.
* [`postcss-pseudo-class-any-link`] adds `:any-link` pseudo-class.
* [`postcss-selector-not`] transforms CSS4 `:not()` to CSS3 `:not()`.
* [`mq4-hover-shim`] supports the `@media (hover)` feature.

See also [`cssnext`] plugins pack to add future CSS syntax by one line of code.

### Fallbacks

* [`postcss-color-rgba-fallback`] transforms `rgba()` to hexadecimal.
* [`postcss-epub`] adds the `-epub-` prefix to relevant properties.
* [`postcss-image-set`] adds `background-image` with first image
  for `image-set()`.
* [`postcss-opacity`] adds opacity filter for IE8.
* [`postcss-pseudoelements`] Convert `::` selectors into `:` selectors
  for IE 8 compatibility.
* [`postcss-vmin`] generates `vm` fallback for `vmin` unit in IE9.
* [`postcss-will-change`] inserts 3D hack before `will-change` property.
* [`autoprefixer`] adds vendor prefixes for you, using data from Can I Use.
* [`cssgrace`] provides various helpers and transpiles CSS 3 for IE
  and other old browsers.
* [`pixrem`] generates pixel fallbacks for `rem` units.

### Language Extensions

* [`postcss-bem`] adds at-rules for BEM and SUIT style classes.
* [`postcss-conditionals`] adds `@if` statements.
* [`postcss-css-variables`] supports variables for selectors, and at-rules
  using W3C similar syntax.
* [`postcss-define-property`] to define properties shortcut.
* [`postcss-each`] adds `@each` statement.
* [`postcss-for`] adds `@for` loops.
* [`postcss-local-constants`] adds support for localized constants.
* [`postcss-map`] enables configuration maps.
* [`postcss-mixins`] enables mixins more powerful than Sass',
  defined within stylesheets or in JS.
* [`postcss-media-variables`] adds support for `var()` and `calc()`
  in `@media` rules
* [`postcss-modular-scale`] adds a modular scale `ms()` function.
* [`postcss-nested`] unwraps nested rules.
* [`postcss-nested-props`] unwraps nested properties.
* [`postcss-pseudo-class-enter`] transforms `:enter` into `:hover` and `:focus`.
* [`postcss-quantity-queries`] enables quantity queries.
* [`postcss-simple-extend`] supports extending of silent classes,
  like Sass’ `@extend`.
* [`postcss-simple-vars`] supports for Sass-style variables.
* [`postcss-strip-units`] strips units off of property values.
* [`postcss-vertical-rhythm`] adds a vertical rhythm unit
  based on `font-size` and `line-height`.
* [`csstyle`] adds components workflow to your styles.

### Colors

* [`postcss-brand-colors`] inserts company brand colors
  in the `brand-colors` module.
* [`postcss-color-alpha`] transforms `#hex.a`, `black(alpha)` and `white(alpha)`
  to `rgba()`.
* [`postcss-color-hcl`] transforms `hcl(H, C, L)` and `hcl(H, C, L, alpha)`
  to `#rgb` and `rgba()`.
* [`postcss-color-mix`] mixes two colors together.
* [`postcss-color-palette`] transforms CSS 2 color keywords to a custom palette.
* [`postcss-color-pantone`] transforms pantone color to RGB.
* [`postcss-color-scale`] adds a color scale `cs()` function.
* [`postcss-hexrgba`] adds shorthand hex `rgba(hex, alpha)` method.

### Grids

* [`postcss-grid`] adds a semantic grid system.
* [`postcss-neat`] is a semantic and fluid grid framework.
* [`lost`] feature-rich `calc()` grid system by Jeet author.

### Optimizations

* [`postcss-assets`] allows you to simplify URLs, insert image dimensions,
  and inline files.
* [`postcss-at2x`] handles retina background images via use of `at-2x` keyword.
* [`postcss-calc`] reduces `calc()` to values
  (when expressions involve the same units).
* [`postcss-data-packer`] moves embedded Base64 data to a separate file.
* [`postcss-import`] inlines the stylesheets referred to by `@import` rules.
* [`postcss-single-charset`] ensures that there is one and only one
  `@charset` rule at the top of file.
* [`postcss-sprites`] generates CSS sprites from stylesheets.
* [`postcss-svgo`] processes inline SVG through [SVGO].
* [`postcss-svg`] insert inline SVG to CSS and allows to manage it colors.
* [`postcss-url`] rebases or inlines `url()`s.
* [`postcss-zindex`] rebases positive `z-index` values.
* [`css-byebye`] removes the CSS rules that you don’t want.
* [`css-mqpacker`] joins matching CSS media queries into a single statement.
* [`webpcss`] adds URLs for WebP images for browsers that support WebP.

See also plugins in modular minifier [`cssnano`].

[SVGO]: https://github.com/svg/svgo

### Shortcuts

* [`postcss-alias`] creates shorter aliases for properties.
* [`postcss-border`] adds shorthand for width and color of all borders
  in `border` property.
* [`postcss-clearfix`] adds `fix` and `fix-legacy` properties to the `clear`
  declaration.
* [`postcss-default-unit`] adds default unit to numeric CSS properties.
* [`postcss-easings`] replaces easing names from easings.net
  with `cubic-bezier()` functions.
* [`postcss-focus`] adds `:focus` selector to every `:hover`.
* [`postcss-font-pack`] simplifies font declarations and validates they match
  configured font packs.
* [`postcss-fontpath`] adds font links for different browsers.
* [`postcss-generate-preset`] allows quick generation of rules.
  Useful for creating repetitive utilities.
* [`postcss-position`] adds shorthand declarations for position attributes.
* [`postcss-property-lookup`] allows referencing property values without
  a variable.
* [`postcss-short`] adds and extends numerous shorthand properties.
* [`postcss-size`] adds a `size` shortcut that sets width and height
  with one declaration.
* [`postcss-transform-shortcut`] allows shorthand transform properties in CSS.
* [`postcss-verthorz`] adds vertical and horizontal spacing declarations.

### Others

* [`postcss-class-prefix`] adds a prefix/namespace to class selectors.
* [`postcss-colorblind`] transforms colors using filters to simulate
  colorblindness.
* [`postcss-fakeid`] transforms `#foo` IDs to attribute selectors `[id="foo"]`.
* [`postcss-flexboxfixer`] unprefixes `-webkit-` only flexbox in legacy CSS.
* [`postcss-gradientfixer`] unprefixes `-webkit-` only gradients in legacy CSS.
* [`postcss-pseudo-elements-content`] automatically adds `content: ""`
  to `:before` and `:after`.
* [`postcss-pxtorem`] converts pixel units to `rem`.
* [`postcss-style-guide`] generates a style guide automatically.
* [`perfectionist`] formats poorly written CSS and renders a “pretty” result.
* [`rtlcss`] mirrors styles for right-to-left locales.
* [`stylehacks`] removes CSS hacks based on browser support.

### Analysis

* [`postcss-bem-linter`] lints CSS for conformance to SUIT CSS methodology.
* [`postcss-cssstats`] returns an object with CSS statistics.
* [`css2modernizr`] creates a Modernizr config file
  that requires only the tests that your CSS uses.
* [`doiuse`] lints CSS for browser support, using data from Can I Use.
* [`list-selectors`] lists and categorizes the selectors used in your CSS,
  for code review.

### Reporters

* [`postcss-browser-reporter`] displays warning messages from other plugins
  right in your browser.
* [`postcss-reporter`] logs warnings and other messages from other plugins
  in the console.

### Fun

* [`postcss-australian-stylesheets`] Australian Style Sheets.
* [`postcss-canadian-stylesheets`] Canadian Style Sheets.
* [`postcss-pointer`] Replaces `pointer: cursor` with `cursor: pointer`.
* [`postcss-spiffing`] lets you use British English in your CSS.

[`postcss-pseudo-elements-content`]:https://github.com/omgovich/postcss-pseudo-elements-content
[`postcss-australian-stylesheets`]: https://github.com/dp-lewis/postcss-australian-stylesheets
[`postcss-pseudo-class-any-link`]:  https://github.com/jonathantneal/postcss-pseudo-class-any-link
[`postcss-canadian-stylesheets`]:   https://github.com/chancancode/postcss-canadian-stylesheets
[`postcss-color-rebeccapurple`]:    https://github.com/postcss/postcss-color-rebeccapurple
[`postcss-color-rgba-fallback`]:    https://github.com/postcss/postcss-color-rgba-fallback
[`postcss-discard-duplicates`]:     https://github.com/ben-eb/postcss-discard-duplicates
[`postcss-minify-font-weight`]:     https://github.com/ben-eb/postcss-minify-font-weight
[`postcss-pseudo-class-enter`]:     https://github.com/jonathantneal/postcss-pseudo-class-enter
[`postcss-transform-shortcut`]:     https://github.com/jonathantneal/postcss-transform-shortcut
[`postcss-custom-properties`]:      https://github.com/postcss/postcss-custom-properties
[`postcss-discard-font-face`]:      https://github.com/ben-eb/postcss-discard-font-face
[`postcss-custom-selectors`]:       https://github.com/postcss/postcss-custom-selectors
[`postcss-discard-comments`]:       https://github.com/ben-eb/postcss-discard-comments
[`postcss-minify-selectors`]:       https://github.com/ben-eb/postcss-minify-selectors
[`postcss-quantity-queries`]:       https://github.com/pascalduez/postcss-quantity-queries
[`postcss-browser-reporter`]:       https://github.com/postcss/postcss-browser-reporter
[`postcss-color-hex-alpha`]:        https://github.com/postcss/postcss-color-hex-alpha
[`postcss-define-property`]:        https://github.com/daleeidd/postcss-define-property
[`postcss-generate-preset`]:        https://github.com/simonsmith/postcss-generate-preset
[`postcss-media-variables`]:        https://github.com/WolfgangKluge/postcss-media-variables
[`postcss-property-lookup`]:        https://github.com/simonsmith/postcss-property-lookup
[`postcss-vertical-rhythm`]:        https://github.com/markgoodyear/postcss-vertical-rhythm
[`postcss-local-constants`]:        https://github.com/macropodhq/postcss-local-constants
[`postcss-color-function`]:         https://github.com/postcss/postcss-color-function
[`postcss-conic-gradient`]:         https://github.com/jonathantneal/postcss-conic-gradient
[`postcss-convert-values`]:         https://github.com/ben-eb/postcss-convert-values
[`postcss-pseudoelements`]:         https://github.com/axa-ch/postcss-pseudoelements
[`postcss-single-charset`]:         https://github.com/hail2u/postcss-single-charset
[`postcss-color-palette`]:          https://github.com/zaim/postcss-color-palette
[`postcss-color-pantone`]:          https://github.com/longdog/postcss-color-pantone
[`postcss-css-variables`]:          https://github.com/MadLittleMods/postcss-css-variables
[`postcss-discard-empty`]:          https://github.com/ben-eb/postcss-discard-empty
[`postcss-gradientfixer`]:          https://github.com/hallvors/postcss-gradientfixer
[`postcss-modular-scale`]:          https://github.com/kristoferjoseph/postcss-modular-scale
[`postcss-normalize-url`]:          https://github.com/ben-eb/postcss-normalize-url
[`postcss-reduce-idents`]:          https://github.com/ben-eb/postcss-reduce-idents
[`postcss-simple-extend`]:          https://github.com/davidtheclark/postcss-simple-extend
[`postcss-brand-colors`]:           https://github.com/postcss/postcss-brand-colors
[`postcss-class-prefix`]:           https://github.com/thompsongl/postcss-class-prefix
[`postcss-conditionals`]:           https://github.com/andyjansson/postcss-conditionals
[`postcss-custom-media`]:           https://github.com/postcss/postcss-custom-media
[`postcss-default-unit`]:           https://github.com/antyakushev/postcss-default-unit
[`postcss-flexboxfixer`]:           https://github.com/hallvors/postcss-flexboxfixer
[`postcss-font-variant`]:           https://github.com/postcss/postcss-font-variant
[`postcss-reporter`]:               https://github.com/postcss/postcss-reporter
[`postcss-media-minmax`]:           https://github.com/postcss/postcss-media-minmax
[`postcss-merge-idents`]:           https://github.com/ben-eb/postcss-merge-idents
[`postcss-selector-not`]:           https://github.com/postcss/postcss-selector-not
[`postcss-nested-props`]:           https://github.com/jedmao/postcss-nested-props
[`postcss-color-alpha`]:            https://github.com/avanes/postcss-color-alpha
[`postcss-color-scale`]:            https://github.com/kristoferjoseph/postcss-color-scale
[`postcss-data-packer`]:            https://github.com/Ser-Gen/postcss-data-packer
[`postcss-font-family`]:            https://github.com/ben-eb/postcss-font-family
[`postcss-merge-rules`]:            https://github.com/ben-eb/postcss-merge-rules
[`postcss-simple-vars`]:            https://github.com/postcss/postcss-simple-vars
[`postcss-strip-units`]:            https://github.com/whitneyit/postcss-strip-units
[`postcss-style-guide`]:            https://github.com/morishitter/postcss-style-guide
[`postcss-will-change`]:            https://github.com/postcss/postcss-will-change
[`postcss-bem-linter`]:             https://github.com/necolas/postcss-bem-linter
[`postcss-color-gray`]:             https://github.com/postcss/postcss-color-gray
[`postcss-colorblind`]:             https://github.com/btholt/postcss-colorblind
[`postcss-font-pack`]:              https://github.com/jedmao/postcss-font-pack
[`postcss-color-hcl`]:              https://github.com/devgru/postcss-color-hcl
[`postcss-color-hwb`]:              https://github.com/postcss/postcss-color-hwb
[`postcss-color-mix`]:              https://github.com/iamstarkov/postcss-color-mix
[`postcss-image-set`]:              https://github.com/alex499/postcss-image-set
[`postcss-clearfix`]:               https://github.com/seaneking/postcss-clearfix
[`postcss-colormin`]:               https://github.com/ben-eb/colormin
[`postcss-cssstats`]:               https://github.com/cssstats/postcss-cssstats
[`postcss-position`]:               https://github.com/seaneking/postcss-position
[`postcss-spiffing`]:               https://github.com/HashanP/postcss-spiffing
[`postcss-verthorz`]:               https://github.com/davidhemphill/postcss-verthorz
[`pleeease-filters`]:               https://github.com/iamvdo/pleeease-filters
[`postcss-fontpath`]:               https://github.com/seaneking/postcss-fontpath
[`postcss-easings`]:                https://github.com/postcss/postcss-easings
[`postcss-hexrgba`]:                https://github.com/seaneking/postcss-hexrgba
[`postcss-opacity`]:                https://github.com/iamvdo/postcss-opacity
[`postcss-pointer`]:                https://github.com/markgoodyear/postcss-pointer
[`postcss-pxtorem`]:                https://github.com/cuth/postcss-pxtorem
[`postcss-sprites`]:                https://github.com/2createStudio/postcss-sprites
[`postcss-assets`]:                 https://github.com/borodean/postcss-assets
[`postcss-border`]:                 https://github.com/andrepolischuk/postcss-border
[`postcss-fakeid`]:                 https://github.com/pathsofdesign/postcss-fakeid
[`postcss-import`]:                 https://github.com/postcss/postcss-import
[`postcss-mixins`]:                 https://github.com/postcss/postcss-mixins
[`postcss-nested`]:                 https://github.com/postcss/postcss-nested
[`postcss-zindex`]:                 https://github.com/ben-eb/postcss-zindex
[`list-selectors`]:                 https://github.com/davidtheclark/list-selectors
[`mq4-hover-shim`]:                 https://github.com/twbs/mq4-hover-shim
[`postcss-focus`]:                  https://github.com/postcss/postcss-focus
[`css2modernizr`]:                  https://github.com/vovanbo/css2modernizr
[`postcss-short`]:                  https://github.com/jonathantneal/postcss-short
[`postcss-alias`]:                  https://github.com/seaneking/postcss-alias
[`perfectionist`]:                  https://github.com/ben-eb/perfectionist
[`postcss-at2x`]:                   https://github.com/simonsmith/postcss-at2x
[`postcss-calc`]:                   https://github.com/postcss/postcss-calc
[`postcss-each`]:                   https://github.com/outpunk/postcss-each
[`postcss-epub`]:                   https://github.com/Rycochet/postcss-epub
[`postcss-grid`]:                   https://github.com/andyjansson/postcss-grid
[`postcss-host`]:                   https://github.com/vitkarpov/postcss-host
[`postcss-neat`]:                   https://github.com/jo-asakura/postcss-neat
[`postcss-size`]:                   https://github.com/postcss/postcss-size
[`postcss-svgo`]:                   https://github.com/ben-eb/postcss-svgo
[`postcss-vmin`]:                   https://github.com/iamvdo/postcss-vmin
[`autoprefixer`]:                   https://github.com/postcss/autoprefixer
[`css-mqpacker`]:                   https://github.com/hail2u/node-css-mqpacker
[`postcss-bem`]:                    https://github.com/ileri/postcss-bem
[`postcss-for`]:                    https://github.com/antyakushev/postcss-for
[`postcss-map`]:                    https://github.com/pascalduez/postcss-map
[`postcss-svg`]:                    https://github.com/Pavliko/postcss-svg
[`postcss-url`]:                    https://github.com/postcss/postcss-url
[`css-byebye`]:                     https://github.com/AoDev/css-byebye
[`stylehacks`]:                     https://github.com/ben-eb/stylehacks
[`cssgrace`]:                       https://github.com/cssdream/cssgrace
[`csstyle`]:                        https://github.com/geddski/csstyle
[`webpcss`]:                        https://github.com/lexich/webpcss
[`doiuse`]:                         https://github.com/anandthakker/doiuse
[`pixrem`]:                         https://github.com/robwierzbowski/node-pixrem
[`precss`]:                         https://github.com/jonathantneal/precss
[`rtlcss`]:                         https://github.com/MohammadYounes/rtlcss
[`lost`]:                           https://github.com/corysimmons/lost

## How to Develop a PostCSS Plugin

* [Plugin Guidelines](https://github.com/postcss/postcss/blob/master/docs/guidelines/plugin.md)
* [Plugin Boilerplate](https://github.com/postcss/postcss-plugin-boilerplate)
* [PostCSS API](https://github.com/postcss/postcss/blob/master/docs/api.md)
* [Ask questions](https://gitter.im/postcss/postcss)

## Options

### Source Map

PostCSS has great [source maps] support. It can read and interpret maps
from previous transformation steps, autodetect the format that you expect,
and output both external and inline maps.

To ensure that you generate an accurate source map, you must indicate the input
and output CSS file paths — using the options `from` and `to`, respectively.

To generate a new source map with the default options, simply set `map: true`.
This will generate an inline source map that contains the source content.
If you don’t want the map inlined, you can set `map.inline: false`.

```js
processor
    .process(css, {
        from: 'app.sass.css',
        to:   'app.css',
        map: { inline: false },
    })
    .then(function (result) {
        result.map //=> '{ "version":3,
                   //      "file":"app.css",
                   //      "sources":["app.sass"],
                   //       "mappings":"AAAA,KAAI" }'
    });
```

If PostCSS finds source maps from a previous transformation,
it will automatically update that source map with the same options.

If you want more control over source map generation, you can define the `map`
option as an object with the following parameters:

* `inline` boolean: indicates that the source map should be embedded
  in the output CSS as a Base64-encoded comment. By default, it is `true`.
  But if all previous maps are external, not inline, PostCSS will not embed
  the map even if you do not set this option.

  If you have an inline source map, the `result.map` property will be empty,
  as the source map will be contained within the text of `result.css`.

* `prev` string, object or boolean: source map content from
  a previous processing step (for example, Sass compilation).
  PostCSS will try to read the previous source map automatically
  (based on comments within the source CSS), but you can use this option
  to identify it manually. If desired, you can omit the previous map
  with `prev: false`.

* `sourcesContent` boolean: indicates that PostCSS should set the origin
  content (for example, Sass source) of the source map. By default,
  it is `true`. But if all previous maps do not contain sources content,
  PostCSS will also leave it out even if you do not set this option.

* `annotation` boolean or string: indicates that PostCSS should add annotation
  comments to the CSS. By default, PostCSS will always add a comment with a path
  to the source map. PostCSS will not add annotations to CSS files that
  do not contain any comments.

  By default, PostCSS presumes that you want to save the source map as
  `opts.to + '.map'` and will use this path in the annotation comment.
  A different path can be set by providing a string value for `annotation`.

  If you have set `inline: true`, annotation cannot be disabled.

[source maps]: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

### Safe Mode

If you pass the `safe: true` option to the `process` or `parse` methods,
PostCSS will try to correct any syntax errors that it finds in the CSS.

```js
postcss.parse('a {');                 // will throw "Unclosed block"
postcss.parse('a {', { safe: true }); // will return CSS root for a {}
```

This is useful for legacy code filled with hacks. Another use-case
is interactive tools with live input — for example,
the [Autoprefixer demo](http://jsfiddle.net/simevidas/udyTs/show/light/).