babel-make-styles: Correctly handling sequence expressions (#21010)

* babel-make-styles: Correctly handling sequence expressions. * Change files * Update packages/babel-make-styles/src/plugin.ts Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]>
microsoft · Dec 14, 2021 · 9498e23 · 9498e23
1 parent bd40a6e
commit 9498e23
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 1 deletion.
diff --git a/change/@fluentui-babel-make-styles-640822ac-aebd-493a-8831-79760610f65b.json b/change/@fluentui-babel-make-styles-640822ac-aebd-493a-8831-79760610f65b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "babel-make-styles: Correctly handling sequence expressions.",
+  "packageName": "@fluentui/babel-make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/babel-make-styles/__fixtures__/object-sequence-expr/code.ts b/packages/babel-make-styles/__fixtures__/object-sequence-expr/code.ts
@@ -0,0 +1,15 @@
+import { makeStyles, MakeStylesStyle } from '@fluentui/react-make-styles';
+
+const switchClassName = 'fui-Switch';
+let _a: Record<string, MakeStylesStyle>;
+
+export const useStyles = makeStyles({
+  root:
+    ((_a = {}),
+    (_a[':hover .' + switchClassName] = {
+      ':before': {
+        backgroundColor: 'red',
+      },
+    }),
+    _a),
+});
diff --git a/packages/babel-make-styles/__fixtures__/object-sequence-expr/output.ts b/packages/babel-make-styles/__fixtures__/object-sequence-expr/output.ts
@@ -0,0 +1,15 @@
+import { __styles, MakeStylesStyle } from '@fluentui/react-make-styles';
+const switchClassName = 'fui-Switch';
+
+let _a: Record<string, MakeStylesStyle>;
+
+export const useStyles = __styles(
+  {
+    root: {
+      ozcac4: 'f1cm6cy7',
+    },
+  },
+  {
+    h: ['.f1cm6cy7:hover .fui-Switch:before{background-color:red;}'],
+  },
+);
diff --git a/packages/babel-make-styles/src/plugin.ts b/packages/babel-make-styles/src/plugin.ts
@@ -19,6 +19,7 @@ type AstStyleNode =
     }
   | { kind: 'LAZY_FUNCTION'; nodePath: NodePath<t.ArrowFunctionExpression | t.FunctionExpression> }
   | { kind: 'LAZY_EXPRESSION_CALL'; nodePath: NodePath<t.CallExpression> }
+  | { kind: 'LAZY_SEQUENCE_EXPRESSION'; nodePath: NodePath<t.SequenceExpression> }
   | { kind: 'LAZY_MEMBER'; nodePath: NodePath<t.MemberExpression> }
   | { kind: 'LAZY_IDENTIFIER'; nodePath: NodePath<t.Identifier> }
   | { kind: 'SPREAD'; nodePath: NodePath<t.SpreadElement>; spreadPath: NodePath<t.SpreadElement> };
@@ -434,6 +435,20 @@ function processDefinitions(
         state.styleNodes?.push({ kind: 'LAZY_MEMBER', nodePath: stylesPath });
         return;
       }
+
+      /**
+       * A scenario when slots styles are represented by a sequence expression.
+       *
+       * @example
+       *    // ❌ lazy evaluation
+       *    makeStyles({ root: (_a: { color: 'red' }, _a.backgroundColor: 'blue', _a ) })
+       *    makeStyles({ root: (_a: { color: SOME_VARIABLE }, _a.backgroundColor: 'blue', _a) })
+       *    makeStyles({ root: (_a: { color: 'red' }, _a[`. ${some_className}`]: { color: 'blue' }, _a) })
+       */
+      if (stylesPath.isSequenceExpression()) {
+        state.styleNodes?.push({ kind: 'LAZY_SEQUENCE_EXPRESSION', nodePath: stylesPath });
+        return;
+      }
     }
 
     throw styleSlotPath.buildCodeFrameError(UNHANDLED_CASE_ERROR);
@@ -504,7 +519,8 @@ export const plugin = declare<Partial<BabelPluginOptions>, PluginObj<BabelPlugin
                 styleNode.kind === 'LAZY_IDENTIFIER' ||
                 styleNode.kind === 'LAZY_FUNCTION' ||
                 styleNode.kind === 'LAZY_MEMBER' ||
-                styleNode.kind === 'LAZY_EXPRESSION_CALL'
+                styleNode.kind === 'LAZY_EXPRESSION_CALL' ||
+                styleNode.kind === 'LAZY_SEQUENCE_EXPRESSION'
               ) {
                 return [...acc, styleNode.nodePath];
               }