[SOLVED] Error: composition is only allowed when selector is single :local class name

Error: composition is only allowed when selector is single :local class name

I can't make ExtractTextPlugin work with css-loader. I get the following error if I run webpack -p:

ERROR in ./node_modules/css-loader!./app/components/ErrorMessage/styles.css
Module build failed: Error: composition is only allowed when selector is single :local class name not in ".container", ".container" is weird

The structure of my project is like this:

 app
 |---assets
 |     '---styles
 |           '--- styles.css  
 |---components
 |       '---ErrorMessage
 |                |--- index.js
 |                '--- styles.css
 |---scenes
 |
 .babelrc
 .eslintrc
 package.json
 webpack.config.babel.js

The content of my global styles.css is:

.centerDiv {
  display: flex;
  justify-content: center;
  align-items: center;
}

The content of styles.css in ErrorMessage component is:

.container {
  composes: centerDiv from 'assets/styles/styles.css';
}

Here's my webpack config:

import webpack from 'webpack'
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

const LAUNCH_COMMAND = process.env.npm_lifecycle_event

const isProduction = LAUNCH_COMMAND === 'production'
process.env.BABEL_ENV = LAUNCH_COMMAND

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'dist'),
}

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: PATHS.app + '/index.html',
  filename: 'index.html',
  inject: 'body'
})

const productionPlugin = new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
})

const base = {
  entry: [
    PATHS.app
  ],
  output: {
    path: PATHS.build,
    filename: 'index_bundle.js'
  },
  resolve: {
    modules: [path.resolve('./app'), 'node_modules']
  }
}

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  devServer: {
    contentBase: PATHS.build,
    hot: true,
    inline: true,
  },
  plugins: [HTMLWebpackPluginConfig, new webpack.HotModuleReplacementPlugin()],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
      {test: /\.css$/, loader: 'style-loader!css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]'},
      {test: /\.(woff|woff2|eot|ttf|svg|png|jpg|gif)$/, loader: 'url-loader'},
    ]
  },
}

const productionConfig = {
  devtool: 'cheap-module-source-map',
  plugins: [HTMLWebpackPluginConfig, productionPlugin, new ExtractTextPlugin('styles.css')],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
        })
      },
      {test: /\.(woff|woff2|eot|ttf|svg|png|jpg|gif)$/, loader: 'url-loader'},
    ]
  },
}

export default Object.assign({}, base, isProduction === true ? productionConfig : developmentConfig)

What am I doing wrong? If I don't use composes everything is extracted just fine. Please note that I don't get the error if the code is run in development mode so I think this has something to do with ExtractTextPlugin configuration. I'm using webpack v3, node v8.4.0, and extract-text-webpack-plugin v3.0.0.

Solution

So I figured out a perfect combination of ExtractTextPlugin and webpack version. webpack v1.15.0 and extract-text-webpack-plugin v1.0.1. You can look at my config here: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/609