Composes not working

[oscarlgz]

I'm trying to switch to babel-plugin-react-css-modules, but for some reason composes is not working any more. It has been working fine with react-css-modules with the same webpack configuration (except for what applies to babel-plugin-react-css-modules of course).

It seems like babel-plugin-react-css-modules is only picking up one of the class names for me. I did some debugging in post-css and the class names are generated there.

webpack.config.js

// Development Config
if (TARGET === 'start' || !TARGET) {
    module.exports = {
        devtool : 'eval-cheap-module-source-map',
        entry : R.reduce((memo, script) => R.assoc(script + '-v3', [
            'react-hot-loader/patch',
            'webpack-hot-middleware/client?path=http://localhost:9596/__webpack_hmr',
            './src/' + script + '/index'
        ], memo), {}, scripts),
        output : {
            path       : path.join(__dirname, 'cache'),
            publicPath : 'http://localhost:9596/',
            filename   : '[name].js'
        },
        plugins : [
            new webpack.DefinePlugin({
                'process.env' : {
                    'NODE_ENV' : JSON.stringify('development'),
                    'VERSIONS' : JSON.stringify(versions)
                }
            }),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoEmitOnErrorsPlugin(),
            new webpack.LoaderOptionsPlugin({
                options : {
                    context : path.join(__dirname, 'src'),
                    output  : {
                        path : path.join(__dirname, 'cache')
                    }
                }
            }),
            new webpack.DllReferencePlugin({
                context  : '.',
                manifest : require('./dll/vendor-manifest.json')
            }),
            new webpack.optimize.ModuleConcatenationPlugin()
        ],
        resolve : {
            alias : {
                shared : path.join(__dirname, 'src/__shared'),
                style  : path.join(__dirname, 'src/__css')
            },
            unsafeCache : true
        },
        module : {
            rules : [{
                test    : /\.jsx?$/,
                use     : {
                    loader  : 'babel-loader',
                    options : {
                        plugins : [
                            'transform-object-rest-spread',
                            'transform-decorators-legacy',
                            'transform-class-properties',
                            'react-hot-loader/babel',
                            ['react-css-modules', {
                                'context' : path.join(__dirname, 'src'),
                                'filetypes' : {
                                    '.styl' : {
                                        'syntax' : 'sugarss'
                                    }
                                },
                                'webpackHotModuleReloading' : true
                            }]
                        ],
                        presets : ['es2015', 'react'],
                        cacheDirectory : false
                    }
                },
                include : path.join(__dirname, 'src')
            }, {
                test : /\.css$/,
                use  : ['style-loader', 'css-loader']
            }, {
                test : /\.styl$/,
                use  : [{
                    loader  : 'style-loader',
                    options : {
                        ident     : 'style-ident',
                        sourceMap : true
                    }
                }, {
                    loader  : 'css-loader',
                    options : {
                        ident          : 'css-ident',
                        modules        : true,
                        importLoaders  : 2,
                        localIdentName : '[path]___[name]__[local]___[hash:base64:5]'
                    }
                }, {
                    loader  : 'stylus-loader',
                    options : {
                        ident     : 'stylus-ident',
                        sourceMap : true,
                        use       : [nib()],
                        import    : ['~nib/lib/nib/index.styl', path.join(__dirname, 'src/__css/__imports/svg-selectors.styl')]
                    }
                }],
                include : path.join(__dirname, 'src/__css')
            }, {
                test    : /\.(png|gif|eot|woff|ttf|svg)$/,
                use     : 'url-loader',
                exclude : path.join(__dirname, 'src')
            }, {
                test    : /\.svg$/,
                use     : 'svg-inline-loader',
                include : path.join(__dirname, 'src/__shared/svg')
            }, {
                test : /\.json$/,
                use  : 'json-loader'
            }]
        },
        performance : {
            hints : false
        }
    };
}

Partial stylus file

.link
  color #808080
  text-decoration none
  font-weight 300
  font-size 14px

.link-active
  composes link
  color #000
  font-weight 700

React Component

import React     from 'react';
import Icon      from 'shared/components/icon-no-require.jsx';
import SVGLogo   from 'shared/svg/logo_gofinit.svg';
import '../../../__css/common/top/top-cms.styl';

const Top = ({ links }) => (
    <div styleName="wrap">
        <div styleName="top">
            <Icon styleName="logo" src={SVGLogo} />

            <ul styleName="links">{
                links.map(([link, name, active]) => (
                    <li key={link}>
                        <a href={`#${link}`} styleName={active === true ? 'link-active' : 'link'}>{name}</a>
                    </li>
                ))}
            </ul>
        </div>
    </div>
);

export default Top;

Screenshot of applied class name:

[IanVS]

Have you tried turning off webpackHotModuleReloading? I found that composed classes are sometimes not picked up if I have that turned on.

[oscarlgz]

Thanks for the suggestion. Unfortunately it does not solve the problem. Composes is till not working for me.

[IanVS]

You're right, that was a false lead (I'm trying to troubleshoot this myself as well).

How about when you edit the file that is importing the css with the composes? I find that even if I add an empty line and save, I'll get my styles. But if I take that line back out and save again (returning to clean state in the javascript file), the composes will break again. There must be some kind of caching going on, but I can't figure out what layer it's on or how to break it.

[IanVS]

Ah hah, #48 (comment) seems to do the trick. I suggest that this issue is a duplicate of that one.

[oscarlgz]

I tried both of your suggestions, unfortunately none did the trick for me. I'm going to try and isolate this issue further once I have a little bit more time.

As you can see in my webpack.config above I already had cacheDirectory set to false.

[gajus]

Probably duplicate of:

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

[gaurav5430]

You're right, that was a false lead (I'm trying to troubleshoot this myself as well).

How about when you edit the file that is importing the css with the composes? I find that even if I add an empty line and save, I'll get my styles. But if I take that line back out and save again (returning to clean state in the javascript file), the composes will break again. There must be some kind of caching going on, but I can't figure out what layer it's on or how to break it.

In my case, the storybook webpack config was using the cache in babel-loader by default, and i was facing similar symptoms:

• changes to composes did not reflect with hot relaod, unless I make a change in the corresponding js file.
• if the change in the js file is reverted, the css change also gets reverted.

After I removed the cache config, the 2nd point related to reverting was solved, but, composes still does not work with hot reload.