codemods: Replacing use of functions in makeStyles with direct use of tokens

[khmakoto]

Pull request checklist

• Addresses an existing issue: Implements part of RFC: no functions in makeStyles() #20651
• Include a change request file using $ yarn change

Description of changes

This PR is part of a series of PRs that split #20918 into smaller PRs.
This PR follows #21026.

This PR replaces the use of functions in makeStyles calls in the @fluentui/codemods package with direct use of the tokens exported from @fluentui/react-theme.

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-accordion Accordion (including children components)	55.684 kB 17.641 kB
react-avatar Avatar	46.459 kB 13.39 kB
react-badge Badge	23.702 kB 7.008 kB
react-badge CounterBadge	24.57 kB 7.308 kB
react-badge PresenceBadge	22.209 kB 6.524 kB
react-button Button	28.16 kB 8.088 kB
react-button CompoundButton	33.495 kB 9.06 kB
react-button MenuButton	30.243 kB 8.801 kB
react-button SplitButton	36.39 kB 9.873 kB
react-button ToggleButton	37.397 kB 8.682 kB
react-card Card - All	48.473 kB 14.375 kB
react-card Card	43.871 kB 13.166 kB
react-card CardFooter	7.587 kB 3.227 kB
react-card CardHeader	8.895 kB 3.675 kB
react-card CardPreview	7.778 kB 3.355 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	169.082 kB 47.656 kB
react-components react-components: FluentProvider & webLightTheme	32.184 kB 10.58 kB
react-divider Divider	14.924 kB 5.39 kB
react-image Image	10.035 kB 3.941 kB
react-input Input	19.38 kB 6.365 kB
react-label Label	8.294 kB 3.472 kB
react-link Link	11.028 kB 4.487 kB
react-make-styles makeStaticStyles (runtime)	7.602 kB 3.325 kB
react-make-styles makeStyles + mergeClasses (runtime)	22.006 kB 8.311 kB
react-make-styles makeStyles + mergeClasses (build time)	2.689 kB 1.23 kB
react-menu Menu (including children components)	103.621 kB 31.866 kB
react-menu Menu (including selectable components)	105.878 kB 32.212 kB
react-popover Popover	95.761 kB 29.129 kB
react-portal Portal	6.249 kB 2.163 kB
react-positioning usePopper	22.808 kB 7.935 kB
react-provider FluentProvider	13.687 kB 5.174 kB
react-slider RangedSlider	41.101 kB 11.737 kB
react-slider Slider	34.529 kB 10.573 kB
react-switch Switch	27.042 kB 8.561 kB
react-text Text - Default	10.716 kB 4.213 kB
react-text Text - Wrappers	14.018 kB 4.555 kB
react-theme Teams: all themes	29.344 kB 6.55 kB
react-theme Teams: Light theme	18.4 kB 5.273 kB
react-tooltip Tooltip	44.566 kB 15.426 kB

_{🤖 This report was generated against 28ceaaa83cd92a0389c466f0b15b283e3d9b08e4}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3e5cd17:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 28ceaaa83cd92a0389c466f0b15b283e3d9b08e4 (build)

[fabricteam]

Perf Analysis (@fluentui/react)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
ButtonNext	mount	474	438	5000	Possible regression
DocumentCardTitle	mount	160	168	1000	Possible regression
FluentProviderWithTheme	mount	145	158	10	Possible regression
FluentProviderWithTheme	virtual-rerender	106	108	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	162	161	10	Possible regression
Label	mount	324	287	5000	Possible regression
Link	mount	410	434	5000	Possible regression
Spinner	mount	394	353	5000	Possible regression
Stack	mount	454	453	5000	Possible regression
Text	mount	391	393	5000	Possible regression
buttonNative	mount	137	122	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	755	739	5000
BaseButton	mount	808	796	5000
Breadcrumb	mount	2048	2187	1000
ButtonNext	mount	474	438	5000	Possible regression
Checkbox	mount	1177	1334	5000
CheckboxBase	mount	1133	1032	5000
ChoiceGroup	mount	4168	4035	5000
ComboBox	mount	862	758	1000
CommandBar	mount	8266	8247	1000
ContextualMenu	mount	14345	14423	1000
DefaultButton	mount	905	936	5000
DetailsRow	mount	3095	3066	5000
DetailsRowFast	mount	3056	3147	5000
DetailsRowNoStyles	mount	3091	2948	5000
Dialog	mount	2142	2227	1000
DocumentCardTitle	mount	160	168	1000	Possible regression
Dropdown	mount	2621	2758	5000
FluentProviderNext	mount	1629	1497	5000
FluentProviderWithTheme	mount	145	158	10	Possible regression
FluentProviderWithTheme	virtual-rerender	106	108	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	162	161	10	Possible regression
FocusTrapZone	mount	1551	1513	5000
FocusZone	mount	1476	1500	5000
IconButton	mount	1396	1448	5000
Label	mount	324	287	5000	Possible regression
Layer	mount	2410	2464	5000
Link	mount	410	434	5000	Possible regression
MakeStyles	mount	1547	1549	50000
MenuButton	mount	1224	1200	5000
MessageBar	mount	1613	1698	5000
Nav	mount	2675	2853	1000
OverflowSet	mount	894	974	5000
Panel	mount	2018	2104	1000
Persona	mount	649	741	1000
Pivot	mount	1195	1241	1000
PrimaryButton	mount	1106	1059	5000
Rating	mount	6325	6379	5000
SearchBox	mount	1131	1126	5000
Shimmer	mount	1911	2115	5000
Slider	mount	1561	1686	5000
SpinButton	mount	4176	4250	5000
Spinner	mount	394	353	5000	Possible regression
SplitButton	mount	2468	2602	5000
Stack	mount	454	453	5000	Possible regression
StackWithIntrinsicChildren	mount	1474	1428	5000
StackWithTextChildren	mount	3506	3541	5000
SwatchColorPicker	mount	8477	8520	5000
TagPicker	mount	2131	2246	5000
TeachingBubble	mount	10734	10800	5000
Text	mount	391	393	5000	Possible regression
TextField	mount	1154	1139	5000
ThemeProvider	mount	955	1050	5000
ThemeProvider	virtual-rerender	482	546	5000
ThemeProvider	virtual-rerender-with-unmount	1549	1511	5000
Toggle	mount	721	646	5000
buttonNative	mount	137	122	5000	Possible regression

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AnimationMinimalPerf.default	365	324	1.13:1
AttachmentMinimalPerf.default	131	116	1.13:1
ListMinimalPerf.default	431	392	1.1:1
ChatWithPopoverPerf.default	309	284	1.09:1
ListNestedPerf.default	456	419	1.09:1
ChatMinimalPerf.default	636	595	1.07:1
AttachmentSlotsPerf.default	857	812	1.06:1
CarouselMinimalPerf.default	398	376	1.06:1
SkeletonMinimalPerf.default	306	290	1.06:1
CheckboxMinimalPerf.default	2112	2010	1.05:1
GridMinimalPerf.default	273	260	1.05:1
LayoutMinimalPerf.default	305	290	1.05:1
ListCommonPerf.default	539	515	1.05:1
IconMinimalPerf.default	509	483	1.05:1
ButtonMinimalPerf.default	149	143	1.04:1
ButtonOverridesMissPerf.default	1430	1373	1.04:1
PopupMinimalPerf.default	515	496	1.04:1
TextAreaMinimalPerf.default	437	419	1.04:1
HeaderMinimalPerf.default	309	301	1.03:1
HeaderSlotsPerf.default	637	617	1.03:1
ImageMinimalPerf.default	326	317	1.03:1
MenuMinimalPerf.default	724	704	1.03:1
CardMinimalPerf.default	479	469	1.02:1
DropdownMinimalPerf.default	2388	2335	1.02:1
LabelMinimalPerf.default	337	329	1.02:1
TreeWith60ListItems.default	139	136	1.02:1
DropdownManyItemsPerf.default	583	579	1.01:1
ListWith60ListItems.default	563	559	1.01:1
RadioGroupMinimalPerf.default	382	377	1.01:1
SplitButtonMinimalPerf.default	3503	3474	1.01:1
StatusMinimalPerf.default	541	534	1.01:1
TableMinimalPerf.default	304	300	1.01:1
BoxMinimalPerf.default	291	292	1:1
ProviderMergeThemesPerf.default	1444	1442	1:1
ReactionMinimalPerf.default	323	322	1:1
SegmentMinimalPerf.default	294	294	1:1
TextMinimalPerf.default	296	297	1:1
ToolbarMinimalPerf.default	793	795	1:1
DialogMinimalPerf.default	620	626	0.99:1
MenuButtonMinimalPerf.default	1342	1349	0.99:1
ProviderMinimalPerf.default	951	958	0.99:1
AvatarMinimalPerf.default	168	172	0.98:1
InputMinimalPerf.default	1079	1099	0.98:1
ItemLayoutMinimalPerf.default	975	991	0.98:1
PortalMinimalPerf.default	146	149	0.98:1
DatepickerMinimalPerf.default	4488	4639	0.97:1
DividerMinimalPerf.default	278	287	0.97:1
TableManyItemsPerf.default	1494	1547	0.97:1
CustomToolbarPrototype.default	3346	3455	0.97:1
TreeMinimalPerf.default	634	651	0.97:1
VideoMinimalPerf.default	495	513	0.96:1
ChatDuplicateMessagesPerf.default	242	258	0.94:1
RefMinimalPerf.default	185	200	0.93:1
AccordionMinimalPerf.default	122	132	0.92:1
EmbedMinimalPerf.default	3206	3496	0.92:1
RosterPerf.default	941	1025	0.92:1
FormMinimalPerf.default	317	348	0.91:1
SliderMinimalPerf.default	1282	1405	0.91:1
AlertMinimalPerf.default	205	228	0.9:1
FlexMinimalPerf.default	227	252	0.9:1
LoaderMinimalPerf.default	522	578	0.9:1
TooltipMinimalPerf.default	771	854	0.9:1
ButtonSlotsPerf.default	416	471	0.88:1

[layershifter]

Honestly, I would rather delete this codemod at all: all customers have already migrated, others could use a specific version of @fluentui/codemods instead.

WDYT?

[khmakoto]

@layershifter yeah, I was thinking the same thing yesterday, but I was on a race to split the PR so put it in a bucket for later. I'll close this and open a separate PR removing that codemod.