babel-plugin: Handle nested call expressions/sequence expressions (#243)

Author: mattcompiles

.changeset/orange-turtles-leave.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/babel-plugin': patch
+---
+
+Correctly insert debugId within nested call expressions and sequence expressions

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

@@ -709,4 +709,64 @@ describe('babel plugin', () => {
       __vanilla_filescope__.endFileScope();"
     `);
   });
+
+  it('should handle nested call expressions', () => {
+    const source = `
+      import { style } from '@vanilla-extract/css';
+
+      const one = instrument(style({
+        zIndex: 1,
+      }));
+
+      const two = instrument(instrument(style({
+        zIndex: 2,
+      })));
+
+      const three = instrument(instrument(instrument(style({
+        zIndex: 3,
+      }))));
+    `;
+
+    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 { style } from '@vanilla-extract/css';
+      const one = instrument(style({
+        zIndex: 1
+      }, \\"one\\"));
+      const two = instrument(instrument(style({
+        zIndex: 2
+      }, \\"two\\")));
+      const three = instrument(instrument(instrument(style({
+        zIndex: 3
+      }, \\"three\\"))));
+
+      __vanilla_filescope__.endFileScope();"
+    `);
+  });
+
+  it('should handle instrumentation via sequence expresions', () => {
+    const source = `
+      import { style } from '@vanilla-extract/css';
+
+      const one = (something++, style({
+        zIndex: 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 { style } from '@vanilla-extract/css';
+      const one = (something++, style({
+        zIndex: 1
+      }, \\"one\\"));
+
+      __vanilla_filescope__.endFileScope();"
+    `);
+  });
 });

packages/babel-plugin/src/index.ts

@@ -72,19 +72,27 @@ const extractName = (node: t.Node) => {
 };
 
 const getDebugId = (path: NodePath<t.CallExpression>) => {
-  const { parent } = path;
+  const firstRelevantParentPath = path.findParent(
+    ({ node }) => !(t.isCallExpression(node) || t.isSequenceExpression(node)),
+  );
+
+  if (!firstRelevantParentPath) {
+    return;
+  }
+
+  const relevantParent = firstRelevantParentPath.node;
 
   if (
-    t.isObjectProperty(parent) ||
-    t.isReturnStatement(parent) ||
-    t.isArrowFunctionExpression(parent) ||
-    t.isArrayExpression(parent) ||
-    t.isSpreadElement(parent)
+    t.isObjectProperty(relevantParent) ||
+    t.isReturnStatement(relevantParent) ||
+    t.isArrowFunctionExpression(relevantParent) ||
+    t.isArrayExpression(relevantParent) ||
+    t.isSpreadElement(relevantParent)
   ) {
     const names: Array<string> = [];
 
-    path.findParent(({ node: parentNode }) => {
-      const name = extractName(parentNode);
+    path.findParent(({ node }) => {
+      const name = extractName(node);
       if (name) {
         names.unshift(name);
       }
@@ -94,7 +102,7 @@ const getDebugId = (path: NodePath<t.CallExpression>) => {
 
     return names.join('_');
   } else {
-    return extractName(parent);
+    return extractName(relevantParent);
   }
 };