perf(fela): use Stylis for prefixing #12289

layershifter · 2020-03-12T21:56:59Z

Pull request checklist

Addresses an existing issue: Fixes #0000
Include a change request file using $ yarn change

What ❓

This PR introduces Stylis for vendor prefixing job instead of fela-plugin-prefixer to get performance benefits.

BREAKING CHANGES

CSS Grid is not prefixed anymore

Our previous prefixing was not ideal, too. The biggest bummer here that not all features can be resolved with prefixing for IE11, especially with auto sizing, i.e. each case with CSS Grid should be handled manually even now.

Before

const styles = {
  display: 'grid',
  gridTemplateColumns: 'auto 1fr',
}

After

const styles = {
  display: ['grid', '-ms-grid'],
  gridTemplateColumns: 'auto 1fr',
  msGridColumns: 'auto 1fr',
}

Autoprefixer playground can be also useful.

`linear-gradient()` is not prefixed anymore

works in IE11 by default
works in from Chrome 26 (2013-03-26) & Firefox 16 (2012-06-05)

To archive previous behavior usage fallback values feature:

const styles = {
  background: [
    'linear-gradient(#e66465, #9198e5)',
    '-webkit-linear-gradient(#e66465, #9198e5)',
    '-moz-linear-gradient(#e66465, #9198e5)'
  ]
}

`background-clip` is not prefixed anymore

Previous prefixing was not correct:

background-clip: -webkit-text;	
background-clip: text;

Should be:

background-clip: text;
-webkit-background-clip: text;

`cross-fade()` is not prefixed anymore

It's not supported in IE11.
Works only with a prefix in Chrome.

Performance 🐎

It's faster than by Fela nature as the plugin operates with renderRule(): Fela will run plugins on every renderRule() call, but, _emitChange() will be called only for new CSS rules:

It will be easier to understand with CodeSandbox that shows this: https://codesandbox.io/s/vigorous-fire-jhzkq

Before

Example	min	avg	median	max
ChatWithPopover.perf.tsx	396.11	435.93	427.42	556.65
ChatWithPopover.perf.tsx	393.02	434.84	419.76	570.68
ChatWithPopover.perf.tsx	395.83	432.41	424.12	500.64

After 🔽 ~28%

Example	min	avg	median	max
ChatWithPopover.perf.tsx	299.91	311.17	310.18	329.78
ChatWithPopover.perf.tsx	301.28	316.03	311.39	438.31
ChatWithPopover.perf.tsx	301.03	311.79	311.29	340.73

Microsoft Reviewers: Open in CodeFlow

size-auditor · 2020-03-12T22:25:45Z

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: 4552dcc

Possible causes

The baseline build 4552dcc is broken
The Size Auditor run for the baseline build 4552dcc was not triggered

Recommendations

Please merge your branch for this Pull request with the latest master build and commit your changes once again

msft-github-bot · 2020-03-12T22:27:20Z

Perf Analysis

No significant results to display.

All results

Scenario	Master Ticks	PR Ticks	Iterations
BaseButton	738	745	5000
Checkbox	1725	1712	5000
CheckboxBase	1365	1401	5000
ChoiceGroup	5031	4968	5000
ComboBox	975	910	1000
CommandBar	7208	7270	1000
DefaultButton	954	1036	5000
DetailsRow	3122	3226	5000
DetailsRow (fast icons)	3238	3180	5000
DetailsRow without styles	2986	2983	5000
Dialog	1370	1364	1000
DocumentCardTitle with truncation	1628	1635	1000
Dropdown	2765	2755	5000
FocusZone	1550	1515	5000
IconButton	1617	1611	5000
Label	467	449	5000
Link	420	424	5000
MenuButton	1279	1300	5000
Nav	2984	2959	1000
Panel	1365	1364	1000
Persona	771	775	1000
Pivot	1225	1196	1000
PrimaryButton	1152	1151	5000
SearchBox	1400	1420	5000
Slider	1731	1694	5000
Spinner	344	364	5000
SplitButton	2872	2833	5000
Stack	442	437	5000
Stack with Intrinsic children	1022	1030	5000
Stack with Text children	3828	3837	5000
TagPicker	2574	2582	5000
Text	353	320	5000
TextField	1581	1622	5000
Toggle	802	824	5000
button	62	60	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.46	0.48	0.96:1	2000	917
🦄	Button.Fluent	0.09	0.18	0.5:1	5000	464
🔧	Checkbox.Fluent	0.66	0.41	1.61:1	1000	657
🔧	Dialog.Fluent	0.34	0.19	1.79:1	5000	1681
🔧	Dropdown.Fluent	3.24	0.45	7.2:1	1000	3236
🔧	Icon.Fluent	0.13	0.05	2.6:1	5000	667
🎯	Image.Fluent	0.07	0.1	0.7:1	5000	358
🔧	Slider.Fluent	1.34	0.42	3.19:1	1000	1343
🔧	Text.Fluent	0.07	0.02	3.5:1	5000	335
🦄	Tooltip.Fluent	0.12	18.45	0.01:1	5000	612

🔧 Needs work 🎯 On target 🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	154	137	1.12:1
BoxMinimalPerf.default	332	308	1.08:1
ProviderMinimalPerf.default	681	641	1.06:1
FlexMinimalPerf.default	281	268	1.05:1
StatusMinimalPerf.default	688	653	1.05:1
IconMinimalPerf.default	639	608	1.05:1
LabelMinimalPerf.default	403	389	1.04:1
ListMinimalPerf.default	467	448	1.04:1
Tooltip.Fluent	612	596	1.03:1
PortalMinimalPerf.default	289	282	1.02:1
RadioGroupMinimalPerf.default	524	514	1.02:1
TooltipMinimalPerf.default	874	858	1.02:1
Text.Fluent	335	328	1.02:1
AttachmentMinimalPerf.default	140	138	1.01:1
ProviderMergeThemesPerf.default	1596	1575	1.01:1
Button.Fluent	464	463	1:1
Icon.Fluent	667	668	1:1
ChatMinimalPerf.default	604	613	0.99:1
PopupMinimalPerf.default	249	252	0.99:1
RefMinimalPerf.default	193	194	0.99:1
AnimationMinimalPerf.default	622	634	0.98:1
Image.Fluent	358	365	0.98:1
ImageMinimalPerf.default	363	375	0.97:1
TextMinimalPerf.default	345	359	0.96:1
AttachmentSlotsPerf.default	1052	1107	0.95:1
ChatWithPopoverPerf.default	605	637	0.95:1
SplitButtonMinimalPerf.default	3648	3839	0.95:1
TreeMinimalPerf.default	1136	1193	0.95:1
TreeWith60ListItems.default	222	234	0.95:1
CardMinimalPerf.default	361	384	0.94:1
HierarchicalTreeMinimalPerf.default	919	977	0.94:1
CustomToolbarPrototype.default	3635	3882	0.94:1
ListNestedPerf.default	860	959	0.9:1
CarouselMinimalPerf.default	562	628	0.89:1
InputMinimalPerf.default	958	1087	0.88:1
Checkbox.Fluent	657	743	0.88:1
ButtonSlotsPerf.default	544	627	0.87:1
ChatDuplicateMessagesPerf.default	398	455	0.87:1
MenuButtonMinimalPerf.default	1445	1658	0.87:1
ToolbarMinimalPerf.default	958	1106	0.87:1
HeaderSlotsPerf.default	1468	1711	0.86:1
ListCommonPerf.default	954	1108	0.86:1
SliderMinimalPerf.default	1368	1594	0.86:1
VideoMinimalPerf.default	762	881	0.86:1
AvatarMinimalPerf.default	506	596	0.85:1
CheckboxMinimalPerf.default	2859	3372	0.85:1
DropdownManyItemsPerf.default	1312	1548	0.85:1
HeaderMinimalPerf.default	464	547	0.85:1
Dialog.Fluent	1681	1968	0.85:1
ListWith60ListItems.default	1084	1295	0.84:1
TableMinimalPerf.default	537	642	0.84:1
Avatar.Fluent	917	1088	0.84:1
LayoutMinimalPerf.default	543	653	0.83:1
MenuMinimalPerf.default	1754	2101	0.83:1
Dropdown.Fluent	3236	3896	0.83:1
DialogMinimalPerf.default	1614	1974	0.82:1
Slider.Fluent	1343	1638	0.82:1
AlertMinimalPerf.default	505	624	0.81:1
TextAreaMinimalPerf.default	2662	3300	0.81:1
FormMinimalPerf.default	705	905	0.78:1
GridMinimalPerf.default	647	833	0.78:1
SegmentMinimalPerf.default	876	1118	0.78:1
DropdownMinimalPerf.default	3213	4183	0.77:1
ItemLayoutMinimalPerf.default	1606	2138	0.75:1
EmbedMinimalPerf.default	4138	5674	0.73:1
ReactionMinimalPerf.default	1757	2477	0.71:1
AccordionMinimalPerf.default	167	237	0.7:1
DividerMinimalPerf.default	669	977	0.68:1
LoaderMinimalPerf.default	758	1109	0.68:1

…om/OfficeDev/office-ui-fabric-react into chore/fela-enhancer � Conflicts: � packages/fluentui/react/package.json � packages/fluentui/react/src/utils/felaRenderer.tsx

…c-react into chore/fela-enhancer

miroslavstastny · 2020-03-23T08:50:21Z

packages/fluentui/CHANGELOG.md

@@ -43,6 +43,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Expose `contentWrapper` shorthand from `AccordionTitle` @silviuavram ([#12265](https://github.com/OfficeDev/office-ui-fabric-react/pull/12265))
 - Add `disabled` versions for `Dropdown` and `Input` @silviuavram ([#12250](https://github.com/OfficeDev/office-ui-fabric-react/pull/12250))

+### Performance


Also add an entry to breaking changes

…om/microsoft/fluentui into chore/fela-enhancer � Conflicts: � packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap

…om/microsoft/fluentui into chore/fela-enhancer

…om/microsoft/fluentui into chore/fela-enhancer � Conflicts: � packages/fluentui/CHANGELOG.md

* perf: try stylis for prefixing * fix import * reset lock to master * wip * final updates * add changelog entry * fix grid usages * return gap back * update snapshot after merge * add stylis to approvedPackages.ts * update changelog * fix changelog * fix type

perf: try stylis for prefixing

b3af22d

layershifter requested review from dzearing, ecraig12345, JasonGore, jdhuntington, jurokapsiar, levithomason, miroslavstastny, mnajdova, pompomon and silviuaavram as code owners March 12, 2020 21:56

fix import

cf5dd30

layershifter mentioned this pull request Mar 19, 2020

test(felaRenderer): add a test for vendor prefixing #12355

Merged

2 tasks

layershifter added 5 commits March 19, 2020 12:35

Merge branches 'chore/fela-enhancer' and 'master' of https://github.c…

a61a995

…om/OfficeDev/office-ui-fabric-react into chore/fela-enhancer � Conflicts: � packages/fluentui/react/package.json � packages/fluentui/react/src/utils/felaRenderer.tsx

reset lock to master

f9d89c2

wip

1ead3b3

Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…

b35c238

…c-react into chore/fela-enhancer

final updates

5d025a5

layershifter changed the title ~~perf: try stylis for prefixing~~ perf(fela): use Stylis for prefixing Mar 19, 2020

layershifter added 3 commits March 19, 2020 14:44

add changelog entry

6bb5596

fix grid usages

af9994c

return gap back

5694c0b

aneeshack4 added Fluent UI react-northstar (v0) Work related to Fluent UI V0 and removed Fluent UI react-northstar (v0) Work related to Fluent UI V0 labels Mar 19, 2020

miroslavstastny approved these changes Mar 23, 2020

View reviewed changes

layershifter added Fluent UI react-northstar (v0) Work related to Fluent UI V0 Status: Blocked Resolution blocked by another issue labels Mar 23, 2020

layershifter mentioned this pull request Mar 27, 2020

[WIP] Fela optimizations #12445

Closed

layershifter added 2 commits March 30, 2020 10:19

Merge branches 'chore/fela-enhancer' and 'master' of https://github.c…

31ee9ae

…om/microsoft/fluentui into chore/fela-enhancer � Conflicts: � packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap

update snapshot after merge

ed7d95d

layershifter requested a review from dvdzkwsk as a code owner March 30, 2020 08:25

DustyTheBot mentioned this pull request Mar 30, 2020

Chore/try mix cache n stylis #12466

Closed

2 tasks

layershifter added 4 commits April 14, 2020 14:38

Merge branches 'chore/fela-enhancer' and 'master' of https://github.c…

2776eb5

…om/microsoft/fluentui into chore/fela-enhancer

add stylis to approvedPackages.ts

afbdb03

update changelog

4a6d445

fix changelog

0355c58

layershifter removed the Status: Blocked Resolution blocked by another issue label Apr 14, 2020

layershifter added 3 commits April 14, 2020 15:35

fix type

49d5e34

Merge branches 'chore/fela-enhancer' and 'master' of https://github.c…

9d6d71a

…om/microsoft/fluentui into chore/fela-enhancer � Conflicts: � packages/fluentui/CHANGELOG.md

Merge branches 'chore/fela-enhancer' and 'master' of https://github.c…

57a391a

…om/microsoft/fluentui into chore/fela-enhancer � Conflicts: � packages/fluentui/CHANGELOG.md

layershifter merged commit 68e3c8e into master Apr 15, 2020

layershifter deleted the chore/fela-enhancer branch April 15, 2020 13:19

layershifter mentioned this pull request Aug 24, 2020

[RFC] v5 styling solution 💅 mui/material-ui#22342

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf(fela): use Stylis for prefixing #12289

perf(fela): use Stylis for prefixing #12289

layershifter commented Mar 12, 2020 •

edited

Loading

size-auditor bot commented Mar 12, 2020 •

edited

Loading

msft-github-bot commented Mar 12, 2020 •

edited

Loading

miroslavstastny Mar 23, 2020

perf(fela): use Stylis for prefixing #12289

perf(fela): use Stylis for prefixing #12289

Conversation

layershifter commented Mar 12, 2020 • edited Loading

Pull request checklist

What ❓

BREAKING CHANGES

CSS Grid is not prefixed anymore

Before

After

linear-gradient() is not prefixed anymore

background-clip is not prefixed anymore

cross-fade() is not prefixed anymore

Performance 🐎

Before

After 🔽 ~28%

Microsoft Reviewers: Open in CodeFlow

size-auditor bot commented Mar 12, 2020 • edited Loading

Asset size changes

msft-github-bot commented Mar 12, 2020 • edited Loading

Perf Analysis

Perf Analysis (Fluent)

miroslavstastny Mar 23, 2020

Choose a reason for hiding this comment

layershifter commented Mar 12, 2020 •

edited

Loading

`linear-gradient()` is not prefixed anymore

`background-clip` is not prefixed anymore

`cross-fade()` is not prefixed anymore

size-auditor bot commented Mar 12, 2020 •

edited

Loading

msft-github-bot commented Mar 12, 2020 •

edited

Loading