vite icon indicating copy to clipboard operation
vite copied to clipboard

Background image path not transformed when used in a shared CSS module

Open arty-name opened this issue 2 years ago • 1 comments

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

arty-name avatar Dec 22 '23 15:12 arty-name