Use accumulated sort order when order production CSS

[matthewp]

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

• Test added based on the test case in Styles are added to head in wrong order in prod #5462

Docs

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

[changeset-bot]

🦋 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

[natemoo-re]

Looks good! Lockfile change snuck in, tho.

[jasikpark]

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

[jasikpark]

!preview fix-css-accumulated-sort-order

[jasikpark]

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