Changes to external css file or external ts file used in svelte file does not trigger reload with HMR

[NiQ-B]

⚠️ IMPORTANT ⚠️ Please do not ignore this template. If you do, your issue will be closed immediately.

• Read the docs.
• 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:/vuejs/vue-next instead.
• This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

A clear and concise description of what the bug is.
Changes to external .css files or external .ts files configured as src documents in the svelte file does not trigger hot module reload. A save on the parent svelte file is required to trigger the update.

Inline style and script ts tags and code works as expected with hmr.

After testing on both a sveltekit@next and vite svelte ts template, I have narrowed down the issue to vite or vite - svelte-preprocessor integration.

Have tried to add css files to the vite.config.js server.watch options with a src/**/*.css glob.

// https://vitejs.dev/config/
export default defineConfig({
server: {
watch: [
'src/**/*.css'
]
},
clear: false,
plugins: [svelte()]
})

See relevant log items below, vite shows that the change is recognized by watch but does not have a module to update even though the src attribute has the name.

Logs (Optional if provided reproduction)

vite:hmr [file change] src/_index.css +4m
vite:hmr [no modules matched] src/_index.css +0m

<script lang="ts" src='_index.ts'/>
<style lang='sugarss' src='_index.css'/>

<!-- prettier-ignore -->
<template lang='pug'>
  div(class="m-title")
    .flex.item-center.justify-center
      | This is a test
</template>

Reproduction

_index.css - contents

 .m-title
   @apply text-7xl mt-[400px] text-indigo-800

Please provide a link to a repo that can reproduce the problem you ran into.

A reproduction is required unless you are absolutely sure that the the problem is obvious and the information you provided is enough for us to understand what the problem is. If a report has only vague description (e.g. just a generic error message) and has no reproduction, it will receive "need reproduction" label. If no reproduction is provided after 3 days, it will be auto-closed.

System Info

• vite version: 2.1.0
• Operating System: ubuntu 18.04
• Node version: 14.13.0
• Package manager (npm/yarn/pnpm) and version: yarn 1.22.5

Logs (Optional if provided reproduction)

vite:hmr [file change] src/_index.css +4m
vite:hmr [no modules matched] src/_index.css +0m

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

[wheatjs]

Can you provide a link to a repo with a reproduction

[NiQ-B]

@jacobclevenger thank you for the quick response. Here is a link to the public repo.
I added a plugin to do hmr login as well.
https:/NiQ-B/test-vite

[ambrt]

I have similar issue with with imported css.
Actually HMR is called on css modification (according to log in terminal)
but old value of css file is still active.

I do workaround directly with import.meta.hot.on and manual cache buster

import green from "../css/test2.css?inline"

if (import.meta.hot) {
        import.meta.hot.on("vite:beforeUpdate", () => {
            console.log("vite before update");

            // TODO: Fix Memory leak
            // https://stackoverflow.com/questions/56492656/how-to-reimport-module-with-es6-import#comment111734170_58153757
       
            import("../css/test2.css?inline&cachebuster" + Date.now()).then(
                (module) => {
                    green2 = module;
                }
            );
        });
    }

PS. There is "new" css imported every time due to cache buster and it's been said that its
an memory leak. Terminal show that vite tracks each of past imported files as separate instances.
Link in code comment points to a way to remove memory leak but i haven't tested
how vite will log or work with it, yet.

[ambrt]

Link in code comment points to a way to remove memory leak but i haven't tested
how vite will log or work with it, yet.

TL;DR: Until something changes in ESM, leak is unsolved and eventually will fill up all ram.
source:
https://ar.al/2021/02/22/cache-busting-in-node.js-dynamic-esm-imports/

Also vite log will point to every past link in one big wall of "hmr update /css...."

[bluwy]

Can't reproduce this with https:/NiQ-B/test-vite, the changes in the external files trigger HMR immediately after updating to the latest version of https:/sveltejs/vite-plugin-svelte. @ambrt Do you have a repro too? IIUC vite-plugin-svelte should be handling this scenario's well. We should report the issue there too.

[ambrt]

@bluwy My code is for SvelteKit and somewhere between now and time at which i created my app changes must have been made, because newest init skeleton app for SvelteKit now refresh external css in proper way.

So for me issue can be closed, not sure about @NiQ-B

[bluwy]

Thanks for the update @ambrt. @NiQ-B haven't responded in a while, and I can't reproduce this, so I'll go ahead and close this issue.