What is CSSNext?

The ecosystem that CSSNext lives within can be confusing to name and navigate. Here's how I see the pieces fitting together.

PostCSS

Before we get to CSSNext, let's visit PostCSS. PostCSS provides transform functions for CSS. These functions are written in JavaScript. PostCSS can assemble one or more of these transform functions into a transformation pipeline for your CSS.

Generally PostCSS is adding or changing the functionality of vanilla CSS, usually to make it do something cooler and newer than before.

PostCSS doesn't contain any transforms itself. Rather it is a platform for running plugins that you assemble. In this way, it's like Babel, which won't transform JavaScript until you add plugins and presets.

PostCSS can be compared to a preprocessor like Sass or LESS.

CSSNext

CSSNext is a plugin to PostCSS. More precisely, it's called postcss-cssnext, prefixed with postss-* as most PostCSS plugins are. The library used to be called cssnext, but it was renamed to postcss-cssnext. It's still sometimes referred to as "CSSNext".

Going back to the Babel analogy, CSSNext is similar in a couple ways:

CSSNext is like the babel-preset-stage-* presets in that it is anticipating the eventual adoption and implementation of new CSS specs by the browsers. These specs haven't been fully implemented today, so CSSNext allows us to use them in our source CSS, compiling them down to browser-ready CSS through PostCSS.

CSSNext gathers togther many postcss-* plugins, each supporting some single new CSS spec feature. In this way, it's like a Babel preset, or collection of plugins. The dependency list should give you a nice view of what it includes. Another rundown of features is on their website.

What to Call It?

So what do you call your source code? You're writing CSS using future features via CSSNext. It's processed via PostCSS. The file extensions are still usually just *.css. I've just been calling it "CSSNext", as in, "I'm writing CSSNext", or "the styles are in CSSNext".

When referring to the tech stack of a project, I'll sometimes say, "It's built on PostCSS". This is ambiguous and sometimes assumes a lot, since a pipeline of PostCSS plugins could provide all sorts of varied functionality.

What do you call these things? And how do you frame what PostCSS and CSSNext are in your mind?