Components are always re-rendered

[lorenzomigliorero]

• I'm submitting a ...

  • bug report

• What is the current behavior?
  When update a scss files, (bundled with mini-css-extract-plugin), component is always re-rendered

❌ Component is re-rendered

// BEFORE
.foo {
  font-size: 18px;
}
// AFTER
.foo {
  font-size: 20px;
}

• What is the expected behavior?
  Component should re-rendered only if content of styles.scss exports are changed

✔️ Component isn't re-rendered

// BEFORE
.foo {
  font-size: 18px;
}
// AFTER
.foo {
  font-size: 20px;
}

✔️ Component is re-rendered

// BEFORE
.foo {
  font-size: 18px;
}
// AFTER
.foo {
  font-size: 18px;
}
.bar {
  font-size: 20px;
}

• Please tell us about your environment:

  • Webpack: 4.16.1
  • Osx
  • CSS Hot Loader 1.4.1
  • Code splitting

Thank you for your work!

[shepherdwind]

I know what you mean. But now I think I can only realize two kinds of hot reload.

1. When scss change, reload css file . This will not reload any js component, But If you use css-module, you need reload js youself.
2. When scss change, reload css and related js file.

You want js component reload only when css export result changed. But I don't how to get the result of css file export .

I will try to fix this, but I am not sure If I can fix it.

[lorenzomigliorero]

When scss change, reload css file . This will not reload any js component, But I you use css-module, you need reload js youself.

In my case, this trigger a js component reload.

[shepherdwind]

Reload js component feature come from v1.4.1, https://github.com/shepherdwind/css-hot-loader/blob/master/History.md#141-2018-07-26 .

If you want only reload css, I can add a new config option .

[lorenzomigliorero]

Yes, I think it's necessary.
Imagine a scenario where you have an enter animation on componentDidMount, any change to the css would recharge it, and it's frustrating...

[shepherdwind]

Try latest version 1.4.2 . This problem fixed now.

[lorenzomigliorero]

Yes, the problem seems to be fixed.
From my point of view, there is a last edge case to manage:

//BEFORE
.foo {
  color: red;
}

//AFTER
.foo {
  color: red;
  composes: colors-primary from global;
}

With composes, css content remains the same, but css exports is changed.
Instead of use cssModule option (that force a full reload always when js aren't changed), is it possible to force a js reload also when css exports are changed?