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

[Eloi-Perez]

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.

[natemoo-re]

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 https://github.com/withastro/compiler/pull/330. Would that fix your problem or do you still think the output order has to be adjusted?

[Eloi-Perez]

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]

+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]

really hoping a solution appears :pray:

[Hotell]

this happens in 1.0 stable as well

[tudorpopams]

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?