Skip to content

chore: migrate babel-make-styles to new DX#18758

Merged
layershifter merged 6 commits intomasterfrom
chore/bms-dx
Jun 30, 2021
Merged

chore: migrate babel-make-styles to new DX#18758
layershifter merged 6 commits intomasterfrom
chore/bms-dx

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Jun 29, 2021

Pull request checklist

Description of changes

Migrates @fluentui/babel-make-styles to new DX.

Changes that were made:

@size-auditor
Copy link

size-auditor bot commented Jun 29, 2021

Asset size changes

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

Baseline commit: c5019f09e666bac820addb36facaf0c133c0f7bc (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 29, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 800 822 5000
BaseButton mount 944 918 5000
Breadcrumb mount 2693 2709 1000
ButtonNext mount 529 539 5000
Checkbox mount 1493 1504 5000
CheckboxBase mount 1286 1292 5000
ChoiceGroup mount 4697 4699 5000
ComboBox mount 966 961 1000
CommandBar mount 10208 10305 1000
ContextualMenu mount 6344 6369 1000
DefaultButton mount 1151 1126 5000
DetailsRow mount 3776 3827 5000
DetailsRowFast mount 3694 3839 5000
DetailsRowNoStyles mount 3495 3567 5000
Dialog mount 2142 2192 1000
DocumentCardTitle mount 150 143 1000
Dropdown mount 3216 3266 5000
FocusTrapZone mount 1839 1820 5000
FocusZone mount 1800 1839 5000
IconButton mount 1718 1766 5000
Label mount 330 330 5000
Layer mount 1839 1801 5000
Link mount 471 456 5000
MakeStyles mount 1854 1846 50000
MenuButton mount 1467 1470 5000
MessageBar mount 2001 2036 5000
Nav mount 3263 3268 1000
OverflowSet mount 1068 1030 5000
Panel mount 2087 2083 1000
Persona mount 846 851 1000
Pivot mount 1402 1438 1000
PrimaryButton mount 1284 1302 5000
Rating mount 7625 7564 5000
SearchBox mount 1340 1334 5000
Shimmer mount 2539 2549 5000
Slider mount 1975 1951 5000
SpinButton mount 5044 4977 5000
Spinner mount 423 417 5000
SplitButton mount 3192 3208 5000
Stack mount 494 504 5000
StackWithIntrinsicChildren mount 1512 1495 5000
StackWithTextChildren mount 4498 4462 5000
SwatchColorPicker mount 11284 10264 5000
Tabs mount 1421 1425 1000
TagPicker mount 2440 2407 5000
TeachingBubble mount 11918 11940 5000
Text mount 434 410 5000
TextField mount 1412 1355 5000
ThemeProvider mount 1191 1198 5000
ThemeProvider virtual-rerender 598 596 5000
ThemeProviderNext mount 7207 7140 5000
Toggle mount 799 800 5000
buttonNative mount 116 117 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ReactionMinimalPerf.default 398 366 1.09:1
AvatarMinimalPerf.default 198 183 1.08:1
FlexMinimalPerf.default 296 274 1.08:1
SegmentMinimalPerf.default 358 333 1.08:1
PortalMinimalPerf.default 187 175 1.07:1
ButtonMinimalPerf.default 172 163 1.06:1
ItemLayoutMinimalPerf.default 1254 1186 1.06:1
RadioGroupMinimalPerf.default 464 438 1.06:1
ListCommonPerf.default 625 596 1.05:1
AlertMinimalPerf.default 279 269 1.04:1
ButtonSlotsPerf.default 561 539 1.04:1
FormMinimalPerf.default 401 385 1.04:1
GridMinimalPerf.default 345 331 1.04:1
RefMinimalPerf.default 241 231 1.04:1
TextMinimalPerf.default 353 339 1.04:1
AttachmentSlotsPerf.default 1070 1034 1.03:1
CarouselMinimalPerf.default 458 446 1.03:1
ChatWithPopoverPerf.default 360 349 1.03:1
DividerMinimalPerf.default 363 352 1.03:1
ImageMinimalPerf.default 359 348 1.03:1
ListMinimalPerf.default 529 512 1.03:1
ProviderMinimalPerf.default 965 936 1.03:1
TooltipMinimalPerf.default 981 956 1.03:1
EmbedMinimalPerf.default 4140 4070 1.02:1
ListWith60ListItems.default 653 642 1.02:1
IconMinimalPerf.default 606 595 1.02:1
AnimationMinimalPerf.default 412 407 1.01:1
DialogMinimalPerf.default 759 753 1.01:1
DropdownMinimalPerf.default 3120 3091 1.01:1
HeaderMinimalPerf.default 357 355 1.01:1
LoaderMinimalPerf.default 692 686 1.01:1
SkeletonMinimalPerf.default 351 349 1.01:1
SliderMinimalPerf.default 1538 1530 1.01:1
TextAreaMinimalPerf.default 486 482 1.01:1
CustomToolbarPrototype.default 3822 3773 1.01:1
ButtonOverridesMissPerf.default 1676 1673 1:1
ChatDuplicateMessagesPerf.default 294 293 1:1
CheckboxMinimalPerf.default 2768 2778 1:1
DropdownManyItemsPerf.default 674 672 1:1
MenuMinimalPerf.default 855 852 1:1
MenuButtonMinimalPerf.default 1577 1576 1:1
SplitButtonMinimalPerf.default 3706 3720 1:1
ToolbarMinimalPerf.default 942 939 1:1
TreeMinimalPerf.default 802 804 1:1
AttachmentMinimalPerf.default 150 151 0.99:1
BoxMinimalPerf.default 345 350 0.99:1
CardMinimalPerf.default 549 554 0.99:1
DatepickerMinimalPerf.default 5442 5482 0.99:1
LayoutMinimalPerf.default 362 366 0.99:1
ListNestedPerf.default 552 559 0.99:1
StatusMinimalPerf.default 676 683 0.99:1
ChatMinimalPerf.default 649 662 0.98:1
HeaderSlotsPerf.default 741 759 0.98:1
PopupMinimalPerf.default 570 584 0.98:1
ProviderMergeThemesPerf.default 1676 1705 0.98:1
TableManyItemsPerf.default 1880 1911 0.98:1
TreeWith60ListItems.default 166 169 0.98:1
InputMinimalPerf.default 1231 1272 0.97:1
TableMinimalPerf.default 397 408 0.97:1
LabelMinimalPerf.default 378 395 0.96:1
RosterPerf.default 1140 1189 0.96:1
AccordionMinimalPerf.default 143 151 0.95:1
VideoMinimalPerf.default 611 644 0.95:1

@layershifter layershifter marked this pull request as ready for review June 29, 2021 16:33
@layershifter layershifter requested a review from a team as a code owner June 29, 2021 16:33
jest.preset.js Outdated
},
testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm wondering if this will be really needed for all packages ? maybe I'd override it solely for babel-make-styles ? WDYT?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, applied it in packages/babel-make-styles/jest.config.js

@@ -0,0 +1 @@
require('@testing-library/jest-dom');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this line was added by migration as well ? meaning -> do we need jest-dom for this package ? (I'd assume we don't as its a node package)

Copy link
Member Author

@layershifter layershifter Jun 30, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or bad copy-paste 🤓 Anyway, replaced it with a placeholder 👍

…hore/bms-dx

� Conflicts:
�	packages/babel-make-styles/src/plugin.ts
@codesandbox-ci
Copy link

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 b48a40d:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

Copy link
Contributor

@Hotell Hotell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌 awesomeness

@layershifter layershifter merged commit cc979d7 into master Jun 30, 2021
@layershifter layershifter deleted the chore/bms-dx branch June 30, 2021 10:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

migration(babel-make-styles): after migrating via nx generator, tests don't work

5 participants