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

<style>@import "./style.css";</style> fails to HMR #7042

Closed
7 tasks done
leoj3n opened this issue Feb 22, 2022 · 0 comments · Fixed by #7052
Closed
7 tasks done

<style>@import "./style.css";</style> fails to HMR #7042

leoj3n opened this issue Feb 22, 2022 · 0 comments · Fixed by #7052
Labels
pending triage

Comments

@leoj3n
Copy link
Contributor

leoj3n commented Feb 22, 2022 •
edited

Describe the bug

Inside <body> or <head> of index.html, the following code:

    <style>
      @import "./style.css";
    </style>

Does not cause index.html to reload or for the css to be replaced when ./style.css is edited and saved.

The @import is considered an isDirectCSSRequest here:

vite/packages/vite/src/node/plugins/css.ts

Lines 295 to 297 in 33f9671

if (isDirectCSSRequest(id)) {
return css
} else {

The ModuleNode will look like that:

ModuleNode {
  id: '/home/projects/vitejs-vite-flhjoj/style.css?direct',
  file: '/home/projects/vitejs-vite-flhjoj/style.css',
  importers: Set(0) {},
  importedModules: Set(0) {},
  acceptedHmrDeps: Set(0) {},
  isSelfAccepting: false,
  transformResult: null,
  ssrTransformResult: null,
  ssrModule: null,
  lastHMRTimestamp: 0,
  url: '/style.css?direct',
  type: 'css'
}

Editing and saving ./style.css logs out:

12:09:54 PM [vite] hmr update /style.css?direct

However, no actual update takes place, unlike when doing import './style.css'; in main.js which has ModuleNode like:

ModuleNode {
  id: '/home/projects/vitejs-vite-flhjoj/style.css',
  file: '/home/projects/vitejs-vite-flhjoj/style.css',
  importers: Set(1) {
    ModuleNode {
      id: '/home/projects/vitejs-vite-flhjoj/main.js',
      file: '/home/projects/vitejs-vite-flhjoj/main.js',
      importers: Set(0) {},
      importedModules: [Set],
      acceptedHmrDeps: Set(0) {},
      isSelfAccepting: false,
      transformResult: [Object],
      ssrTransformResult: null,
      ssrModule: null,
      lastHMRTimestamp: 0,
      url: '/main.js',
      type: 'js'
    }
  },
  importedModules: Set(0) {},
  acceptedHmrDeps: Set(0) {},
  isSelfAccepting: false,
  transformResult: null,
  ssrTransformResult: null,
  ssrModule: null,
  lastHMRTimestamp: 0,
  url: '/style.css',
  type: 'js'
}

And hits this code instead of isDirectCSSRequest:

vite/packages/vite/src/node/plugins/css.ts

Lines 305 to 318 in 33f9671

return [
`import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from ${JSON.stringify(
path.posix.join(config.base, CLIENT_PUBLIC_PATH)
)}`,
`const __vite__id = ${JSON.stringify(id)}`,
`const __vite__css = ${JSON.stringify(css)}`,
`__vite__updateStyle(__vite__id, __vite__css)`,
// css modules exports change on edit so it can't self accept
`${
modulesCode ||
`import.meta.hot.accept()\nexport default __vite__css`
}`,
`import.meta.hot.prune(() => __vite__removeStyle(__vite__id))`
].join('\n')

Which results in that being logged to console upon editing ./style.css:

hmr update /style.css

If you were to edit index.html when only using @import, by adding a space somewhere and saving the file, that is logged to console:

12:17:20 PM [vite] page reload index.html

And the CSS changes from the @import-ed ./style.css are updated.

Therefore, it seems one solution may be to trigger page reload index.html when @import-ed css files are edited.

Reproduction

https://stackblitz.com/edit/vitejs-vite-flhjoj?file=style.css

System Info

Stackblitz.

Used Package Manager

npm

Logs

No response

Validations
@leoj3n leoj3n changed the title <style>@import './style.ss';</style> fails to HMR <style>@import "./style.css";</style> fails to HMR Feb 22, 2022
@Niputi Niputi linked a pull request Feb 22, 2022 that will close this issue
fix: resolve @import of the proxied <style> #7031
Merged
9 tasks
@ygj6 ygj6 mentioned this issue Feb 23, 2022
Merged
9 tasks
@Niputi Niputi removed a link to a pull request Feb 23, 2022
fix: resolve @import of the proxied <style> #7031
Merged
9 tasks
@poyoho poyoho mentioned this issue Feb 23, 2022
Merged
9 tasks
@github-actions github-actions bot locked and limited conversation to collaborators Mar 11, 2022
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

Successfully merging a pull request may close this issue.

fix(hmr): hmr style tag no support in html poyoho/vite
1 participant
@leoj3n