我在css-next中如何使用媒体查询有什么问题？

Question

我似乎无法看到我尝试添加媒体查询的方式出现问题。我已阅读规格，似乎是正确的。我正在使用postcss-cssnext包。我必须有一些错误，因为它没有被应用，任何想法？

@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);
}

这是我的webpack配置：

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()
            ]
        }
    },
};

它产生的css没有被正确解析：

@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);
}