Custom style hooks adds object with properties that can't be minified by Terser

[ling1726]

Currently custom style hooks adds ~3KB bundle size to each component that uses it, and will only increase with each added component

The bundle size increase comes from the single object in context that can't be minified

fluentui/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts

Lines 95 to 176 in 67a8ba8

	const noop = () => {};
	const customStyleHooksContextDefaultValue: CustomStyleHooksContextValue = {
	useAccordionHeaderStyles_unstable: noop,
	useAccordionItemStyles_unstable: noop,
	useAccordionPanelStyles_unstable: noop,
	useAccordionStyles_unstable: noop,
	useAvatarStyles_unstable: noop,
	useAvatarGroupStyles_unstable: noop,
	useAvatarGroupItemStyles_unstable: noop,
	useAvatarGroupPopoverStyles_unstable: noop,
	useBadgeStyles_unstable: noop,
	useCounterBadgeStyles_unstable: noop,
	usePresenceBadgeStyles_unstable: noop,
	useButtonStyles_unstable: noop,
	useCompoundButtonStyles_unstable: noop,
	useMenuButtonStyles_unstable: noop,
	useSplitButtonStyles_unstable: noop,
	useToggleButtonStyles_unstable: noop,
	useCheckboxStyles_unstable: noop,
	useComboboxStyles_unstable: noop,
	useDropdownStyles_unstable: noop,
	useListboxStyles_unstable: noop,
	useOptionStyles_unstable: noop,
	useOptionGroupStyles_unstable: noop,
	useDividerStyles_unstable: noop,
	useInputStyles_unstable: noop,
	useImageStyles_unstable: noop,
	useLabelStyles_unstable: noop,
	useLinkStyles_unstable: noop,
	useMenuDividerStyles_unstable: noop,
	useMenuGroupHeaderStyles_unstable: noop,
	useMenuGroupStyles_unstable: noop,
	useMenuItemCheckboxStyles_unstable: noop,
	useMenuItemRadioStyles_unstable: noop,
	useMenuItemStyles_unstable: noop,
	useMenuListStyles_unstable: noop,
	useMenuPopoverStyles_unstable: noop,
	useMenuSplitGroupStyles_unstable: noop,
	usePersonaStyles_unstable: noop,
	usePopoverSurfaceStyles_unstable: noop,
	useRadioGroupStyles_unstable: noop,
	useRadioStyles_unstable: noop,
	useSelectStyles_unstable: noop,
	useSliderStyles_unstable: noop,
	useSpinButtonStyles_unstable: noop,
	useSpinnerStyles_unstable: noop,
	useSwitchStyles_unstable: noop,
	useTabStyles_unstable: noop,
	useTabListStyles_unstable: noop,
	useTextStyles_unstable: noop,
	useTextareaStyles_unstable: noop,
	useTooltipStyles_unstable: noop,
	useDialogTitleStyles_unstable: noop,
	useDialogBodyStyles_unstable: noop,
	useDialogActionsStyles_unstable: noop,
	useDialogSurfaceStyles_unstable: noop,
	useDialogContentStyles_unstable: noop,
	useProgressBarStyles_unstable: noop,
	useToolbarButtonStyles_unstable: noop,
	useToolbarRadioButtonStyles_unstable: noop,
	useToolbarGroupStyles_unstable: noop,
	useToolbarToggleButtonStyles_unstable: noop,
	useToolbarDividerStyles_unstable: noop,
	useToolbarStyles_unstable: noop,
	useTableCellStyles_unstable: noop,
	useTableRowStyles_unstable: noop,
	useTableBodyStyles_unstable: noop,
	useTableStyles_unstable: noop,
	useTableHeaderStyles_unstable: noop,
	useTableHeaderCellStyles_unstable: noop,
	useTableResizeHandleStyles_unstable: noop,
	useTableSelectionCellStyles_unstable: noop,
	useTableCellActionsStyles_unstable: noop,
	useTableCellLayoutStyles_unstable: noop,
	useDataGridCellStyles_unstable: noop,
	useDataGridRowStyles_unstable: noop,
	useDataGridBodyStyles_unstable: noop,
	useDataGridStyles_unstable: noop,
	useDataGridHeaderStyles_unstable: noop,
	useDataGridHeaderCellStyles_unstable: noop,
	useDataGridSelectionCellStyles_unstable: noop,
	};

The PRs to introduce this feature to components will confirm the bundle size increase:

• feat: Adding calls to custom style hooks derived from context in react-tooltip components #27080 (comment)
• feat: Adding calls to custom style hooks derived from context in react-spinner components #27075 (comment)
• feat: Adding calls to custom style hooks derived from context in react-switch components #27076 (comment)
• feat: Adding calls to custom style hooks derived from context in react-tabs components #27077 (comment)

[ling1726]

We could potentially use a Proxy to mitigate this

[layershifter]

For example, #27081 (comment)

[layershifter]

Note, this happens because of this default value:

fluentui/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts

Lines 95 to 176 in 67a8ba8

	const noop = () => {};
	const customStyleHooksContextDefaultValue: CustomStyleHooksContextValue = {
	useAccordionHeaderStyles_unstable: noop,
	useAccordionItemStyles_unstable: noop,
	useAccordionPanelStyles_unstable: noop,
	useAccordionStyles_unstable: noop,
	useAvatarStyles_unstable: noop,
	useAvatarGroupStyles_unstable: noop,
	useAvatarGroupItemStyles_unstable: noop,
	useAvatarGroupPopoverStyles_unstable: noop,
	useBadgeStyles_unstable: noop,
	useCounterBadgeStyles_unstable: noop,
	usePresenceBadgeStyles_unstable: noop,
	useButtonStyles_unstable: noop,
	useCompoundButtonStyles_unstable: noop,
	useMenuButtonStyles_unstable: noop,
	useSplitButtonStyles_unstable: noop,
	useToggleButtonStyles_unstable: noop,
	useCheckboxStyles_unstable: noop,
	useComboboxStyles_unstable: noop,
	useDropdownStyles_unstable: noop,
	useListboxStyles_unstable: noop,
	useOptionStyles_unstable: noop,
	useOptionGroupStyles_unstable: noop,
	useDividerStyles_unstable: noop,
	useInputStyles_unstable: noop,
	useImageStyles_unstable: noop,
	useLabelStyles_unstable: noop,
	useLinkStyles_unstable: noop,
	useMenuDividerStyles_unstable: noop,
	useMenuGroupHeaderStyles_unstable: noop,
	useMenuGroupStyles_unstable: noop,
	useMenuItemCheckboxStyles_unstable: noop,
	useMenuItemRadioStyles_unstable: noop,
	useMenuItemStyles_unstable: noop,
	useMenuListStyles_unstable: noop,
	useMenuPopoverStyles_unstable: noop,
	useMenuSplitGroupStyles_unstable: noop,
	usePersonaStyles_unstable: noop,
	usePopoverSurfaceStyles_unstable: noop,
	useRadioGroupStyles_unstable: noop,
	useRadioStyles_unstable: noop,
	useSelectStyles_unstable: noop,
	useSliderStyles_unstable: noop,
	useSpinButtonStyles_unstable: noop,
	useSpinnerStyles_unstable: noop,
	useSwitchStyles_unstable: noop,
	useTabStyles_unstable: noop,
	useTabListStyles_unstable: noop,
	useTextStyles_unstable: noop,
	useTextareaStyles_unstable: noop,
	useTooltipStyles_unstable: noop,
	useDialogTitleStyles_unstable: noop,
	useDialogBodyStyles_unstable: noop,
	useDialogActionsStyles_unstable: noop,
	useDialogSurfaceStyles_unstable: noop,
	useDialogContentStyles_unstable: noop,
	useProgressBarStyles_unstable: noop,
	useToolbarButtonStyles_unstable: noop,
	useToolbarRadioButtonStyles_unstable: noop,
	useToolbarGroupStyles_unstable: noop,
	useToolbarToggleButtonStyles_unstable: noop,
	useToolbarDividerStyles_unstable: noop,
	useToolbarStyles_unstable: noop,
	useTableCellStyles_unstable: noop,
	useTableRowStyles_unstable: noop,
	useTableBodyStyles_unstable: noop,
	useTableStyles_unstable: noop,
	useTableHeaderStyles_unstable: noop,
	useTableHeaderCellStyles_unstable: noop,
	useTableResizeHandleStyles_unstable: noop,
	useTableSelectionCellStyles_unstable: noop,
	useTableCellActionsStyles_unstable: noop,
	useTableCellLayoutStyles_unstable: noop,
	useDataGridCellStyles_unstable: noop,
	useDataGridRowStyles_unstable: noop,
	useDataGridBodyStyles_unstable: noop,
	useDataGridStyles_unstable: noop,
	useDataGridHeaderStyles_unstable: noop,
	useDataGridHeaderCellStyles_unstable: noop,
	useDataGridSelectionCellStyles_unstable: noop,
	};

It does not provide a significant value for customers as it just returns a noop function. Usage of Proxies or some other patterns can decrease footprint caused by that hook.