[🐞] Vanilla Extract broken starting with Qwik 1.6.0

[brandonpittman]

Which component is affected?

Qwik Runtime

Describe the bug

After upgrading from 1.5.7 to 1.6.0 (and persists in 1.7.0), Vanilla Extract breaks.

12:06:28 PM [vite] warning: Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src/routes/demo.css.ts.vanilla.js` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/troubleshooting/typed-linting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file
  Plugin: vite-plugin-qwik
  File: /Users/blp/Developer/styled-vanilla-extract-hot-reload/src/routes/demo.css.ts.vanilla.js:undefined:undefined
Sourcemap for "/Users/blp/Developer/styled-vanilla-extract-hot-reload/src/routes/demo.css.ts.vanilla.js" points to missing source files
12:06:28 PM [vite] Error when evaluating SSR module /src/routes/demo.css.ts.vanilla.js:
|- ReferenceError: document is not defined
    at Module.injectStyles (/Users/blp/Developer/styled-vanilla-extract-hot-reload/node_modules/.pnpm/@vanilla-extract+css@1.15.3/node_modules/@vanilla-extract/css/injectStyles/dist/vanilla-extract-css-injectStyles.cjs.dev.js:14:19)
    at inject (/Users/blp/Developer/styled-vanilla-extract-hot-reload/src/routes/demo.css.ts.vanilla.js:5:45)
    at eval (/Users/blp/Developer/styled-vanilla-extract-hot-reload/src/routes/demo.css.ts.vanilla.js:11:1)
    at async instantiateModule (file:///Users/blp/Developer/styled-vanilla-extract-hot-reload/node_modules/.pnpm/vite@5.3.3_@types+node@20.14.9/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53451:5)

Over in the styled-vanilla-extract repo, @wmertens thinks this is a Qwik problem, not a Vanilla Extract problem.

wmertens/styled-vanilla-extract#29

Reproduction

https://github.com/brandonpittman/styled-vanilla-extract-hot-reload

Steps to reproduce

No response

System Info

System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 523.88 MB / 16.00 GB
    Shell: 3.7.0 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.20.3 - ~/Library/pnpm/node
    Yarn: 1.22.19 - ~/Library/pnpm/yarn
    npm: 10.7.0 - ~/Library/pnpm/npm
    pnpm: 9.4.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.0
    Safari Technology Preview: 17.4
  npmPackages:
    @builder.io/qwik: ^1.6.0 => 1.7.0
    @builder.io/qwik-city: ^1.6.0 => 1.7.0
    typescript: 5.4.5 => 5.4.5
    undici: * => 6.19.2
    vite: ^5.2.10 => 5.3.3

### Additional Information

_No response_

[wmertens]

Somehow the client/server code splitting isn't as powerful as before.

[brandonpittman]

Guess it's 1.5.7 from here on out for anyone using Vanilla Extract?

[gioboa]

@brandonpittman can you try with the latest version 1.7.1 pls?

[brandonpittman]

@gioboa Same error on 1.7.1.

[wmertens]

@brandonpittman this happens only in dev mode right?

1.7.1 should have restored the server/client split like before :-/

Not sure what's going on and I can't look now.

Anyone that wants to help debug, we need to figure out what code is being generated for the SSR side, and why it's trying to inject css during SSR.

[wmertens]

I had a quick look and I think it's a styled-vanilla-extract issue after all. It should be fixed in the new 1.0 release

[brandonpittman]

The styled-vanilla-extract update fixed it. Sorry for all the fuss over in the Qwik repo.