CSS Modules: ExtractTextPlugin changes the format of the imported style object

[websash]

Been migrating to Webpack 2 and noticed my local CSS is not working with the new ExtractTextPlugin.
Consider this sample code:

import style from './style.css'

const div = document.createElement('div')

div.className = 'foobarGlobal ' + style.foobarLocal

document.body.appendChild(div).textContent = 'css modules'

console.info('style', style)

Without ExtractTextPlugin I got this style:

which is fine and expected.

Now when using ExtractTextPlugin I'm getting this format:

as if I'm supposed to use style.locals.foobarLocal now. Why is that?
My test webpack config https://github.com/websash/webpack2-css-modules/blob/master/webpack.config.js

[Ephem]

+1 I'm experiencing the same issue.

[Ephem]

This turned out to be related to #330 for me. Before figuring out what was wrong (I was using use: ExtractTextPlugin({ ... }) instead of loader: ExtractTextPlugin({ ... })) I tried all kinds of configs to get it working. At some point I ended up with the error above, but when I got it working properly, css modules were exported correctly as well.

@websash Maybe you are having some kind of related issue?

This part is from your config:

use: [
  ExtractTextPlugin.extract({
    fallbackLoader: 'style-loader',
    loader: 'css-loader'
  }), {
    loader: 'css-loader',
    options: {
      minimize: true,
      modules: true,
      importLoaders: true,
      localIdentName: '[hash:6]'
    }
  }
],

Maybe something like this would work:

loader: ExtractTextPlugin.extract({
  fallbackLoader: 'style-loader',
  loader: {
    loader: 'css-loader',
    query: {
      minimize: true,
      modules: true,
      importLoaders: true,
      localIdentName: '[hash:6]'
    }
  }
}),

You would have to do the same thing a bit further down in the config. I hope it helps!

[websash]

@Ephem thanx for the tip. Your config is definitely working for me 👍 I was sure I had to use use with an array all the time and options for loader configuration but here we need query 😕 Wish we had better docs

[michael-ciniawsky]

@websash @Ephem Yep the syntax will definitely be updated/fixed in v2 final. Besides that if CSS Modules work correctly please close the issue 😛

[Ephem]

@websash No worries, glad I could help. :) PR #343 fixes this so that we can use use and PR #276 fixes options. I guess this time the docs were correct, but the implementation needed some tweaking. :) I think this issue could be closed now?

[joshwiens]

#343 has been merged, included in https://github.com/webpack-contrib/extract-text-webpack-plugin/releases/tag/v2.0.0-rc.0 and published to npm as v2.0.0-rc.0

[yinjunok]

@Ephem that's cool, thanks.

[arisunarya]

@Ephem thanks, that's work