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: preserve base in HMR for CSS referenced in link tags #4407

Merged
merged 3 commits into from
Jul 28, 2021

Conversation

ElMassimo
Copy link
Contributor

@ElMassimo ElMassimo commented Jul 27, 2021

Description 📖

This pull request ensures the base is also used for HMR updates when a CSS file was included using a link tag.

Additional context

base is already being used to prefix the URLs when a js-update occurs.

Since the base is removed from the url when registering a CSS file in the module graph, the path sent in the css-update message is not prefixed with base.

As a result, the updated href targets the origin root (/), which is not consistent with how JS updates are fetched, and requires special handling if proxying requests to the Vite dev server.

What is the purpose of this pull request?

  • Bug fix

@patak-dev
Copy link
Member

Looks good, is it difficult to include a test for this in the backend-integration playground?

@ElMassimo
Copy link
Contributor Author

ElMassimo commented Jul 27, 2021

@patak-js Adding an HMR test case is not difficult, but it wouldn't fail if the base is removed—Vite will serve files anyway.

Not sure if there's a way to spy on the incoming requests to verify the prefix, couldn't find a similar test.

patak-dev
patak-dev previously approved these changes Jul 27, 2021
@ElMassimo
Copy link
Contributor Author

ElMassimo commented Jul 27, 2021

Added a spec where we check the replaced href in the link element after HMR, which fails without this patch.

patak-dev
patak-dev previously approved these changes Jul 27, 2021
Comment on lines 88 to 89
base +
`${path.slice(1)}${path.includes('?') ? '&' : '?'}t=${timestamp}`
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
base +
`${path.slice(1)}${path.includes('?') ? '&' : '?'}t=${timestamp}`
`${base}${path.slice(1)}${path.includes('?') ? '&' : '?'}t=${timestamp}`

Copy link
Member

Choose a reason for hiding this comment

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

Could you also please run the formatter after this change? Could change the suggestion

@patak-dev patak-dev requested a review from Shinigami92 July 28, 2021 15:51
@patak-dev patak-dev changed the title fix: Preserve the base when doing HMR for CSS referenced in link tags fix: preserve base in HMR for CSS referenced in link tags Jul 28, 2021
@patak-dev patak-dev merged commit a06b26b into vitejs:main Jul 28, 2021
@ElMassimo ElMassimo deleted the fix-stylesheet-hmr-base branch July 28, 2021 23:05
aleclarson pushed a commit to aleclarson/vite that referenced this pull request Nov 8, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants