From 34b6226ba50bb58a6ffcdbd9658977968a2e2d54 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Thu, 27 Oct 2022 17:21:35 -0700 Subject: [PATCH 1/3] chore: Reducing bundle size of Stack by moving selector used in multiple places to local const. --- .../src/components/Stack/Stack.styles.ts | 20 +++++++++---------- .../react/src/components/Stack/Stack.types.ts | 2 +- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/react/src/components/Stack/Stack.styles.ts b/packages/react/src/components/Stack/Stack.styles.ts index 0804c486a692b6..f974e02e7e8406 100644 --- a/packages/react/src/components/Stack/Stack.styles.ts +++ b/packages/react/src/components/Stack/Stack.styles.ts @@ -47,9 +47,11 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS textOverflow: 'ellipsis', }; + const childSelector = enableScopedSelectors ? '.' + GlobalClassNames.child : '*'; + const disableShrinkStyles = { // flexShrink styles are applied by the StackItem - [`> ${enableScopedSelectors ? '.' + GlobalClassNames.child : '*'}:not(.${StackItemGlobalClassNames.root})`]: { + [`> ${childSelector}:not(.${StackItemGlobalClassNames.root})`]: { flexShrink: 0, }, }; @@ -99,7 +101,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS width: columnGap.value === 0 ? '100%' : `calc(100% + ${columnGap.value}${columnGap.unit})`, maxWidth: '100vw', - [`> ${enableScopedSelectors ? '.' + GlobalClassNames.child : '*'}`]: { + [`> ${childSelector}`]: { margin: `${0.5 * rowGap.value}${rowGap.unit} ${0.5 * columnGap.value}${columnGap.unit}`, ...childStyles, @@ -118,7 +120,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS // avoid unnecessary calc() calls if vertical gap is 0 height: rowGap.value === 0 ? '100%' : `calc(100% + ${rowGap.value}${rowGap.unit})`, - [`> ${enableScopedSelectors ? '.' + GlobalClassNames.child : '*'}`]: { + [`> ${childSelector}`]: { maxWidth: columnGap.value === 0 ? '100%' : `calc(100% - ${columnGap.value}${columnGap.unit})`, }, }, @@ -126,7 +128,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS flexDirection: reversed ? 'column-reverse' : 'column', height: `calc(100% + ${rowGap.value}${rowGap.unit})`, - [`> ${enableScopedSelectors ? '.' + GlobalClassNames.child : '*'}`]: { + [`> ${childSelector}`]: { maxHeight: rowGap.value === 0 ? '100%' : `calc(100% - ${rowGap.value}${rowGap.unit})`, }, }, @@ -148,7 +150,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS padding: parsePadding(padding, theme), boxSizing: 'border-box', - [`> ${enableScopedSelectors ? '.' + GlobalClassNames.child : '*'}`]: childStyles, + [`> ${childSelector}`]: childStyles, }, disableShrink && disableShrinkStyles, grow && { @@ -165,9 +167,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS columnGap.value > 0 && { // apply gap margin to every direct child except the first direct child if the direction is not reversed, // and the last direct one if it is - [reversed - ? `> ${enableScopedSelectors ? '.' + GlobalClassNames.child : '*'}:not(:last-child)` - : `> ${enableScopedSelectors ? '.' + GlobalClassNames.child : '*'}:not(:first-child)`]: { + [reversed ? `> ${childSelector}:not(:last-child)` : `> ${childSelector}:not(:first-child)`]: { marginLeft: `${columnGap.value}${columnGap.unit}`, }, }, @@ -175,9 +175,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS rowGap.value > 0 && { // apply gap margin to every direct child except the first direct child if the direction is not reversed, // and the last direct one if it is - [reversed - ? `> ${enableScopedSelectors ? '.' + GlobalClassNames.child : '*'}:not(:last-child)` - : `> ${enableScopedSelectors ? '.' + GlobalClassNames.child : '*'}:not(:first-child)`]: { + [reversed ? `> ${childSelector}:not(:last-child)` : `> ${childSelector}:not(:first-child)`]: { marginTop: `${rowGap.value}${rowGap.unit}`, }, }, diff --git a/packages/react/src/components/Stack/Stack.types.ts b/packages/react/src/components/Stack/Stack.types.ts index b8a895d74ab748..1a8fb4cd5a7539 100644 --- a/packages/react/src/components/Stack/Stack.types.ts +++ b/packages/react/src/components/Stack/Stack.types.ts @@ -152,7 +152,7 @@ export interface IStackProps /** * Defines if scoped style selectors are enabled for the Stack component, which greatly helps in style recalculation - * performance but requires children of the Stack to be able to accept a className prop (excluding Fragments). + * performance, but requires children of the Stack to be able to accept a className prop (excluding Fragments). * @defaultvalue false */ enableScopedSelectors?: boolean; From 8397f0d1db54e5d1da87ceb23464bd0cfe7053a9 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Thu, 27 Oct 2022 17:29:13 -0700 Subject: [PATCH 2/3] Adding change file. --- ...luentui-react-6980f88b-f6c6-426f-a469-d4db3bffadf9.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-6980f88b-f6c6-426f-a469-d4db3bffadf9.json diff --git a/change/@fluentui-react-6980f88b-f6c6-426f-a469-d4db3bffadf9.json b/change/@fluentui-react-6980f88b-f6c6-426f-a469-d4db3bffadf9.json new file mode 100644 index 00000000000000..7240f431a5d473 --- /dev/null +++ b/change/@fluentui-react-6980f88b-f6c6-426f-a469-d4db3bffadf9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Reducing bundle size of Stack by moving selector used in multiple places to local const.", + "packageName": "@fluentui/react", + "email": "humberto_makoto@hotmail.com", + "dependentChangeType": "patch" +} From d20cf956854d66e590fc1efba2899070451a27f8 Mon Sep 17 00:00:00 2001 From: Humberto Makoto Morimoto Burgos Date: Fri, 28 Oct 2022 14:17:53 -0700 Subject: [PATCH 3/3] Addressing PR feedback. --- .../react/src/components/Stack/Stack.styles.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react/src/components/Stack/Stack.styles.ts b/packages/react/src/components/Stack/Stack.styles.ts index f974e02e7e8406..0a2c8b5d9fe298 100644 --- a/packages/react/src/components/Stack/Stack.styles.ts +++ b/packages/react/src/components/Stack/Stack.styles.ts @@ -47,11 +47,11 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS textOverflow: 'ellipsis', }; - const childSelector = enableScopedSelectors ? '.' + GlobalClassNames.child : '*'; + const childSelector = '> ' + (enableScopedSelectors ? '.' + GlobalClassNames.child : '*'); const disableShrinkStyles = { // flexShrink styles are applied by the StackItem - [`> ${childSelector}:not(.${StackItemGlobalClassNames.root})`]: { + [`${childSelector}:not(.${StackItemGlobalClassNames.root})`]: { flexShrink: 0, }, }; @@ -101,7 +101,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS width: columnGap.value === 0 ? '100%' : `calc(100% + ${columnGap.value}${columnGap.unit})`, maxWidth: '100vw', - [`> ${childSelector}`]: { + [childSelector]: { margin: `${0.5 * rowGap.value}${rowGap.unit} ${0.5 * columnGap.value}${columnGap.unit}`, ...childStyles, @@ -120,7 +120,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS // avoid unnecessary calc() calls if vertical gap is 0 height: rowGap.value === 0 ? '100%' : `calc(100% + ${rowGap.value}${rowGap.unit})`, - [`> ${childSelector}`]: { + [childSelector]: { maxWidth: columnGap.value === 0 ? '100%' : `calc(100% - ${columnGap.value}${columnGap.unit})`, }, }, @@ -128,7 +128,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS flexDirection: reversed ? 'column-reverse' : 'column', height: `calc(100% + ${rowGap.value}${rowGap.unit})`, - [`> ${childSelector}`]: { + [childSelector]: { maxHeight: rowGap.value === 0 ? '100%' : `calc(100% - ${rowGap.value}${rowGap.unit})`, }, }, @@ -150,7 +150,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS padding: parsePadding(padding, theme), boxSizing: 'border-box', - [`> ${childSelector}`]: childStyles, + [childSelector]: childStyles, }, disableShrink && disableShrinkStyles, grow && { @@ -167,7 +167,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS columnGap.value > 0 && { // apply gap margin to every direct child except the first direct child if the direction is not reversed, // and the last direct one if it is - [reversed ? `> ${childSelector}:not(:last-child)` : `> ${childSelector}:not(:first-child)`]: { + [reversed ? `${childSelector}:not(:last-child)` : `${childSelector}:not(:first-child)`]: { marginLeft: `${columnGap.value}${columnGap.unit}`, }, }, @@ -175,7 +175,7 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS rowGap.value > 0 && { // apply gap margin to every direct child except the first direct child if the direction is not reversed, // and the last direct one if it is - [reversed ? `> ${childSelector}:not(:last-child)` : `> ${childSelector}:not(:first-child)`]: { + [reversed ? `${childSelector}:not(:last-child)` : `${childSelector}:not(:first-child)`]: { marginTop: `${rowGap.value}${rowGap.unit}`, }, },