"composes" not working with babel-plugin-react-css-modules

Question

I'm trying to use css modules in my React project. I am able to do things like:

import styles from './demo.css'
const Demo = () => <div styleName="demo">Hello</div>

And my styles are pulled from the CSS and prefixed successfully. However, when I try to use the "composes" function of CSS modules, it seems like it is completely ignored. I'm not even importing from other files - just trying to compose local classes. However, when I clone the demo project (https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo) and add a "composes" in the CSS, it works. I don't see what the difference is between my code and that in the demo...

My webpack loaders are:

loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel?cacheDirectory',
        include: PATHS.src
      },
      {
        test: /\.css$/,
        loaders: [
          'style',
          'css?importLoader=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        ],
        include: PATHS.src,
      }
    ]

This is my .babelrc:

{
  presets: [
    "es2015",
    "react",
  ],

  plugins: [
    [
      "react-css-modules",
      {
        generateScopedName: "[path]___[name]__[local]___[hash:base64:5]"
      }
    ],
    "transform-object-rest-spread",
  ],
  env: {
    development: {
      presets: [
        "react-hmre"
      ]
    }
  }
}

Answer 1

Having the same issue here. The workaround I found is by using vars instead composes.

/* colors.css */
:root {
  --color: #4A90E2
}

/* button.css */
@import 'colors.css';

.button {
  color: var(--blue);
}

Answer 2

I had this problem, and found that it was solved by adding cacheDirectory: false

For example webpack.config.js:

...
module : {
loaders : [
  {
    test : /\.jsx?/,
    include : APP_DIR,
    loader :  'babel-loader',
    query: 'cacheDirectory=false',
  },
...