Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
viveleroi opened this issue Jan 22, 2023 · 0 comments

Comments

@viveleroi
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant