Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix CSS ordering between imported and Astro styles #4907

Merged
merged 4 commits into from
Sep 28, 2022
Merged

Conversation

matthewp
Copy link
Contributor

@matthewp matthewp commented Sep 28, 2022

Changes

  • In a case like this:
---
import '../styles/global.css';
---
<style>
  body { background: salmon; }
</style>

The Astro styles should be placed after the imported styles, so that they are preferred if their specificity is the same.

Testing

  • Tested in both development and production.

Docs

N/A, bug fix

@changeset-bot
Copy link

changeset-bot bot commented Sep 28, 2022

🦋 Changeset detected

Latest commit: d4b6ecc

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Sep 28, 2022
@github-actions github-actions bot added the semver: minor Change triggers a `minor` release label Sep 28, 2022
Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR is blocked because it contains a minor changeset. A reviewer will merge this at the next release if approved.

Copy link
Contributor

@tony-sull tony-sull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests look good! Added one comment just to confirm how this works with /public as well

</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:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to double check here, these will both be added after any user provided <link rel="stylesheet"> in the head, right? Meaning any stylesheets pulled from /public or an external CDN would be first on page?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, all of the CSS and scripts we add are added to the bottom of the head, so after all user-defined head content. We don't parse the HTML so we don't even know about your link tags.

Copy link
Member

@natemoo-re natemoo-re left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 So happy for this fix!

Copy link
Contributor

@tony-sull tony-sull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@matthewp matthewp merged commit 01c1aaa into main Sep 28, 2022
@matthewp matthewp deleted the style-order branch September 28, 2022 22:12
@astrobot-houston astrobot-houston mentioned this pull request Sep 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg: astro Related to the core `astro` package (scope) semver: minor Change triggers a `minor` release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 BUG: CSS imported have higher priority than CSS on .astro file
4 participants