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.

Sign up for GitHub

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

Jump to bottom

CSS loaded from body fails to hot reload #469

Closed
brianjacobs-natgeo opened this issue Jun 26, 2020 · 4 comments
Closed

CSS loaded from body fails to hot reload #469

brianjacobs-natgeo opened this issue Jun 26, 2020 · 4 comments
Labels
pending triage

Comments

@brianjacobs-natgeo
Copy link

Describe the bug

CSS loaded via <link href /> within <body/> fails to hot reload. While putting stylesheets in the <head /> is best practice, our environment does not allow this. Vite puts stylesheet updates in the <head /> regardless so it does not override stylesheets below it. I would expect vite to:

  • Insert style updates directly after the element that creates it, rather than at the end of the <head />
  • Or, add a timestamp to the href so the browser refreshes the stylesheet directly (browsersync does this).
    <link rel="stylesheet" href="/src/test.css?TIMESTAMP"/>

Reproduction

Please provide a link to a repo that can reproduce the problem you ran into.
https://github.com/briantjacobs/test_vite

Steps taken in repo:

  • Create fresh vite app
npm init vite-app TEST_VITE
  • Add stylesheet to body:
<body>
  <link rel="stylesheet" href="/src/test.css"/>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
  • Add test.css to src folder:
body {background: green}
  • Change the css to background:red and save. Only manual reloads refresh the stylesheet. Moving the <link/> to <head/> and hot reload works great.

System Info

  • required vite version: 1.0.0-beta.3
  • required Operating System: OSX 10.14.4
  • required Node version: v12.8.0
  • Optional:
    • npm/yarn version
    • Installed vue version (from yarn.lock or package-lock.json)
    • Installed @vue/compiler-sfc version

Logs (Optional if provided reproduction)

  1. Run vite or vite build with the --debug flag.
  2. Provide the error log here.
@underfin
Copy link
Member

I test that link css within body and the hmr work fine.

@brianjacobs-natgeo
Copy link
Author

brianjacobs-natgeo commented Jun 27, 2020 •
edited
Loading

Thanks for checking. I should have been more clear in my title/description: HMR is occurring--style changes are being injected, but they're injected in a way that doesn't override existing styles when the <link> is in the body.

In my example, My sole style in the body link tag is this.

 body {background: green}

If you change it to this

body {background: red}

the updated style gets injected in the <head> above the current style so you don't see the change. Adding new styles works fine.

@hmaurer
Copy link

hmaurer commented Jun 28, 2020

I found that Vite has some puzzling behaviour around stylesheets. Like you, I tried to import a stylesheet using a <link tag but ran into issues in the generated bundle. It turns out that Vite appears to do more than I expected there. If you import a stylesheet in an JS file, e.g. import "./index.css", when bundling (and only when bundling) Vite will extract that stylesheet and insert a <link in the output index.html.

@brianjacobs-natgeo
Copy link
Author

This is a hack that fixes my problem for now, live updating css that's a <link> within the body

Considering this in the <body>

<link rel="stylesheet" href="/src/test.css"/>

And this section

vite/src/client/client.ts

Lines 109 to 114 in 2b87b1d

case 'style-update':
const importQuery = path.includes('?') ? '&import' : '?import'
bustSwCache(`${path}${importQuery}`)
await import(`${path}${importQuery}&t=${timestamp}`)
console.log(`[vite] ${path} updated.`)
break

I added this this above line 112

// find a <link> with the path
const el = document.querySelector(`link[href*='${path}']`);
// add a timestamp to the path and the styles are properly refreshed
if (el) {
    el.setAttribute('href', `${path}&t=${timestamp}`);
}

underfin pushed a commit to rolldown/vite that referenced this issue Jul 4, 2020
@yyx990803 @underfin
fix(dev/css): fix hmr for css referenced in html via <link>
3f9f817 
fix vitejs#469
@github-actions github-actions bot locked and limited conversation to collaborators Jul 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
pending triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hmaurer @underfin @brianjacobs-natgeo