fix: processVanillaFile fileScopes race (#1585)

Co-authored-by: Adam Skoufis <[email protected]>

Author: sashank-gogula-glean

.changeset/silly-lights-bet.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/integration': patch
+---
+
+Fixed a race condition in `processVanillaFile` that could cause missing classnames during CSS serialization

packages/integration/src/processVanillaFile.test.ts

@@ -1,6 +1,9 @@
-import { describe, expect, test } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 import { addFunctionSerializer } from '../../css/src/functionSerializer';
-import { serializeVanillaModule } from './processVanillaFile';
+import {
+  processVanillaFile,
+  serializeVanillaModule,
+} from './processVanillaFile';
 
 describe('serializeVanillaModule', () => {
   test('with plain object exports', () => {
@@ -257,3 +260,60 @@ describe('serializeVanillaModule', () => {
     `);
   });
 });
+
+describe('processVanillaFile', () => {
+  test('should process vanilla file with correct promise order', async () => {
+    vi.useFakeTimers();
+
+    const serializeVirtualCssPath1 = vi.fn(
+      ({ source }) =>
+        new Promise<string>((resolve) => {
+          setTimeout(() => resolve(source), 1);
+        }),
+    );
+    const serializeVirtualCssPath2 = vi.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,
+      }),
+      vi.runAllTimersAsync(),
+    ]);
+
+    expect(result).toMatchInlineSnapshot(`
+      ".dependency__ma8c4x0 {
+        color: blue;
+      }
+      body .style1__emvcy10 {
+        color: red;
+      }
+      export var x = 'dependency__ma8c4x0';
+      export var y = 'style1__emvcy10 dependency__ma8c4x0';"
+    `);
+
+    vi.useRealTimers();
+  });
+});

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);