madyankin / madyankin/postcss-modules

Classes imported from another module have the wrong hash when imported file is changed

Open
#150 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.6k
Forks
88
PR merge metrics
No merged PRs in 30d

Description

I'm using Vite 4.0.4 which uses this plugin for css modules.

I'm importing a classname from another module ("tree") and using it in a selector inside a module ("drawer"). This works just fine, as documented.

@value treeWrap from '../../tree/tree.module.css';

.navDrawer {
  display: flex;
  flex-direction: column;

  & :global(.treeWrap) { /* <--- other submodule class referenced here */
    background: var(--colors-white-01);
    flex: 1;
    padding: 0 10px;
  }
}

The output CSS has the correct classes for this selector: ._navDrawer_g2fsx_4 ._treeWrap_18lce_1. The element has class="_treeWrap_18lce_1"

However, when I make changes to the referenced file tree.module.css and vite's dev mode is running, the connection between these two files is lost. Changes to the drawer.module.css file have no impact.

The classname changed and in the DOM my element now has class="_treeWrap_vuj93_1" yet my css style uses ._navDrawer_g2fsx_4 ._treeWrap_18lce_1, breaking all of the styles.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the reported Vite 4.0.4 dev-mode case using the tree.module.css and drawer.module.css example, then trace how changes to the referenced module update generated class names. Done means editing the imported file no longer leaves the importing module's selector with the old hash.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.