fix(babel-make-styles): handle member expressions by layershifter · Pull Request #18973 · microsoft/fluentui

layershifter · 2021-07-16T11:04:26Z

Pull request checklist

Addresses an existing issue: unblocks chore: add Babel plugins for more components #18968
Include a change request file using $ yarn change

Description of changes

This PR adds handling of MemberExpression in @fluentui/babel-make-styles and covers it with tests. This fix is a blocker for #18968 where it causes a build failure:

ERR! [9:16:53 AM] x SyntaxError: /mnt/work/2/s/packages/react-text/lib-commonjs/components/Display/Display.js: We met an unhandled case, this is a bug, please include a stacktrace and report it at https://github.com/microsoft/fluentui
ERR!   10 |  */
ERR!   11 | var useStyles = react_make_styles_1.makeStyles({
ERR! > 12 |     root: index_2.typographyStyles.display,
ERR!      |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
ERR!   13 | });
ERR!   14 | /**
ERR!   15 |  * Text wrapper component for the Display typography variant

codesandbox-ci · 2021-07-16T11:10:38Z

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

Sandbox	Source
Fluent UI React Starter	Configuration

fabricteam · 2021-07-16T11:11:21Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-divider` Divider	`15.889 kB` `5.747 kB`
`react-image` Image	`10.642 kB` `4.264 kB`
`react-menu` Menu - Default	`113.947 kB` `34.389 kB`
`react-menu` Menu - Selectable	`115.959 kB` `34.649 kB`

_{🤖 This report was generated against 8ebf2d422547bda60eb22eae2b12c3bd1339ec06}

size-auditor · 2021-07-16T11:14:56Z

Asset size changes

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

Baseline commit: 8ebf2d422547bda60eb22eae2b12c3bd1339ec06 (build)

fabricteam · 2021-07-16T11:29:48Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	777	813	5000
BaseButton	mount	892	871	5000
Breadcrumb	mount	2598	2612	1000
ButtonNext	mount	540	534	5000
Checkbox	mount	1515	1504	5000
CheckboxBase	mount	1304	1316	5000
ChoiceGroup	mount	4766	4780	5000
ComboBox	mount	987	981	1000
CommandBar	mount	10472	10477	1000
ContextualMenu	mount	6453	6339	1000
DefaultButton	mount	1143	1122	5000
DetailsRow	mount	3800	3736	5000
DetailsRowFast	mount	3783	3846	5000
DetailsRowNoStyles	mount	3527	3533	5000
Dialog	mount	2149	2184	1000
DocumentCardTitle	mount	146	159	1000
Dropdown	mount	3239	3231	5000
FluentProviderNext	mount	7449	7347	5000
FocusTrapZone	mount	1762	1862	5000
FocusZone	mount	1849	1842	5000
IconButton	mount	1746	1731	5000
Label	mount	343	347	5000
Layer	mount	1766	1753	5000
Link	mount	465	492	5000
MakeStyles	mount	1816	1818	50000
MenuButton	mount	1474	1491	5000
MessageBar	mount	2084	2040	5000
Nav	mount	3276	3254	1000
OverflowSet	mount	1055	1021	5000
Panel	mount	2062	2073	1000
Persona	mount	823	840	1000
Pivot	mount	1404	1451	1000
PrimaryButton	mount	1265	1303	5000
Rating	mount	7722	7700	5000
SearchBox	mount	1298	1308	5000
Shimmer	mount	2563	2562	5000
Slider	mount	1943	2005	5000
SpinButton	mount	4997	5029	5000
Spinner	mount	431	421	5000
SplitButton	mount	3172	3151	5000
Stack	mount	497	513	5000
StackWithIntrinsicChildren	mount	1472	1544	5000
StackWithTextChildren	mount	4443	4473	5000
SwatchColorPicker	mount	10093	10120	5000
Tabs	mount	1428	1381	1000
TagPicker	mount	2413	2414	5000
TeachingBubble	mount	11928	11799	5000
Text	mount	420	423	5000
TextField	mount	1377	1400	5000
ThemeProvider	mount	1205	1173	5000
ThemeProvider	virtual-rerender	601	609	5000
Toggle	mount	793	808	5000
buttonNative	mount	115	119	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	175	157	1.11:1
ImageMinimalPerf.default	377	354	1.06:1
ListCommonPerf.default	648	613	1.06:1
TextAreaMinimalPerf.default	520	493	1.05:1
AnimationMinimalPerf.default	421	406	1.04:1
AttachmentMinimalPerf.default	156	150	1.04:1
ChatDuplicateMessagesPerf.default	292	281	1.04:1
DropdownMinimalPerf.default	3193	3079	1.04:1
PortalMinimalPerf.default	188	180	1.04:1
SegmentMinimalPerf.default	353	340	1.04:1
VideoMinimalPerf.default	631	607	1.04:1
ChatWithPopoverPerf.default	372	360	1.03:1
DialogMinimalPerf.default	758	738	1.03:1
SkeletonMinimalPerf.default	352	343	1.03:1
AttachmentSlotsPerf.default	1046	1029	1.02:1
ButtonSlotsPerf.default	551	538	1.02:1
CardMinimalPerf.default	551	538	1.02:1
FlexMinimalPerf.default	289	284	1.02:1
InputMinimalPerf.default	1273	1249	1.02:1
RadioGroupMinimalPerf.default	447	437	1.02:1
SplitButtonMinimalPerf.default	3819	3761	1.02:1
TextMinimalPerf.default	353	346	1.02:1
TooltipMinimalPerf.default	1012	995	1.02:1
BoxMinimalPerf.default	344	340	1.01:1
ChatMinimalPerf.default	674	669	1.01:1
DividerMinimalPerf.default	364	361	1.01:1
HeaderSlotsPerf.default	768	761	1.01:1
MenuButtonMinimalPerf.default	1634	1610	1.01:1
PopupMinimalPerf.default	597	591	1.01:1
ProviderMergeThemesPerf.default	1685	1671	1.01:1
StatusMinimalPerf.default	677	673	1.01:1
IconMinimalPerf.default	608	600	1.01:1
TableMinimalPerf.default	401	399	1.01:1
CustomToolbarPrototype.default	3867	3830	1.01:1
ToolbarMinimalPerf.default	937	924	1.01:1
TreeMinimalPerf.default	790	781	1.01:1
AccordionMinimalPerf.default	161	161	1:1
AlertMinimalPerf.default	274	275	1:1
CarouselMinimalPerf.default	452	451	1:1
CheckboxMinimalPerf.default	2735	2744	1:1
EmbedMinimalPerf.default	4111	4099	1:1
HeaderMinimalPerf.default	360	359	1:1
LayoutMinimalPerf.default	369	368	1:1
ListNestedPerf.default	539	538	1:1
RosterPerf.default	1170	1168	1:1
TableManyItemsPerf.default	1861	1869	1:1
ButtonOverridesMissPerf.default	1691	1702	0.99:1
DatepickerMinimalPerf.default	5706	5747	0.99:1
DropdownManyItemsPerf.default	673	680	0.99:1
GridMinimalPerf.default	329	331	0.99:1
ItemLayoutMinimalPerf.default	1220	1235	0.99:1
LabelMinimalPerf.default	391	393	0.99:1
MenuMinimalPerf.default	853	862	0.99:1
SliderMinimalPerf.default	1548	1565	0.99:1
TreeWith60ListItems.default	162	163	0.99:1
ListMinimalPerf.default	505	516	0.98:1
ListWith60ListItems.default	629	645	0.98:1
LoaderMinimalPerf.default	680	694	0.98:1
ProviderMinimalPerf.default	970	989	0.98:1
ReactionMinimalPerf.default	363	375	0.97:1
AvatarMinimalPerf.default	195	204	0.96:1
FormMinimalPerf.default	397	412	0.96:1
RefMinimalPerf.default	238	247	0.96:1

ling1726 · 2021-07-16T12:38:17Z

packages/babel-make-styles/__fixtures__/object-mixins/mixins.ts

  gridGap,
 });
+
+export const typography: Record<'text' | 'header', MakeStyles> = {


should we also add an example with namespace export ?

Not really, as we are testing makeStyles() call itself. Even this was throwing before:

const typography = { header: { color: 'red' } } export const useStyles = makeStyles({ header: typography.header, })

msft-fluent-ui-bot · 2021-07-16T22:55:26Z

🎉@fluentui/react-tooltip@v9.0.0-alpha.57 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-16T22:55:29Z

🎉@fluentui/react-menu@v9.0.0-alpha.51 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-16T22:55:32Z

🎉@fluentui/react-link@v9.0.0-alpha.59 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-16T22:55:35Z

🎉@fluentui/react-image@v9.0.0-alpha.56 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-16T22:55:38Z

🎉@fluentui/react-divider@v9.0.0-alpha.46 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-16T22:55:41Z

🎉@fluentui/react-components@v9.0.0-alpha.80 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-16T22:55:44Z

🎉@fluentui/react-button@v9.0.0-alpha.61 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-16T22:55:47Z

🎉@fluentui/react-badge@v9.0.0-alpha.58 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-16T22:55:50Z

🎉@fluentui/react-avatar@v9.0.0-alpha.57 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-16T22:55:53Z

🎉@fluentui/react-accordion@v9.0.0-alpha.53 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-16T22:56:05Z

🎉@fluentui/make-styles-webpack-loader@v9.0.0 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-16T22:56:08Z

🎉@fluentui/babel-make-styles@v9.0.0-alpha.26 has been released which incorporates this pull request.:tada:

Handy links:

* fix(babel-make-styles): handle member expressions * Change files

layershifter added 2 commits July 16, 2021 13:00

fix(babel-make-styles): handle member expressions

ef0dc64

Change files

b3cceba

msft-fluent-ui-bot assigned ling1726 Jul 16, 2021

layershifter added the Fluent UI react-components (v9) label Jul 16, 2021

layershifter requested a review from a team July 16, 2021 11:04

ling1726 reviewed Jul 16, 2021

View reviewed changes

ling1726 approved these changes Jul 16, 2021

View reviewed changes

layershifter merged commit 91e053b into master Jul 16, 2021

layershifter deleted the fix/mk-imports branch July 16, 2021 12:52

layershifter mentioned this pull request Jul 19, 2021

fix(babel-make-styles): handle cases when MemberExpression is a function #18995

Merged

2 tasks

PeterDraex pushed a commit to PeterDraex/fluentui that referenced this pull request Aug 6, 2021

fix(babel-make-styles): handle member expressions (microsoft#18973)

302200a

* fix(babel-make-styles): handle member expressions * Change files

Conversation

layershifter commented Jul 16, 2021

Pull request checklist

Description of changes

Uh oh!

codesandbox-ci bot commented Jul 16, 2021

Uh oh!

fabricteam commented Jul 16, 2021

📊 Bundle size report

Uh oh!

size-auditor bot commented Jul 16, 2021

Asset size changes

Uh oh!

fabricteam commented Jul 16, 2021

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

ling1726 Jul 16, 2021

Choose a reason for hiding this comment

Uh oh!

layershifter Jul 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 16, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Perf Analysis (`@fluentui/react`)

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

layershifter Jul 16, 2021 •

edited

Loading