Avoid hash collisions by default with random hashPrefix?

[claudiorodriguez]

Hey everyone, just sharing a problem I found, to see if I'm missing something or if the suggested improvement could be a good idea.

If you go with the default options, or define your own localIdentName, the generated hash, without a hashPrefix, will be a digest of the relative path and the local classname.
This causes collision when you have two separate modules built with webpack that have a file with the same path, with the same classname in it (both modules have src/blah/styles.scss with the class .classname in it)
To solve this collision, I added a hashPrefix to the query, making it random on each build (something like <package-name> + Date.now() works great).
Isn't it a good idea to make a random hashPrefix be default behaviour?

[AdamJo]

Running into the same issue. Any advice would be much appreciated.

[jeffijoe]

@claudiorodriguez do you have an example for your solution? Running into this as well.

[claudiorodriguez]

@AdamJo @jeffijoe the easiest workaround is to add hashPrefix to your css-loader query, e.g.

{
  loader: 'css-loader',
  query: {
    hashPrefix: 'package-name' + Date.now()
    localIdentName: [local]_[hash:base64:5],
    modules: true
  }
}

[jeffijoe]

@claudiorodriguez oh okay! I was looking through docs to see if I could find any hashPrefix variable anywhere but I couldn't - isn't this documented?

[claudiorodriguez]

I think it's undocumented. It's used here https://github.com/webpack-contrib/css-loader/blob/master/lib/getLocalIdent.js#L12

[jeffijoe]

Damn, I looked at that file for like 10 minutes and I didn't spot that - @claudiorodriguez thank you!

[mitkaaa]

If you are use LoaderOptionsPlugin, then you can add context

new webpack.LoaderOptionsPlugin({
                options: {
                    context: __dirname,
...

classes will be unique

[plrthink]

@mitkaaa thanks, this works for me. but could you please explain why this would solve this issue?

[dcworldwide]

Agree @mitkaaa i'm a bit confused by the solution... is this global config or local to css loader?

[cobacious]

I think you can set context to __dirname on the options object passed in to css-loader, you shouldn't need to use LoaderOptionsPlugin.

@plrthink @dcworldwide I believe this works because css-loader uses the value of options.context when generating the hash used in the localIdentName. By default context is just the local directory name of the module but by setting it to __dirname it includes the full absolute system path to that module, e.g. '/Users/bob/example' instead of just 'example', resulting in a different hash each time.