Use tomorrow's CSS syntax, today.

This is not a CSS preprocessor, but can replace one.
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.
Take a look at available features.

cssnext is similar to Myth or SUIT CSS preprocessor but pushes the concept to the next level by supporting more features.

cssnext works great with SUIT CSS and cssrecipes.

tl;dr : try cssnext in your browser.

Follow @cssnext to get latest news & join #cssnext on irc.freenode.net if you have any questions.

• Allow using future CSS syntax today.
• Keep code as close as possible to the original code.

• Provide polyfills for future CSS APIs that depend on the client browser.

• automatic vendor prefixes (via autoprefixer)
• custom properties & var() (via postcss-custom-properties)
• reduced calc() (via postcss-calc, to optimize previously parsed var() references)
• custom media queries (via postcss-custom-media), a nice way to avoid repeating media queries
• color() (via postcss-color-function), a color function to modify color
• hwb() (via postcss-color-hwb), similar to hsl() but easier for humans to work with
• #rrggbbaa (via postcss-color-hex-alpha)
• rebeccapurple (via postcss-color-rebeccapurple)

• @import inline local files (via postcss-import) to output a bundled CSS file.

Any omissions of the CSS specifications (even in draft) that are subject to be handled by cssnext are not intentional.
Feel free to open a new issue if you find something that should be handled.
Keep in mind that, as of right now, this project is intended to support new CSS syntax only.

The current transformation for custom properties just aims to provide a future-proof way of using a limited subset (to :root selector) of the features provided by native CSS custom properties.
The transformation is not complete and can't be properly. By injecting selectors with new computed rules, we will breaking original cascade & unexpected results might happen.

$ npm install cssnext

You can install it

• globally (-g), to use it through the CLI
• locally ()--save or --save-dev), to use it through npm scripts (npm run) or via .node_modules/.bin/csnext
• by using other tools like gulp-cssnext

You can use cssnext using CLI, as a JavaScript library or through others tools.

cssnext offers a command-line interface. Here's how to compile a file and print it to stdout:

$ cssnext index.css

To create an output file, you can just add a second argument

$ cssnext index.css output.css

Or use CLI std(in|out) redirection(s)

$ cat input.css | cssnext > output.css

If you don't care about a certain feature, such as custom media queries, you can omit support for them like so:

$ cssnext --no-custom-media index.css

To enable source maps for these files, add the --sourcemap flag.

To see all CLI options

$ cssnext --help

var cssnext = require("cssnext")
var fs = require("fs")

var input = fs.readFileSync("index.css", "utf8")

var output = cssnext(input)
fs.writeFileSync("dist/index.css", output)

cssnext accepts 2 arguments: a css string and an object of options.

Object containing key of features to enable/disable.
Features are enabled by default: no key means feature is enabled.

//eg: disable import support
var output = cssnext(input, {
  features: {
    import: false
  }
})

Each features are based on PostCSS plugins & can get their own options. To pass options to a feature, you can just pass an object to the feature:

//eg: preserve custom properties
var output = cssnext(input, {
  features: {
    customProperties: {
      preserve: true
    }
  }
})

To know all available options, please check available features list where you will find references to all the plugins used.

Here are all available features:

• import
• customProperties
• calc
• customMedia
• colorFunction
• colorHexAlpha
• colorHwb
• colorRebeccapurple
• prefixes

Allows you to compress the output (using CSSWring).

This option is a shortcut to enable inlined sourcemap in the output.
Just pass true to get the sourcemap at the end of the output.

• If you want an accurate sourcemap, please also use the from option.
• If you want more control on the sourcemap, please use the map option instead.

(default: undefined if sourcemap is false, inline if sourcemap it true)

If you want better control on sourcemap, you are at the right place. This is the postcss map option, so checkout the related documentation directly.

If you specify this option, sourcemap value will be ignored.

/!\ Using this option changes the return value of cssnext() (object instead of css string, that contains {css: "{css string}", map: {sourcemap object}})

Source of the file. Needed for sourcemap.

var cssnext = require("cssnext")
var fs = require("fs")

var source = "./index.css"
var output = cssnext(
  fs.readFileSync(source, "utf8"),
  {from: source}
)
fs.writeFileSync("dist/index.css", output)

Array to specify browsers you want to target (for now only used by autoprefixer).
See autoprefixer documentation of this option for more details.

Defaults to something like ["> 1%", "last 2 versions", "Firefox ESR"].

//eg
var output = cssnext(input, {
  features: {
    autoprefixer: {
      browsers: ["> 1%", "last 2 versions", "Firefox ESR"]
    }
  }
})

A string or an array of paths in which to look for files when inlining using @import.
Defaults to dirname of postcss from option, or fallback to process.cwd().

Note: nested @import will additionally benefit of the relative dirname of imported files.

//eg
var output = cssnext(input, {
  features: {
    import: {
      path: ["node_modules"]
    }
  }
})

Here are some tools that will help you use cssnext in your current workflow

• gulp-cssnext
• grunt-cssnext
• cssnext-brunch
• soon cssnext-webpack
• Prepros 5
• @todo component-builder package
• @todo meteor package

cssnext uses a lot of postcss plugins, so you might need to take a look at them if you find an issue or want to create or enhance a feature.

Otherwise, work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

$ git clone https://github.com/cssnext/cssnext.git
$ git checkout -b patch-1
$ npm install
$ npm test

Huge thanks to all the people that where involved in :

• rework
• rework css parser
• myth
• autoprefixer
• postcss

Without all those people, this project would not exist.