CSS Modules "сustom Inject name" it works incorrectly (lost index) #1578
Description
Version
15.7.1
Reproduction link
https://github.com/PowerfulPony/vue-loader-css-modules-mixing-selector-error
App.vue
<template>
<div id="app">
<div :class="cssModuleA.root">Module A: Green</div>
<div :class="cssModuleA.uniqNameA">Uniq A: Green</div>
<div :class="cssModuleB.root">Module B: Yellow</div>
<div :class="cssModuleB.uniqNameB">Uniq B: Yellow</div>
<div :class="cssModuleC.root">Module C: Red</div>
<div :class="cssModuleC.uniqNameC">Uniq C: Red</div>
</div>
</template>
<style module="cssModuleA">
.root {
background: green;
}
.uniqNameA {
background: green;
}
</style>
<style module="cssModuleB">
.root {
background: yellow;
}
.uniqNameB {
background: yellow;
}
</style>
<style module="cssModuleC">
.root {
background: red;
}
.uniqNameC {
background: red;
}
</style>Steps to reproduce
- Create module A, place a selector with the name X in it.
- Create module B, place a selector with the name X in it.
What is expected?
It is expected that the name for the A.X class will be Hash_0, and for the B.X class Hash_1. So it was in version 14. *
<div id="app">
<div class="App_root_1N-C8_0">Module A: Green</div>
<div class="App_uniqNameA_1Obkq_0">Uniq A: Green</div>
<div class="App_root_1N-C8_1">Module B: Yellow</div>
<div class="App_uniqNameB_cJTiO_1">Uniq B: Yellow</div>
<div class="App_root_1N-C8_2">Module C: Red</div>
<div class="App_uniqNameC_X4xZM_2">Uniq C: Red</div>
</div>What is actually happening?
The names of the output selectors are identical Hash.
<div id="app">
<div class="App_root_1N-C8">Module A: Green</div>
<div class="App_uniqNameA_1Obkq">Uniq A: Green</div>
<div class="App_root_1N-C8">Module B: Yellow</div>
<div class="App_uniqNameB_cJTiO">Uniq B: Yellow</div>
<div class="App_root_1N-C8">Module C: Red</div>
<div class="App_uniqNameC_X4xZM">Uniq C: Red</div>
</div>Because of this, it is impossible to use different modules in the same vue file, with identical class names. Since, according to the cascade, the rules described in both cases will overlap.
https://vue-loader.vuejs.org/guide/css-modules.html#custom-inject-name
I encountered this problem when I decided to update the project on vue-cli 3. *, since it uses 15. * version
Incorrect operation can be seen in the attached repository. For clarity, 6 elements with different colors are used, 3 of which have the same class (although it should be different).
I noticed that the modules work out correctly, but due to the lack of an index, a cascade occurs.
I did not find a quick way to return a lost index to the output.
Using localIdentName [N] also does not fix the problem.