chore: replace @fluentui/make-styles with @griffel/core #21320

layershifter · 2022-01-18T08:52:00Z

PR Changes

This PR is extracted from #21318.

As we agreed to move out and rename makeStyles (#20882), it's time to do this ⏳ The migration will be done package by package, this PR replaces @fluentui/make-styles with @griffel/core, the next one (#21318) will delete @fluentui/make-styles at all.

The single difference in @griffel/core are renamed types: MakeStyles* => Griffel*.

Changes in bundle size

This happened because of bump rtl-css-js & stylis: new versions simply contain more code. Affects only runtime version.

Changes in N*

Typings changes are related to csstype bump
Changes in snapshot are related to stylis bump (Fix position:sticky; prefix for Safari browser thysultan/stylis#258)

change/@fluentui-babel-make-styles-ee9b3856-f3d4-4861-b40a-5d8804aed9a2.json

change/@fluentui-jest-serializer-make-styles-922bd6c1-bf07-40bf-9ee2-78f5c9e44260.json

change/@fluentui-react-make-styles-cdadc702-0cf1-4498-83d0-a686f679f21f.json

layershifter · 2022-01-18T08:54:42Z

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

@@ -1,4 +1,4 @@
-import { mergeClasses, makeStyles, createDOMRenderer } from '@fluentui/make-styles';
+import { mergeClasses, makeStyles, createDOMRenderer } from '@griffel/core';


This perf test should migrate sooner or later to Griffel repo itself.

layershifter · 2022-01-18T08:56:42Z

...eact-conformance-make-styles/src/matchers/toHaveMergeClassesCalledTimesWithClassName.test.ts

@@ -1,4 +1,4 @@
-import { mergeClasses } from '@fluentui/make-styles';
+import { mergeClasses } from '@fluentui/react-make-styles';


These tests should use imports from react-* package as this package have only in in dependencies

don't understand, why can't these tests depend on Griffel ?

oh I see you're wrapping Griffel with react-make-styles?

oh I see you're wrapping Griffel with react-make-styles?

Yes, as we have many packages I will replace them one by one.

don't understand, why can't these tests depend on Griffel ?

It's mistake that there was @fluentui/make-styles as it is not in dependencies:

fluentui/packages/react-conformance-make-styles/package.json

Line 30 in 8dfa712

"@fluentui/react-make-styles": "9.0.0-beta.4",

They should depend on @griffel/react, but it's not a thing yet.

codesandbox-ci · 2022-01-18T08:59:37Z

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 1581cb9:

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

fabricteam · 2022-01-18T09:04:57Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`54.698 kB` `17.5 kB`	`54.702 kB` `17.494 kB`	`4 B` `-6 B`
`react-avatar` Avatar	`43.854 kB` `12.49 kB`	`43.858 kB` `12.488 kB`	`4 B` `-2 B`
`react-badge` Badge	`24.254 kB` `7.131 kB`	`24.258 kB` `7.128 kB`	`4 B` `-3 B`
`react-badge` CounterBadge	`25.122 kB` `7.432 kB`	`25.126 kB` `7.429 kB`	`4 B` `-3 B`
`react-badge` PresenceBadge	`22.31 kB` `6.547 kB`	`22.314 kB` `6.544 kB`	`4 B` `-3 B`
`react-button` Button	`28.261 kB` `8.114 kB`	`28.265 kB` `8.113 kB`	`4 B` `-1 B`
`react-button` CompoundButton	`33.558 kB` `9.076 kB`	`33.562 kB` `9.074 kB`	`4 B` `-2 B`
`react-button` MenuButton	`29.916 kB` `8.69 kB`	`29.92 kB` `8.69 kB`	`4 B`
`react-button` SplitButton	`36.002 kB` `9.759 kB`	`36.006 kB` `9.757 kB`	`4 B` `-2 B`
`react-button` ToggleButton	`37.498 kB` `8.712 kB`	`37.502 kB` `8.711 kB`	`4 B` `-1 B`
`react-card` Card - All	`48.479 kB` `14.354 kB`	`48.483 kB` `14.351 kB`	`4 B` `-3 B`
`react-card` Card	`43.988 kB` `13.201 kB`	`43.992 kB` `13.198 kB`	`4 B` `-3 B`
`react-card` CardFooter	`7.682 kB` `3.254 kB`	`7.686 kB` `3.254 kB`	`4 B`
`react-card` CardHeader	`8.949 kB` `3.694 kB`	`8.953 kB` `3.693 kB`	`4 B` `-1 B`
`react-card` CardPreview	`7.875 kB` `3.382 kB`	`7.879 kB` `3.381 kB`	`4 B` `-1 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`165.59 kB` `46.802 kB`	`165.594 kB` `46.804 kB`	`4 B` `2 B`
`react-components` react-components: FluentProvider & webLightTheme	`32.293 kB` `10.594 kB`	`32.297 kB` `10.592 kB`	`4 B` `-2 B`
`react-divider` Divider	`15.067 kB` `5.444 kB`	`15.071 kB` `5.441 kB`	`4 B` `-3 B`
`react-image` Image	`10.139 kB` `3.97 kB`	`10.143 kB` `3.969 kB`	`4 B` `-1 B`
`react-input` Input	`21.637 kB` `7.151 kB`	`21.542 kB` `7.139 kB`	`-95 B` `-12 B`
`react-label` Label	`8.387 kB` `3.501 kB`	`8.391 kB` `3.5 kB`	`4 B` `-1 B`
`react-link` Link	`11.136 kB` `4.523 kB`	`11.14 kB` `4.521 kB`	`4 B` `-2 B`
`react-make-styles` makeStaticStyles (runtime)	`7.602 kB` `3.325 kB`	`8.161 kB` `3.564 kB`	`559 B` `239 B`
`react-make-styles` makeStyles + mergeClasses (runtime)	`18.743 kB` `7.137 kB`	`19.554 kB` `7.446 kB`	`811 B` `309 B`
`react-make-styles` makeStyles + mergeClasses (build time)	`2.789 kB` `1.269 kB`	`2.793 kB` `1.267 kB`	`4 B` `-2 B`
`react-menu` Menu (including children components)	`102.637 kB` `31.593 kB`	`102.641 kB` `31.589 kB`	`4 B` `-4 B`
`react-menu` Menu (including selectable components)	`104.888 kB` `31.945 kB`	`104.892 kB` `31.945 kB`	`4 B`
`react-popover` Popover	`95.463 kB` `29.042 kB`	`95.467 kB` `29.038 kB`	`4 B` `-4 B`
`react-provider` FluentProvider	`13.796 kB` `5.189 kB`	`13.8 kB` `5.19 kB`	`4 B` `1 B`
`react-slider` Slider	`22.007 kB` `7.522 kB`	`22.011 kB` `7.52 kB`	`4 B` `-2 B`
`react-switch` Switch	`25.379 kB` `8.205 kB`	`25.383 kB` `8.204 kB`	`4 B` `-1 B`
`react-text` Text - Default	`10.833 kB` `4.25 kB`	`10.837 kB` `4.248 kB`	`4 B` `-2 B`
`react-text` Text - Wrappers	`14.135 kB` `4.592 kB`	`14.139 kB` `4.589 kB`	`4 B` `-3 B`
`react-tooltip` Tooltip	`45.183 kB` `15.676 kB`	`45.187 kB` `15.675 kB`	`4 B` `-1 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-portal` Portal	`6.249 kB` `2.163 kB`
`react-positioning` usePopper	`22.808 kB` `7.935 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.344 kB` `6.55 kB`
`react-theme` Teams: Light theme	`18.4 kB` `5.273 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 8dfa712156b70414205b87b5b6d099367b0c297d}

…yershifter/office-ui-fabric-react into chore/replace-mk-with-griffel

DustyTheBot · 2022-01-18T09:22:22Z

	Warnings
⚠️	There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against 1581cb9

size-auditor · 2022-01-18T09:28:51Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-northstar-Provider	93.167 kB	93.402 kB	235 bytes

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: 8dfa712156b70414205b87b5b6d099367b0c297d (build)

fabricteam · 2022-01-18T09:50:25Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
ContextualMenu	mount	23033	7745	1000	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	165	194	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	810	777	5000
BaseButton	mount	843	824	5000
Breadcrumb	mount	2470	2439	1000
ButtonNext	mount	448	448	5000
Checkbox	mount	1326	1359	5000
CheckboxBase	mount	1129	1140	5000
ChoiceGroup	mount	4158	4134	5000
ComboBox	mount	873	850	1000
CommandBar	mount	9285	9284	1000
ContextualMenu	mount	23033	7745	1000	Possible regression
DefaultButton	mount	1055	1019	5000
DetailsRow	mount	3385	3309	5000
DetailsRowFast	mount	3339	3307	5000
DetailsRowNoStyles	mount	3251	3186	5000
Dialog	mount	2223	2276	1000
DocumentCardTitle	mount	178	169	1000
Dropdown	mount	2847	2773	5000
FluentProviderNext	mount	1710	1739	5000
FluentProviderWithTheme	mount	167	160	10
FluentProviderWithTheme	virtual-rerender	97	104	10
FluentProviderWithTheme	virtual-rerender-with-unmount	165	194	10	Possible regression
FocusTrapZone	mount	1585	1653	5000
FocusZone	mount	1633	1640	5000
IconButton	mount	1526	1565	5000
Label	mount	330	337	5000
Layer	mount	2515	2596	5000
Link	mount	421	447	5000
MakeStyles	mount	1499	1499	50000
MenuButton	mount	1338	1287	5000
MessageBar	mount	1791	1805	5000
Nav	mount	2928	2898	1000
OverflowSet	mount	989	999	5000
Panel	mount	2261	2159	1000
Persona	mount	732	782	1000
Pivot	mount	1292	1283	1000
PrimaryButton	mount	1169	1132	5000
Rating	mount	6633	6640	5000
SearchBox	mount	1194	1178	5000
Shimmer	mount	2211	2246	5000
Slider	mount	1765	1714	5000
SpinButton	mount	4372	4370	5000
Spinner	mount	389	396	5000
SplitButton	mount	2765	2770	5000
Stack	mount	470	479	5000
StackWithIntrinsicChildren	mount	2031	2049	5000
StackWithTextChildren	mount	4498	4517	5000
SwatchColorPicker	mount	10822	9869	5000
TagPicker	mount	2290	2346	5000
TeachingBubble	mount	11292	11245	5000
Text	mount	399	387	5000
TextField	mount	1212	1235	5000
ThemeProvider	mount	1233	1055	5000
ThemeProvider	virtual-rerender	540	546	5000
ThemeProvider	virtual-rerender-with-unmount	2870	1617	5000
Toggle	mount	717	706	5000
buttonNative	mount	137	141	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
DropdownMinimalPerf.default	4299	2682	1.6:1
DatepickerMinimalPerf.default	6731	5403	1.25:1
HeaderMinimalPerf.default	347	299	1.16:1
ListWith60ListItems.default	628	543	1.16:1
AvatarMinimalPerf.default	191	167	1.14:1
StatusMinimalPerf.default	602	564	1.07:1
TextMinimalPerf.default	315	298	1.06:1
VideoMinimalPerf.default	565	535	1.06:1
AccordionMinimalPerf.default	160	153	1.05:1
ChatWithPopoverPerf.default	349	332	1.05:1
ListNestedPerf.default	494	470	1.05:1
TreeWith60ListItems.default	167	159	1.05:1
AlertMinimalPerf.default	243	234	1.04:1
AttachmentSlotsPerf.default	950	911	1.04:1
DividerMinimalPerf.default	323	312	1.04:1
CardMinimalPerf.default	489	474	1.03:1
DropdownManyItemsPerf.default	595	578	1.03:1
FlexMinimalPerf.default	253	245	1.03:1
HeaderSlotsPerf.default	669	651	1.03:1
LoaderMinimalPerf.default	601	581	1.03:1
SegmentMinimalPerf.default	313	304	1.03:1
TreeMinimalPerf.default	703	681	1.03:1
AnimationMinimalPerf.default	478	469	1.02:1
BoxMinimalPerf.default	295	289	1.02:1
ButtonSlotsPerf.default	487	476	1.02:1
DialogMinimalPerf.default	659	644	1.02:1
GridMinimalPerf.default	298	292	1.02:1
ImageMinimalPerf.default	329	322	1.02:1
InputMinimalPerf.default	1107	1086	1.02:1
LabelMinimalPerf.default	336	331	1.02:1
RosterPerf.default	1032	1011	1.02:1
PopupMinimalPerf.default	541	531	1.02:1
ReactionMinimalPerf.default	320	315	1.02:1
SkeletonMinimalPerf.default	306	300	1.02:1
TextAreaMinimalPerf.default	437	427	1.02:1
CheckboxMinimalPerf.default	2313	2288	1.01:1
ListCommonPerf.default	557	553	1.01:1
MenuButtonMinimalPerf.default	1429	1413	1.01:1
RadioGroupMinimalPerf.default	398	395	1.01:1
SplitButtonMinimalPerf.default	3717	3667	1.01:1
TableManyItemsPerf.default	1630	1615	1.01:1
ToolbarMinimalPerf.default	820	808	1.01:1
ButtonOverridesMissPerf.default	1465	1466	1:1
CarouselMinimalPerf.default	411	413	1:1
ChatMinimalPerf.default	626	628	1:1
EmbedMinimalPerf.default	3550	3546	1:1
PortalMinimalPerf.default	152	152	1:1
ProviderMergeThemesPerf.default	1481	1477	1:1
RefMinimalPerf.default	206	205	1:1
SliderMinimalPerf.default	1414	1420	1:1
TooltipMinimalPerf.default	889	885	1:1
ProviderMinimalPerf.default	996	1005	0.99:1
TableMinimalPerf.default	346	351	0.99:1
CustomToolbarPrototype.default	3580	3613	0.99:1
ItemLayoutMinimalPerf.default	1005	1025	0.98:1
LayoutMinimalPerf.default	311	321	0.97:1
MenuMinimalPerf.default	733	762	0.96:1
IconMinimalPerf.default	520	547	0.95:1
FormMinimalPerf.default	334	358	0.93:1
ListMinimalPerf.default	456	494	0.92:1
AttachmentMinimalPerf.default	141	157	0.9:1
ButtonMinimalPerf.default	154	173	0.89:1
ChatDuplicateMessagesPerf.default	262	325	0.81:1

andrefcdias

LGTM. Any reason we're not using fixed versions anymore?

layershifter · 2022-01-18T13:57:22Z

LGTM. Any reason we're not using fixed versions anymore?

Good call, I will change this 👍

ling1726 · 2022-01-18T14:04:18Z

packages/fluentui/docs/src/examples/components/Popup/Visual/PopperExamplePositioning.tsx


-const boxStyles: React.CSSProperties = {
+const boxStyles: ICSSInJSStyle = {


why were changes to N* necssary ?

Changes in N*
Typings changes are related to csstype bump

Opened for a better solution.

msft-fluent-ui-bot assigned spmonahan Jan 18, 2022

chore: replace @fluentui/make-styles with @griffel/core

9e8dd22

layershifter force-pushed the chore/replace-mk-with-griffel branch from bab5899 to 9e8dd22 Compare January 18, 2022 08:53

layershifter commented Jan 18, 2022

View reviewed changes

change/@fluentui-babel-make-styles-ee9b3856-f3d4-4861-b40a-5d8804aed9a2.json Outdated Show resolved Hide resolved

layershifter commented Jan 18, 2022

View reviewed changes

change/@fluentui-jest-serializer-make-styles-922bd6c1-bf07-40bf-9ee2-78f5c9e44260.json Outdated Show resolved Hide resolved

layershifter commented Jan 18, 2022

View reviewed changes

change/@fluentui-react-make-styles-cdadc702-0cf1-4498-83d0-a686f679f21f.json Outdated Show resolved Hide resolved

Apply suggestions from code review

d3dbe8f

layershifter commented Jan 18, 2022

View reviewed changes

layershifter added 3 commits January 18, 2022 10:12

fix types in N*

b1d3290

fix snapshot

daa6cb6

Merge branch 'chore/replace-mk-with-griffel' of https://github.com/la…

d2b9747

…yershifter/office-ui-fabric-react into chore/replace-mk-with-griffel

bump griffel

7e23ff3

layershifter marked this pull request as ready for review January 18, 2022 11:09

layershifter requested review from jurokapsiar, ling1726, miroslavstastny, pompomon and a team as code owners January 18, 2022 11:09

varholak-peter requested a review from andrefcdias January 18, 2022 13:09

andrefcdias reviewed Jan 18, 2022

View reviewed changes

use fixed versions

5a4de4d

ling1726 reviewed Jan 18, 2022

View reviewed changes

fix lock file

1581cb9

andrefcdias approved these changes Jan 18, 2022

View reviewed changes

ling1726 approved these changes Jan 18, 2022

View reviewed changes

miroslavstastny approved these changes Jan 18, 2022

View reviewed changes

layershifter merged commit 1f50b14 into microsoft:master Jan 19, 2022

layershifter deleted the chore/replace-mk-with-griffel branch January 19, 2022 09:20

layershifter mentioned this pull request Jan 19, 2022

chore: remove @fluentui/make-styles #21318

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: replace @fluentui/make-styles with @griffel/core #21320

chore: replace @fluentui/make-styles with @griffel/core #21320

layershifter commented Jan 18, 2022 •

edited

Loading

layershifter Jan 18, 2022

layershifter Jan 18, 2022

ling1726 Jan 18, 2022

ling1726 Jan 18, 2022

layershifter Jan 18, 2022 •

edited

Loading

codesandbox-ci bot commented Jan 18, 2022 •

edited

Loading

fabricteam commented Jan 18, 2022 •

edited

Loading

DustyTheBot commented Jan 18, 2022 •

edited

Loading

size-auditor bot commented Jan 18, 2022 •

edited

Loading

fabricteam commented Jan 18, 2022 •

edited

Loading

andrefcdias left a comment

layershifter commented Jan 18, 2022

ling1726 Jan 18, 2022

layershifter Jan 18, 2022

		@@ -1,4 +1,4 @@
		import { mergeClasses, makeStyles, createDOMRenderer } from '@fluentui/make-styles';
		import { mergeClasses, makeStyles, createDOMRenderer } from '@griffel/core';

		@@ -1,4 +1,4 @@
		import { mergeClasses } from '@fluentui/make-styles';
		import { mergeClasses } from '@fluentui/react-make-styles';


		const boxStyles: React.CSSProperties = {
		const boxStyles: ICSSInJSStyle = {

chore: replace @fluentui/make-styles with @griffel/core #21320

chore: replace @fluentui/make-styles with @griffel/core #21320

Conversation

layershifter commented Jan 18, 2022 • edited Loading

PR Changes

Changes in bundle size

Changes in N*

layershifter Jan 18, 2022

Choose a reason for hiding this comment

layershifter Jan 18, 2022

Choose a reason for hiding this comment

ling1726 Jan 18, 2022

Choose a reason for hiding this comment

ling1726 Jan 18, 2022

Choose a reason for hiding this comment

layershifter Jan 18, 2022 • edited Loading

Choose a reason for hiding this comment

codesandbox-ci bot commented Jan 18, 2022 • edited Loading

fabricteam commented Jan 18, 2022 • edited Loading

📊 Bundle size report

DustyTheBot commented Jan 18, 2022 • edited Loading

size-auditor bot commented Jan 18, 2022 • edited Loading

Asset size changes

fabricteam commented Jan 18, 2022 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

andrefcdias left a comment

Choose a reason for hiding this comment

layershifter commented Jan 18, 2022

ling1726 Jan 18, 2022

Choose a reason for hiding this comment

layershifter Jan 18, 2022

Choose a reason for hiding this comment

layershifter commented Jan 18, 2022 •

edited

Loading

layershifter Jan 18, 2022 •

edited

Loading

codesandbox-ci bot commented Jan 18, 2022 •

edited

Loading

fabricteam commented Jan 18, 2022 •

edited

Loading

DustyTheBot commented Jan 18, 2022 •

edited

Loading

size-auditor bot commented Jan 18, 2022 •

edited

Loading

fabricteam commented Jan 18, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)