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

Use accumulated sort order when order production CSS #5549

Merged
merged 3 commits into from
Dec 6, 2022
Merged

Conversation

matthewp
Copy link
Contributor

@matthewp matthewp commented Dec 6, 2022

Changes

  • To determine how to order CSS bundles we use import order; if you want your CSS to have priority make it lower in the import than other CSS.
  • However in the past this was only accounted for at the page component level. So if you used layouts the sorting within the layout component wasn't considered.
  • This changes it so that the sort order is an accumulation of each module all the way up the tree. So that it takes into account layouts and other nested components.
  • Fixes Styles are added to head in wrong order in prod #5462

Testing

Docs

N/A, bug fix, this is already the documented way we do CSS sorting.

@changeset-bot
Copy link

changeset-bot bot commented Dec 6, 2022

🦋 Changeset detected

Latest commit: 9809198

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 Dec 6, 2022
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.

Looks good! Lockfile change snuck in, tho.

pnpm-lock.yaml Outdated Show resolved Hide resolved
@matthewp matthewp requested a review from a team as a code owner December 6, 2022 21:29
@matthewp matthewp merged commit 795f00f into main Dec 6, 2022
@matthewp matthewp deleted the css-order-layout branch December 6, 2022 22:12
@astrobot-houston astrobot-houston mentioned this pull request Dec 6, 2022
@jasikpark
Copy link
Contributor

woooo glad this issue is fixed && that also now the CSS is weighted correctly based on import side-effect order :)

@jasikpark
Copy link
Contributor

!preview fix-css-accumulated-sort-order

@jasikpark
Copy link
Contributor

ope. that command fails when the backing branch is gone 😅

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)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Styles are added to head in wrong order in prod
3 participants