Fix Rollup/Vite generated exports (#801)

Co-authored-by: mattcompiles <[email protected]>

Author: mrm007

.changeset/plenty-comics-compete.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/integration': patch
+---
+
+Omit [`Symbol.toStringTag`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) when serializing module exports.
+

package.json

@@ -51,6 +51,7 @@
     "ts-node": "^10.0.0",
     "typescript": "^4.5.0"
   },
+  "packageManager": "[email protected]",
   "pnpm": {
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]"

packages/integration/src/processVanillaFile.test.ts

@@ -0,0 +1,91 @@
+// @ts-expect-error
+import evalCode from 'eval';
+
+import { stringifyExports } from './processVanillaFile';
+
+describe('stringifyExports', () => {
+  test('with plain object exports', () => {
+    const recipeImports = new Set<string>();
+    const value = {
+      string: 'value',
+      boolean: true,
+      number: 42,
+      array: [420],
+      object: { hello: 'world' },
+    };
+
+    expect(stringifyExports(recipeImports, value, null)).toMatchInlineSnapshot(
+      `"{string:'value','boolean':true,number:42,array:[420],object:{hello:'world'}}"`,
+    );
+  });
+
+  // https://rollupjs.org/guide/en/#outputgeneratedcode -- see output.generatedCode.symbols
+  // https://github.com/vitejs/vite/pull/5018
+  // https://github.com/vitejs/vite/blob/757a92f1c7c4fa961ed963edd245df77382dfde6/packages/vite/src/node/build.ts#L466-L469
+  test('with exports generated by Rollup', () => {
+    const recipeImports = new Set<string>();
+    const value = Object.freeze(
+      Object.defineProperty(
+        {
+          __proto__: null,
+          some: 'export',
+        },
+        Symbol.toStringTag,
+        { value: 'Module' },
+      ),
+    );
+
+    expect(stringifyExports(recipeImports, value, null)).toMatchInlineSnapshot(
+      `"{some:'export'}"`,
+    );
+  });
+
+  test('with unusedCompositionRegex', () => {
+    const recipeImports = new Set<string>();
+    const value = {
+      compositionOnly:
+        'features_compositionOnly__1o6ek504 features_mergedStyle__1o6ek500 features_styleWithComposition__1o6ek501',
+      mergedStyle: 'features_mergedStyle__1o6ek500',
+      styleCompositionInSelector:
+        'features_styleCompositionInSelector__1o6ek507 features__1o6ek505 features__1o6ek506',
+      styleVariantsCompositionInSelector: {
+        variant:
+          'features_styleVariantsCompositionInSelector_variant__1o6ek50a features__1o6ek508 features__1o6ek509',
+      },
+      styleVariantsWithComposition: {
+        variant:
+          'features_styleVariantsWithComposition_variant__1o6ek502 features_mergedStyle__1o6ek500',
+      },
+      styleVariantsWithMappedComposition: {
+        variant:
+          'features_styleVariantsWithMappedComposition_variant__1o6ek503 features_mergedStyle__1o6ek500',
+      },
+      styleWithComposition:
+        'features_styleWithComposition__1o6ek501 features_mergedStyle__1o6ek500',
+    };
+
+    const exports = stringifyExports(
+      recipeImports,
+      value,
+      /(features_compositionOnly__1o6ek504|features_styleCompositionInSelector__1o6ek507|features_styleVariantsCompositionInSelector_variant__1o6ek50a)\s/g,
+    );
+    const exportsObject = evalCode(`module.exports = ${exports}`, 'dummy.js');
+    expect(exportsObject).toMatchInlineSnapshot(`
+      Object {
+        "compositionOnly": "features_mergedStyle__1o6ek500 features_styleWithComposition__1o6ek501",
+        "mergedStyle": "features_mergedStyle__1o6ek500",
+        "styleCompositionInSelector": "features__1o6ek505 features__1o6ek506",
+        "styleVariantsCompositionInSelector": Object {
+          "variant": "features__1o6ek508 features__1o6ek509",
+        },
+        "styleVariantsWithComposition": Object {
+          "variant": "features_styleVariantsWithComposition_variant__1o6ek502 features_mergedStyle__1o6ek500",
+        },
+        "styleVariantsWithMappedComposition": Object {
+          "variant": "features_styleVariantsWithMappedComposition_variant__1o6ek503 features_mergedStyle__1o6ek500",
+        },
+        "styleWithComposition": "features_styleWithComposition__1o6ek501 features_mergedStyle__1o6ek500",
+      }
+    `);
+  });
+});

packages/integration/src/processVanillaFile.ts

@@ -161,7 +161,7 @@ export async function processVanillaFile({
   return serializeVanillaModule(cssImports, evalResult, unusedCompositionRegex);
 }
 
-function stringifyExports(
+export function stringifyExports(
   recipeImports: Set<string>,
   value: any,
   unusedCompositionRegex: RegExp | null,
@@ -170,6 +170,7 @@ function stringifyExports(
     value,
     (value, _indent, next) => {
       const valueType = typeof value;
+
       if (
         valueType === 'boolean' ||
         valueType === 'number' ||
@@ -181,6 +182,11 @@ function stringifyExports(
         return next(value);
       }
 
+      if (Symbol.toStringTag in Object(value)) {
+        const { [Symbol.toStringTag]: _tag, ...valueWithoutTag } = value;
+        return next(valueWithoutTag);
+      }
+
       if (valueType === 'string') {
         return next(
           unusedCompositionRegex