Use tomorrow’s CSS syntax, today.

Check out cssnext on GitHub or try it in your browser

What is cssnext?

cssnext is a CSS transpiler that allows you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support. You can literally write future-proof CSS and forget old preprocessor specific syntax.

Features

  • custom properties & var()
  • reduced calc()
  • custom media queries
  • media queries ranges
  • custom selectors
  • automatic vendor prefixes
  • color() support
  • gray() support
  • hwb() support
  • hexa #rrggbbaa support
  • rebeccapurple
  • :matches pseudo-class
  • :not pseudo-class (to l.3)
  • font-variant (to font-feature-settings)
  • filters (svg fallback)
  • rem units fallback (to px)
  • ::pseudo syntax (: compat)
l.* are level of the specification (when information is relevant)

Why cssnext?

Prior to 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. With cssnext, you can start using some new features today!

Future-proof code

In a near future, browsers will implement new CSS specifications. As time passes, cssnext will remove some transformations that won’t be necessary anymore. And maybe one day, you will be able to completely remove cssnext from your workflow without touching your CSS.

It’s fast. Lightning fast.

cssnext uses PostCSS which has a way faster CSS parser.
It’s a good competitor to libsass, a bit faster than LESS and Stylecow, and way faster than Myth or original Ruby Sass.

Active development

No longer wait for releases. A fixed bug will be released ASAP.
Minor features will never be idle for long.
See that by yourself on cssnext & PostCSS. activities graphs.
cssnext uses lots of PostCSS plugins, so check them out too.

Based on NPM ecosystem

cssnext uses npm packages that should respect semver.
Bugfixes are pushed often. Minor changes won’t break your code. Major releases are, well, major and are not supposed to happen a lot.
Codebase is exploded into smart and standalone packages so it’s easier to work on something or fix a bug.

Follow @cssnext to get the latest news or join the chat on gitter if you have any questions.