'class' scopedStyleStrategy breaks styles loaded into a custom cascade layer

[chrisvaillancourt]

What version of astro are you using?

2.5.7

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Firefox

Describe the Bug

Setting scopedStyleStrategy: 'class' in astro.config.mjs breaks component styles that load styles in a cascade layer.

This issue only occurs during a production build. Reverting to the default 'where' scope strategy resolves the style issue.

Example button when running npm run dev

Example button when running npm run build && npm run preview

To Reproduce

1. Open the example reproduction
2. run npm run dev and preview the output button
3. stop the dev server and run npm run build && npm run preview and notice the difference in button styles

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-vgh3h3?file=src%2Fcomponents%2FBtn.astro

Participation

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

[natemoo-re]

Sorry for the delay! This seems like a compiler issue because we're not properly handling :where styles. I'm going to move it over to that repo.