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 chunking between multiple framework components #6582

Merged
merged 8 commits into from
Apr 12, 2023
Merged

Conversation

bluwy
Copy link
Member

@bluwy bluwy commented Mar 17, 2023

Changes

Fix #6524
Fix #6395

When we use manualChunks to give a name for CSS chunks, we based on all the parent top-level .astro page related to that CSS chunk to create a name and hash.

However, for CSS chunks during the client build, where the build inputs are the framework components, it's not possible to do so. This PR skips the custom chunk handling for client builds.

But the above change indirectly regresses #4566, so I fixed it by changing our CSS dedupe handling in a transform() hook instead of renderChunk().

Testing

Added a test based on both issue repros, also updated some tests due to new chunking behaviour.

Docs

n/a. bug fix.

@changeset-bot
Copy link

changeset-bot bot commented Mar 17, 2023

🦋 Changeset detected

Latest commit: 54f9616

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 Mar 17, 2023
@bluwy bluwy marked this pull request as draft March 17, 2023 15:24
@bluwy

This comment was marked as outdated.

@bluwy bluwy mentioned this pull request Mar 22, 2023
1 task
Comment on lines -136 to -146
// In the client build, we bail if the chunk is a duplicated CSS chunk tracked from
// above. We remove all the importedCss to prevent emitting the CSS asset.
if (options.target === 'client') {
if (Object.keys(c.modules).every((id) => internals.cssChunkModuleIds.has(id))) {
for (const importedCssImport of meta.importedCss) {
delete bundle[importedCssImport];
meta.importedCss.delete(importedCssImport);
}
return;
}
}
Copy link
Member Author

Choose a reason for hiding this comment

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

This block is removed in favour of the transform() hook, which does the same thing, and should be safer.

@bluwy bluwy marked this pull request as ready for review April 6, 2023 15:14
@matthewp matthewp merged commit 7653cf9 into main Apr 12, 2023
@matthewp matthewp deleted the css-chunk-client branch April 12, 2023 12:24
@astrobot-houston astrobot-houston mentioned this pull request Apr 12, 2023
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.

Result in dev & after build is different css duplicate after build
2 participants