runtime resoluton won't work with composes

[loadingwyn]

jsx

  <div styleName={type === 'article' ? 'article-card' : 'live-card'}>

css:

.search {
    width: 650px;
}
.live-card {
    composes: search;
    white-space: nowrap;
    font-size: 14px;
    line-height: 60px;
    color: #666666;
}

I get this:

<div class="reprodStyle_live-card_2j7Qr reprodStyle_four-col_2_FEw"></div>

The 'search' class doesn't get added, and the 'four-col' which was composed before is still used.

My environment

software	version
Babel	6.24.1
node	8.1.4
Operating System	windows 10

[loadingwyn]

If I reinstall babel-plugin-react-css-modules, everything works fine. But if I change the class which was composed and compile the project again, this problem will happen.

[richtera]

I have a similar problem when using composed classes. When the composed classes are in the global space it gets a bit worse and shows "undefined" for those composed classes. So there is a bit of a problem using composed classes. It's trying to resolve classNames after the already resolving.
So for example

import "./styles.css"

Will cause something like this for a composed class

.example {
  composes: btn from '../global.css'
}

The resolved styles might be

var styles = {
  'example': 'styles-example-ASDEF btn'
};

The output will results in

<SomeComponent className="styles-example-ASDEF undefined"/>

This is because it can't resolve "btn" inside of the stylesheet context but should be looking it up inside of the composed stylesheet or leave it alone altogether. I.e. leave names it can't resolve.

Not sure how to fix this. I switched to straight react-css-modules till then.

[gajus]

Not sure how to fix this. I switched to straight react-css-modules till then.

react-css-modules will have the same problem.

This is a low-level issue with https://github.com/webpack-contrib/css-loader or more generally with https://github.com/css-modules/css-modules.

[gajus]

This:

<div class="reprodStyle_live-card_2j7Qr reprodStyle_four-col_2_FEw"></div>

Cannot be the output of:

 <div styleName={type === 'article' ? 'article-card' : 'live-card'}>

Where is the four-col coming from?

[loadingwyn]

The four-col is defined in the same css file. It was composed by live-card before.

.live-card {
    composes: four-col;
    ...
}

And it can't be removedas espected when type === 'article' at runtime. So I change composes: four-col; to composes: four-col; to locate problem, but four-col still stay there.

[gajus]

This doesn't really make sense.

Is the code repository public/ or could your re-create it in a sandbox?

[loadingwyn]

@gajus I'm sorry I just notice your reply after such a long time. I think this problem may be caused by react-dev-utils/webpackHotDevClient, because it works well when I don't use webpack-dev-server.
You can reproduct it by using create-react-app.

1. create a react app with create-react-app.

2. run npm run eject

3. add babel-plugin-react-css-modules

webpack.config.dev.js:

{
            test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 2,
                  localIdentName: '[name]_[local]_[hash:base64:5]',
                  modules: true,
                  camelCase: true,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },

babel:

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
          "react-css-modules",
          {
              "webpackHotModuleReloading": true,
              "generateScopedName": "[name]_[local]_[hash:base64:5]",
              "filetypes": {
                  ".scss": {
                      "syntax": "postcss-scss"
                  }
              }
          }
      ]
    ]
  },

4. run npm start

5. compose selectors while the dev-server is running.

[gajus]

Probably duplicate of:

• Adding "composes" doesn't update className #48 or
• composes .. from ... statements no longer work #22