Component styles aren't scoped

Britnell commented 1 month ago

Astro Info

Astro                    v4.12.2
Node                     v20.14.0
System                   Linux (x64)
Package Manager          npm
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             @qwikdev/astro
                         @astrojs/vue
                         @astrojs/react
                         @astrojs/tailwind

// love this!

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

No response

Describe the Bug

Hey team, apologies if i am overlooking something, but my component styles aren't scoping properly. quite the opposite, the styles of a component, are applied globally and loaded on every page.

Is this somehow affected by vercel adapter or some framework plugin ?

i realised because I was using body { background: black } on some pages, but instead this was applied to EVERY page, i scoped that manually

What's the expected result?

component styles are supposed to be scoped, instead they become global, and are shown on every page, in fact it seems astro is throwing styles for all pages in one .css

see stylesheet, and e.g. tag has styles :root { --persp: 400px; } although the box component is not on this page

see the Box component here : Britnell/astronomical/src/style/box.astro

this project uses several framework, so maybe one of these is messing up the style bundling? Britnell/astronomical/astro.config.mjs

Link to Minimal Reproducible Example

https://astronomical-eta.vercel.app/

Participation

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

bluwy commented 1 month ago

body isn't scoped by default, which is explained in https://github.com/withastro/astro/issues/2827. I would agree that this could be better documented in the docs.

But even if we do scope them, which means generating CSS like body[data-astro-cid-hashxx] {}, it wouldn't really apply because you're not referencing it in the current Astro file. Same goes for the .threed class you have. Scoped styles needs to be referenced in the own file.

If you're looking for "add this CSS if this component is used", you can technically do that by making body global (which it already is) and :global(.threed), but there seems to be code-splitting issue that should've only load that CSS on used page which I need to further investigate.

Britnell commented 1 month ago

hey @bluwy , thanks so much for reply. yeah not scoping body kinda makes sense tbh ... i mean there is only one :ring:
wouldnt be a problem if it wasnt combining all pages... the code splitting not working, could create some pretty big global stylesheets ...

let me know if i can help at all, but the project felt like quite a minimal reproduction already.

Britnell commented 1 month ago

Hey, i just checked another site, and it's the same thing actually , one big global style sheet that is loaded on every page .... /_astro/style.BRw1Xk2Y.css https://digitalrebellion.uk/ no wonder it is so big ... so this is astro default behaviour? i would have expected styles to be compiled separately for each page no? the code for this is private, but also uses qwik & tw btw

could this be due to tw maybe? i guess tw generates a stylesheet of all classnames used, and maybe this is not done per page but once globally?

best, T

withastro / astro