Svelte Css Hotreload does not work

[Autumnlight02]

Basically When you create a new svelte Ts project, add a App.svelte inside of the contentScript folder and append it via the content script to the body hte HTML Will work fine with hot reloads but the CSS inside of the .svelte file will lag behind one "css Reload". Basically it will lag behind one css update. Did test it extensivly and had someone else test it as well. The issue seems not vite related since a new vite svelte project works fine.

To see the latest css state you need to restart the dev server

Bug got introduced at Version v0.8.7

Update 2, probably narrowed it down to "@crxjs/vite-plugin": "^2.0.0-beta.19", update, version 2 seems to be really unstable and cause the issue for svelte and other frameworks. What's the solution here?

[guocaoyi]

@Autumnlight02
Did you fix it? I can't reproduce the issue? @0.9.1

{
"devDependencies": {
    "@crxjs/vite-plugin": "^2.0.0-beta.19",
    "@types/chrome": "^0.0.246",
    "@sveltejs/vite-plugin-svelte": "2.4.6",
    "prettier": "^3.0.3",
    "prettier-plugin-svelte": "^3.0.3",
    "svelte": "^4.2.1",
    "svelte-preprocess": "^5.0.4",
    "tslib": "^2.6.2",
    "typescript": "^5.2.2",
    "vite": "^4.4.11"
  }
}

[Autumnlight02]

I could not fix it, Want me to record a Video on how to cause the bug? Including project setup and execution? @guocaoyi

[Autumnlight02]

@guocaoyi any updates on this?

[guocaoyi]

@Autumnlight02 Update your svelte version to 4.x；unable to hot reload, it seems to be a problem with the svelte official.
sveltejs/template-webpack#36
withastro/astro#4388
so , update your svelte version.

create-chrome-ext just a boilerplate. this's a lightweight scaffolding that doesn't have any unauthorized plug-ins or modifications

[Autumnlight02]

@guocaoyi I've done all of that but the issue still presists with the latest version :c