Modifying CSS or SCSS files in the Lit templates do not trigger a full reload

[e111077]

Describe the bug

The Lit template needs a full page reload since it currently does not support HMR. Modifying CSS files triggers an HMR instead of a full page reload. This means the user will have to trigger a reload manually to see the changes.

Possibly related to #2633 but the opposite way around?

Reproduction

1. git clone git@github.com:e111077/vite-lit-element-ts-sass.git
2. cd vite-lit-element-ts-sass
3. npm install
4. npm run dev
5. open browser to localhost:3000
6. open dev tools
7. add some new text to src/my-element.ts and save
8. observe full page reload in dev tools console
9. Change the border color of src/my-element.scss and save
10. observe HMR in dev tools console
11. observe no change to color
12. reload page
13. observe change in color

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 23.58 GB / 25.01 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    npm: 7.7.6 - ~/.nvm/versions/node/v15.14.0/bin/npm
  npmPackages:
    vite: ^2.2.3 => 2.2.3

Used package manager: npm

Logs

  vite:config bundled config file loaded in 30ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge18', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: false,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: false,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { external: /^lit-element/ },
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: { entry: 'src/my-element.ts', formats: [Array] },
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'postcss-lit',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   configFile: '/home/elliott/Workspace/lit/vite-lit-element-ts-sass/vite.config.ts',
  vite:config   configFileDependencies: [ '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/elliott/Workspace/lit/vite-lit-element-ts-sass',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/home/elliott/Workspace/lit/vite-lit-element-ts-sass/public',
  vite:config   cacheDir: '/home/elliott/Workspace/lit/vite-lit-element-ts-sass/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: {},
  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     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +3ms
vite v2.2.3 building for production...
✓ 16 modules transformed.
dist/style.css                        0.07kb / brotli: 0.06kb
dist/vite-lit-element-ts-sass.es.js   15.06kb / brotli: 5.16kb

---

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• 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/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[e111077]

I plugged in a community HMR module to HMR Lit elements, but the SASS issue still persisted similar to the open svelte bug linked in the description

[yzy8366]

同样的问题，希望能解决

[e111077]

Note: this seems to have been fixed in CSS files but not SCSS files

[sapphi-red]

This is because import foo from 'foo.css' has two effects.
The first one is injecting foo.css to html. This one's hmr is handled by Vite.
The second one is exporting the content of foo.css. This one's hmr is not handled by Vite currently.
For example, this repro has style applied which is imported with import text from './style.css'.
What is difficult here is Vite needs to differentiate import 'foo.css' and import foo from 'foo.css'. Vite injects ?used to import foo from 'foo.css' during build for tree shaking. So it may be possible to implement by that approach.

For a workaround you could use it like below too.

import 'foo.css' // inject css
import foo from 'foo.css?inline' // obtain content

BTW I feel this multiple effect a bit confusing.

[bluwy]

Vite 4 has deprecated default imports from .css and refers to ?inline instead. So I think this is resolved.