Hoisting of global styles #265
FredKSchott
started this conversation in
Proposal
Replies: 2 comments
-
|
Beta Was this translation helpful? Give feedback.
0 replies
-
@FredKSchott Thank you for taking the time to reply. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
We need a way to include global styles in such a way that they are generated at the top of the tag.
For years CSS was authored in a way that styles declared later in the document are meant to overwrite previous styles with the same specificity.
Assuming a project is supposed to be built using this paradigm: Layout > Page > Components
The logical place to include global styles is in the layout files.
So lets assume we have a global.sass file that contains this content:
button {
color: red
}
If we import this file into a layout file (by writing import "../sass/global.sass") the generated css would not be scoped.
Up until now this is expected behavior as far as I'm concered.
Now if we create a page that uses that layout and add scoped style tag in that page, such as:
<style lang="sass"> button { /* this is scoped */ color: green } </style>The generated css would be scoped but not of higher specificity than the selector in global.sass, for example:
button:where(.astro-AFLCCVED) {
color: green;
}
Since astro outputs the Page's style tag before the Layout's imported style -> the rendered button would have a text color of red.
In other frameworks (Vue for instance) scoped styles are not handled by a ":where" statement, So scoped selectors have higher specificity and they automatically overwrite the same unscoped selectors.
This could be fixed by hoisting global styles to the top of the tag.
Or by allowing for a way to transform scoped styles to something like:
button.astro-AFLCCVED {...}
instead of
button:where(.astro-AFLCCVED) {...}
Hope i made myself clear...
Link to Minimal Reproducible Example
git clone https://YakirReznik@bitbucket.org/YakirReznik/astro-global-styles-issue.git
Beta Was this translation helpful? Give feedback.
All reactions