Incompatible with Webpack 2.1.0-beta.23 configuration validation

[kylecesmat]

The latest webpack beta now validates the configuration object, which breaks this usage as the postcss key in the configuration is not part of the validated schema. See release notes here: https://github.com/webpack/webpack/releases/tag/v2.1.0-beta.23

module.exports = {
    module: {
        loaders: []
    },
    postcss: function () {}
}

The entire output is:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'postcss'. These properties are valid:
   object { amd?, bail?, cache?, context?, devServer?, devtool?, entry, externals?, loader?, module?, name?, dependencies?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }

I understand this is for a webpack 2 beta, and probably should wait until the features stabilize. Who knows if this configuration validation will land in the final version...

For now I've locked webpack@2.1.0-beta.21

[ai]

I will start this feature after we will stabilize config #97

[donaldpipowitch]

Would this work as an ad-hoc fix? webpack/webpack#2974 (comment)

[phaistonian]

@donaldpipowitch I am also curious. Would using this approach enable us use postCSS on the latest beta?

[wellyshen]

Same issue +1

[SpaceK33z]

See webpack/webpack#3018 (comment) for a temporary workaround, which should work without a fix in postcss-loader. Note that this is meant to be temporary, because it is now possible to configure the options in the query object (but it looks like you already know this).

[kevinSuttle]

So, are the Webpack options for postcss or the postcss-plugins? e.g.
What would the new syntax look like compared to the current?

postcss()
  .use(smartImport({
    path: ["src/css"],
    transform: require("css-whitespace")
  }))
  .process(cssString)
  .then(function (result) {
    var css = result.css
  })

[MoOx]

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).

[MoOx]

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

[MoOx]

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 :D

[ai]

@MoOx do we have any webpack 2 loader API changelog?

What changes do you suggest?

[MoOx]

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