fix: Improve Stack's style recalculation performance by selectively applying children selectors

change/@fluentui-react-ecb76517-ad98-4a5e-b9ca-e853cae9a44d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Improve Stack's style recalculation performance by selectively applying children selectors.",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap

@@ -19,12 +19,6 @@ exports[`MicroFeedback renders correctly with inline prop set 1`] = `
       & > * {
         text-overflow: ellipsis;
       }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 1;
-      }
 >
   <div
     className=
@@ -41,12 +35,6 @@ exports[`MicroFeedback renders correctly with inline prop set 1`] = `
         & > * {
           text-overflow: ellipsis;
         }
-        & > *:not(:first-child) {
-          margin-left: 0px;
-        }
-        & > *:not(.ms-StackItem) {
-          flex-shrink: 1;
-        }
   >
     <div>
       <button
@@ -335,12 +323,6 @@ exports[`MicroFeedback renders correctly with no props 1`] = `
       & > * {
         text-overflow: ellipsis;
       }
-      & > *:not(:first-child) {
-        margin-top: 0px;
-      }
-      & > *:not(.ms-StackItem) {
-        flex-shrink: 1;
-      }
 >
   <div
     className=
@@ -357,12 +339,6 @@ exports[`MicroFeedback renders correctly with no props 1`] = `
         & > * {
           text-overflow: ellipsis;
         }
-        & > *:not(:first-child) {
-          margin-left: 0px;
-        }
-        & > *:not(.ms-StackItem) {
-          flex-shrink: 1;
-        }
   >
     <div>
       <button

packages/react/src/components/Stack/Stack.styles.ts

@@ -45,10 +45,10 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS
   };
 
   // selectors to be applied regardless of wrap or direction
-  const commonSelectors = {
+  const disableShrinkStyles = {
     // flexShrink styles are applied by the StackItem
     '> *:not(.ms-StackItem)': {
-      flexShrink: disableShrink ? 0 : 1,
+      flexShrink: 0,
     },
   };
 
@@ -97,15 +97,13 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS
           width: columnGap.value === 0 ? '100%' : `calc(100% + ${columnGap.value}${columnGap.unit})`,
           maxWidth: '100vw',
 
-          selectors: {
-            '> *': {
-              margin: `${0.5 * rowGap.value}${rowGap.unit} ${0.5 * columnGap.value}${columnGap.unit}`,
+          '> *': {
+            margin: `${0.5 * rowGap.value}${rowGap.unit} ${0.5 * columnGap.value}${columnGap.unit}`,
 
-              ...childStyles,
-            },
-            ...commonSelectors,
+            ...childStyles,
           },
         },
+        disableShrink && disableShrinkStyles,
         horizontalAlign && {
           [horizontal ? 'justifyContent' : 'alignItems']: nameMap[horizontalAlign] || horizontalAlign,
         },
@@ -118,20 +116,16 @@ 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})`,
 
-          selectors: {
-            '> *': {
-              maxWidth: columnGap.value === 0 ? '100%' : `calc(100% - ${columnGap.value}${columnGap.unit})`,
-            },
+          '> *': {
+            maxWidth: columnGap.value === 0 ? '100%' : `calc(100% - ${columnGap.value}${columnGap.unit})`,
           },
         },
         !horizontal && {
           flexDirection: reversed ? 'column-reverse' : 'column',
           height: `calc(100% + ${rowGap.value}${rowGap.unit})`,
 
-          selectors: {
-            '> *': {
-              maxHeight: rowGap.value === 0 ? '100%' : `calc(100% - ${rowGap.value}${rowGap.unit})`,
-            },
+          '> *': {
+            maxHeight: rowGap.value === 0 ? '100%' : `calc(100% - ${rowGap.value}${rowGap.unit})`,
           },
         },
       ],
@@ -152,26 +146,28 @@ export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackS
         padding: parsePadding(padding, theme),
         boxSizing: 'border-box',
 
-        selectors: {
-          '> *': childStyles,
-
-          // 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 ? '> *:not(:last-child)' : '> *:not(:first-child)']: [
-            horizontal && {
-              marginLeft: `${columnGap.value}${columnGap.unit}`,
-            },
-            !horizontal && {
-              marginTop: `${rowGap.value}${rowGap.unit}`,
-            },
-          ],
-
-          ...commonSelectors,
-        },
+        '> *': childStyles,
       },
+      disableShrink && disableShrinkStyles,
       grow && {
         flexGrow: grow === true ? 1 : grow,
       },
+      horizontal &&
+        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 ? '> *:not(:last-child)' : '> *:not(:first-child)']: {
+            marginLeft: `${columnGap.value}${columnGap.unit}`,
+          },
+        },
+      !horizontal &&
+        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 ? '> *:not(:last-child)' : '> *:not(:first-child)']: {
+            marginTop: `${rowGap.value}${rowGap.unit}`,
+          },
+        },
       horizontalAlign && {
         [horizontal ? 'justifyContent' : 'alignItems']: nameMap[horizontalAlign] || horizontalAlign,
       },