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

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

Closed
1 task
arty-name opened this issue Dec 19, 2023 · 3 comments
Closed
1 task
Labels
needs triage Issue needs to be triaged

Comments

@arty-name
Copy link
Contributor

Astro Info

Astro                    v4.0.6
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

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.

What's the expected result?

The image paths transformations should happen regardless of whether they are defined in shared or non-shared CSS modules.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-dzmctt-mda7ss?file=src%2Fcomponents%2Fa.module.css

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Dec 19, 2023
@arty-name
Copy link
Contributor Author

This could be related to #9405 but the severity of this issue is much higher than some duplicated CSS

@bluwy
Copy link
Member

bluwy commented Dec 22, 2023

Unfortunately this is also an upstream issue 😅 Vite applies the URL rewrites after the postcss-modules plugin, however, the way postcss-modules transform composes makes it that it bypasses all other postcss plugins. There's an issue upstream for it: madyankin/postcss-modules#149

If I made Vite's postcss plugin use OnceExit instead, it also doesn't work as Postcss doesn't seem to use the new rewritten URLs for some reason. Plus, postcss-modules doesn't provide the original "importer" path of the composed file for Vite to be able to resolve path relative to it.

So I'm not sure if this is fixable at the moment. I'd suggest perhaps making an issue in Vite about this so we could track it, but I guess ideally madyankin/postcss-modules#149 could be resolved and have the composes transformed in Once instead.

Also closing this for now as it's out of scope of Astro to fix.

@arty-name
Copy link
Contributor Author

Thank you for investigating this and for the helpful pointers!

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

No branches or pull requests

2 participants