Comments (9)
You're doing it the right way, I think this is just a bug with the build. Will look into it.
from astro.
Thanks for raising. What’s happening here is that while we crawl all pages in parallel, styles may be found in different orders. In order to avoid a race condition where styles may be generated in random orders, we alphabetize them, hence why reset
appears after global
(likely).
But that does break your scenario here where 2 stylesheets do have an explicit order. So that should be preserved. We’ll make a change for that.
As a temporary workaround, you could try loading your reset.css
from within a global.scss
file using @use (rename the file to .scss
but still load .css
in your <link>
tag). In general, Sass is a very good way to determine order where it matters (and you can still write CSS syntax if you prefer; you don’t have to use any Sass syntax).
from astro.
I actually tried that (as very well documented in the Styling guide) but it didn't work. I'm not sure why but it could be that my reset is overriding some of the scoped rules loaded before that.
If I find time I try to provide more details
from astro.
Opened #232 to fix this. I found an issue which I resolved, where ordering was not deterministic. That automatically closed this issue, but please let me know if you are still experiencing problems.
from astro.
This is fixed in 0.11.0
from astro.
Tried and this is what I see:
TEST1 with
<link href="/css/reset.css" rel="stylesheet"/>
<link href="/css/global.css" rel="stylesheet"/>
RESULT: the bundle css has global
first then reset
then scoped css.
It's an improvement but should preserve order no ?
TEST2 if I modify to a _reset.scss
@use from global.scss
then:
<link href="/css/global.css" rel="stylesheet"/>
RESULT: the bundle css has scoped css then reset
and then global
.
from astro.
Sorry - failed to upgrade - bare with me
from astro.
Both scenarios work perfectly with 0.11.0 👍
Many thanks!
from astro.
Running 0.23.7 and it seems how you link to global.scss
affects the compile order of page and component CSS, when page and component CSS is set to global.
A test repo is available at https://github.com/nonsponsored/astro-css-ordering
Case 1:
Linking global.scss
in index.astro
via: <link rel="stylesheet" href={Astro.resolve("../styles/global.scss")} />
-
In dev,
h1
styling comes fromComponent1.astro
. [Expected result] -
In production,
h1
styling comes from_base.scss.
[Not expected result] -
Production compiled CSS order:
index.astro
styles,Component1.astro
styles,global.scss
styles [Not expected result]
Case 2:
Linking global.scss
in index.astro
via: <style global>@import "../styles/global.scss";</style>
-
In dev and production,
h1
styling comes fromComponent1.astro.
[Expected result] -
Production compiled CSS order:
index.astro
styles,global.scss
styles,Component1.astro
styles [Not expected result]
Note there's a side effect with this approach, and nested styles in _base.scss
don't get compiled correctly. For example, the h1
pseudo element compiles to h1{color:#639;&:before{content:"Style from: _base.scss"}}
Expected Result
-
Component styles would always be appended to
global.scss
, allowing allowing component styles to utilize the cascade. -
Production compiled CSS order:
global.scss
styles,index.astro
styles,Component1.astro
styles
from astro.
Related Issues (20)
- Can't forward concrete `HTMLAttributes` when using `Polymorphic` component HOT 2
- Astro glob throw unsupported files for svg HOT 7
- Animations using svelte-motion break in deployed Astro + Svelte website. HOT 5
- Node SSR breaks when `X-Forwarded-Host` includes port and `X-Forwarded-Port` is also sent
- The image size isn't changing when viewport changes (Image/Picture built-in component) HOT 5
- Deprecation warning for `ReactDOM.renderToStaticNodeStream` used in `@astrojs/react/server.js` HOT 1
- Query Params are stripped HOT 1
- Adobe react spectrum not working (Unknown file extension ".css" )
- Asset links are not bundled in .html files HOT 4
- `NotificationPayload` type is not correct.
- toolbar: `toggleState` is not working. HOT 2
- ⚠️ Duplicated file name anywhere inside the `src/` folder. Not Allowed? HOT 11
- React 19 Beta throws error when starting astro dev server HOT 1
- Anchor elements in table cells with curly braces in their body multiply throughout the html document HOT 1
- i18n and transition HOT 2
- Path aliases in Markdown front-matter are not respected HOT 1
- script with "data-astro-rerun" cant have external library, give error HOT 2
- getRelativeLocaleUrl dont work with internal "#" link
- can't use env in Netlify edge runtime HOT 1
- Provide a way to prevent script tags from running on the server side HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from astro.