diff --git a/change/@fluentui-babel-make-styles-304cf4db-da89-43a3-aef7-2b48ef359033.json b/change/@fluentui-babel-make-styles-304cf4db-da89-43a3-aef7-2b48ef359033.json new file mode 100644 index 00000000000000..4f2e4dc0df35e5 --- /dev/null +++ b/change/@fluentui-babel-make-styles-304cf4db-da89-43a3-aef7-2b48ef359033.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "refactor: remove unused theme-proxy functionality", + "packageName": "@fluentui/babel-make-styles", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-make-styles-e704fbd1-c6bd-4424-a822-9e97830fa365.json b/change/@fluentui-make-styles-e704fbd1-c6bd-4424-a822-9e97830fa365.json new file mode 100644 index 00000000000000..018b9dcdef3145 --- /dev/null +++ b/change/@fluentui-make-styles-e704fbd1-c6bd-4424-a822-9e97830fa365.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "refactor: remove unused theme-proxy functionality", + "packageName": "@fluentui/make-styles", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/babel-make-styles/src/utils/evaluatePathsInVM.test.ts b/packages/babel-make-styles/src/utils/evaluatePathsInVM.test.ts index ffe3fca9fd5a79..cba10532bdff30 100644 --- a/packages/babel-make-styles/src/utils/evaluatePathsInVM.test.ts +++ b/packages/babel-make-styles/src/utils/evaluatePathsInVM.test.ts @@ -7,10 +7,10 @@ describe('expressionTpl', () => { it('returns an expression based on a template', () => { const expression = Babel.types.identifier('foo'); - const result = expressionTpl({ expression, wrapName: 'wrap', themeVariableName: 'theme' }); + const result = expressionTpl({ expression, wrapName: 'wrap' }); const resultCode = generator(result).code; expect(Babel.types.isCallExpression(result)).toBe(true); - expect(resultCode).toMatchInlineSnapshot(`"wrap(() => typeof foo === 'function' ? foo(theme) : foo)"`); + expect(resultCode).toMatchInlineSnapshot(`"wrap(() => foo)"`); }); }); diff --git a/packages/babel-make-styles/src/utils/evaluatePathsInVM.ts b/packages/babel-make-styles/src/utils/evaluatePathsInVM.ts index b0ef48c1bc9442..ec88aefb12eb1b 100644 --- a/packages/babel-make-styles/src/utils/evaluatePathsInVM.ts +++ b/packages/babel-make-styles/src/utils/evaluatePathsInVM.ts @@ -2,7 +2,6 @@ import { NodePath, types as t } from '@babel/core'; import { Scope } from '@babel/traverse'; import * as template from '@babel/template'; import generator from '@babel/generator'; -import { resolveProxyValues } from '@fluentui/make-styles'; import { Module, StrictOptions } from '@linaria/babel-preset'; import type { BabelPluginOptions } from '../types'; @@ -55,58 +54,24 @@ const expressionWrapperTpl = template.statement(` }; `); -/** - * Functions, call & member expressions should be wrapped with IIFE to ensure that "theme" object will be passed - * without collisions. - * - * @example - * { - * label: foo(), // call expression - * header: typography.header, // could be an object or a function - * } - * - * Outputs following template: - * @example - * wrap(() => typeof foo === 'function' ? foo(theme) : foo) - */ -export const expressionTpl = template.expression( - `%%wrapName%%(() => typeof %%expression%% === 'function' ? %%expression%%(%%themeVariableName%%) : %%expression%%)`, -); +export const expressionTpl = template.expression(`%%wrapName%%(() => %%expression%%)`); const exportsPrevalTpl = template.statement(`exports.${EVAL_EXPORT_NAME} = %%expressions%%`); /** * Creates a new program that includes required imports and wrappers to return resolved values. */ -function addPreval( - path: NodePath, - themeVariableName: string, - lazyDeps: Array, -): t.Program { - // Constant __mkPreval with all dependencies +function addPreval(path: NodePath, lazyDeps: Array): t.Program { + // Constant for "__mkPreval" with all dependencies const wrapName = findFreeName(path.scope, '_wrap'); - const proxyImportName = path.scope.generateUid('createCSSVariablesProxy'); - const programNode = path.node; return t.program( - // Temporary solution to solve "theme" dependency [ - t.importDeclaration( - [t.importSpecifier(t.identifier(proxyImportName), t.identifier('createCSSVariablesProxy'))], - t.stringLiteral('@fluentui/make-styles'), - ), - - t.variableDeclaration('const', [ - t.variableDeclarator(t.identifier(themeVariableName), t.callExpression(t.identifier(proxyImportName), [])), - ]), - ...programNode.body, expressionWrapperTpl({ wrapName }), exportsPrevalTpl({ - expressions: t.arrayExpression( - lazyDeps.map(expression => expressionTpl({ expression, wrapName, themeVariableName })), - ), + expressions: t.arrayExpression(lazyDeps.map(expression => expressionTpl({ expression, wrapName }))), }), ], programNode.directives, @@ -124,8 +89,6 @@ export function evaluatePathsInVM( nodePaths: NodePath[], pluginOptions: Required, ): void { - const themeVariableName = program.scope.generateUid('theme'); - const pathsToEvaluate = nodePaths.map(nodePath => { // spreads ("...fooBar") can't be executed directly, so they are wrapped with an object ("{...fooBar}") if (nodePath.isSpreadElement()) { @@ -136,7 +99,7 @@ export function evaluatePathsInVM( }); // Linaria also performs hoisting of identifiers, we don't need this as all makeStyles() calls should be top level - const modifiedProgram = addPreval(program, themeVariableName, pathsToEvaluate); + const modifiedProgram = addPreval(program, pathsToEvaluate); const { code } = generator(modifiedProgram); const results = evaluate(code, filename, pluginOptions); @@ -144,15 +107,6 @@ export function evaluatePathsInVM( for (let i = 0; i < nodePaths.length; i++) { const nodePath = nodePaths[i]; - // 👇 we should resolve proxy values (they are defined as functions) before creating AST from an object with styles - const result = resolveProxyValues(results[i]); - - // 💡 spreads can't replace itself, we should replace it with with properties - if (nodePath.isSpreadElement()) { - nodePath.replaceWithMultiple((astify(result) as t.ObjectExpression).properties); - continue; - } - - nodePath.replaceWith(astify(result)); + nodePath.replaceWith(astify(results[i])); } } diff --git a/packages/make-styles/etc/make-styles.api.md b/packages/make-styles/etc/make-styles.api.md index e9ca1da1573555..3b2a86c6e09ca8 100644 --- a/packages/make-styles/etc/make-styles.api.md +++ b/packages/make-styles/etc/make-styles.api.md @@ -13,11 +13,6 @@ import type { OverflowProperty } from 'csstype'; // @internal export function __styles(classesMapBySlot: CSSClassesMapBySlot, cssRules: CSSRulesByBucket): (options: Pick) => Record; -// Warning: (ae-internal-missing-underscore) The name "createCSSVariablesProxy" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export function createCSSVariablesProxy(prefix?: string): unknown; - // @public export function createDOMRenderer(target?: Document | undefined, options?: CreateDOMRendererOptions): MakeStylesRenderer; @@ -129,11 +124,6 @@ export function mergeClasses(...classNames: (string | false | undefined)[]): str // @public export function rehydrateRendererCache(renderer: MakeStylesRenderer, target?: Document | undefined): void; -// Warning: (ae-internal-missing-underscore) The name "resolveProxyValues" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export function resolveProxyValues(value: T): T; - // Warning: (ae-internal-missing-underscore) The name "resolveStyleRules" should be prefixed with an underscore because the declaration is marked as @internal // // @internal diff --git a/packages/make-styles/src/index.ts b/packages/make-styles/src/index.ts index 1db1d0e72ecd46..4eb5266fbb9888 100644 --- a/packages/make-styles/src/index.ts +++ b/packages/make-styles/src/index.ts @@ -43,7 +43,6 @@ export { makeStyles } from './makeStyles'; export { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots'; // Private exports, are used by build time transforms -export { createCSSVariablesProxy, resolveProxyValues } from './runtime/createCSSVariablesProxy'; export { resolveStyleRules } from './runtime/resolveStyleRules'; export { __styles } from './__styles'; diff --git a/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts b/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts deleted file mode 100644 index b1ca94e94fbf93..00000000000000 --- a/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { createCSSVariablesProxy, isProxy, resolveProxyValues } from './createCSSVariablesProxy'; - -describe('createCSSVariablesProxy', () => { - it('should be able to identify as a proxy', () => { - const proxy = createCSSVariablesProxy() as object; - expect(isProxy(proxy)).toEqual(true); - }); - it('should allow recursive string creation', () => { - const proxy = createCSSVariablesProxy() as { to: { string: object } }; - expect(proxy.to.string.toString()).toStrictEqual('var(--to-string)'); - }); - it('should support prefixing', () => { - const proxy = createCSSVariablesProxy('prefix') as { to: { string: object } }; - expect(proxy.to.string.toString()).toStrictEqual('var(--prefix-to-string)'); - }); - it('should be able to resolve objects containing proxies as properties', () => { - const proxy = createCSSVariablesProxy() as { to: { string: object } }; - expect(Array.isArray(proxy)).toEqual(false); - const expanded = resolveProxyValues({ - paddingLeft: proxy.to.string, - animationName: { - from: { - transform: proxy.to.string, - }, - to: { - transform: proxy.to.string, - }, - }, - animationIterationCount: proxy.to.string, - animationDuration: proxy.to.string, - }); - expect(expanded).toEqual({ - paddingLeft: 'var(--to-string)', - animationName: { - from: { - transform: 'var(--to-string)', - }, - to: { - transform: 'var(--to-string)', - }, - }, - animationIterationCount: 'var(--to-string)', - animationDuration: 'var(--to-string)', - }); - }); -}); diff --git a/packages/make-styles/src/runtime/createCSSVariablesProxy.ts b/packages/make-styles/src/runtime/createCSSVariablesProxy.ts deleted file mode 100644 index db6e70d097c785..00000000000000 --- a/packages/make-styles/src/runtime/createCSSVariablesProxy.ts +++ /dev/null @@ -1,53 +0,0 @@ -const isProxySymbol = '__isProxy__' as const; - -/** - * @internal - */ -export function createCSSVariablesProxy(prefix?: string): unknown { - // Better to debug with classic function - function proxyToStr() { - return `var(--${prefix})`; - } - const proxy = new Proxy(proxyToStr, { - has(_, key) { - return key === isProxySymbol; - }, - get(target, key) { - if (key === 'toString' || key === Symbol.toPrimitive) { - return target; - } - - return createCSSVariablesProxy(prefix ? [prefix, key].join('-') : key.toString()); - }, - }); - return proxy; -} - -export function isProxy(object: unknown): object is Function { - return typeof object === 'function' && isProxySymbol in object; -} - -/** - * @internal - */ -export function resolveProxyValues(value: T): T { - if (isProxy(value)) { - return (value.toString() as unknown) as T; - } - if (Array.isArray(value)) { - return (value.map(resolveProxyValues) as unknown) as T; - } - if (value === null) { - return value; - } - if (typeof value === 'object') { - const expanded = {} as T; - // eslint-disable-next-line guard-for-in - for (const key in value) { - const internalValue = value[key]; - expanded[key] = resolveProxyValues(internalValue); - } - return expanded; - } - return value; -}