Fix walkObject to work with module namespace objects (#1368)

Author: askoufis

.changeset/chilly-hairs-serve.md

@@ -0,0 +1,19 @@
+---
+'@vanilla-extract/private': patch
+---
+
+**walkObject**: Use an empty object to initialize a clone instead of calling the input object's `constructor`
+
+This allows `walkObject` to be used on module namespace objects:
+
+```ts
+import * as ns from './foo';
+
+// Runtime error in `vite-node`
+walkObject(ns, myMappingFunction);
+```
+
+The previous implementation did not work with these objects because [they do not have a `constructor` function][es6 spec].
+`esbuild` seems to have papered over this issue by providing a `constructor` function on these objects, but this seems to not be the case with `vite-node`, hence the need for this fix.
+
+[es6 spec]: https://262.ecma-international.org/6.0/#sec-module-namespace-objects

.changeset/rare-days-suffer.md

@@ -0,0 +1,10 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+Update `@vanilla-extract/css` dependency
+
+This fixes a bug where APIs that used the `walkObject` utility (e.g. `createTheme`) would fail when used with module namespace objects inside `vite-node`.
+This was due to the previous implementation using the input object's `constructor` to initialize a clone, which does not work with module namespace objects because [they do not have a `constructor` function][es6 spec].
+
+[es6 spec]: https://262.ecma-international.org/6.0/#sec-module-namespace-objects

.changeset/warm-bulldogs-sin.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Update `@vanilla-extract/private` dependency

packages/private/src/walkObject.ts

@@ -11,7 +11,7 @@ export function walkObject<T extends Walkable, MapTo>(
   fn: (value: Primitive, path: Array<string>) => MapTo,
   path: Array<string> = [],
 ): MapLeafNodes<T, MapTo> {
-  const clone = obj.constructor();
+  const clone = {} as any;
 
   for (let key in obj) {
     const value = obj[key];

pnpm-lock.yaml

@@ -12,6 +12,7 @@
     "@vanilla-extract/css": "*",
     "@vanilla-extract/dynamic": "*",
     "@vanilla-extract/integration": "*",
+    "@vanilla-extract/private": "*",
     "@vanilla-extract/recipes": "*",
     "@vanilla-extract/sprinkles": "*",
     "vite-tsconfig-paths": "^4.3.1"

tests/package.json

@@ -0,0 +1 @@
+export const space = { small: '8px', large: '16px' };

tests/walkObject/tokens.ts

@@ -0,0 +1,44 @@
+import { describe, test, expect } from 'vitest';
+import { walkObject } from '@vanilla-extract/private';
+import * as tokens from './tokens';
+
+describe('walkObject', () => {
+  test('walkObject', () => {
+    const obj = {
+      a: {
+        b: {
+          c: 1,
+        },
+        d: 2,
+      },
+      e: 3,
+    };
+
+    const result = walkObject(obj, (value) => String(value));
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "a": {
+          "b": {
+            "c": "1",
+          },
+          "d": "2",
+        },
+        "e": "3",
+      }
+    `);
+  });
+
+  test('walkObject module namespace object', () => {
+    const result = walkObject(tokens, (value) => `foo${value}`);
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "space": {
+          "large": "foo16px",
+          "small": "foo8px",
+        },
+      }
+    `);
+  });
+});