The ecosystem that CSSNext lives within can be confusing to name and navigate. Here’s how I see the pieces fitting together.
Generally PostCSS is adding or changing the functionality of vanilla CSS, usually to make it do something cooler and newer than before.
PostCSS can be compared to a preprocessor like Sass or LESS.
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?