From 836f610fe436992b7667ff76fc2502cb3a604c43 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 21 Sep 2020 22:54:23 +0200 Subject: [PATCH 1/4] hoist name resolution for performances --- packages/material-ui/src/styles/muiStyled.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/material-ui/src/styles/muiStyled.js b/packages/material-ui/src/styles/muiStyled.js index ef92b7fd9eabb8..d772acc5604117 100644 --- a/packages/material-ui/src/styles/muiStyled.js +++ b/packages/material-ui/src/styles/muiStyled.js @@ -57,10 +57,9 @@ const variantsResolver = (props, styles, theme, name) => { const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme'; const muiStyled = (tag, options, muiOptions) => { + const name = muiOptions.muiName; const defaultStyledResolver = styled(tag, { shouldForwardProp, ...options }); const muiStyledResolver = (...styles) => { - const name = muiOptions.muiName; - if (muiOptions.overridesResolver) { styles.push((props) => { const theme = props.theme || defaultTheme; From ea3730ab541481f41eb812a52897cdf835cafa11 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 21 Sep 2020 22:54:53 +0200 Subject: [PATCH 2/4] add name for better debug experience in the class name This is described in https://emotion.sh/docs/labels --- packages/material-ui/src/styles/muiStyled.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/styles/muiStyled.js b/packages/material-ui/src/styles/muiStyled.js index d772acc5604117..d86f27239a4752 100644 --- a/packages/material-ui/src/styles/muiStyled.js +++ b/packages/material-ui/src/styles/muiStyled.js @@ -58,7 +58,7 @@ const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme'; const muiStyled = (tag, options, muiOptions) => { const name = muiOptions.muiName; - const defaultStyledResolver = styled(tag, { shouldForwardProp, ...options }); + const defaultStyledResolver = styled(tag, { shouldForwardProp, label: name, ...options }); const muiStyledResolver = (...styles) => { if (muiOptions.overridesResolver) { styles.push((props) => { From 2c809254da03cf923c5c4a7d30b0e931ee3362ca Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 21 Sep 2020 22:57:44 +0200 Subject: [PATCH 3/4] export the bare minimum --- packages/material-ui-styled-engine/src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui-styled-engine/src/index.js b/packages/material-ui-styled-engine/src/index.js index 53bc27a1a267b7..9b24cbd7fcb37d 100644 --- a/packages/material-ui-styled-engine/src/index.js +++ b/packages/material-ui-styled-engine/src/index.js @@ -1,2 +1 @@ -export * from '@emotion/styled'; export { default } from '@emotion/styled'; From 3c4701d73297dc97be81e001f60b4894d9ba690c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 21 Sep 2020 23:07:30 +0200 Subject: [PATCH 4/4] adapt styled method --- packages/material-ui-styled-engine-sc/src/index.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-styled-engine-sc/src/index.js b/packages/material-ui-styled-engine-sc/src/index.js index b023957e85fe10..fbd93b268d4b54 100644 --- a/packages/material-ui-styled-engine-sc/src/index.js +++ b/packages/material-ui-styled-engine-sc/src/index.js @@ -1,2 +1,12 @@ -export * from 'styled-components'; -export { default } from 'styled-components'; +import scStyled from "styled-components"; + +export default function styled(tag, options) { + if (options) { + return scStyled(tag).withConfig({ + displayName: options.label, + shouldForwardProp: options.shouldForwardProp, + }); + } + + return scStyled(tag); +}