Background image path not transformed when used in a shared CSS module
Describe the bug
I am using Vite indirectly through Astro. I have a shared CSS module and compose its declarations in other CSS modules. When I link to a background image in this shared module, its URL remains unchanged in the output CSS, and doesn’t work. When I move the same background rule to a non-shared CSS module, everything works as expected: the URL of the background image is transformed to link to its actual location.
I reported this originally for Astro and received the recommendation to create an issue for Vite. This is likely related to https://github.com/madyankin/postcss-modules/issues/149.
Reproduction
https://stackblitz.com/edit/github-dzmctt-mda7ss?file=src%2Fcomponents%2Fa.module.css
Steps to reproduce
By default the StackBlitz shows the working version. To see the bug, comment out the background definition in a.module.css, and uncomment it in shared.module.css. You might need to restart Astro in the terminal by focusing it, pressing Ctrl+C, and running astro dev.
System Info
System:
OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 11.12 GB / 31.13 GB
Container: Yes
Shell: 3.6.1 - /usr/bin/fish
Binaries:
Node: 20.10.0 - /usr/bin/node
Yarn: 4.0.2 - /usr/bin/yarn
npm: 10.2.3 - /usr/bin/npm
Browsers:
Chrome: 120.0.6099.129
Used Package Manager
yarn
Logs
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.