<commit_before># cssnext [![Travis Build Status](https://travis-ci.org/cssnext/cssnext.svg)](https://travis-ci.org/cssnext/cssnext) [![AppVeyor Build status](https://ci.appveyor.com/api/projects/status/q12sb37x4fpa7sht?svg=true)](https://ci.appveyor.com/project/MoOx/cssnext) [![Code Climate](http://img.shields.io/codeclimate/github/cssnext/cssnext.svg?style=flat)](https://codeclimate.com/github/cssnext/cssnext) [![NPM version](http://img.shields.io/npm/v/cssnext.svg?style=flat)](https://www.npmjs.org/package/cssnext)

> Use tomorrow's CSS syntax, today.

This is a CSS transpiler (CSS4+ to CSS3) that allows you to use tomorrow's CSS syntax today.
It transforms CSS specs that are not already implemented in popular browsers into more compatible CSS.  

_This is not a classic CSS preprocessor, but can totally replace one._

Check out [the website](https://cssnext.github.io/) or [try cssnext](https://cssnext.github.io/cssnext-playground) in your browser.

**Is it cssnext or CSSNext or CSSnext?**

The official name is **cssnext**, which should never be capitalized, especially not at the start of a sentence, unless it is being displayed in a location that is customarily all-caps (such as the title of man pages).

---

[Why](#why) | [Features](#features) | [Limitations](#limitations) | [Installation](#installation)| [CLI Usage](#cli) | [Node.js API](#nodejs-api) | [Contribute](#contributing)
--- | --- | --- | --- | --- | --- | ---

---

## Why

Prior 2015, CSS was frustrating by not having any specification for features we were looking for. No variables, no math, no color manipulation & no customization. Things are going to change soon since a lot of work has been made by the W3C to write new specs to make our life easier.

**This project aims to allow you to use future CSS syntax, today.**

It is similar to [Myth](http://myth.io/) or [SUIT CSS preprocessor](https://github.com/suitcss/preprocessor) but pushes the concept to the next level by supporting more features. It works great with [cssrecipes](https://cssrecipes.github.io/) or [SUIT CSS](https://suitcss.github.io/).

_It's not planned for now to provide polyfills for future CSS APIs that depend on the client browser._

Follow [@cssnext on Twitter](https://twitter.com/cssnext) to get the latest news & join [#cssnext on irc.freenode.net](http://webchat.freenode.net/?channels=cssnext) if you have any questions.

## Features

* automatic vendor prefixes ([⇗](https://github.com/postcss/autoprefixer)),
* [custom properties & `var()`](http://www.w3.org/TR/css-variables/)
([⇗](https://github.com/postcss/postcss-custom-properties)) limited to `:root`,
* [reduced `calc()`](https://github.com/MoOx/reduce-css-calc#readme)
([⇗](https://github.com/postcss/postcss-calc)) to optimize previously parsed `var()` references,
* [custom media queries](http://dev.w3.org/csswg/mediaqueries/#custom-mq)
([⇗](https://github.com/postcss/postcss-custom-media)) a nice way to have semantic media queries,
* [media queries ranges](http://dev.w3.org/csswg/mediaqueries/#mq-ranges)
([⇗](https://github.com/postcss/postcss-media-minmax)) that allows to replace min-/max- with `<=` & `>=` (syntax easier to read),
* [custom selectors](http://dev.w3.org/csswg/css-extensions/#custom-selectors)
([⇗](https://github.com/postcss/postcss-custom-selector)) to create your own selectors,
* [`color()`](http://dev.w3.org/csswg/css-color/#modifying-colors)
([⇗](https://github.com/postcss/postcss-color-function)) a color function to modify colors,
* [`hwb()`](http://dev.w3.org/csswg/css-color/#the-hwb-notation)
([⇗](https://github.com/postcss/postcss-color-hwb)) similar to `hsl()` but easier for humans to work with,
* [`gray()`](http://dev.w3.org/csswg/css-color/#grays)
([⇗](https://github.com/postcss/postcss-color-gray)),
* [#rrggbbaa](http://dev.w3.org/csswg/css-color/#hex-notation)
([⇗](https://github.com/postcss/postcss-color-hex-alpha)),
* [`rebeccapurple`](http://dev.w3.org/csswg/css-color/#valdef-color-rebeccapurple)
([⇗](https://github.com/postcss/postcss-color-rebeccapurple)),
* [font-variant](http://dev.w3.org/csswg/css-fonts/#propdef-font-variant) properties
([⇗](https://github.com/postcss/postcss-font-variant)),
* [filter](http://www.w3.org/TR/filter-effects/) properties
([⇗](https://github.com/iamvdo/pleeease-filters))
* [rem](http://www.w3.org/TR/css3-values/#rem-unit) units
([⇗](https://github.com/robwierzbowski/node-pixrem))
* [pseudo-elements](http://www.w3.org/TR/css3-selectors/#pseudo-elements)
([⇗](https://github.com/axa-ch/postcss-pseudoelements))
* [rgba()](http://www.w3.org/TR/css3-color/)
([⇗](https://github.com/postcss/postcss-color-rgba-fallback))
### Bonus features

_<small>The features below are considered as bonus since it's totally not related to CSS specs</small>._

* `@import` inline local files and modules - `node_modules` or `web_modules` ([⇗](https://github.com/postcss/postcss-import)) to output a bundled CSS file. `url()` referenced are also rebased.
* minification is available ([⇗](https://github.com/hail2u/node-csswring)) if you want to compress the output for production.


### @todo

Any omissions of the CSS specifications (even in draft) that are subject to be handled by cssnext are not intentional.  
You can take a look at the [list of features that are waiting to be implemented](https://github.com/cssnext/cssnext/issues?q=is%3Aopen+is%3Aissue+label%3Afeature+label%3Aready).  <commit_msg>Fix Bonus features title<commit_after># cssnext [![Travis Build Status](https://travis-ci.org/cssnext/cssnext.svg)](https://travis-ci.org/cssnext/cssnext) [![AppVeyor Build status](https://ci.appveyor.com/api/projects/status/q12sb37x4fpa7sht?svg=true)](https://ci.appveyor.com/project/MoOx/cssnext) [![Code Climate](http://img.shields.io/codeclimate/github/cssnext/cssnext.svg?style=flat)](https://codeclimate.com/github/cssnext/cssnext) [![NPM version](http://img.shields.io/npm/v/cssnext.svg?style=flat)](https://www.npmjs.org/package/cssnext)

> Use tomorrow's CSS syntax, today.

This is a CSS transpiler (CSS4+ to CSS3) that allows you to use tomorrow's CSS syntax today.
It transforms CSS specs that are not already implemented in popular browsers into more compatible CSS.  

_This is not a classic CSS preprocessor, but can totally replace one._

Check out [the website](https://cssnext.github.io/) or [try cssnext](https://cssnext.github.io/cssnext-playground) in your browser.

**Is it cssnext or CSSNext or CSSnext?**

The official name is **cssnext**, which should never be capitalized, especially not at the start of a sentence, unless it is being displayed in a location that is customarily all-caps (such as the title of man pages).

---

[Why](#why) | [Features](#features) | [Limitations](#limitations) | [Installation](#installation)| [CLI Usage](#cli) | [Node.js API](#nodejs-api) | [Contribute](#contributing)
--- | --- | --- | --- | --- | --- | ---

---

## Why

Prior 2015, CSS was frustrating by not having any specification for features we were looking for. No variables, no math, no color manipulation & no customization. Things are going to change soon since a lot of work has been made by the W3C to write new specs to make our life easier.

**This project aims to allow you to use future CSS syntax, today.**

It is similar to [Myth](http://myth.io/) or [SUIT CSS preprocessor](https://github.com/suitcss/preprocessor) but pushes the concept to the next level by supporting more features. It works great with [cssrecipes](https://cssrecipes.github.io/) or [SUIT CSS](https://suitcss.github.io/).

_It's not planned for now to provide polyfills for future CSS APIs that depend on the client browser._

Follow [@cssnext on Twitter](https://twitter.com/cssnext) to get the latest news & join [#cssnext on irc.freenode.net](http://webchat.freenode.net/?channels=cssnext) if you have any questions.

## Features

* automatic vendor prefixes ([⇗](https://github.com/postcss/autoprefixer)),
* [custom properties & `var()`](http://www.w3.org/TR/css-variables/)
([⇗](https://github.com/postcss/postcss-custom-properties)) limited to `:root`,
* [reduced `calc()`](https://github.com/MoOx/reduce-css-calc#readme)
([⇗](https://github.com/postcss/postcss-calc)) to optimize previously parsed `var()` references,
* [custom media queries](http://dev.w3.org/csswg/mediaqueries/#custom-mq)
([⇗](https://github.com/postcss/postcss-custom-media)) a nice way to have semantic media queries,
* [media queries ranges](http://dev.w3.org/csswg/mediaqueries/#mq-ranges)
([⇗](https://github.com/postcss/postcss-media-minmax)) that allows to replace min-/max- with `<=` & `>=` (syntax easier to read),
* [custom selectors](http://dev.w3.org/csswg/css-extensions/#custom-selectors)
([⇗](https://github.com/postcss/postcss-custom-selector)) to create your own selectors,
* [`color()`](http://dev.w3.org/csswg/css-color/#modifying-colors)
([⇗](https://github.com/postcss/postcss-color-function)) a color function to modify colors,
* [`hwb()`](http://dev.w3.org/csswg/css-color/#the-hwb-notation)
([⇗](https://github.com/postcss/postcss-color-hwb)) similar to `hsl()` but easier for humans to work with,
* [`gray()`](http://dev.w3.org/csswg/css-color/#grays)
([⇗](https://github.com/postcss/postcss-color-gray)),
* [#rrggbbaa](http://dev.w3.org/csswg/css-color/#hex-notation)
([⇗](https://github.com/postcss/postcss-color-hex-alpha)),
* [`rebeccapurple`](http://dev.w3.org/csswg/css-color/#valdef-color-rebeccapurple)
([⇗](https://github.com/postcss/postcss-color-rebeccapurple)),
* [font-variant](http://dev.w3.org/csswg/css-fonts/#propdef-font-variant) properties
([⇗](https://github.com/postcss/postcss-font-variant)),
* [filter](http://www.w3.org/TR/filter-effects/) properties
([⇗](https://github.com/iamvdo/pleeease-filters))
* [rem](http://www.w3.org/TR/css3-values/#rem-unit) units
([⇗](https://github.com/robwierzbowski/node-pixrem))
* [pseudo-elements](http://www.w3.org/TR/css3-selectors/#pseudo-elements)
([⇗](https://github.com/axa-ch/postcss-pseudoelements))
* [rgba()](http://www.w3.org/TR/css3-color/)
([⇗](https://github.com/postcss/postcss-color-rgba-fallback))

### Bonus features

_<small>The features below are considered as bonus since it's totally not related to CSS specs</small>._

* `@import` inline local files and modules - `node_modules` or `web_modules` ([⇗](https://github.com/postcss/postcss-import)) to output a bundled CSS file. `url()` referenced are also rebased.
* minification is available ([⇗](https://github.com/hail2u/node-csswring)) if you want to compress the output for production.


### @todo

Any omissions of the CSS specifications (even in draft) that are subject to be handled by cssnext are not intentional.  
You can take a look at the [list of features that are waiting to be implemented](https://github.com/cssnext/cssnext/issues?q=is%3Aopen+is%3Aissue+label%3Afeature+label%3Aready).  
{'fraction_non_alphanumeric': 0.1734806629834254, 'fraction_numerical': 0.006445672191528545, 'mean_word_length': 4.854986522911052, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 11, 'https://': 64, 'lorem ipsum': 0, 'www.': 12, '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': '3560907', 'n_tokens_mistral': 3756, 'n_tokens_neox': 3603, 'n_words': 875}