feat(make-styles): improve types

[layershifter]

Pull request checklist

• Addresses an existing issue: extracted from makeStyles: do not use shorthand expansion #20539, related to RFC: Do not allow CSS shorthands in makeStyles() calls #20573
• Include a change request file using $ yarn change

Description of changes

This PR:

• performs a refactor of types in @fluentui/make-styles
• exports for internal types to were removed
• exports base types in @fluentui/react-make-styles
• fixes imports in @fluentui/react-text & @fluentui/react-tabster
• shorthands will be banned in a separate PR

MakeStyles => MakeStylesStyle

Type was renamed as there no sense in previous name ¯_(ツ)_/¯

MakeStylesAnimation

New type to define animations.

MakeStylesStrictCSSObject

New type to have strict definitions for styles, will throw on any custom selector.

Re-exports in @fluentui/react-make-styles

Before we didn't re-export any types in this package i.e. they were not re-exported in @fluentui/react-make-styles. Now these types are available for customers.

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against ef4491a62061313d0aa1ad3f4eafd18745d536dc}

[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 38dec84:

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: ef4491a62061313d0aa1ad3f4eafd18745d536dc (build)

[fabricteam]

Perf Analysis (@fluentui/react)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
ContextualMenu	mount	16892	8661	1000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1024	1028	5000
BaseButton	mount	1051	1069	5000
Breadcrumb	mount	2842	2826	1000
ButtonNext	mount	642	642	5000
Checkbox	mount	1704	1651	5000
CheckboxBase	mount	1441	1443	5000
ChoiceGroup	mount	4954	5062	5000
ComboBox	mount	1121	1168	1000
CommandBar	mount	10484	10562	1000
ContextualMenu	mount	16892	8661	1000	Possible regression
DefaultButton	mount	1255	1338	5000
DetailsRow	mount	4045	4002	5000
DetailsRowFast	mount	3982	3903	5000
DetailsRowNoStyles	mount	3796	3753	5000
Dialog	mount	2763	2740	1000
DocumentCardTitle	mount	282	274	1000
Dropdown	mount	3369	3396	5000
FluentProviderNext	mount	4393	4291	5000
FluentProviderWithTheme	mount	353	361	10
FluentProviderWithTheme	virtual-rerender	225	219	10
FluentProviderWithTheme	virtual-rerender-with-unmount	394	384	10
FocusTrapZone	mount	1999	1974	5000
FocusZone	mount	2009	2073	5000
IconButton	mount	1939	1922	5000
Label	mount	488	465	5000
Layer	mount	3116	3169	5000
Link	mount	612	612	5000
MakeStyles	mount	1961	1976	50000
MenuButton	mount	1640	1651	5000
MessageBar	mount	2149	2130	5000
Nav	mount	3463	3509	1000
OverflowSet	mount	1273	1252	5000
Panel	mount	2661	2668	1000
Persona	mount	990	1003	1000
Pivot	mount	1568	1658	1000
PrimaryButton	mount	1431	1449	5000
Rating	mount	7856	7918	5000
SearchBox	mount	1504	1450	5000
Shimmer	mount	2708	2637	5000
Slider	mount	2087	2114	5000
SpinButton	mount	5271	5246	5000
Spinner	mount	549	575	5000
SplitButton	mount	3299	3370	5000
Stack	mount	618	663	5000
StackWithIntrinsicChildren	mount	1846	1833	5000
StackWithTextChildren	mount	4834	4815	5000
SwatchColorPicker	mount	10717	10719	5000
TagPicker	mount	2801	2842	5000
TeachingBubble	mount	13590	13509	5000
Text	mount	545	558	5000
TextField	mount	1518	1531	5000
ThemeProvider	mount	1326	1329	5000
ThemeProvider	virtual-rerender	721	754	5000
ThemeProvider	virtual-rerender-with-unmount	2030	2006	5000
Toggle	mount	959	965	5000
buttonNative	mount	252	258	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
RefMinimalPerf.default	275	244	1.13:1
AttachmentMinimalPerf.default	165	155	1.06:1
HeaderMinimalPerf.default	374	353	1.06:1
AccordionMinimalPerf.default	155	148	1.05:1
TableManyItemsPerf.default	1975	1878	1.05:1
TooltipMinimalPerf.default	1087	1032	1.05:1
AnimationMinimalPerf.default	423	408	1.04:1
CarouselMinimalPerf.default	482	463	1.04:1
ChatMinimalPerf.default	685	658	1.04:1
HeaderSlotsPerf.default	783	754	1.04:1
SegmentMinimalPerf.default	366	352	1.04:1
AvatarMinimalPerf.default	207	201	1.03:1
ButtonMinimalPerf.default	183	177	1.03:1
EmbedMinimalPerf.default	4277	4137	1.03:1
FlexMinimalPerf.default	307	299	1.03:1
InputMinimalPerf.default	1352	1312	1.03:1
LabelMinimalPerf.default	403	390	1.03:1
PortalMinimalPerf.default	184	179	1.03:1
ProviderMinimalPerf.default	1153	1119	1.03:1
SplitButtonMinimalPerf.default	4284	4170	1.03:1
AttachmentSlotsPerf.default	1110	1088	1.02:1
CardMinimalPerf.default	580	569	1.02:1
ChatDuplicateMessagesPerf.default	319	314	1.02:1
DividerMinimalPerf.default	362	356	1.02:1
ListCommonPerf.default	631	621	1.02:1
ListWith60ListItems.default	664	653	1.02:1
MenuMinimalPerf.default	885	868	1.02:1
TableMinimalPerf.default	415	407	1.02:1
ToolbarMinimalPerf.default	992	976	1.02:1
TreeMinimalPerf.default	821	802	1.02:1
ButtonSlotsPerf.default	556	550	1.01:1
DialogMinimalPerf.default	792	788	1.01:1
ImageMinimalPerf.default	367	363	1.01:1
ItemLayoutMinimalPerf.default	1229	1215	1.01:1
LoaderMinimalPerf.default	710	704	1.01:1
TextMinimalPerf.default	355	351	1.01:1
TextAreaMinimalPerf.default	508	502	1.01:1
VideoMinimalPerf.default	629	624	1.01:1
ChatWithPopoverPerf.default	369	369	1:1
CheckboxMinimalPerf.default	2701	2697	1:1
DropdownMinimalPerf.default	3067	3060	1:1
FormMinimalPerf.default	407	406	1:1
GridMinimalPerf.default	343	343	1:1
ListMinimalPerf.default	525	527	1:1
ProviderMergeThemesPerf.default	1752	1757	1:1
SliderMinimalPerf.default	1683	1675	1:1
CustomToolbarPrototype.default	4174	4162	1:1
ButtonOverridesMissPerf.default	1709	1718	0.99:1
RadioGroupMinimalPerf.default	449	452	0.99:1
StatusMinimalPerf.default	666	672	0.99:1
IconMinimalPerf.default	635	642	0.99:1
BoxMinimalPerf.default	373	380	0.98:1
ListNestedPerf.default	567	576	0.98:1
MenuButtonMinimalPerf.default	1660	1700	0.98:1
PopupMinimalPerf.default	595	608	0.98:1
ReactionMinimalPerf.default	377	385	0.98:1
DatepickerMinimalPerf.default	5409	5569	0.97:1
DropdownManyItemsPerf.default	673	695	0.97:1
AlertMinimalPerf.default	272	282	0.96:1
RosterPerf.default	1160	1209	0.96:1
SkeletonMinimalPerf.default	364	385	0.95:1
TreeWith60ListItems.default	178	189	0.94:1
LayoutMinimalPerf.default	371	401	0.93:1

[theerebuss]

Approving for react-text changes

[ling1726]

I wonder if it makes sense to do some namespacing like React so we end up with something like:

• MakeStyles.Style
• MakeStyles.StyleRule
• MakeStyles.Animation

[layershifter]

I wonder if it makes sense to do some namespacing like React so we end up with something like:

• MakeStyles.Style
• MakeStyles.StyleRule
• MakeStyles.Animation

Well namespacing is done by naming. React does not do this in reality as nothing stops you from:

import { ComponentType } from 'react'

If we will do the same with Animation we will not be able to have the component with this name:

import { Animation /* type */, Animation /* Component */ } from '@fluentui/react-components'