Handle pre-compiled createTheme destructuring in Babel plugin (#391)

Author: markdalgleish

.changeset/flat-colts-cheer.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/babel-plugin': patch
+---
+
+Handle array destructuring from `createTheme` when it's already been compiled

packages/babel-plugin/src/index.test.ts

@@ -411,6 +411,32 @@ describe('babel plugin', () => {
     `);
   });
 
+  it('should handle createTheme using destructuring when already compiled', () => {
+    const source = `
+      import { createTheme } from '@vanilla-extract/css';
+
+      var _createTheme = createTheme({}),
+        _createTheme2 = _slicedToArray(_createTheme, 2),
+        myThemeClass = _createTheme2[0],
+        vars = _createTheme2[1];
+    `;
+
+    expect(transform(source)).toMatchInlineSnapshot(`
+      "import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+      __vanilla_filescope__.setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
+
+      import { createTheme } from '@vanilla-extract/css';
+
+      var _createTheme = createTheme({}, \\"myThemeClass\\"),
+          _createTheme2 = _slicedToArray(_createTheme, 2),
+          myThemeClass = _createTheme2[0],
+          vars = _createTheme2[1];
+
+      __vanilla_filescope__.endFileScope();"
+    `);
+  });
+
   it('should handle createGlobalTheme', () => {
     const source = `
       import { createGlobalTheme } from '@vanilla-extract/css';

packages/babel-plugin/src/index.ts

@@ -87,6 +87,30 @@ const getDebugId = (path: NodePath<t.CallExpression>) => {
     return;
   }
 
+  // Special case: Handle `export const [themeClass, vars] = createTheme({});`
+  // when it's already been compiled into this:
+  //
+  // var _createTheme = createTheme({}),
+  //   _createTheme2 = _slicedToArray(_createTheme, 2),
+  //   themeClass = _createTheme2[0],
+  //   vars = _createTheme2[1];
+  if (
+    t.isVariableDeclaration(firstRelevantParentPath.parent) &&
+    firstRelevantParentPath.parent.declarations.length === 4
+  ) {
+    const [themeDeclarator, , classNameDeclarator] =
+      firstRelevantParentPath.parent.declarations;
+
+    if (
+      t.isCallExpression(themeDeclarator.init) &&
+      t.isIdentifier(themeDeclarator.init.callee, { name: 'createTheme' }) &&
+      t.isVariableDeclarator(classNameDeclarator) &&
+      t.isIdentifier(classNameDeclarator.id)
+    ) {
+      return classNameDeclarator.id.name;
+    }
+  }
+
   const relevantParent = firstRelevantParentPath.node;
 
   if (