<style>@import "./style.css";</style> fails to HMR #7042
Description
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
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?directHowever, 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
Which results in that being logged to console upon editing ./style.css:
hmr update /style.cssIf 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.htmlAnd 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
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.