fix: processVanillaFile fileScopes race

packages/integration/package.json

@@ -27,6 +27,7 @@
     "mlly": "^1.4.2"
   },
   "devDependencies": {
-    "@types/babel__core": "^7.20.5"
+    "@types/babel__core": "^7.20.5",
+    "@fixtures/sprinkles": "workspace:*"
   }
 }

packages/integration/src/processVanillaFile.test.ts

@@ -1,4 +1,7 @@
-import { serializeVanillaModule } from './processVanillaFile';
+import {
+  processVanillaFile,
+  serializeVanillaModule,
+} from './processVanillaFile';
 
 describe('serializeVanillaModule', () => {
   test('with plain object exports', () => {
@@ -233,3 +236,47 @@ describe('serializeVanillaModule', () => {
     `);
   });
 });
+
+describe('processVanillaFile', () => {
+  jest.useFakeTimers();
+  test('should process vanilla file with correct promise order', async () => {
+    const serializeVirtualCssPath1 = jest.fn(
+      ({ source }) =>
+        new Promise<string>((resolve) => {
+          setTimeout(() => resolve(source), 1);
+        }),
+    );
+    const serializeVirtualCssPath2 = jest.fn(({ source }) =>
+      Promise.resolve(source),
+    );
+
+    const [result] = await Promise.all([
+      processVanillaFile({
+        source: `
+        const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+        const { style, globalStyle } = require('@vanilla-extract/css'); 
+        __vanilla_filescope__.setFileScope("dependency.css.ts", "test");
+        exports.x = style({ color: 'blue' });
+        __vanilla_filescope__.endFileScope();
+        __vanilla_filescope__.setFileScope("style1.css.ts", "test");
+        exports.y = style([exports.x]);
+        globalStyle('body ' + exports.y, { color: 'red' });
+        __vanilla_filescope__.endFileScope();
+      `,
+        filePath: require.resolve('@fixtures/sprinkles'),
+        serializeVirtualCssPath: serializeVirtualCssPath1,
+      }),
+      processVanillaFile({
+        source: `
+        const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+        __vanilla_filescope__.setFileScope("style2.css.ts", "test");
+        __vanilla_filescope__.endFileScope();
+      `,
+        filePath: require.resolve('@fixtures/sprinkles'),
+        serializeVirtualCssPath: serializeVirtualCssPath2,
+      }),
+      jest.runAllTimersAsync(),
+    ]);
+    expect(result).toMatch(/.*export var y = .*style1.*/);
+  });
+});

packages/integration/src/processVanillaFile.ts

@@ -1,5 +1,6 @@
 import type { FileScope, Adapter } from '@vanilla-extract/css';
 import { transformCss } from '@vanilla-extract/css/transformCss';
+import { removeAdapter, setAdapter } from '@vanilla-extract/css/adapter';
 import evalCode from 'eval';
 import { stringify } from 'javascript-stringify';
 import dedent from 'dedent';
@@ -110,8 +111,13 @@ export async function processVanillaFile({
   process.env.NODE_ENV = originalNodeEnv;
 
   const adapterBoundSource = `
-    require('@vanilla-extract/css/adapter').setAdapter(__adapter__);
+    const { setAdapter, removeAdapter } = require('@vanilla-extract/css/adapter');
+    setAdapter(__adapter__);
     ${source}
+    // Backwards compat with older versions of @vanilla-extract/css
+    if (removeAdapter) {
+      removeAdapter();
+    }
   `;
 
   const evalResult = evalCode(
@@ -127,11 +133,13 @@ export async function processVanillaFile({
 
   for (const [serialisedFileScope, fileScopeCss] of cssByFileScope) {
     const fileScope = parseFileScope(serialisedFileScope);
+    setAdapter(cssAdapter);
     const css = transformCss({
       localClassNames: Array.from(localClassNames),
       composedClassLists,
       cssObjs: fileScopeCss,
     }).join('\n');
+    removeAdapter();
 
     const fileName = `${fileScope.filePath}.vanilla.css`;
 
@@ -158,20 +166,6 @@ export async function processVanillaFile({
     cssImports.push(virtualCssFilePath);
   }
 
-  // We run this code inside eval as jest seems to create a difrerent instance of the adapter file
-  // for requires executed within the eval and all CSS can be lost.
-  evalCode(
-    `const { removeAdapter } = require('@vanilla-extract/css/adapter');
-    // Backwards compat with older versions of @vanilla-extract/css
-    if (removeAdapter) {
-      removeAdapter();
-    }
-  `,
-    filePath,
-    { console, process },
-    true,
-  );
-
   const unusedCompositions = composedClassLists
     .filter(({ identifier }) => !usedCompositions.has(identifier))
     .map(({ identifier }) => identifier);