What is wrong with how I am using media queries in css-next?

Question

I seem to be having trouble seeing an issue with the way I am trying to add my media query. I have read the specs and it seems correct. I'm using the postcss-cssnext package. I must have something slightly wrong as it is not being applied, any ideas?

@import '../../common/colours.css';
@custom-media --tablet (min-width: 48rem);

.skill {
    position: relative;
    margin-bottom: 1em;
}

.name {
    display: inline-block;
    width: 12em;
    margin: 0;
    vertical-align: super;
}

.dot {
    height: 1.5em;
    width: 1.5em;
    border-radius: 0.75em;
    display: inline-block;
    margin-right: 0.25em;

    @media(--tablet) {
        margin-right: 0.5em;
    }
}

.filled {
    composes: dot;
    background: var(--primary);
}

.empty {
    composes: dot;
    background: var(--darkgrey);
}

This is my webpack config:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var postcssImport = require('postcss-import');
var postcssNext = require('postcss-cssnext');

module.exports = {
    entry: './src/app.js',
    output: { path: __dirname, filename: 'bundle.js' },
    devServer: {
        contentBase: '.',
        colors: true,
        historyApiFallback: true,
        inline: true
    },
    plugins: [
        new ExtractTextPlugin('style.css')
    ],
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=    [name]__[local]___[hash:base64:5]')
            },
            { 
                test: /\.(png|jpg|svg)$/, 
                loader: 'url-loader?name=images/[name].[ext]' 
            },
        ],
        postcss: function() {
            return [
                postcssImport(),
                postcssNext()
            ]
        }
    },
};

And it produces this css which isn't parsed correctly:

@custom-media --tablet (min-width: 48rem);

.skill__skill___cC8Xe {
    position: relative;
    margin-bottom: 1em;
}

.skill__name___gqIQw {
    display: inline-block;
    width: 13em;
    margin: 0;
    vertical-align: super;
}

.skill__dot___2j3PC {
    height: 1.5em;
    width: 1.5em;
    border-radius: 0.75em;
    display: inline-block;
    margin-right: 0.5em;

    @media(--tablet) {
        margin-right: 0.5em;
    }
}

.skill__filled___3Zlc8 {
    background: var(--primary);
}

.skill__empty___uZs3j {
    background: var(--darkgrey);
}