Style Ordering of Imported Styles is Broken in Dev

[amxmln]

What version of astro are you using?

2.3.4

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

What browser are you using?

Chrome

Describe the Bug

When importing a style reset, such as normalize.css, the styles of this reset override all other styles specified in the project, possibly because the order in which style imports are added to the DOM broke or changed.

This only happens during dev, after the project is built the styles get applied correctly.

See the linked example for an illustration of the issue. During Dev, the CSS font-size: 10rem; is overridden by the font-size specified in the imported normalize.css file, which is unexpected and used to work correctly.

After running npm run build && npm run preview the size of the heading is correct. (A refresh of the "page" in Stackblitz may be necessary to see the change.)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-tzsmtu?file=src/pages/index.astro

Participation

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

[designbymind]

Same issue here. Using [email protected] with @astrojs/[email protected]. The base.css (style overrides) are being loaded after scoped/is:global styles.

Example: setting font-size on <h1> within <style> tag within src/pages/page.astro will render no style because the custom (scoped) style is being ordered in front of Tailwind's base.css (which removes said styling on <h1>).

P.S. This seems to only affect dev but not build.

Any updates on this?

[herve-ch]

Hello I got the same issue, global tailwind rules are overridden in dev but work in prod

Link to sample: https://github.com/herve-ch/astro-tw.git

https://melodic-kulfi-ab5aa1.netlify.app => Global styles are applied correctly in prod but not in dev

Using astro 2.4.4

[neefrehman]

experiencing the same issue, though for me it doesn't occur on my sites homepage. Both astro and tailwind are on their latest versions.

[chadtomlinson]

Suffering same issue importing Bootstrap styles from npm package, with custom styles in dev only.

In prod all styles are imported correctly.

In dev the order in which the styles are loaded isn't correct, Bootstrap styles are always loaded after custom styles, so the overrides are never applied.

Using 2.3.2.

[matthewp]

This issue is fixed as best as is possible by using scopedStyleStrategy: 'class'.

Closing as ordering issues are not fixable. Order can not be guaranteed after bundling.