ionic kraken
I have just tried adding some basic CSS @layers to an Astro project.
I'm importing a single CSS file generated from SCSS. The CSS file is A-OK before import. I'm then adding a few components on the high-ish components layer (above the layers for initial styling).
Instead of doing what I expected, I'm seeing link colors from the lower layers overriding colors on the components. When I investigated in the console, I saw this image... O.o
What...is going on...?
plush patrolBOT
Hi @ionic kraken. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Hmm, I don't know enough to give you a confident answer yet. However, I can provide some information about how Astro handles CSS and its cascading order.
Astro evaluates CSS rules in the following order of appearance:
<link> tags in the head (lowest precedence)Astro components use scoped styles by default, which means the CSS rules you write inside an Astro component are automatically encapsulated within that component. However, when conflicting CSS rules apply to the same element, browsers first use specificity and then order of appearance to determine which value to show.
In Astro 1.4.0, styles you write in Astro components will come after global styles imported. This means that if you have the same specificity, the one listed later (the one scoped to your component) will prevail.
It's important to note that Astro uses the :where pseudo-selector for scoped Astro component styles, which means your component styles have the same specificity as if they were written in plain CSS. This approach cannot guarantee that component styles will always override global styles.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
