Rename makeStyles to makeStyleCompat (microsoft#17354)

* Change makeStyle to makeStyleCompat

* Change files

* Fix change file typo

* Updates makeStyles file name to makeStylesCompat

apps/perf-test/src/scenarios/MakeStyles.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from 'react';
-import { ax, makeStyles, createDOMRenderer } from '@fluentui/make-styles';
+import { ax, makeStylesCompat, createDOMRenderer } from '@fluentui/make-styles';
 
 const renderer = createDOMRenderer();
 
@@ -66,7 +66,7 @@ const staticViewStyles: any = [
   ],
 ];
 
-const useStaticViewStyles = makeStyles(staticViewStyles);
+const useStaticViewStyles = makeStylesCompat(staticViewStyles);
 const View: React.FunctionComponent<{ className?: string }> = props => {
   const { className } = props;
   const classes = ax(useStaticViewStyles({}, { renderer, tokens: {} }), className);
@@ -121,7 +121,7 @@ const staticBoxStyles: any = [
   ],
 ];
 
-const useStaticBoxStyles = makeStyles(staticBoxStyles);
+const useStaticBoxStyles = makeStylesCompat(staticBoxStyles);
 
 const Box: React.FunctionComponent<{}> = () => {
   const classes = useStaticBoxStyles(

change/@fluentui-make-styles-c09cef4a-261d-43d0-8f3b-47c6314af62c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Change makeStyles to makeStylesCompat",
+  "packageName": "@fluentui/make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-avatar-35c98aac-4e47-4575-9943-d63b83ee6362.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Change makeStyles to makeStylesCompat",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-badge-9ba36a0a-afcd-4156-b17b-1617e6833f1c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Change makeStyles to makeStylesCompat",
+  "packageName": "@fluentui/react-badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-button-edb5b510-56d6-4d7d-84a2-817cc867612c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Change makeStyles to makeStylesCompat",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-cards-c8e65e95-5232-41bd-b4af-2b61bec64e9d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Change makeStyles to makeStylesCompat",
+  "packageName": "@fluentui/react-cards",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-examples-db18a9ba-b263-42e4-bd0c-00bdb616bb36.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Change makeStyles to makeStylesCompat",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-image-d9976fac-d40c-4a5c-852a-7513b396450c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Change makeStyles to makeStylesCompat",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-link-50b44864-5282-4c13-a8de-7df810f5a840.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Change makeStyles to makeStylesCompat",
+  "packageName": "@fluentui/react-link",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-make-styles-48a971b0-2868-4eda-9d37-ab394e4daac4.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Change makeStyles to makeStylesCompat",
+  "packageName": "@fluentui/react-make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-b5ef7202-7f4b-4d63-afcc-7dbc0f2be265.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Change makeStyles to makeStylesCompat",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-text-801ee301-6059-41b7-9d99-79587a36b13a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Change makeStyles to makeStylesCompat",
+  "packageName": "@fluentui/react-text",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/make-styles/src/ax.test.ts

@@ -1,5 +1,5 @@
 import { ax } from './ax';
-import { makeStyles } from './makeStyles';
+import { makeStylesCompat } from './makeStylesCompat';
 import { createDOMRenderer } from './renderer/createDOMRenderer';
 import { MakeStylesOptions } from './types';
 
@@ -20,25 +20,29 @@ describe('ax', () => {
   });
 
   it('performs deduplication for multiple arguments', () => {
-    const className1 = makeStyles([[null, { display: 'block' }]])({}, options);
-    const className2 = makeStyles([[null, { display: 'flex' }]])({}, options);
-    const className3 = makeStyles([[null, { display: 'grid' }]])({}, options);
-    const className4 = makeStyles([[null, { padding: '5px' }]])({}, options);
+    const className1 = makeStylesCompat([[null, { display: 'block' }]])({}, options);
+    const className2 = makeStylesCompat([[null, { display: 'flex' }]])({}, options);
+    const className3 = makeStylesCompat([[null, { display: 'grid' }]])({}, options);
+    const className4 = makeStylesCompat([[null, { padding: '5px' }]])({}, options);
 
-    const resultClassName = makeStyles([[null, { display: 'grid', padding: '5px' }]])({}, options);
+    const resultClassName = makeStylesCompat([[null, { display: 'grid', padding: '5px' }]])({}, options);
 
     expect(ax(className1, className2, className3, className4)).toBe(resultClassName);
   });
 
   it('order of classes is not important', () => {
-    const className = makeStyles([[null, { display: 'block' }]])({}, options);
+    const className = makeStylesCompat([[null, { display: 'block' }]])({}, options);
 
     expect(ax('ui-button', className, 'ui-button-content')).toBe(`ui-button ui-button-content ${className}`);
   });
 
   it('order of classes is not important for multilevel overrides', () => {
-    const className1 = ax('ui-button', makeStyles([[null, { display: 'block' }]])({}, options), 'ui-button-content');
-    const className2 = makeStyles([[null, { display: 'grid' }]])({}, options);
+    const className1 = ax(
+      'ui-button',
+      makeStylesCompat([[null, { display: 'block' }]])({}, options),
+      'ui-button-content',
+    );
+    const className2 = makeStylesCompat([[null, { display: 'grid' }]])({}, options);
 
     expect(ax(className1, className2)).toBe(`ui-button ui-button-content ${className2}`);
   });
@@ -53,14 +57,14 @@ describe('ax', () => {
   // });
 
   it('merges multi-level overrides properly', () => {
-    const className1 = makeStyles([[null, { display: 'block' }]])({}, options);
-    const className2 = makeStyles([[null, { display: 'flex' }]])({}, options);
+    const className1 = makeStylesCompat([[null, { display: 'block' }]])({}, options);
+    const className2 = makeStylesCompat([[null, { display: 'flex' }]])({}, options);
 
     const sequence1 = ax('ui-button', className1, className2);
 
-    const className3 = makeStyles([[null, { display: 'grid' }]])({}, options);
-    const className4 = makeStyles([[null, { padding: '5px' }]])({}, options);
-    const className5 = makeStyles([[null, { marginTop: '5px' }]])({}, options);
+    const className3 = makeStylesCompat([[null, { display: 'grid' }]])({}, options);
+    const className4 = makeStylesCompat([[null, { padding: '5px' }]])({}, options);
+    const className5 = makeStylesCompat([[null, { marginTop: '5px' }]])({}, options);
 
     const sequence2 = ax('ui-flex', className3, className4);
     const sequence3 = ax(sequence1, sequence2, className5);
@@ -74,8 +78,8 @@ describe('ax', () => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     const error = jest.spyOn(console, 'error').mockImplementationOnce(() => {});
 
-    const className1 = makeStyles([[null, { display: 'block' }]])({}, options);
-    const className2 = makeStyles([[null, { display: 'flex' }]])({}, options);
+    const className1 = makeStylesCompat([[null, { display: 'block' }]])({}, options);
+    const className2 = makeStylesCompat([[null, { display: 'flex' }]])({}, options);
 
     ax(className1 + ' ' + className2);
 
@@ -87,8 +91,8 @@ describe('ax', () => {
   describe('unstable functionality', () => {
     it('deduplicates classes with mixed priority', () => {
       // Classnames with numeric suffix has increased specificity
-      const className1 = makeStyles([[null, { display: 'grid' }]])({}, options);
-      const className2 = makeStyles([[null, { display: 'flex' }]], 1)({}, options);
+      const className1 = makeStylesCompat([[null, { display: 'grid' }]])({}, options);
+      const className2 = makeStylesCompat([[null, { display: 'flex' }]], 1)({}, options);
 
       expect(ax(className1, className2)).toBe(className2);
     });

packages/make-styles/src/index.ts

@@ -1,7 +1,7 @@
 export { createDOMRenderer } from './renderer/createDOMRenderer';
 
 export { ax } from './ax';
-export { makeStyles } from './makeStyles';
+export { makeStylesCompat } from './makeStylesCompat';
 export { makeStaticStyles } from './makeStaticStyles';
 
 export * from './types';

packages/make-styles/src/makeStaticStyles.test.ts

@@ -2,7 +2,7 @@ import { getCSSRules } from '@fluentui/test-utilities';
 import { createDOMRenderer, MakeStylesDOMRenderer, resetDOMRenderer } from './renderer/createDOMRenderer';
 import { makeStaticStyles } from './makeStaticStyles';
 import { cssRulesSerializer, makeStylesRulesSerializer } from './utils/test/snapshotSerializer';
-import { makeStyles } from './makeStyles';
+import { makeStylesCompat } from './makeStylesCompat';
 
 expect.addSnapshotSerializer(cssRulesSerializer);
 expect.addSnapshotSerializer(makeStylesRulesSerializer);
@@ -121,7 +121,7 @@ describe('makeStaticStyles', () => {
       },
     });
 
-    const useStyles = makeStyles([
+    const useStyles = makeStylesCompat([
       [
         null,
         {

packages/make-styles/src/makeStyles.test.ts → packages/make-styles/src/makeStylesCompat.test.ts

@@ -1,6 +1,6 @@
 import { getCSSRules } from '@fluentui/test-utilities';
 import { createDOMRenderer, MakeStylesDOMRenderer, resetDOMRenderer } from './renderer/createDOMRenderer';
-import { makeStyles } from './makeStyles';
+import { makeStylesCompat } from './makeStylesCompat';
 import { cssRulesSerializer } from './utils/test/snapshotSerializer';
 
 /* eslint-disable @fluentui/max-len */
@@ -18,7 +18,7 @@ describe('makeStyles', () => {
   });
 
   it('returns a single classname for a single style', () => {
-    const computeClasses = makeStyles([[null, { color: 'red' }]]);
+    const computeClasses = makeStylesCompat([[null, { color: 'red' }]]);
     expect(computeClasses({}, { renderer, tokens: {} })).toBe('__ncdyee0 fe3e8s90');
 
     expect(getCSSRules(renderer.styleElement)).toMatchInlineSnapshot(`
@@ -29,7 +29,7 @@ describe('makeStyles', () => {
   });
 
   it('returns multiple classnames for complex rules', () => {
-    const computeClasses = makeStyles([[null, { color: 'red', position: 'absolute' }]]);
+    const computeClasses = makeStylesCompat([[null, { color: 'red', position: 'absolute' }]]);
     expect(computeClasses({}, { renderer, tokens: {} })).toBe('__1fslksb fe3e8s90 f1euv43f');
 
     expect(getCSSRules(renderer.styleElement)).toMatchInlineSnapshot(`
@@ -43,7 +43,7 @@ describe('makeStyles', () => {
   });
 
   it('handles RTL for keyframes', () => {
-    const computeClasses = makeStyles([
+    const computeClasses = makeStylesCompat([
       [
         null,
         {

packages/make-styles/src/makeStyles.ts → packages/make-styles/src/makeStylesCompat.ts

@@ -8,7 +8,7 @@ import {
   MakeStylesResolvedDefinition,
 } from './types';
 
-export function makeStyles<Selectors, Tokens>(
+export function makeStylesCompat<Selectors, Tokens>(
   definitions: MakeStylesDefinition<Selectors, Tokens>[],
   unstable_cssPriority: number = 0,
 ) {

packages/react-avatar/src/components/Avatar/DefaultAvatarIcon.tsx

@@ -1,8 +1,8 @@
-import { ax, makeStyles } from '@fluentui/react-make-styles';
+import { ax, makeStylesCompat } from '@fluentui/react-make-styles';
 import { getNativeProps, htmlElementProperties } from '@fluentui/react-utilities';
 import * as React from 'react';
 
-const useRootStyles = makeStyles([
+const useRootStyles = makeStylesCompat([
   [
     null,
     {
@@ -15,7 +15,7 @@ const useRootStyles = makeStyles([
   ],
 ]);
 
-const useSvgStyles = makeStyles([
+const useSvgStyles = makeStylesCompat([
   [
     null,
     {

packages/react-avatar/src/components/Avatar/useAvatarStyles.ts

@@ -1,4 +1,4 @@
-import { ax, makeStyles } from '@fluentui/react-make-styles';
+import { ax, makeStylesCompat } from '@fluentui/react-make-styles';
 import { GlobalSharedColors, Theme } from '@fluentui/react-theme';
 import { AvatarState } from './Avatar.types';
 
@@ -77,7 +77,7 @@ const avatarColor = (theme: Theme, name: keyof GlobalSharedColors) => ({
   background: theme.alias.color[name].background2,
 });
 
-const useStyles = makeStyles<AvatarState>([
+const useStyles = makeStylesCompat<AvatarState>([
   [
     null,
     theme => ({
@@ -239,7 +239,7 @@ const useStyles = makeStyles<AvatarState>([
   ],
 ]);
 
-const useBadgeStyles = makeStyles<AvatarState>([
+const useBadgeStyles = makeStylesCompat<AvatarState>([
   [
     null,
     {
@@ -265,7 +265,7 @@ const useBadgeStyles = makeStyles<AvatarState>([
   [s => s.size >= 128, { '--badge-size': '32px' }],
 ]);
 
-const useImageStyles = makeStyles<AvatarState>([
+const useImageStyles = makeStylesCompat<AvatarState>([
   [
     null,
     {
@@ -282,7 +282,7 @@ const useImageStyles = makeStyles<AvatarState>([
   ],
 ]);
 
-const useLabelStyles = makeStyles<AvatarState>([
+const useLabelStyles = makeStylesCompat<AvatarState>([
   [
     null,
     theme => ({

packages/react-avatar/src/components/Badge/useBadgeStyles.ts

@@ -1,7 +1,7 @@
-import { ax, makeStyles } from '@fluentui/react-make-styles';
+import { ax, makeStylesCompat } from '@fluentui/react-make-styles';
 import { BadgeState } from './Badge.types';
 
-const useRootStyles = makeStyles<BadgeState>([
+const useRootStyles = makeStylesCompat<BadgeState>([
   [
     null,
     {
@@ -121,7 +121,7 @@ const useRootStyles = makeStyles<BadgeState>([
   ],
 ]);
 
-const useIconStyles = makeStyles([
+const useIconStyles = makeStylesCompat([
   [
     null,
     {

packages/react-badge/src/components/Badge/useBadgeStyles.ts

@@ -1,10 +1,10 @@
-import { makeStyles, ax } from '@fluentui/react-make-styles';
+import { makeStylesCompat, ax } from '@fluentui/react-make-styles';
 import { BadgeState } from './Badge.types';
 
 /**
  * Styles for the root slot
  */
-export const useRootStyles = makeStyles<BadgeState>([
+export const useRootStyles = makeStylesCompat<BadgeState>([
   [
     null,
     theme => ({
@@ -117,7 +117,7 @@ export const useRootStyles = makeStyles<BadgeState>([
 /**
  * Styles for the icon slot
  */
-export const useIconStyles = makeStyles<BadgeState>([
+export const useIconStyles = makeStylesCompat<BadgeState>([
   [
     s => !s.children,
     () => ({