Layout-imported styles are injected after component styles in dev server

[markjaquith]

What version of astro are you using?

2.0.2

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

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Styles imported in a Layout wrapper are being injected after component styles, and overriding the component styles, in the dev server (but not in the built HTML from running npm run build).

e.g. if you have <Layout><Component /></Layout> and Layout.astro imports a global CSS file, those CSS rules will be injected AFTER any styles defined by Component.astro

Because the component adds no specificity, that means the global rules override the component rules for the same selectors.

Full example on Stackblitz. I have a component with:

<style>
a {
  color: blue;
  text-decoration-color: green;
}
</style>

And yet its link is rendered like the global styles dictate:

I believe @matthewp is already working on some CSS ordering issues, but this one seemed subtly different than some of the others I saw.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-qby2d1?file=src%2Fcomponents%2FBlueLink.astro,src%2Fstyles%2Fglobal.css,src%2Fpages%2Findex.astro,src%2Flayouts%2FLayout.astro

Participation

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

[markjaquith]

This is an import order issue.

I was doing:

---
import BlueLink from '../components/BlueLink.astro'
import Layout from '../layouts/Layout.astro'
---

But it's fixed if I do:

---
import Layout from '../layouts/Layout.astro'
import BlueLink from '../components/BlueLink.astro'
---

But I read the documentation as saying that the import order of components shouldn't change the fact that scoped styles should have highest precedence:

Astro CSS rules are evaluated in this order of appearance:

• <link> tags in the head (lowest precedence)
• imported styles
• scoped styles (highest precedence)

Scoped Styles

Using scoped styles does not increase the specificity of your CSS, but they will always come last in the order of appearance. They will therefore take precedence over other styles of the same specificity. For example, if you import a stylesheet that conflicts with a scoped style, the scoped style’s value will apply:

That clearly says that scoped styles have highest precedence.

There is also this:

A common pattern in Astro is to import global CSS inside a Layout component. Be sure to import the Layout component before other imports so that it has the lowest precedence.

I get that you'd want to import the layout before other CSS imports... because they're all "imported styles" and your import order matters within that set of CSS. But a component's scoped styles should still have style precedence over imported styles according to the documentation. So I still think this is a bug.

Also, it only happens in the dev server and not in the built HTML, so it's a consistency issue at the very least.

[bholmesdev]

Hey @markjaquith! Yes, I agree that import order should not effect the resolution of scoped styles. Marking this as a bug.

[matthewp]

Actually, this is working as intended. Component styles don't have a higher precedence than imported styles. When we switched to using :where() selector, they now have the same precedence.

That means that import order is the way you control priority. Higher imports are going to be higher in the built CSS file, lower imports lower, and therefore they will take precendence.

[bholmesdev]

@matthewp Interesting, don't think this is documented. Worth adding this to our styling guide?

[markjaquith]

The behavior is different in production and development. That feels like a bug. And if the import order controls it, the documentation is wrong.

[matthewp]

If there's a difference that's a big, please file an issue.

[LushawnDev]

Was this ever resolved? I'm facing the same issue with differences in CSS between dev and production after running the build command.

Similarly to the @markjaquith, my global styles imported at the top of my layout are taking precedence over my component styles.

[matthewp]

@LushawnDev Yes, there's a new option you can turn on: scopedStyleStrategy: 'class' which will make your component styles have a higher specificity. See https://docs.astro.build/en/reference/configuration-reference/#scopedstylestrategy

[shishkin]

If there's a difference that's a big, please file an issue.

There seems to be an open issue for this already: #6975. I definitely see this behavior in latest astro.

[diego-betto]

In your main .scss file add at the very beginning

@tailwind base;
@tailwind components;
@tailwind utilities;

... your imports and styles

Then just disable default base styles injection

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false, // <--- this line
    }),
  ],
});

ref: https://github.com/withastro/astro/tree/main/packages/integrations/tailwind#applybasestyles