Vite plugin not detecting changes for .css.ts files imported by other .css.ts files

gustmnds commented 3 months ago

Describe the bug

In my project, I have two files: theme.css.ts (which uses createGlobalThemeContract and createGlobalTheme) and global.css.ts (which uses globalStyles and imports theme.css.ts). The global.css.ts file is imported in my app.tsx. When I make any changes in global.css.ts, the changes are reflected in the front. However, if I change any value in createGlobalTheme in theme.css.ts, the changes don't reflect in the front until I restart the app.

Interestingly, if I import theme.css.ts directly in app.tsx, the changes are applied.

So I think the problem is that the Vite plugin, for some reason, doesn't catch file changes if they are imported by other .css.ts files.

Reproduction

https://stackblitz.com/edit/vitejs-vite-bwy3de

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz
    Memory: 4.89 GB / 15.84 GB
Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE     
    Yarn: 4.2.2 - C:\Program Files\nodejs\yarn.CMD       
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD        
    pnpm: 9.1.3 - C:\Program Files\nodejs\pnpm.CMD       
Browsers:
    Edge: Chromium (126.0.2592.56)
    Internet Explorer: 11.0.19041.4355
npmPackages:
    @vanilla-extract/css: ^1.15.3 => 1.15.3 
    @vanilla-extract/vite-plugin: ^4.0.11 => 4.0.11 
    vite: ^5.2.0 => 5.3.1

Used Package Manager

yarn

Logs

I don't see any errors in the console

Validations

[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

ArrayKnight commented 3 months ago

Seeing the same issue when I created a similar setup in my theme styles for my Ladle stories

ArrayKnight commented 3 months ago

I've been looking into this, as someone completely new to this codebase, so take my findings with an enormous grain of salt.

Given the file structure that I'm working with in my project: .ladle theme button.css.ts (imports from ../src & exports static named object with properties that call style) index.ts (exports all styles from ./button.css.ts and other siblings) components.css.ts (imports from ./theme) components.tsx (imports from ./components.css.ts & ../src) src components (loads of components, styles, stories, etc) _ styles (global styles, etc)

Problem space (as described above): Editing .ladle/theme/button.css.ts doesn't update styles

My findings (many things will be obvious for those who know more than me):

components.css.ts serves as the main file entry point for components.tsx style rendering
All dependencies of components.css.ts are correctly associated as watch files https://github.com/vanilla-extract-css/vanilla-extract/blob/master/packages/integration/src/compiler.ts#L333
When a change to button.css.ts is saved, the compiler is told to process components.css.ts https://github.com/vanilla-extract-css/vanilla-extract/blob/master/packages/vite-plugin/src/index.ts#L209
When each dep is iterated through, it is evaluated for cssObjs, cachedCss & cachedClassRegistrations, which a dep may have one or more of. In my case, button.css.ts has all 3
Despite cssObjs seeming to be a trigger for re-transformCss-ing of the dep, this doesn't appear to be carrying through to the rendered component https://github.com/vanilla-extract-css/vanilla-extract/blob/master/packages/integration/src/compiler.ts#L350
It appears that css generation occurs as expected and reflects updates that were saved and triggered the initial cycle
If index.ts is skipped and components.css.ts imports button.css.ts directly there is no change in behavior
CSS imports created from deps are serialized https://github.com/vanilla-extract-css/vanilla-extract/blob/master/packages/integration/src/processVanillaFile.ts#L335
CSS imports and exports for components.css.ts seem to be as expected, showing all dep imports (index.ts is excluded and all deps of index.ts are present). All exports appear to be populated with expected values.

I didn't end up finding the answer yet. I'll probably look into it further tomorrow

ArrayKnight commented 3 months ago

Possible solution (tested that it does allow styles to update, untested for possible undesirable side effects): https://github.com/vanilla-extract-css/vanilla-extract/blob/master/packages/vite-plugin/src/index.ts#L217

// We have to invalidate the virtual module, not the real one we just transformed
// REPLACE:
// invalidateModule(fileIdToVirtualId(absoluteId));

// WITH:
Array.from(watchFiles).forEach((file) => {
  if (file.endsWith('.css.ts')) {
    invalidateModule(fileIdToVirtualId(file));
  }
});

vanilla-extract-css / vanilla-extract