Open Britnell opened 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.
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.
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
Astro Info
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 manuallyWhat'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 pagesee 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