sveltejs / vite-plugin-svelte

Svelte plugin for http://vitejs.dev/
MIT License
864 stars 105 forks source link

vitePreprocess postcss watch is not working #704

Closed NikolayMakhonin closed 1 year ago

NikolayMakhonin commented 1 year ago

Describe the bug

See this repo

I just create minimal svelte-kit app with these changes only:

npm create svelte@latest svelte-kit-issues
Need to install the following packages:
  create-svelte@5.0.4
Ok to proceed? (y) y

create-svelte version 5.0.4

T  Welcome to SvelteKit!
|
o  Which Svelte app template?
|  Skeleton project
|
o  Add type checking with TypeScript?
|  Yes, using TypeScript syntax
|
o  Select additional options (use arrow keys/space bar)
|  none
|
—  Your project is ready!

+page.svelte

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+ <style lang="postcss">
+   @import './style.css';
+ </style>

style.css

h1 {
  color: red; /* Try to change it and you can see that the web page is not refreshing */
}

The watch/autorefresh is not working if I change the style.css file.

Reproduction URL

https://github.com/NikolayMakhonin/svelte-kit-issues/tree/postcss-import-watch

Reproduction

1) pnpm run dev 2) change style.css 3) you can see that the web page is not refreshing

Logs

No response

System Info

System:                                                 
    OS: Windows 10 10.0.19045                             
    CPU: (8) x64 Intel(R) Core(TM) i7-3610QM CPU @ 2.30GHz
    Memory: 6.55 GB / 15.89 GB                            
  Binaries:                                               
    Node: 16.20.0 - E:\Program Files\nodejs\node.EXE      
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD        
    npm: 8.19.4 - E:\Program Files\nodejs\npm.CMD         
  Browsers:                                               
    Edge: Spartan (44.19041.1266.0), Chromium (115.0.1901.188)
    Internet Explorer: 11.0.19041.906
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0
    @sveltejs/kit: ^1.20.4 => 1.22.4
    svelte: ^4.0.5 => 4.1.2
    vite: ^4.4.2 => 4.4.8
dominikg commented 1 year ago

I can't reproduce this. cloning the repo provided, running pnpm i && pnpm dev and then editing style.css to change color: red to color: blue , the style is reloaded in the browser and change is visible.

dependencies of css are collected here: https://github.com/sveltejs/vite-plugin-svelte/blob/0913cd3174a331f1003a051096c3dba369e36824/packages/vite-plugin-svelte/src/preprocess.js#L90 and changing them causes a change event on the .svelte file here https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/src/utils/watch.js#L27

dominikg commented 1 year ago

Please run DEBUG=vite:vite-plugin-svelte:* pnpm dev --debug and check for this log message

emitting virtual change event for "${dependant}" because depdendency "${filename}" changed

dominikg commented 1 year ago

closing as invalid, reproduction doesn't work and additional information hasn't been provided.

it can be reopened once we get that