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(build): style insert order for UMD builds (fix #13668) #13669

Merged
merged 3 commits into from
Jul 14, 2023

Conversation

binary-koan
Copy link
Contributor

Description

Fixes #13668

The previous fix in #13266 can break the insertion order for UMD builds when a dependency containing the string execute: is added. This updates the logic to only check for execute: when System.register is found, which should be a more robust way to find the insertion point.

TLDR

  • Legacy builds which generate System.register calls will insert the CSS in the execute function
  • Builds which don't have that format will consistently insert the CSS at the top of the IIFE

Additional context


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the PR Title Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

Review PR in StackBlitz Codeflow Submitted with StackBlitz Codeflow.

@stackblitz
Copy link

stackblitz bot commented Jun 29, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

patak-dev
patak-dev previously approved these changes Jul 4, 2023
@patak-dev patak-dev requested a review from sapphi-red July 4, 2023 10:29
@patak-dev patak-dev added regression The issue only appears after a new release plugin: legacy p3-minor-bug An edge case that only affects very specific usage (priority) labels Jul 4, 2023
@rishabhgrg
Copy link

Hey @sapphi-red , just a gentle bump here :) We are blocked on using SWR till this is fixed as this bug causes all injected CSS styles to disappear as soon as SWR is used.

@patak-dev
Copy link
Member

@binary-koan you don't need to be blocked by this PR. Use https://pnpm.io/cli/patch or https://www.npmjs.com/package/patch-package so you can use this PR in your project until it is released.

packages/vite/src/node/plugins/css.ts Outdated Show resolved Hide resolved
@binary-koan
Copy link
Contributor Author

@sapphi-red Makes sense! Updated to do the right thing for both (inserting after "use strict" for UMD and after "execute:" for legacy) - seems to work nicely in the reproduction cases for both the previous issue and my issue

Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

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

Thank you!

@patak-dev patak-dev merged commit 49a1b99 into vitejs:main Jul 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p3-minor-bug An edge case that only affects very specific usage (priority) plugin: legacy regression The issue only appears after a new release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Using the swr package breaks CSS injection in UMD
4 participants