CSS updates require a dev server restart when using workspace Vue package

spacedawwwg commented 6 months ago

Related plugins

[X] plugin-vue
[ ] plugin-vue-jsx

Describe the bug

When updating CSS inside Vue components, referenced by the src attribute, the styles do not update until the dev server is restarted. Reloading the page does not fix the issue, only fully restarting the dev server does.

<style src="./Component.css"></style>

I reported this in https://github.com/withastro/astro/issues/10110 but realised it was an upstream issue.

Reproduction

https://stackblitz.com/edit/vitejs-vite-psmghd?terminal=dev

Steps to reproduce

Run pnpm install followed by pnpm --filter @example/vite-vue dev
Try editing the CSS file in packages/components/VueExample/VueExample.css

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.14.0 - /usr/local/bin/pnpm

Used Package Manager

pnpm

Logs

Click to expand!

```shell vite:config bundled config file loaded in 413.13ms +0ms vite:config using resolved config: { vite:config plugins: [ vite:config 'vite:build-metadata', vite:config 'vite:watch-package-data', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:vue', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:build-html', vite:config 'vite:worker-import-meta-url', vite:config 'vite:asset-import-meta-url', vite:config 'vite:force-systemjs-wrap-complete', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:build-import-analysis', vite:config 'vite:esbuild-transpile', vite:config 'vite:terser', vite:config 'vite:reporter', vite:config 'vite:load-fallback' vite:config ], vite:config build: { vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config sourcemap: false, vite:config rollupOptions: {}, vite:config minify: 'esbuild', vite:config terserOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config copyPublicDir: true, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config ssrEmitAssets: false, vite:config reportCompressedSize: true, vite:config chunkSizeWarningLimit: 500, vite:config watch: null, vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }, vite:config modulePreload: { polyfill: true }, vite:config cssMinify: true vite:config }, vite:config resolve: { vite:config mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ], vite:config conditions: [], vite:config extensions: [ vite:config '.mjs', '.js', vite:config '.mts', '.ts', vite:config '.jsx', '.tsx', vite:config '.json' vite:config ], vite:config dedupe: [ 'vue' ], vite:config preserveSymlinks: false, vite:config alias: [ [Object], [Object] ] vite:config }, vite:config define: { vite:config __VUE_OPTIONS_API__: true, vite:config __VUE_PROD_DEVTOOLS__: false, vite:config __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false vite:config }, vite:config ssr: { vite:config target: 'node', vite:config external: [], vite:config optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] } vite:config }, vite:config configFile: '/home/projects/vitejs-vite-psmghd/apps/vite-vue/vite.config.ts', vite:config configFileDependencies: [ '/home/projects/vitejs-vite-psmghd/apps/vite-vue/vite.config.ts' ], vite:config inlineConfig: { vite:config root: undefined, vite:config base: undefined, vite:config mode: undefined, vite:config configFile: undefined, vite:config logLevel: undefined, vite:config clearScreen: undefined, vite:config build: {} vite:config }, vite:config root: '/home/projects/vitejs-vite-psmghd/apps/vite-vue', vite:config base: '/', vite:config rawBase: '/', vite:config publicDir: '/home/projects/vitejs-vite-psmghd/apps/vite-vue/public', vite:config cacheDir: '/home/projects/vitejs-vite-psmghd/apps/vite-vue/node_modules/.vite', vite:config command: 'build', vite:config mode: 'production', vite:config isWorker: false, vite:config mainConfig: null, vite:config isProduction: true, vite:config css: { lightningcss: undefined }, vite:config esbuild: { jsxDev: false }, vite:config server: { vite:config preTransformRequests: true, vite:config sourcemapIgnoreList: [Function: isInNodeModules$1], vite:config middlewareMode: false, vite:config fs: { vite:config strict: true, vite:config allow: [Array], vite:config deny: [Array], vite:config cachedChecks: undefined vite:config } vite:config }, vite:config preview: { vite:config port: undefined, vite:config strictPort: undefined, vite:config host: undefined, vite:config https: undefined, vite:config open: undefined, vite:config proxy: undefined, vite:config cors: undefined, vite:config headers: undefined vite:config }, vite:config envDir: '/home/projects/vitejs-vite-psmghd/apps/vite-vue', vite:config env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true }, vite:config assetsInclude: [Function: assetsInclude], vite:config logger: { vite:config hasWarned: false, vite:config info: [Function: info], vite:config warn: [Function: warn], vite:config warnOnce: [Function: warnOnce], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen], vite:config hasErrorLogged: [Function: hasErrorLogged] vite:config }, vite:config packageCache: Map(1) { vite:config 'fnpd_/home/projects/vitejs-vite-psmghd/apps/vite-vue' => { vite:config dir: '/home/projects/vitejs-vite-psmghd/apps/vite-vue', vite:config data: [Object], vite:config hasSideEffects: [Function: hasSideEffects], vite:config webResolvedImports: {}, vite:config nodeResolvedImports: {}, vite:config setResolvedCache: [Function: setResolvedCache], vite:config getResolvedCache: [Function: getResolvedCache] vite:config }, vite:config set: [Function (anonymous)] vite:config }, vite:config createResolver: [Function: createResolver], vite:config optimizeDeps: { vite:config holdUntilCrawlEnd: true, vite:config esbuildOptions: { preserveSymlinks: false } vite:config }, vite:config worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} }, vite:config appType: 'spa', vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }, vite:config getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks] vite:config } +5ms vite v5.1.3 building for production... ✓ 22 modules transformed. dist/index.html 0.46 kB │ gzip: 0.30 kB dist/assets/index-DhvQCW6R.css 1.30 kB │ gzip: 0.65 kB dist/assets/index-D_hRdeEr.js 55.36 kB │ gzip: 22.39 kB ✓ built in 841ms ```

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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 vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

darcyvoutt commented 6 months ago

Running into the same issue.

sovietspaceship commented 5 months ago

same issue when updating any scss file, it won't hot reload style changes. Just migrated from vite 4, this is absurdly frustrating

daneget commented 1 month ago

I have the same frustrating issue... :disappointed: A possible workaround seems to be to replace the original style reference

<style src="./Component.css"></style>

with an import

<style>
@import url("./Component.css");
</style>

spacedawwwg commented 1 month ago

I have the same frustrating issue... 😞 A possible workaround seems to be to replace the original style reference
<style src="./Component.css"></style>
with an import
<style>
@import url("./Component.css");
</style>

This is exactly what i've started doing as it still allows the scoped attribute

vitejs / vite-plugin-vue