Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(makeStyles): add an ability to increase specificity #16232

Merged
merged 2 commits into from
Dec 17, 2020

Conversation

layershifter
Copy link
Member

😕Problem

With atomic classes in Northstar components it's impossible to use makeStyles for overrides as Fela produces also atomic classes for us. The idea of implementation is taken from robinweser/fela#827.

unstable_cssPriority is added to makeStyles, however it should be not present in framework (React) specific implementation.

For example, it will output:

const useImageOverrides = makeStyles([[null, { display: "block" }]], 1);

image

This allows overrides to win over Fela classes due higher specificity.

@@ -1,7 +1,17 @@
import { compile, middleware, serialize, stringify } from 'stylis';
import { hyphenateProperty } from './utils/hyphenateProperty';

export function compileCSS(className: string, selector: string, property: string, value: number | string): string {
function repeatSelector(selector: string, times: number) {
return new Array(times + 2).join(selector);
Copy link
Member

Choose a reason for hiding this comment

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

:-O

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 15, 2020

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 6496b18:

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

Base automatically changed from feat/make-styles-next to master December 16, 2020 12:16
@fabricteam
Copy link
Collaborator

fabricteam commented Dec 16, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 911 931 5000
BaseButtonCompat mount 1021 996 5000
Breadcrumb mount 44634 45538 5000
Checkbox mount 1642 1627 5000
CheckboxBase mount 1403 1345 5000
ChoiceGroup mount 5133 5179 5000
ComboBox mount 1048 1025 1000
CommandBar mount 10475 10503 1000
ContextualMenu mount 6409 6325 1000
DefaultButtonCompat mount 1233 1191 5000
DetailsRow mount 3903 3893 5000
DetailsRowFast mount 3999 3855 5000
DetailsRowNoStyles mount 3788 3726 5000
Dialog mount 1575 1551 1000
DocumentCardTitle mount 1866 1844 1000
Dropdown mount 3518 3515 5000
FocusTrapZone mount 1870 1874 5000
FocusZone mount 1988 1926 5000
IconButtonCompat mount 1957 1945 5000
Label mount 360 370 5000
Layer mount 1877 1919 5000
Link mount 479 475 5000
MenuButtonCompat mount 1545 1552 5000
MessageBar mount 2047 2089 5000
Nav mount 3432 3450 1000
OverflowSet mount 1063 1053 5000
Panel mount 1461 1459 1000
Persona mount 878 879 1000
Pivot mount 1497 1483 1000
PrimaryButtonCompat mount 1384 1365 5000
Rating mount 8087 8115 5000
SearchBox mount 1391 1430 5000
Shimmer mount 2795 2749 5000
Slider mount 2008 2012 5000
SpinButton mount 5178 5214 5000
Spinner mount 431 416 5000
SplitButtonCompat mount 3307 3390 5000
Stack mount 533 538 5000
StackWithIntrinsicChildren mount 1605 1651 5000
StackWithTextChildren mount 4847 4870 5000
SwatchColorPicker mount 10748 10714 5000
Tabs mount 1478 1479 1000
TagPicker mount 3063 3049 5000
TeachingBubble mount 12131 12082 5000
Text mount 455 453 5000
TextField mount 1537 1508 5000
ThemeProvider mount 2202 2253 5000
ThemeProvider virtual-rerender 697 670 5000
Toggle mount 866 872 5000
button mount 702 751 5000
buttonNative mount 126 109 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.5 0.55 0.91:1 2000 1009
🦄 Button.Fluent 0.13 0.22 0.59:1 5000 668
🔧 Checkbox.Fluent 0.69 0.39 1.77:1 1000 691
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 888
🔧 Dropdown.Fluent 3.2 0.45 7.11:1 1000 3199
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 777
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 450
🔧 Slider.Fluent 1.73 0.5 3.46:1 1000 1727
🔧 Text.Fluent 0.08 0.04 2:1 5000 398
🦄 Tooltip.Fluent 0.13 0.94 0.14:1 5000 629

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 249 222 1.12:1
FormMinimalPerf.default 532 481 1.11:1
SegmentMinimalPerf.default 436 395 1.1:1
AnimationMinimalPerf.default 471 432 1.09:1
HeaderMinimalPerf.default 468 431 1.09:1
ButtonMinimalPerf.default 209 193 1.08:1
ListCommonPerf.default 797 740 1.08:1
LayoutMinimalPerf.default 498 471 1.06:1
ButtonSlotsPerf.default 666 636 1.05:1
CarouselMinimalPerf.default 526 501 1.05:1
ChatWithPopoverPerf.default 535 509 1.05:1
AttachmentSlotsPerf.default 1278 1230 1.04:1
ChatMinimalPerf.default 724 693 1.04:1
ListMinimalPerf.default 570 549 1.04:1
MenuMinimalPerf.default 1006 971 1.04:1
SkeletonMinimalPerf.default 492 475 1.04:1
AttachmentMinimalPerf.default 190 185 1.03:1
CardMinimalPerf.default 652 630 1.03:1
DividerMinimalPerf.default 452 437 1.03:1
RefMinimalPerf.default 250 242 1.03:1
TableManyItemsPerf.default 2508 2431 1.03:1
TextMinimalPerf.default 412 399 1.03:1
TextAreaMinimalPerf.default 587 568 1.03:1
TreeMinimalPerf.default 917 892 1.03:1
Button.Fluent 668 647 1.03:1
BoxMinimalPerf.default 407 400 1.02:1
ButtonOverridesMissPerf.default 1872 1830 1.02:1
DialogMinimalPerf.default 905 883 1.02:1
EmbedMinimalPerf.default 4556 4471 1.02:1
GridMinimalPerf.default 408 399 1.02:1
ImageMinimalPerf.default 456 446 1.02:1
ListNestedPerf.default 647 633 1.02:1
MenuButtonMinimalPerf.default 1811 1772 1.02:1
ProviderMergeThemesPerf.default 2213 2176 1.02:1
ProviderMinimalPerf.default 1135 1115 1.02:1
ReactionMinimalPerf.default 486 475 1.02:1
SliderMinimalPerf.default 1691 1653 1.02:1
SplitButtonMinimalPerf.default 4214 4115 1.02:1
StatusMinimalPerf.default 850 835 1.02:1
Dialog.Fluent 888 873 1.02:1
Slider.Fluent 1727 1691 1.02:1
ButtonUseCssPerf.default 916 911 1.01:1
ButtonUseCssNestingPerf.default 1259 1242 1.01:1
DropdownManyItemsPerf.default 830 825 1.01:1
InputMinimalPerf.default 1418 1408 1.01:1
PopupMinimalPerf.default 770 766 1.01:1
ToolbarMinimalPerf.default 1075 1067 1.01:1
TooltipMinimalPerf.default 922 915 1.01:1
Checkbox.Fluent 691 682 1.01:1
Dropdown.Fluent 3199 3175 1.01:1
AvatarMinimalPerf.default 529 531 1:1
CheckboxMinimalPerf.default 3071 3062 1:1
DropdownMinimalPerf.default 3206 3200 1:1
HeaderSlotsPerf.default 888 889 1:1
LabelMinimalPerf.default 477 477 1:1
Avatar.Fluent 1009 1007 1:1
Text.Fluent 398 400 1:1
AccordionMinimalPerf.default 175 176 0.99:1
ListWith60ListItems.default 1004 1018 0.99:1
RadioGroupMinimalPerf.default 511 518 0.99:1
VideoMinimalPerf.default 724 728 0.99:1
Icon.Fluent 777 784 0.99:1
Tooltip.Fluent 629 634 0.99:1
ChatDuplicateMessagesPerf.default 447 457 0.98:1
ItemLayoutMinimalPerf.default 1419 1454 0.98:1
Image.Fluent 450 461 0.98:1
AlertMinimalPerf.default 348 358 0.97:1
PortalMinimalPerf.default 174 179 0.97:1
TableMinimalPerf.default 454 469 0.97:1
CustomToolbarPrototype.default 4093 4199 0.97:1
DatepickerMinimalPerf.default 49469 51420 0.96:1
LoaderMinimalPerf.default 796 827 0.96:1
IconMinimalPerf.default 752 780 0.96:1
FlexMinimalPerf.default 340 363 0.94:1

@size-auditor
Copy link

size-auditor bot commented Dec 16, 2020

Asset size changes

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

Baseline commit: 81651e8f3c1ea57df77214a50eb47fe5a816a236 (build)

@layershifter layershifter changed the title feat(makeStyles): add an ability to increase specifity feat(makeStyles): add an ability to increase specificity Dec 17, 2020
@layershifter layershifter force-pushed the feat/make-styles-specifity-enhancer branch from 7c06620 to 611b165 Compare December 17, 2020 10:01
@layershifter layershifter merged commit 30587bf into master Dec 17, 2020
@layershifter layershifter deleted the feat/make-styles-specifity-enhancer branch December 17, 2020 12:07
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants