Styles file not get packed when `astro build` in SSG mode for react component wrapped with context

[ace-han]

Astro Info

Astro                    v3.2.4
Node                     v18.18.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/react

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

No response

Describe the Bug

As shown below, everything is fine when doing astro dev. However, astro build and astro preview I found count: 0 not styled with a red background color.

With a little digging, it was due to global.css not effective in react component which was wrapped with React.Context

Here is a minimal reproducible link

https://stackblitz.com/edit/withastro-astro-lvshyf?file=src%2Fstyles%2Fglobal.css,src%2Fcomponents%2FMathExam.tsx

What's the expected result?

I want a consistency behavior with astro dev and astro build as in count: 0 with background color: red after astro build

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-lvshyf?file=src%2Fstyles%2Fglobal.css,src%2Fcomponents%2FMathExam.tsx

Participation

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

[DevRohit06]

you can use style tag in index.astro

[ace-han]

you can use style tag in index.astro

@DevRohit06 It was just a minimal reproducible scenario.

In simple case, I could do a global import or sth like what you have mentioned.

In fact, my website has many ui library dependencies, some are importing style files deeply down inside their code .

It's difficult to identify which one is importing style files within React.Context.

I think this behavior should be a solid bug

[bluwy]

Marking as p3 for now as this doesn't seem to be affecting as much users as expected. But we'll be sure to follow-up as soon as possible.