fix(makeStyles): correctly handle computed keys

change/@fluentui-babel-make-styles-e24db7df-1613-42dd-aa1a-a4ddb5b85b83.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: handle computed keys on objects",
+  "packageName": "@fluentui/babel-make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/babel-make-styles/__fixtures__/function-imported-keys/code.ts

@@ -0,0 +1,9 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { className, color, selector } from './consts';
+
+export const useStyles = makeStyles({
+  root: {
+    [selector]: () => ({ [color]: 'red' }),
+    [`& .${className}`]: () => ({ color: 'blue' }),
+  },
+});

packages/babel-make-styles/__fixtures__/function-imported-keys/consts.ts

@@ -0,0 +1,3 @@
+export const color = 'color';
+export const className = 'component-foo';
+export const selector = '& .component-bar';

packages/babel-make-styles/__fixtures__/function-imported-keys/output.ts

@@ -0,0 +1,13 @@
+import { __styles } from '@fluentui/react-make-styles';
+import { className, color, selector } from './consts';
+export const useStyles = __styles(
+  {
+    root: {
+      B0egftl: 'f1wgwx3x',
+      qhv8v2: 'fglt6ox',
+    },
+  },
+  {
+    d: ['.f1wgwx3x .component-bar{color:red;}', '.fglt6ox .component-foo{color:blue;}'],
+  },
+);

packages/babel-make-styles/__fixtures__/object-imported-keys/code.ts

@@ -0,0 +1,9 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { className, selector } from './consts';
+
+export const useStyles = makeStyles({
+  root: {
+    [selector]: { color: 'red' },
+    [`& .${className}`]: { color: 'blue' },
+  },
+});

packages/babel-make-styles/__fixtures__/object-imported-keys/consts.ts

@@ -0,0 +1,2 @@
+export const className = 'component-foo';
+export const selector = '& .component-bar';

packages/babel-make-styles/__fixtures__/object-imported-keys/output.ts

@@ -0,0 +1,13 @@
+import { __styles } from '@fluentui/react-make-styles';
+import { className, selector } from './consts';
+export const useStyles = __styles(
+  {
+    root: {
+      B0egftl: 'f1wgwx3x',
+      qhv8v2: 'fglt6ox',
+    },
+  },
+  {
+    d: ['.f1wgwx3x .component-bar{color:red;}', '.fglt6ox .component-foo{color:blue;}'],
+  },
+);

packages/babel-make-styles/src/plugin.ts

@@ -217,8 +217,20 @@ function processDefinitions(
           }
 
           if (propertyPath.isObjectProperty()) {
+            const keyPath = propertyPath.get('key');
             const valuePath = propertyPath.get('value');
 
+            /**
+             * Computed properties may require lazy evaluation.
+             *
+             * @example
+             *    makeStyles({ [var]: { color: 'red' } })
+             *    makeStyles({ [`${var}`]: { color: SOME_VARIABLE } })
+             */
+            if (propertyPath.node.computed) {
+              lazyPaths.push(keyPath);
+            }
+
             if (valuePath.isStringLiteral() || valuePath.isNullLiteral() || valuePath.isNumericLiteral()) {
               return;
             }
@@ -315,7 +327,7 @@ function processDefinitions(
                 return;
               }
 
-              // This condition resolves "theme.alias.color.green.foreground1" to CSS variable
+              // This condition resolves "theme.aliasColorGreenForeground1" to CSS variable
               if (valuePath.isMemberExpression()) {
                 const identifierPath = getMemberExpressionIdentifier(valuePath);
                 const paramsName = paramsPath?.node.name;