Adding "composes" doesn't update className

[aevk]

Let's say I have this code:

/* styles.css */
.center {
  text-align: center;
}
.block {
  background-color: white;
}

/* mycomponent.js */
import "styles.css"

render() {
  return <div styleName="block">
    hello world
  </div>
}

The output styles will be something like

...
<div class="styles-block_3XNkZ">...
...

Now if I add "composes"

/* styles.css */
.center {
  text-align: center;
}
.block {
  composes: center;
  background-color: white;
}

the component class remains the same (only has styles-block_3XNkZ). Even if I refresh page (f5) it will not help because webpack output js still has old css name (like):

// webpack output bundle
...
exports.locals = {
  "center": "styles-center_3l7jm",
  "block": "styles-block_3XNkZ"
};
...

If I change somehow the component it will trigger the changes, and the component will has the correct classes

...
<div class="styles-block_3XNkZ styles-center_3l7jm">...
...

I use

"webpack": "^2.2.0",
"webpack-dev-middleware": "^1.9.0",
"webpack-hot-middleware": "^2.15.0"

"babel-plugin-react-css-modules": "^2.2.0" (--save)

I tried https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo, and got the same
behavior.

[rhysburnie]

I have similar experience

.test {
   background: red;
}
.root {
   composes: test;
}

works fine on start, but if I change .test class to a camelCase name and adjust composes reference it no longer works and the background is no longer red.

[rhysburnie]

Hi,

I've done some further testing and it seems like there some kind of caching going on???
What I mean by that is any class I have set before starting up works fine and adjusting values in them works fine, however adding an new class and trying to use that as a compose results in nothing (for the element that was already using the class).

Now heres where it gets weird... if I import the same stylesheet into another component and add the classname to it it picks up the new class that is being composed even thos the other element which is using the exact same class isn't.

.colorRed {
  color: red;
}
.test {
  font-size: 100px;
}
.decoration {
  composes: colorRed;
  background: #000;
}
.root {
  composes: decoration;
  composes: test;
}

In the code above the class .test was created after the webpack dev server began, the element it was initially applied to bas a black background and red text but it has a inherited font-size.
The second component using the same imported class has black background red color and font-size 100px

I don't understand how they can be different, both import the same stylesheet and both use the .root class contained within.

Its not a cascade issue either from a global style

Also stoping the dev server and restarted yields the same result

Then I stoped the server and changed the variable name I was importing the stylesheet with suspecting that when started again both will finally have the same style, and sure enough both had the same style applied.

I have no idea whats going on but I hope these descriptions can give some clues.

Cheers

[gajus]

PR is welcome.

[lorenjohnson]

👍

[lorenjohnson]

I have learned through much experimentation that the following laborious scenario will get the class name in the compose reflected every time on the element when it doesn't get caught during dev reloads (which it never does for me):

1. Turn off caching in your babel-loader in webpack config (example below for Webpack 2.x):

modules: {
   // ...
  rules: {
      // Process JS with Babel.
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: false
        }
      },
      ...
  }
}

2. Add (or remove) your composes statement which is not getting caught, kill your dev server, reboot it and ... voila! the change will be reflected.

So yes, a caching issue and it sounds from your response @gajus that there may be more of an enhancement needed here than a bug fix?

@aevk @rhysburnie have either of came to any other realizations or solutions yet?

[rhysburnie]

@lorenjohnson no after spending a while on it I decided to just use plain css as I didn't want to get bogged down on styling at the time.

Its interesting that what you describe involves the babel-loader in a completely seperate rule to the css rule. I had assumed rules were treated separately, its scary if an unrelated rule can affect another.

[gaurav5430]

@lorenjohnson in my case, I don't have a cacheDirectory specified, but the issue still happens.

• any regular css change works fine and gets reflected in the page.
• any change in composes does not reflect unless i change something in the corresponding js file, at which point it seems it evaluates all imports once again, and gets the new css.

If i have a cache specified, then removing the cache helps in one particular scenario as mentioned here: #105 (comment)

but does not help directly with the composes issue

Not really sure, why it only happens with composes though.