🐛 BUG: CSS imported have higher priority than CSS on .astro file #3357

Eloi-Perez · 2022-05-12T22:14:21Z

What version of `astro` are you using?

1.0.0-beta.27

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

no

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

When I import CSS like import '../styles/style.css'; or CSS contained in other .astro file like import Layout from '../layouts/Layout.astro'; This imported CSS as priority over the CSS inside the <style> on a .astro file.
This way, an external CSS rule with the same specificity will overwrite the one on <style is:global>
And you could say, use scoped <style>... but certain elements are not affected by the :global() or is:global, like *, html or body.
So if I create a CSS rule for body on an external file it would be hard to change it unless I use !important
We should not rely on specificity for this, the internal CSS should always be written at the bottom of the file.

To sum up, the CSS file (asset.xxx.css) from astro build and the temporal CSS file from astro dev. IMA have the content in the wrong order.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ndeuc4-qbjgyn?file=src%2Fpages%2Findex.astro,src%2Fpages%2Fpage2.astro

Participation

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

The text was updated successfully, but these errors were encountered:

natemoo-re · 2022-05-13T14:57:51Z

Thanks for opening an issue! You're right that our specificity is a bit wonky and difficult to control right now.

This problem is something we've discussed in the past but never came to a resolution on. I'm tagging this issue to be reviewed and discussed by the core team.

Related: we have an open PR to ensure that Astro scoped styles use :where() to avoid adding unintended specificity withastro/compiler#330. Would that fix your problem or do you still think the output order has to be adjusted?

Eloi-Perez · 2022-06-10T15:30:18Z

Hi @natemoo-re , I've been using the @layer CSS property as as a way to get around it.
But since I recently updated to the last Astro version (1.0.0-beta.42 from 1.0.0-beta.27). Now astro dev and astro build order the CSS in different ways making it very inconvenient to write CSS as I may get different results on build time.

filipwiniarski · 2022-07-06T15:24:03Z

+1 - Global styles imported in components land before TailwindCSS base styles, losing specificity battle in the result.

A nasty but quick workaround is to simply make global styles slightly more specific and wrap selectors by e.g. body.

ghostdevv · 2022-08-15T01:40:29Z

really hoping a solution appears 🙏

Hotell · 2022-08-17T15:32:58Z

this happens in 1.0 stable as well

tudorpopams · 2022-08-18T09:34:25Z

Hi @natemoo-re , I've been using the @layer CSS property as as a way to get around it. But since I recently updated to the last Astro version (1.0.0-beta.42 from 1.0.0-beta.27). Now astro dev and astro build order the CSS in different ways making it very inconvenient to write CSS as I may get different results on build time.

The astro dev vs astro build CSS order issue is still happening in the stable release (v1.0.5). This creates a big predictability and regression issue on production environments and the workarounds are very hacky. Is there any chance for this to get a higher priority?

Eloi-Perez · 2022-09-24T10:55:08Z

astro@1.3.0
I've seen that now mentioned in the documentation the possibility to "Load a static stylesheet via “link” tags" so I've tested it, at the moment, the order of loading is:

Layout.astro <head><link rel="stylesheet" href="/styles/test.css" /></head> (CSS on public folder)
index.astro <style></style>
Layout.astro <style is:global></style>
Layout.astro import '../styles/test.css';
index.astro import '../styles/test.css';

Same results using astro dev and astro preview

So using "static stylesheet via “link” tags" skips the normal CSS processing, bundling and optimizations BUT, you could write your globals there and you will have the possibility to overwrite them with <style> inside .astro files.

pikeas · 2022-09-24T18:00:25Z

Please consider revising CSS load order to:

Layout.astro <head><link rel="stylesheet" href="..." />
Layout.astro import '...'
Layout.astro <style is:global>
index.astro import '...
index.astro <style>

If those are all added to <head> (rather than any appended just before </body>) , then <div style="..."> will also correctly cascade.

matthewp · 2022-09-29T13:03:15Z

Hey everyone, we just pushed at a fix for this that will be released in 1.4.0. Let me clarify the ordering as it's intended so that we're all on the same page. Let's say you have this:

---
import '../styles/base.css';
import '../styles/global.css';
---
<html>
  <head>
    <link rel="stylesheet" href="/another.css">

    <style>
      body {
        background: limegreen;
      } 
    </style>
  </head>
</html>

The ordering you should see is:

<link rel="stylesheet" href="/another.css">

<link rel="stylesheet" href="/styles/base.css">
<link rel="stylesheet" href="/styles/global.css">

<!-- this is your <style> -->
<link rel="stylesheet" href="/src/pages/index.astro?type=style...">

The change made is that your <style> always comes after imported styles. This fixes the bug that people have been seeing.

Here's a couple of things to remember:

We do not touch the <link>s you manually add in any way. We are effectively unaware of them.
We always place the <link>s that we add at the bottom of the <head>.
You can control the ordering by controlling the order that you import things. In the above example, if you want base.css to be lower in the HTML order, then import it after global.css. This is also true of components. If you want to prioritize their styles over global.css, then make global.css the first thing you import.

I hope that clears things up! There's still likely some issues to address. Code-splitting in particular makes preserving order very hard, so built-order is more likely to not follow the above rules. Please still report anything that you find.

Eloi-Perez · 2022-09-29T15:41:26Z

Thank you, I just tested 1.4.0 and it works as intended!

natemoo-re added needs discussion Issue needs to be discussed s2-medium labels May 13, 2022

natemoo-re added - P3: minor bug An edge case that only affects very specific usage (priority) and removed needs discussion Issue needs to be discussed labels May 31, 2022

natemoo-re added - P4: important Violate documented behavior or significantly impacts performance (priority) and removed - P3: minor bug An edge case that only affects very specific usage (priority) labels Sep 27, 2022

matthewp self-assigned this Sep 27, 2022

matthewp added - P5: urgent Fix build-breaking bugs affecting most users, should be released ASAP (priority) and removed - P4: important Violate documented behavior or significantly impacts performance (priority) labels Sep 27, 2022

matthewp mentioned this issue Sep 28, 2022

Fix CSS ordering between imported and Astro styles #4907

Merged

matthewp closed this as completed in #4907 Sep 28, 2022

sarah11918 mentioned this issue Sep 29, 2022

CSS specificity example withastro/docs#1642

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐛 BUG: CSS imported have higher priority than CSS on .astro file #3357

🐛 BUG: CSS imported have higher priority than CSS on .astro file #3357

Eloi-Perez commented May 12, 2022 •

edited

Loading

natemoo-re commented May 13, 2022

Eloi-Perez commented Jun 10, 2022 •

edited

Loading

filipwiniarski commented Jul 6, 2022 •

edited

Loading

ghostdevv commented Aug 15, 2022

Hotell commented Aug 17, 2022

tudorpopams commented Aug 18, 2022

Eloi-Perez commented Sep 24, 2022 •

edited

Loading

pikeas commented Sep 24, 2022 •

edited

Loading

matthewp commented Sep 29, 2022 •

edited

Loading

Eloi-Perez commented Sep 29, 2022

🐛 BUG: CSS imported have higher priority than CSS on .astro file #3357

🐛 BUG: CSS imported have higher priority than CSS on .astro file #3357

Comments

Eloi-Perez commented May 12, 2022 • edited Loading

What version of astro are you using?

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

What package manager are you using?

What operating system are you using?

Describe the Bug

Link to Minimal Reproducible Example

Participation

natemoo-re commented May 13, 2022

Eloi-Perez commented Jun 10, 2022 • edited Loading

filipwiniarski commented Jul 6, 2022 • edited Loading

ghostdevv commented Aug 15, 2022

Hotell commented Aug 17, 2022

tudorpopams commented Aug 18, 2022

Eloi-Perez commented Sep 24, 2022 • edited Loading

pikeas commented Sep 24, 2022 • edited Loading

matthewp commented Sep 29, 2022 • edited Loading

Eloi-Perez commented Sep 29, 2022

Eloi-Perez commented May 12, 2022 •

edited

Loading

What version of `astro` are you using?

Eloi-Perez commented Jun 10, 2022 •

edited

Loading

filipwiniarski commented Jul 6, 2022 •

edited

Loading

Eloi-Perez commented Sep 24, 2022 •

edited

Loading

pikeas commented Sep 24, 2022 •

edited

Loading

matthewp commented Sep 29, 2022 •

edited

Loading