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(plugin-vue): exclude direct css request from hmr target #5422

Merged
merged 1 commit into from Oct 27, 2021

Conversation

antfu
Copy link
Member

@antfu antfu commented Oct 26, 2021

Description

Fixes nuxt/nuxt#12211

This is really a tricky edge case. So here is the thing, normally this HMR should just work. But the way the plugin is implemented is by caching the style request from the main entry of Vue SFC. Normally the request will be something like foo.vue?vue&type=style&lang.css, which will be compiled to a js module with HMR capability like:

import { createHotContext as __vite__createHotContext } from "/@vite/client";
import.meta.hot = __vite__createHotContext("/foo.vue?vue&type=style&lang.css");
import { updateStyle, removeStyle } from "/@vite/client"
const id = "..."
const css = "the CSS..."
updateStyle(id, css)
import.meta.hot.accept()
export default css
import.meta.hot.prune(() => removeStyle(id))

However, if we do a direct request to the CSS - in Nuxt case, we do SSR to embedded the style to prevent FOUC like:

<link rel="stylesheet" href="/foo.vue?vue&type=style&lang.css"></link>

Base on the browser request header, the CSS plugin will then resolve the id with to /foo.vue?direct&vue&type=style&lang.css with the ?direct to serve plain CSS instead of js module.

So now the direct request comes before the JS version, it makes the plugin internal state only record the direct one and send hmr event to the wrong module.

image

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 Commit 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 nuxt/framework#123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@antfu antfu added bug p3-downstream-blocker Blocking the downstream ecosystem to work properly (priority) labels Oct 26, 2021
@Shinigami92
Copy link
Member

Do we already have ?direct somewhere? If not, we may want to add this to the next team meeting and discuss if we want to name it like that to make it really stable as a new wording.

@antfu
Copy link
Member Author

antfu commented Oct 26, 2021

@Shinigami92 👀

if (isDirectCSSRequest(id)) {
return css

const directRequestRE = /(\?|&)direct\b/

// for CSS, we need to differentiate between normal CSS requests and
// imports
if (
isCSSRequest(url) &&
!isDirectRequest(url) &&
req.headers.accept?.includes('text/css')
) {
url = injectQuery(url, 'direct')
}

@Shinigami92 Shinigami92 self-requested a review October 26, 2021 12:36
@antfu antfu merged commit 4331c26 into vitejs:main Oct 27, 2021
@antfu antfu deleted the fix/vue-hmr-direct-css branch October 27, 2021 05:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p3-downstream-blocker Blocking the downstream ecosystem to work properly (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Hot reload with SCSS not working
3 participants