postcss-loader: Incompatible with Webpack 2.1.0-beta.23 configuration validation

Validation succeeds for me:

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      context: __dirname,
      postcss: [
        autoprefixer
      ]
    }
  }
]

Where autoprefixer is

const autoprefixer = require('autoprefixer');

See more at https://github.com/webpack/webpack/issues/3018#issuecomment-248633498

We must implement this asap. I can handle it, this change is required for me to cut a release for phenomic which require webpack 2. I will try to push a PR quickly. It should be easy to support webpack 1 & 2 at the same time since query can know accept normal JS (so function).

1.0 was released. Thanks to everyone for help.

Changelog is: you can’t rely on “random” properties in webpack global config. So what you use to call via this.options.postcss have to be replaced. The good news is: your params (the “query” associated with the loader) now accept real JS, not just json (like it used to). So we “simply” need to normalize options passed to the loader by only using the “query”. This will basically deprecate the “pack” option since it won’t be necessary anymore.

tl;dr: no more this.options.postcss and everything should be in params.

For backward compat we can refactor the code and simply read options like this

const options = {
   ...{ some default ? },
   ...this.options.postcss,  // backward compat with v1
   ...loaderUtils.parseQuery(this.query)
}

It’s what I am doing for eslint-loader and it’s working like a charm https://github.com/MoOx/eslint-loader/blob/f965eecfd5dac6489abeaebeb8fc7e5fa010bade/index.js#L128-L136

@ai I prefer keeping all the config inside the webpack config file. So I’ll stick with the LoaderOptionsPlugin. Thanx anyways.

@ai add style-loader to loader chain and configuration via options will not work. Please check this issue. Of course it is not postcss-loader bug but using postcss with style is very often used configuration in dev. So adding warning to readme is very desirable.

@ kevinShuttle @farwayer

fixed in postcss-load-config v1.0.0-beta

@kevinSuttle I opened issue https://github.com/michael-ciniawsky/postcss-load-config/issues/24

Well according to #97 I am going to wait. @ai I think with webpack 2 something could be done to support both version of webpack. I wrote several webpack loaders so poke me if you need a hand 😉

@ai i’ve updated to 1.0 and followed instructions in readme for webpack 2.x config (i’m using latest webpack beta.25). Due to issue mentioned by @farwayer i couldn’t make it work. Providing options via webpack.LoaderOptionsPlugin solved the problem.

new webpack.LoaderOptionsPlugin({
  options: {
    postcss () {
      return [ ... ];
    }
  }
});

Please consider updating the readme, so that people using beta builds of webpack don’t waste time running into this.

@kevinSuttle, as @ai said, you need replace postcss-loader temporarily in package.json with this:

"postcss-loader": "postcss/postcss-loader"

Problem is, the workaround mentionned earlier is not working if you use css modules. @ai poke me when you are ready to more forward, this is a small “big deal” we have to handle here 😄