CSS Modules inject order

[ymatuhin]

Astro Info

Astro                    v3.0.13
Node                     v18.17.1
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/preact

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

Chrome

Describe the Bug

When I import CSS modules from Preact component, is goes first in order of all styles. Even before global styles. That messes up specificity for components.

What's the expected result?

They should be treated as scoped css and be applied after globals.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-k1nega-mj5wcr?file=src%2Fcomponents%2FCounter.module.css

Participation

• I am willing to submit a pull request for this issue.

[natemoo-re]

Just to confirm, does the issue only occur in dev mode? Is the astro build output different?

[ymatuhin]

Just to confirm, does the issue only occur in dev mode? Is the astro build output different?

Nope, build output has the same issue.

[lilnasy]

Could not reproduce the issue (edit: ...in build, the issue exists in dev). The text renders green as expected.

I find it really odd that in your screenshot global.css is a script. This is the result I'm getting from building your project.

You might want to open a support thread on our discord to confirm the production issue: https://astro.build/chat.

[duncannah]

I'm having this same problem, only occurs on production build

EDIT: Seems like the issue I was having was unrelated, being caused by a third-party plugin.

[lilnasy]

@duncannah I can reproduce this issue only in dev mode. Could you open another issue with a minimal reproduction?

[ymatuhin]

@lilnasy yeah, looks like it happens only in dev mode. Sorry for misguidance.