Converting from cssnext to postcss-cssnext in webpack

I'm having trouble converting my webpack config from using the now deprecated cssnext and cssnext-loader to postcss-cssnext and the postcss-loader. Doc's state clearly that the functionality I'm trying to recreate has been delegated to function specific plugins, yet I can't seem to get things working. One example of this is css variables.

My current working webpack config is like so:

...plugin imports

var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var customMedia = require("postcss-custom-media");

...loader config

module: {
    loaders: [{
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader!cssnext-loader",
        include: path.join(__dirname, 'src')
    }]
},

...postcss config

postcss: function() {
    return [customMedia(), cssnext(), autoprefixer()];
}

The problem:

I swapped out my cssnext import to point to the new postcss-cssnext module and added in the now required module to process my css variables (postcss-custom-properties). I also removed the cssnext-loader and am assuming the postcss-loader can handle things???

...plugin imports

var cssnext = require('postcss-cssnext');
var autoprefixer = require('autoprefixer');
var customMedia = require("postcss-custom-media");
var customProperties = require('postcss-custom-properties');

...loader config

module: {
    loaders: [{
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader",
        include: path.join(__dirname, 'src')
    }]
},

...postcss config

postcss: function() {
    return [customMedia(), cssnext(), customProperties(), autoprefixer()];
}

I can see that all my styles are being rendered to the page but none of the css vars have been evaluated. The central issue seems to be related to the use of "cssnext-loader". If I add it back in, the variables work. I did play with postcss-import and various configuration iterations but nothing seems to work. Anybody have any idea on what I'm doing wrong? How can I get the postcss-cssnext, postcss-loader, css variables and webpack to work together?

First of all cssnext and postcss-cssnext already include postcss-custom-media, postcss-custom-properties and autoprefixer, as said on the homepage and the feature page of the documentation, so you don't need to include all those things.

If you want the exact same features as you previously have with cssnext (I am assuming that from the fact you were using cssnext-loader), and you are using @import statements (which was a transformation included in cssnext), you can safely just grab the postcss-loader example of cssnext to postcss-cssnext migration guide.