Guide to Using CSS Next (postcss‑cssnext) with Webpack for Modern Front‑End Styling

The author, a front‑end engineer at Qunar, shares a practical tutorial on upgrading a hotel‑touch project by adopting css‑next , a PostCSS plugin that enables tomorrow’s CSS features today.

Background : In late 2018 the team upgraded the UI and switched from Less to css‑next, appreciating its similarity to pre‑processors while keeping the workflow simple.

What is PostCSS? PostCSS is a CSS processing tool similar to Babel for JavaScript. It works through a rich plugin ecosystem and is usually combined with build tools like Webpack, Grunt or Gulp. The tutorial focuses on the postcss-cssnext plugin, which transpiles modern CSS syntax into browser‑compatible CSS.

Getting Started (Webpack version) :

npm install postcss-loader postcss-cssnext

Create postcss.config.js :

module.exports = { plugins: [ require('postcss-cssnext')() ] };

Configure webpack.config.js (relevant part):

module.exports = { module: { rules: [{ test: /\.css$/, use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'] }] } };

Key Syntax Features :

Custom properties (variables) using --var-name and var(--var-name) , similar to Sass $var and Less @var .

Property sets with @apply to reuse groups of declarations.

Using calc() together with custom properties for safe arithmetic.

Custom media queries via @custom-media for semantic breakpoints.

Custom selectors with @custom-selector to group long selector lists.

Nesting using & (the ampersand) to reference the parent selector, mirroring Sass/Less nesting.

Examples of each feature are provided in the article, showing the original css‑next code and the compiled CSS output. Comparisons with equivalent Sass and Less snippets illustrate the similarity and differences.

Conclusion : css‑next offers most of the everyday features developers use in Sass/Less while staying as a PostCSS plugin, making it easy to drop or replace without tightly coupling to the codebase. For projects that only need standard modern CSS capabilities, css‑next can be a lighter alternative; for more complex needs, traditional preprocessors may still be preferable.