0

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?

Kevin
  • 388
  • 7
  • 23
  • Your current configuration is just redundant. If you are using cssnext-loader, the plugins you are using in postcss-loader are just dulpicates (well, truplicates for customMedia and autoprefixer which are included by cssnext as a plugin, and cssnext-loader as well...) – MoOx Mar 05 '16 at 21:13
  • So if I want custom media, css variables and auto prefixing I should only use postcss-loader as I am in my second example and only the customProperties? If so, I already tried that along with a number of other configurations (too many to list here). As a note, I am using the @import statement in a main css file. This is in reference to my playing with postcss-import. – Kevin Mar 06 '16 at 00:28

2 Answers2

3

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.

JakeParis
  • 11,056
  • 3
  • 42
  • 65
MoOx
  • 8,423
  • 5
  • 40
  • 39
  • I realize they are already included. My code in my second example was merely a result of playing with the configuration. I have grabbed the example from postcss-loader yet when I removed cssnext-loader, the variables not longer work...so I'm stumped. – Kevin Mar 06 '16 at 00:30
  • I'm marking this correct. Although users may want to review my answer which may help some. – Kevin Mar 06 '16 at 01:14
1

As far as the three main functions I was trying to convert over, I've figured out the magic formula. I erased my node_modules directory. Removed old cssnext and plugins from package.json. Added postcss, postcss-loader, postcss-cssnext and postcss-import to package.json and reinstalled everything. I think I had the right config from the beginning but my node_modules directory was in a bad state due to my use of npm uninstall.

I used the following loader config:

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

and used the following postcss config:

postcss: function () {
    return [
        require("postcss-import")({ addDependencyTo: webpack }),
        require('postcss-cssnext')
    ];
}

I now have autoprefixing, custom media and vars. BUT, it's all in a single style tag now. Therefore locating a particular css block in the file system is a pain....ugh.

Kevin
  • 388
  • 7
  • 23