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 new file mode 100644 index 00000000000000..c158b5f64ed171 --- /dev/null +++ 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": "Humberto.Morimoto@microsoft.com", + "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 new file mode 100644 index 00000000000000..862767da1e0699 --- /dev/null +++ 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; + +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 new file mode 100644 index 00000000000000..5d3148df814809 --- /dev/null +++ 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; + +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 index eadbd45b22a5c6..0f972fdb116950 100644 --- 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 } | { kind: 'LAZY_EXPRESSION_CALL'; nodePath: NodePath } + | { kind: 'LAZY_SEQUENCE_EXPRESSION'; nodePath: NodePath } | { kind: 'LAZY_MEMBER'; nodePath: NodePath } | { kind: 'LAZY_IDENTIFIER'; nodePath: NodePath } | { kind: 'SPREAD'; nodePath: NodePath; spreadPath: NodePath }; @@ -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, PluginObj