hmr does not work with filename [name].[hash].css

[EECOLOR]

• mini-css-extract-plugin Version: 0.6.0

Expected Behavior

To have reloads when the filename is set to [name].[hash].css

Actual Behavior

No reloads, this is because the updateCss function is called which simply reloads the previous url. That url has changed.

Code

new ExtractCssChunks({
  filename: '[name].[hash].css'
}),

How Do We Reproduce?

Set the filename to '[name].[hash].css'

Workaround

filename: isProduction ? '[name].[hash].css' : '[name].css'

[ScriptedAlchemy]

HMR will never work with hashed filenames.

Beyond this plugin, it’s a well stated fact that most HMR will not work with hashed files.

How can it reload without a consistent name

[EECOLOR]

Well, the hashes are known to the plugin, so the client can simply remember the previous hashes. I suspect this is what the javascript client does.

An example client for a different css-loader that does this: https://github.com/kaliberjs/build/blob/master/library/lib/hot-css-replacement-client.js#L10

Beyond this plugin, it’s a well stated fact that most HMR will not work with hashed files.

I didn't know it's a well stated fact. I could not find a mention in the documentation. And, as stated, it's not a limitation of javascript HMR.

[ScriptedAlchemy]

Interesting find. I’ll read over the the code you posted an will see if it could be retrofitted. How does it deal with css modules - this was a real pain to handle.

As far as I know, stuff like react hot loader don’t work well with hashed files, rarely do I come across one that does.

But I’m all for being shown new solutions, if it can meet the requirements then I’d be happy to work on it.

Thanks for showing me something new, sorry for coming off a little strong

[EECOLOR]

sorry for coming off a little strong

No problem, it happens.

With that loader we just reload CSS chunks if their hashes change. The part of the setup that generates the CSS files is quite primitive, so I don't think it will provide very interesting material.

Since the mini css extract plugin is a bit more advanced, I would probably take a slightly different route. The mechanism however can be the same. The client I linked to is instantiated using this file: https://github.com/kaliberjs/build/blob/master/library/lib/stylesheet.js

If you have any questions about that library, please let know. We created it a while back when the webpack css ecosystem was still quite primitive and complex (in that library we also use our own css-loader). Eventually we look to get back to more commonly known libraries.

[kamilic]

How to solve it?

[alexander-akait]

Close in favor #444