Getting PostCSS's CSSNext to work with Vue and Webpack 2

I'm coming to the end of a Vue 2 project I've been working on for the past month and it's about that time that we put it in front of users and start making the app better (a.k.a fix bugs).

One of the things I've been struggling with is compatibility across multiple mobile browsers. For our users those are Chrome Mobile v44+, Firefox Mobile, Opera Mobile, Safari and IE Mobile on Windows Phone 8+.

Till now I've been checking https://caniuse.com's database for general feature compatibility. That was a whole mess in itself and I ended up trying out https://modernizr.com to detect user features and write specific CSS for them. But I'm not out here trying to write 1 million lines of CSS so I ditched that.

Can I use... Support tables for HTML5, CSS3, etc

Modernizr Documentation

I discovered PostCSS when I was trying to get yet another library, autoprefixer, to work. PostCSS is a tool that lets you modify your CSS with JS, ideally in a build step using one of the many build tools available (Webpack, Gulp, Grunt…).

PostCSS - a tool for transforming CSS with JavaScript

In this case, what I needed was PostCSS's postcss-cssnext plugin, which let's you use future CSS features in today's browsers. It also comes with autoprefixer built in which adds vendor prefixes to vendor specific CSS.

With Webpack 2.*, the process is simple:

1. Install postcss and postcss-cssnext

yarn add postcss postcss-cssnext -D
// or npm install postcss postcss-cssnext --save-dev

2. If you're using vue-loader Add postcss-cssnext to your webpack.config.js

module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            postcss: [require('postcss-cssnext')()]
        }
    }]
}

3. Restart webpack-dev-server

webpack-dev-server --open --inline --hot

Your futuristic CSS should now be autoprefixed and backwards-compatible.

More options are available here(cssnext), here(autoprefixer) and here(vue-loader)to further customize your configuration.

Here are my results:

Before postcss-cssnext

After postcss-cssnext

Now you and I can write CSS with reckless abandon. 🚶 Off to deal with the JS polyfills