CSS ordering

[matthewp]

Body

Summary

Allow Astro styles to override global styles.

Background & Motivation

A common pattern in an application is to have some global styles in a global style file like so:

global.css

input {
  border-width: 1px;
}

And then to use them in an Astro component.

---
import '../global.css';
---
<style>
  input {
    border-width: 2px;
  }
</style>

<input type="text">

The intent is to override the styles on this page (or component).

Due to chunking of shared dependencies, we cannot guarantee that CSS ordering will be correct. So we need a solution for this pattern.

Goals

• Give some mechanism where the user can control style ordering, particularly for this shared / global CSS use-case.

Example

There are 2 solutions we have thought of so far:

1. Go back to non-:where selectors. This will cause a specificity bump of 1. So even if the styles are not ordered the way that you want, it will still cause Astro styles to override global styles.

2. Provide a concept of "global styles". The user would mark some CSS files as being global (perhaps through configuration). We would bundle those styles into their own global bundle. it would always be placed before any page-specific styles.

An example of (2) might be:

import { defineConfig } from 'astro/config';

export default defineConfig({
  styles: {
    global: ['src/global.css']
  }
});

Note that the above is only to illustrate the point! There is possibly another way other than configuration to achieve this.

[matthewp]

Layers is another possible solution to this problem.

[jasikpark]

Layers would be a great solution except for the fact that the polyfill requires total knowledge of CSS in a project so that it layers things correctly

[natemoo-re]

Agreed that layers would be a great solution here. Browser support is pretty good, but obviously dealing with the polyfill would be a pain.

[natemoo-re]

I can imagine an experimental feature where we turn on @layer support automatically and all component styles are wrapped in a @layer components {} declaration.

[jasikpark]

I don't think that solves having global scoped styles, ex .MyList > li in an astro component, but ig that's a totally different task

[bluwy]

This proposal has been accepted and moved to stage 2! #540

The discussion has been summarized in the linked issue.