Ошибка тестов vanilla-extract при импорте темы

[Nelfimov]

Описание бага

Текущий бандл запускает тесты через node:test.

В интеграционных и е2е тестах с помощью playwright, когда мы запускаем энтрипоинт, тесты не стартуют из-за ошибки импорта объекта темы.

Воспроизведение

1. https://github.com/rees46/web-app/tree/chore/vanilla-test-error-reproduction
2. yarn test integration menu-list

Ожидаемое поведение

Тесты прошли успешно, данные из темы импортировались и могут быть использованы в тестах.

Материалы

┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                                                                                             │
│  sidebar/fragments/sidebar/integration/menu-list.test.ts:0:0                                                │
│                                                                                                             │
│─────────────────────────────────────────────────────────────────────────────────────────────────────────────│
│                                                                                                             │
│  node:internal/modules/run_main:122                                                                         │
│      triggerUncaughtException(                                                                              │
│      ^                                                                                                      │
│  Error: Qualified path resolution failed: we looked for the following paths, but none could be accessed.    │
│  Source path: /Users/nikoroach/Documents/Dev/REES/rees-web-app/.yarn/__virtual__/@ui-theme-virtual-d24a17b  │
│  f43/1/ui/theme/src/global.css                                                                              │
│  Not found: /Users/nikoroach/Documents/Dev/REES/rees-web-app/.yarn/__virtual__/@ui-theme-virtual-d24a17bf4  │
│  3/1/ui/theme/src/global.css                                                                                │
│      at makeError (/Users/nikoroach/Documents/Dev/REES/rees-web-app/.pnp.cjs:22880:34)                      │
│      at resolveUnqualified (/Users/nikoroach/Documents/Dev/REES/rees-web-app/.pnp.cjs:24622:13)             │
│      at resolveRequest (/Users/nikoroach/Documents/Dev/REES/rees-web-app/.pnp.cjs:24662:14)                 │
│      at Object.resolveRequest (/Users/nikoroach/Documents/Dev/REES/rees-web-app/.pnp.cjs:24718:26)          │
│      at resolve$1 (file:///Users/nikoroach/Documents/Dev/REES/rees-web-app/.pnp.loader.mjs:2045:21)         │
│      at nextResolve (node:internal/modules/esm/hooks:748:28)                                                │
│      at resolve (file:///Users/nikoroach/Documents/Dev/REES/.yarn/berry/cache/@atls-code-runtime-npm-2.0.5  │
│  -985fea9e33-10.zip/node_modules/@atls/code-runtime/dist/ts-ext-register.js:23:16)                          │
│      at nextResolve (node:internal/modules/esm/hooks:748:28)                                                │
│      at Hooks.resolve (node:internal/modules/esm/hooks:240:30)                                              │
│      at handleMessage (node:internal/modules/esm/worker:199:24)                                             │
│  Node.js v22.11.0                                                                                           │
│                                                                                                             │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────┘

Данные окружения

• Node.js 22
• Nextjs 14

[Nelfimov]

Причина в этом импорте:

https://github.com/rees46/web-app/blob/13c328f45d414d4983dd2440e22ba211324b7549/ui/theme/src/theme.css.ts#L1

import './global.css'

import { createTheme }         from '@vanilla-extract/css'
import { createThemeContract } from '@vanilla-extract/css'

import { darkThemeTokens }     from './theme/index.js'
import { themeContract }       from './theme/index.js'
import { lightThemeTokens }    from './theme/index.js'

export const vars = createThemeContract(themeContract)

export const lightTheme = createTheme(vars, lightThemeTokens)

export const darkTheme = createTheme(vars, darkThemeTokens)

Из-за отсутствия расширения global.css ts-node не может резолвить этот импорт. Добавление расширения ломает парсинг vanilla extract:

┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                                                                                             │
│  sidebar/fragments/sidebar/integration/menu-list.test.ts:0:0                                                │
│                                                                                                             │
│─────────────────────────────────────────────────────────────────────────────────────────────────────────────│
│                                                                                                             │
│  /Users/nikoroach/Documents/Dev/REES/.yarn/berry/cache/@vanilla-extract-css-npm-1.15.2-d94352a08f-10.zip/n  │
│  ode_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.cjs.dev.js:35                │
│      throw new Error(dedent__default["default"](_templateObject || (_templateObject =                       │
│  taggedTemplateLiteral._taggedTemplateLiteral(["\n        Styles were unable to be assigned to a file.      │
│  This is generally caused by one of the following:\n\n        - You may have created styles outside of a    │
│  '.css.ts' context\n        - You may have incorrect configuration. See                                     │
│  https://vanilla-extract.style/documentation/getting-started\n      "]))));                                 │
│            ^                                                                                                │
│  Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:      │
│  - You may have created styles outside of a '.css.ts' context                                               │
│  - You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started    │
│      at Object.getFileScope                                                                                 │
│  (/Users/nikoroach/Documents/Dev/REES/.yarn/berry/cache/@vanilla-extract-css-npm-1.15.2-d94352a08f-10.zip/  │
│  node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.cjs.dev.js:35:11)           │
│      at globalStyle (/Users/nikoroach/Documents/Dev/REES/.yarn/berry/cache/@vanilla-extract-css-npm-1.15.2  │
│  -d94352a08f-10.zip/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:399:48)           │
│      at <anonymous> (/Users/nikoroach/Documents/Dev/REES/rees-web-app/.yarn/__virtual__/@ui-theme-virtual-  │
│  d24a17bf43/1/ui/theme/src/global.css.ts:3:1)                                                               │
│      at ModuleJob.run (node:internal/modules/esm/module_job:268:25)                                         │
│      at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:543:26)                     │
│      at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:116:5)                        │
│  Node.js v22.11.0                                                                                           │
│                                                                                                             │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────┘

Корректировка импорта на "двойной":

import './global.css'
import './global.css.js'

import { createTheme }         from '@vanilla-extract/css'
import { createThemeContract } from '@vanilla-extract/css'

import { darkThemeTokens }     from './theme/index.js'
import { themeContract }       from './theme/index.js'
import { lightThemeTokens }    from './theme/index.js'

export const vars = createThemeContract(themeContract)

export const lightTheme = createTheme(vars, lightThemeTokens)

export const darkTheme = createTheme(vars, darkThemeTokens)

Не работает.