<commit_before># PostCSS [![Build Status](https://travis-ci.org/postcss/postcss.png)](https://travis-ci.org/postcss/postcss)

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

PostCSS is a framework for CSS postprocessors,
to modify CSS with JavaScript with full source map support.

It takes care of most common CSS tool tasks:

1. parses CSS;
2. gives you usable JS API to edit CSS node tree;
3. dumps modified node tree into CSS string;
4. generates (or modifies existent) source map for your changes;

You can use this framework to write you own:

* CSS minifier or beautifier.
* CSS polyfills.
* Grunt plugin to generate sprites, include `data-uri` images
  or any other works.
* Text editor plugin to automate CSS routine.
* Command-line CSS tool.

Sponsored by [<NAME>](http://evilmartians.com/).

## Built with PostCSS

* [Autoprefixer] adds vendor prefixes by Can I Use data.
* [grunt-pixrem], `rem` unit polyfill.
* [CSS MQPacker] joins same media queries.
* [RTLCSS] mirrors styles for right-to-left locales.
* [CSSWring] and [grunt-csswring] CSS minifier with full source map support.
* [Pleeease] is a pack of various postprocessors.
* [Grunt-webpcss] to duplicate images in CSS to WebP for supported browsers.
* [Pleeease Filters] converts WebKit filters to SVG filter for other browsers.
* [css2modernizr] analyzes your CSS and output only used Modernizr’s settings.
* [data-separator] splits data-uri into a separate CSS file.

[Pleeease Filters]: https://github.com/iamvdo/pleeease-filters
[grunt-csswring]:   https://github.com/princed/grunt-csswring
[data-separator]:   https://github.com/Sebastian-Fitzner/grunt-data-separator
[css2modernizr]:    https://github.com/vovanbo/css2modernizr
[Grunt-webpcss]:    https://github.com/lexich/grunt-webpcss
[Autoprefixer]:     https://github.com/ai/autoprefixer
[grunt-pixrem]:     https://github.com/robwierzbowski/grunt-pixrem
[CSS MQPacker]:     https://github.com/hail2u/node-css-mqpacker
[Pleeease]:         http://pleeease.io/
[CSSWring]:         https://github.com/hail2u/node-csswring
[RTLCSS]:           https://github.com/MohammadYounes/rtlcss

## Quick Example

Let’s fix forgotten `content` property in `::before` and `::after`:

```js<commit_msg>Add some postcss plugins to README<commit_after># PostCSS [![Build Status](https://travis-ci.org/postcss/postcss.png)](https://travis-ci.org/postcss/postcss)

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

PostCSS is a framework for CSS postprocessors,
to modify CSS with JavaScript with full source map support.

It takes care of most common CSS tool tasks:

1. parses CSS;
2. gives you usable JS API to edit CSS node tree;
3. dumps modified node tree into CSS string;
4. generates (or modifies existent) source map for your changes;

You can use this framework to write you own:

* CSS minifier or beautifier.
* CSS polyfills.
* Grunt plugin to generate sprites, include `data-uri` images
  or any other works.
* Text editor plugin to automate CSS routine.
* Command-line CSS tool.

Sponsored by [Ev<NAME>](http://evilmartians.com/).

## PostCSS Plugins

* [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties): plugin to polyfill the W3C-style CSS Custom Properties for cascading variables.
* [postcss-calc](https://github.com/postcss/postcss-calc): plugin to reduce calc() usage (recommanded with `postcss-custom-properties`).

## Built with PostCSS

* [Autoprefixer] adds vendor prefixes by Can I Use data.
* [grunt-pixrem], `rem` unit polyfill.
* [CSS MQPacker] joins same media queries.
* [RTLCSS] mirrors styles for right-to-left locales.
* [CSSWring] and [grunt-csswring] CSS minifier with full source map support.
* [Pleeease] is a pack of various postprocessors.
* [Grunt-webpcss] to duplicate images in CSS to WebP for supported browsers.
* [Pleeease Filters] converts WebKit filters to SVG filter for other browsers.
* [css2modernizr] analyzes your CSS and output only used Modernizr’s settings.
* [data-separator] splits data-uri into a separate CSS file.

[Pleeease Filters]: https://github.com/iamvdo/pleeease-filters
[grunt-csswring]:   https://github.com/princed/grunt-csswring
[data-separator]:   https://github.com/Sebastian-Fitzner/grunt-data-separator
[css2modernizr]:    https://github.com/vovanbo/css2modernizr
[Grunt-webpcss]:    https://github.com/lexich/grunt-webpcss
[Autoprefixer]:     https://github.com/ai/autoprefixer
[grunt-pixrem]:     https://github.com/robwierzbowski/grunt-pixrem
[CSS MQPacker]:     https://github.com/hail2u/node-css-mqpacker
[Pleeease]:         http://pleeease.io/
[CSSWring]:         https://github.com/hail2u/node-csswring
[RTLCSS]:           https://github.com/MohammadYounes/rtlcss

## Quick Example

Let’s fix forgotten `content` property in `::before` and `::after`:

```js
{'fraction_non_alphanumeric': 0.12157258064516129, 'fraction_numerical': 0.005443548387096774, 'mean_word_length': 4.37486457204767, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 26, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2692291', 'n_tokens_mistral': 1700, 'n_tokens_neox': 1655, 'n_words': 493}