blob: 16a89271daae71a032496ab74177abc2348d539b (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
---
'astro': minor
---
Order Astro styles last, to override imported styles
This fixes CSS ordering so that imported styles are placed *higher* than page/component level styles. This means that if you do:
```astro
---
import '../styles/global.css';
---
<style>
body {
background: limegreen;
}
</style>
```
The `<style>` defined in this component will be placed *below* the imported CSS. When compiled for production this will result in something like this:
```css
/* /src/styles/global.css */
body {
background: blue;
}
/* /src/pages/index.astro */
body:where(.astro-12345) {
background: limegreen;
}
```
Given Astro's 0-specificity hashing, this change effectively makes it so that Astro styles "win" when they have the same specificity as global styles.
|
