webpack/css-loader

Inconsistent Hash Generation for Same CSS Selector in Different Components with CSS-Modules

Closed this issue · 1 comments

cainrus commented

Bug report

Actual Behavior

When a CSS module with a cascading selector (like .parent .child) is imported from an external file into two different components, different hashes are generated for the same selector in different components.

For example, suppose we have two components VList.vue and VListItem.vue, both of which use the .list-item selector from common.module.css:

.list {
  background-color: blue;
}
.list .list-item {
  background-color: red;
}

VListItem.vue

<template>
  <div :class="$style['list-item']"></div>
</template>

VList.vue

<template>
<div :class="$style.list">
    <VListItem/>
</div>
</template>
  1. In VList.vue, css-modules generates: <style>.list__g5s8 .list__item__fa4g {}</style>
  2. In VListItem.vue, it generates: <li class="list__item__avf3"></li>

As a result, instead of having a common class .list__item, we get two different ones: .list__item__fa4g and .list__item__avf3. This inconsistency can cause styles to be applied incorrectly.

Expected Behavior

When a CSS module is imported into multiple components, the generated hash for a selector should be consistent across all components to ensure that styles are applied as expected.

How Do We Reproduce?

The issue can be replicated using a sample Vue project with two components that import the same CSS module. Here is a link to a minimal reproduction on CodeSandbox: https://codesandbox.io/s/vue-component-with-css-modules-forked-lhm5nh

Notice that the area within the red outline should be green, but due to the aforementioned issue, it's not.

Please paste the results of npx webpack-cli info here, and mention other relevant information

npx webpack-cli info
System:
OS: macOS 13.4
CPU: (10) arm64 Apple M1 Pro
Memory: 36.17 MB / 32.00 GB
Binaries:
Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
Yarn: 3.2.1 - /opt/homebrew/bin/yarn
npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
Browsers:
Chrome: 114.0.5735.198
Safari: 16.5

alexander-akait commented

Please open an issue in the vue-cli repo, thank you and sorry for delay