Handle alternative compiled forms of array destructured createTheme (#1054)

Author: askoufis

.changeset/popular-kings-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/babel-plugin-debug-ids': patch
+---
+
+Handle alternative compiled forms of array destructured `createTheme`

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

@@ -413,7 +413,7 @@ describe('babel plugin', () => {
     `);
   });
 
-  it('should handle createTheme using destructuring when already compiled', () => {
+  it('should handle createTheme using destructuring when already compiled scenario 1', () => {
     const source = `
       import { createTheme } from '@vanilla-extract/css';
 
@@ -432,6 +432,42 @@ describe('babel plugin', () => {
     `);
   });
 
+  it('should handle createTheme using destructuring when already compiled scenario 2', () => {
+    const source = `
+      import { createTheme } from '@vanilla-extract/css';
+
+      var ref = _slicedToArray(createTheme({}), 2);
+      export var myThemeClass = ref[0],
+        vars = ref[1];
+    `;
+
+    expect(transform(source)).toMatchInlineSnapshot(`
+      import { createTheme } from '@vanilla-extract/css';
+      var ref = _slicedToArray(createTheme({}, "myThemeClass"), 2);
+      export var myThemeClass = ref[0],
+        vars = ref[1];
+    `);
+  });
+
+  it('should handle createTheme using destructuring when already compiled scenario 3', () => {
+    const source = `
+      import { createTheme } from '@vanilla-extract/css';
+
+      var ref = _slicedToArray(createTheme({}), 2),
+        myThemeClass = ref[0],
+        vars = ref[1];
+      export { myThemeClass, vars };
+    `;
+
+    expect(transform(source)).toMatchInlineSnapshot(`
+      import { createTheme } from '@vanilla-extract/css';
+      var ref = _slicedToArray(createTheme({}, "myThemeClass"), 2),
+        myThemeClass = ref[0],
+        vars = ref[1];
+      export { myThemeClass, vars };
+    `);
+  });
+
   it('should handle createGlobalTheme', () => {
     const source = `
       import { createGlobalTheme } from '@vanilla-extract/css';

packages/babel-plugin-debug-ids/src/index.ts

@@ -93,27 +93,72 @@ const getDebugId = (path: NodePath<t.CallExpression>) => {
     return;
   }
 
-  // Special case: Handle `export const [themeClass, vars] = createTheme({});`
-  // when it's already been compiled into this:
+  // Special case 1: Handle `export const [themeClass, vars] = createTheme({});`
+  // when it's already been compiled into one of the following forms:
   //
   // 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;
+  if (t.isVariableDeclaration(firstRelevantParentPath.parent)) {
+    if (firstRelevantParentPath.parent.declarations.length === 4) {
+      const [themeDeclarator, , classNameDeclarator] =
+        firstRelevantParentPath.parent.declarations;
+
+      if (
+        t.isCallExpression(themeDeclarator.init) &&
+        t.isIdentifier(themeDeclarator.init.callee, { name: 'createTheme' }) &&
+        t.isIdentifier(classNameDeclarator.id)
+      ) {
+        return classNameDeclarator.id.name;
+      }
+    }
+    // alternative compiled form:
+    //
+    // var ref = _slicedToArray(createTheme({}), 2);
+    // export var themeClass = ref[0],
+    //   vars = ref[1];
+    else if (firstRelevantParentPath.parent.declarations.length === 1) {
+      const [themeDeclarator] = firstRelevantParentPath.parent.declarations;
+      const nextSibling =
+        firstRelevantParentPath.parentPath?.getNextSibling().node;
+
+      if (
+        t.isCallExpression(themeDeclarator.init) &&
+        t.isCallExpression(themeDeclarator.init.arguments[0]) &&
+        t.isIdentifier(themeDeclarator.init.arguments[0].callee, {
+          name: 'createTheme',
+        }) &&
+        t.isExportNamedDeclaration(nextSibling) &&
+        t.isVariableDeclaration(nextSibling.declaration) &&
+        t.isVariableDeclarator(nextSibling.declaration.declarations[0]) &&
+        t.isIdentifier(nextSibling.declaration.declarations[0].id)
+      ) {
+        return nextSibling.declaration.declarations[0].id.name;
+      }
+    }
+    // Special case 2: Handle `const [themeClass, vars] = createTheme({});
+    //                        export { themeClass, vars };`
+    // when compiled into the following:
+    //
+    // var ref = _slicedToArray(createTheme({}), 2),
+    //   myThemeClass = ref[0],
+    //   vars = ref[1];
+    // export { themeClass, vars };
+    else if (firstRelevantParentPath.parent.declarations.length === 3) {
+      const [themeDeclarator, classNameDeclarator] =
+        firstRelevantParentPath.parent.declarations;
+
+      if (
+        t.isCallExpression(themeDeclarator.init) &&
+        t.isCallExpression(themeDeclarator.init.arguments[0]) &&
+        t.isIdentifier(themeDeclarator.init.arguments[0].callee, {
+          name: 'createTheme',
+        }) &&
+        t.isIdentifier(classNameDeclarator.id)
+      ) {
+        return classNameDeclarator.id.name;
+      }
     }
   }