Incompatible with Webpack 2.1.0-beta.23 configuration validation #99

kylecesmat · 2016-09-19T23:45:58Z

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

The text was updated successfully, but these errors were encountered:

ai · 2016-09-20T05:23:55Z

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

donaldpipowitch · 2016-09-20T07:17:27Z

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

phaistonian · 2016-09-20T07:30:42Z

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

wellyshen · 2016-09-20T08:29:37Z

Same issue +1

SpaceK33z · 2016-09-20T08:56:26Z

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 · 2016-09-20T18:25:05Z

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 · 2016-09-20T19:51:31Z

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 · 2016-09-20T19:58:38Z

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 · 2016-09-20T20:52:24Z

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 · 2016-09-21T02:18:02Z

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

What changes do you suggest?

MoOx · 2016-09-21T05:01:07Z

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

artkravchenko · 2016-09-22T11:37:04Z

Validation succeeds for me:

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

Where autoprefixer is

const autoprefixer = require('autoprefixer');

See more at webpack/webpack#3018 (comment)

kevinSuttle · 2016-09-22T14:08:31Z

@Oopscurity Can you not use import ?

MoOx · 2016-09-26T14:18:00Z

You can use it, by passing the function as you used too.

kevinSuttle · 2016-09-26T14:38:18Z

So it beta 25 the stable one now?

dkrutsko · 2016-09-27T18:22:43Z

@Oopscurity: I was having an issue with extract-loader as well because it couldn't find the output.publicPath definition. So in addition to context, you also need to provide any additional options for the loaders you are using. I'm guessing webpack.LoaderOptionsPlugin creates a localized webpack configuration environment.

kevinSuttle · 2016-09-28T18:09:49Z

Following up on: #99 (comment)

Before, there was this method:

// dependencies
var fs = require("fs")
var postcss = require("postcss")
var customProperties = require("postcss-custom-properties")

// css to be processed
var css = fs.readFileSync("input.css", "utf8")

// process css using postcss-custom-properties
var output = postcss()
  .use(customProperties())
  .process(css)
  .css

but now the API has changed.

webpack config

new webpack.LoaderOptionsPlugin({
        options: {
          postcss: function (webpack) {
            return [
            importCSS({
              addDependencyTo: webpack
            }),
              customProperties({
                   preserve: true,
                   appendVariables: true,
              }),
              cssApply,
              autoprefixer,
            ]
          }
        }
      }),

Directory structure

webpack.config.js
/src/Buttons/Button.jsx
- (contains a require(./Buttons.css),
- which relies on the custom properties defined in ./src/Styles/Index.css
- which are imported from ./node_modules/ (

Yet I still get warnings the custom properties as used without fallbacks, unless I @import ./Styles/Index.css into every single component's css file (e.g. Buttons.css).

That solves one problem, but then introduces another:
Now every single component has the imports inlined, bloating up the CSS.

I've noticed that there are multiple style tags too, but I'm not sure why that's happening.
I suppose it's because I'm not using Extract-Text.

With this new API, I'm not sure which file should be imported where and when, etc.
I have a repo I can send privately if it helps.

MoOx · 2016-09-28T19:04:11Z

@kevinSuttle This have NOTHING to do with how postcss-loader works, or webpack 2 update. This is why you have a way to define variables directly from your customProperties config. See readme of postcss-custom-properties.

ai · 2016-10-07T17:07:34Z

Fix by #104

Now we have plugins option to query.

ai · 2016-10-08T08:21:12Z

I finished all changes and ready for release. Could somebody test this plugin on real application? (Just replace version in package.json to postcss/postcss-loader)

kevinSuttle · 2016-10-08T16:34:26Z

I can, but I don't see a newer version than 0.13.0 (the one I have now)?

SpaceK33z · 2016-10-08T16:36:37Z

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

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

kevinSuttle · 2016-10-10T17:26:06Z

Er, I thought it worked with "postcss":"postcss/postcss-loader", but now I'm getting this:

ERROR in ./~/css-loader?{"importLoaders":1}!./~/postcss-loader?{}!./src/Tooltips/Tooltips.css
Module build failed: Error: Cannot find module 'postcss-load-options/lib/loadOptions.js'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/kevinSuttle/Code/ui-primitives-react/node_modules/postcss-load-config/index.js:9:19)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/kevinSuttle/Code/ui-primitives-react/node_modules/postcss-loader/index.js:2:19)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at loadLoader (/Users/kevinSuttle/Code/ui-primitives-react/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/Users/kevinSuttle/Code/ui-primitives-react/node_modules/loader-runner/lib/LoaderRunner.js:164:2)
    at iteratePitchingLoaders (/Users/kevinSuttle/Code/ui-primitives-react/node_modules/loader-runner/lib/LoaderRunner.js:160:10)
    at /Users/kevinSuttle/Code/ui-primitives-react/node_modules/loader-runner/lib/LoaderRunner.js:168:18
    at loadLoader (/Users/kevinSuttle/Code/ui-primitives-react/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/Users/kevinSuttle/Code/ui-primitives-react/node_modules/loader-runner/lib/LoaderRunner.js:164:2)
    at runLoaders (/Users/kevinSuttle/Code/ui-primitives-react/node_modules/loader-runner/lib/LoaderRunner.js:357:2)
    at NormalModule.doBuild (/Users/kevinSuttle/Code/ui-primitives-react/node_modules/webpack/lib/NormalModule.js:131:2)
    at NormalModule.build (/Users/kevinSuttle/Code/ui-primitives-react/node_modules/webpack/lib/NormalModule.js:179:15)
    at Compilation.buildModule (/Users/kevinSuttle/Code/ui-primitives-react/node_modules/webpack/lib/Compilation.js:127:9)
 @ ./src/Tooltips/Tooltips.css 4:14-152
 @ ./src/Inputs/FormControl.js
 @ ./src/Selects/index.js
 @ ./src/index.js
 @ multi main

My config:

module.exports = {
  entry: ['./src/'],
  resolve: {
    descriptionFiles: ["package.json"],
  },
  output: {
    filename: 'ui-primitives-react.js',
    path: path.resolve(__dirname, 'build'),
    library: 'WatsonIoTUIPrimitives',
    libraryTarget: 'commonjs2',
  },
  externals: nodeEnv === 'production' ? {
    'react': 'var React',
    'react-dom': 'var ReactDOM',
  } : null,
  module: {
    rules: [{
      test: /\.js?$/,
      loader: 'babel-loader',
      exclude: /(node_modules|bower_components)/,
    }, {
      test: /\.css$/,
      use: [
        'style-loader', {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        }, {
          loader: 'postcss-loader',
          options: {
            plugins: function () {
              return [
                require('postcss-import')(),
                require('cssnext')({
                  features: {
                    customProperties: {
                      preserve: true,
                      appendVariables: true
                    }
                  }
                }),
                postCSSPrefix(CssClassPrefix, {
                  ignore: [/react-autosuggest/]
                }),
              ];
            }
          }
        }
      ]
    }]
  },

farwayer · 2016-10-11T18:01:03Z

@kevinSuttle I opened issue postcss/postcss-load-config#24

michael-ciniawsky · 2016-10-12T05:58:52Z

@ kevinShuttle @farwayer

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

ai · 2016-10-12T19:37:42Z

Guys! Thanks for you tests.

Now we fixed most of them. Could you test postcss-loader from GitHub again?

After 3 “working” reports, I will release new version ;).

farwayer · 2016-10-12T21:20:34Z

I'm afraid config from readme is not working:

{
    loader: 'postcss-loader',
    options: {
        plugins: function () {
            return [
                require('precss'),
                require('autoprefixer')
            ];
        }
    }
}

Please read webpack/webpack#3018 (comment).

ai · 2016-10-12T21:52:45Z

@farwayer hm, very strange it works for one users, and doesn’t work for rest :-/

farwayer · 2016-10-12T21:58:11Z

@ai syntax with loader options or with LoaderOptionsPlugin?

ai · 2016-10-12T22:05:56Z

@farwayer new syntax in rules and options/plugins works fine in my test https://github.com/ai/webpack2-postcss-test

farwayer · 2016-10-12T22:47:36Z

Something wrong with style-loader webpack/webpack#3018 (comment)

ai · 2016-10-14T17:41:36Z

OK. @michael-ciniawsky publish postcss-load-confg release candidate. Let’s check postcss-loader last time.

farwayer · 2016-10-14T18:27:15Z

Loader options configurations will not work with style-loader but it's webpack core issue so nothing to do. Maybe it is better to keep note about this in readme before webpack/webpack#3136 will be fixed.

ai · 2016-10-16T09:33:23Z

1.0 was released. Thanks to everyone for help.

fmal · 2016-10-21T12:37:32Z

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

ai · 2016-10-21T12:57:54Z

@fmal postcss-loader 1.0 doesn't need LoaderOptionsPlugin.

Could you show your config, I will try to find issue there.

farwayer · 2016-10-21T13:47:46Z

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

Birowsky · 2016-11-12T22:29:06Z

@fmal postcss-loader 1.0 doesn't need LoaderOptionsPlugin.

@ai I couldn't a guide for how to specify plugins without creating a new file. Help?

ai · 2016-11-12T22:44:14Z

@Birowsky define them in package.json: https://github.com/michael-ciniawsky/postcss-load-config#packagejson

Birowsky · 2016-11-12T23:33:44Z

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

michael-ciniawsky · 2016-11-13T02:50:41Z

@Birowsky

webpack: >v2.0.0-beta.25

webpack.config.js

module: {
 rules : [{
   test: /\.(sass|less|styl|sss|css)$/,
   use: [
        ...// style-loader, css-loader
        {
          loader: 'postcss-loader',
          options: { options: { /* PostCSS Options */ }, plugins: () => [ /* PostCSS Plugins */ ]  }
        }
       ...// less-loader, sass-loader, stylus-loader
    ]
  }]
}

Basically like in LoaderOptionsPlugin, the plugin was more of an 'polyfill' for webpack 2 < beta.25, webpack 2 development is still a bit in flux :)

farskid · 2017-02-20T20:14:02Z

@Oopscurity Your solution worked for me on webpack@2.2.1

ai added the enhancement label Sep 20, 2016

gabeweaver mentioned this issue Sep 21, 2016

beta23 doesn't start if config object includes loader configs because of schema webpack/webpack#3018

Closed

hanse mentioned this issue Sep 21, 2016

Dependency cleanup webkom/lego-webapp#204

Merged

artkravchenko mentioned this issue Sep 22, 2016

Migrated to webpack@2.1.0-beta.24 Lokiedu/libertysoil-site#638

Merged

NullReferenceError mentioned this issue Sep 23, 2016

WebPack postcss config issue kriasoft/aspnet-starter-kit#21

Closed

kevinSuttle mentioned this issue Sep 28, 2016

Consider adding a variable and apendVariables option pascalduez/postcss-apply#15

Closed

MoOx referenced this issue in iamdustan/webpack-2-extract-css-modules-repro Oct 4, 2016

Extract with CSS modules lolnope

e32a5cd

ai closed this as completed Oct 7, 2016

ai mentioned this issue Oct 9, 2016

Doesn't compiles css #106

Closed

ai reopened this Oct 9, 2016

gabeweaver mentioned this issue Oct 12, 2016

Upgrade webpack verypossible/booster-kit-react#15

Merged

ai closed this as completed Oct 16, 2016

michaelgmcd mentioned this issue Oct 25, 2016

feat(compile): upgrade to webpack 2 dvdzkwsk/react-redux-starter-kit#1063

Closed

jmknoll mentioned this issue Mar 7, 2017

Issues with Webpack 2 akikoo/webpack-es6-sass-setup#1

Closed

collincusce mentioned this issue Mar 27, 2017

Code not up-to-date with Webpack 2 gavofyork/gavcoin#3

Open

shilman mentioned this issue Apr 19, 2017

Fix default storybook webpack config storybookjs/storybook#922

Merged

Incompatible with Webpack 2.1.0-beta.23 configuration validation #99

Incompatible with Webpack 2.1.0-beta.23 configuration validation #99

Comments

kylecesmat commented Sep 19, 2016 • edited Loading

ai commented Sep 20, 2016

donaldpipowitch commented Sep 20, 2016

phaistonian commented Sep 20, 2016

wellyshen commented Sep 20, 2016

SpaceK33z commented Sep 20, 2016

kevinSuttle commented Sep 20, 2016 • edited Loading

MoOx commented Sep 20, 2016

MoOx commented Sep 20, 2016 • edited Loading

MoOx commented Sep 20, 2016

ai commented Sep 21, 2016

MoOx commented Sep 21, 2016 • edited Loading

artkravchenko commented Sep 22, 2016

kevinSuttle commented Sep 22, 2016

MoOx commented Sep 26, 2016

kevinSuttle commented Sep 26, 2016

dkrutsko commented Sep 27, 2016 • edited Loading

kevinSuttle commented Sep 28, 2016 • edited Loading

MoOx commented Sep 28, 2016

ai commented Oct 7, 2016

ai commented Oct 8, 2016

kevinSuttle commented Oct 8, 2016 • edited Loading

SpaceK33z commented Oct 8, 2016

kevinSuttle commented Oct 10, 2016 • edited Loading

farwayer commented Oct 11, 2016

michael-ciniawsky commented Oct 12, 2016 • edited Loading

ai commented Oct 12, 2016 • edited Loading

farwayer commented Oct 12, 2016

ai commented Oct 12, 2016

farwayer commented Oct 12, 2016

ai commented Oct 12, 2016

farwayer commented Oct 12, 2016

ai commented Oct 14, 2016

farwayer commented Oct 14, 2016

ai commented Oct 16, 2016 • edited Loading

fmal commented Oct 21, 2016

ai commented Oct 21, 2016

farwayer commented Oct 21, 2016

Birowsky commented Nov 12, 2016

ai commented Nov 12, 2016

Birowsky commented Nov 12, 2016

michael-ciniawsky commented Nov 13, 2016 • edited Loading

farskid commented Feb 20, 2017

kylecesmat commented Sep 19, 2016 •

edited

Loading

kevinSuttle commented Sep 20, 2016 •

edited

Loading

MoOx commented Sep 20, 2016 •

edited

Loading

MoOx commented Sep 21, 2016 •

edited

Loading

dkrutsko commented Sep 27, 2016 •

edited

Loading

kevinSuttle commented Sep 28, 2016 •

edited

Loading

kevinSuttle commented Oct 8, 2016 •

edited

Loading

kevinSuttle commented Oct 10, 2016 •

edited

Loading

michael-ciniawsky commented Oct 12, 2016 •

edited

Loading

ai commented Oct 12, 2016 •

edited

Loading

ai commented Oct 16, 2016 •

edited

Loading

michael-ciniawsky commented Nov 13, 2016 •

edited

Loading