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 import order to sort CSS in prod #4724

Merged
merged 4 commits into from
Sep 12, 2022
Merged

Use import order to sort CSS in prod #4724

merged 4 commits into from
Sep 12, 2022

Conversation

matthewp
Copy link
Contributor

Changes

  • Order CSS sorting algorithm now uses import order to determine the order that CSS is injected into the page. That means that if you have something like:
---
import './one.css';
import './two.css';
---

And these end up in separate bundles, the bundle that one.css is within will be in the first link tag and two.css in the second. This means you can control CSS ordering by controlling your own import ordering.

Testing

  • Test added to mirror Tailwind integration scenario.

Docs

N/A, bug fix.

@changeset-bot
Copy link

changeset-bot bot commented Sep 12, 2022

🦋 Changeset detected

Latest commit: d4dcfde

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

This PR includes changesets to release 16 packages
Name Type
astro Patch
@e2e/astro-component Patch
@e2e/error-cyclic Patch
@e2e/error-react-spectrum Patch
@e2e/error-sass Patch
@e2e/errors Patch
@e2e/hydration-race Patch
@e2e/lit-component Patch
@e2e/preact-component Patch
@e2e/react-component Patch
@e2e/solid-component Patch
@e2e/solid-recurse Patch
@e2e/svelte-component Patch
@e2e/e2e-tailwindcss Patch
@e2e/ts-resolution Patch
@e2e/third-party-astro Patch

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 12, 2022
@matthewp matthewp marked this pull request as ready for review September 12, 2022 16:20
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.

LGTM but there will still be an inconsistency in dev, is that correct?

@matthewp
Copy link
Contributor Author

This should match dev more closely since now it orders them by source order, which is what dev does too:

for (const importedModule of entry.importedModules) {

@natemoo-re
Copy link
Member

Awesome, just wanted to check!

@matthewp matthewp merged commit 6efafa4 into main Sep 12, 2022
@matthewp matthewp deleted the inject-script-css-order branch September 12, 2022 20:35
@astrobot-houston astrobot-houston mentioned this pull request Sep 12, 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)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tailwind core/reset file added after other css files in astro build
2 participants