diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.styles.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.styles.ts
index 476e75c2aadf4b..c7d585daa7daa1 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.styles.ts
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { makeStyles, tokens } from '@fluentui/react-components';
 
 export const useComparisonTileStyles = makeStyles({
   root: {
@@ -6,9 +6,9 @@ export const useComparisonTileStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    ...shorthands.padding('5px', '0px'),
-    ...shorthands.gap('10px'),
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+    padding: `5px 0px`,
+    gap: '10px',
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     maxHeight: '105px',
     ':hover': {
       backgroundColor: tokens.colorNeutralBackground2Hover,
@@ -44,7 +44,7 @@ export const useComparisonTileStyles = makeStyles({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    ...shorthands.gap('2px'),
+    gap: '2px',
   },
 
   buttonReset: {
@@ -55,9 +55,9 @@ export const useComparisonTileStyles = makeStyles({
     fontFamily: 'inherit',
     fontSize: 'inherit',
     lineHeight: 'normal',
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0),
-    ...shorthands.borderStyle('none'),
+    overflow: 'visible',
+    padding: 0,
+    border: 'none',
     WebkitAppearance: 'button',
     textAlign: 'unset',
   },
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts
index 1d2d92d0ed91a8..dfa1999dcc97f4 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts
@@ -1,27 +1,27 @@
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles } from '@griffel/react';
 
 export const useColorBlockStyles = makeStyles({
   root: {
-    ...shorthands.borderTop('1px', 'solid', '#aaa'),
-    ...shorthands.borderBottom('1px', 'solid', '#aaa'),
-    ...shorthands.borderLeft('1px', 'solid', 'transparent'),
-    ...shorthands.borderRight('1px', 'solid', '#aaa'),
+    borderTop: `1px solid #aaa`,
+    borderBottom: `1px solid #aaa`,
+    borderLeft: `1px solid transparent`,
+    borderRight: `1px solid #aaa`,
     display: 'grid',
     gridTemplateColumns: 'auto 1fr',
     gridTemplateRows: 'auto',
     columnGap: '10px',
-    ...shorthands.padding('0', '5px', '0', '0'),
+    padding: `0 5px 0 0`,
   },
   flipAlign: {
-    ...shorthands.borderLeft('1px', 'solid', '#aaa'),
-    ...shorthands.borderRight('1px', 'solid', 'transparent'),
+    borderLeft: `1px solid #aaa`,
+    borderRight: `1px solid transparent`,
     gridTemplateColumns: '1fr auto',
-    ...shorthands.padding('0', '0', '0', '5px'),
+    padding: `0 0 0 5px`,
   },
   color: {
     backgroundColor: 'var(--ColorBlock__background-color)',
-    ...shorthands.borderLeft('1px', 'solid', '#aaa'),
-    ...shorthands.borderRight('1px', 'solid', '#aaa'),
+    borderLeft: `1px solid #aaa`,
+    borderRight: `1px solid #aaa`,
     width: '20px',
     alignSelf: 'stretch',
   },
@@ -35,8 +35,8 @@ export const useColorBlockStyles = makeStyles({
     '& label': {
       textAlign: 'right',
       color: '#aaa',
-      ...shorthands.margin(0),
-      ...shorthands.padding(0),
+      margin: 0,
+      padding: 0,
     },
   },
   blockName: {
diff --git a/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts
index 5adce233cb70b3..bf3de5179051d8 100644
--- a/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts
+++ b/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts
@@ -1,14 +1,14 @@
-import { makeStyles, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+import { makeStyles, tokens, typographyStyles } from '@fluentui/react-components';
 
 export const useAreaCardStyles = makeStyles({
   root: {
-    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralBackground3),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding('40px'),
+    border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground3}`,
+    borderRadius: tokens.borderRadiusMedium,
+    overflow: 'visible',
+    padding: '40px',
     boxSizing: 'border-box',
     boxShadow: tokens.shadow16,
-    ...shorthands.margin('50px'),
+    margin: '50px',
   },
   title: {
     ...typographyStyles.subtitle1,
diff --git a/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.styles.ts
index fe61e2b36f6e15..8465c27b2d0667 100644
--- a/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.styles.ts
+++ b/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.styles.ts
@@ -1,17 +1,17 @@
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { makeStyles, tokens } from '@fluentui/react-components';
 
 export const useCodeItemCardStyles = makeStyles({
   root: {
     backgroundColor: tokens.colorNeutralBackground2,
     boxShadow: tokens.shadow4,
     boxSizing: 'border-box',
-    ...shorthands.border('1px', 'solid', tokens.colorNeutralBackground5),
-    ...shorthands.borderRadius(tokens.borderRadiusLarge),
-    ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalM),
+    border: `1px solid ${tokens.colorNeutralBackground5}`,
+    borderRadius: tokens.borderRadiusLarge,
+    padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    ...shorthands.margin(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),
+    margin: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,
   },
   icon: {
     color: tokens.colorNeutralForeground4,
diff --git a/apps/public-docsite-v9/src/Concepts/Poster/Legend.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/Legend.styles.ts
index 66344c2927fff7..45d7c649ed9c3b 100644
--- a/apps/public-docsite-v9/src/Concepts/Poster/Legend.styles.ts
+++ b/apps/public-docsite-v9/src/Concepts/Poster/Legend.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { makeStyles, tokens } from '@fluentui/react-components';
 
 export const useLegendStyles = makeStyles({
   root: {
@@ -9,8 +9,8 @@ export const useLegendStyles = makeStyles({
     gridTemplateColumns: 'auto auto',
     rowGap: tokens.spacingVerticalMNudge,
     columnGap: tokens.spacingHorizontalSNudge,
-    ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalM),
-    ...shorthands.margin(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),
+    padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
+    margin: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,
   },
   icon: {
     color: tokens.colorNeutralForeground4,
diff --git a/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.styles.ts
index 567e4d25807595..ee5d1eaeee362c 100644
--- a/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.styles.ts
+++ b/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.styles.ts
@@ -1,14 +1,14 @@
-import { makeStyles, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+import { makeStyles, tokens, typographyStyles } from '@fluentui/react-components';
 
 export const useOverviewCardStyles = makeStyles({
   root: {
-    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralBackground3),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding('40px'),
+    border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground3}`,
+    borderRadius: tokens.borderRadiusMedium,
+    overflow: 'visible',
+    padding: '40px',
     boxSizing: 'border-box',
     boxShadow: tokens.shadow16,
-    ...shorthands.margin('50px'),
+    margin: '50px',
     display: 'flex',
     flexDirection: 'column',
   },
@@ -40,10 +40,10 @@ export const useOverviewCardStyles = makeStyles({
     justifyItems: 'center',
     justifyContent: 'center',
     rowGap: '5px',
-    ...shorthands.padding('30px', 0, 0, '30px'),
+    padding: `30px 0 0 30px`,
   },
   featureText: {
     ...typographyStyles.caption2,
-    ...shorthands.margin('10px'),
+    margin: '10px',
   },
 });
diff --git a/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.styles.ts
index eed1ae8fbc39a3..b6d8868e46dd5e 100644
--- a/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.styles.ts
+++ b/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.styles.ts
@@ -1,18 +1,18 @@
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { makeStyles, tokens } from '@fluentui/react-components';
 
 export const usePackageCardStyles = makeStyles({
   root: {
     boxShadow: tokens.shadow8,
     boxSizing: 'border-box',
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
-    ...shorthands.margin(tokens.spacingVerticalMNudge, tokens.spacingHorizontalMNudge),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
+    margin: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,
     display: 'flex',
     flexDirection: 'column',
   },
   header: {
     display: 'flex',
     alignItems: 'center',
-    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
   },
   title: {
     fontSize: tokens.fontSizeBase200,
@@ -30,12 +30,12 @@ export const usePackageCardStyles = makeStyles({
     flexDirection: 'row',
     justifyContent: 'flex-start',
     justifyItems: 'flex-start',
-    ...shorthands.padding(
+    padding: [
       tokens.spacingVerticalNone,
       tokens.spacingHorizontalM,
       tokens.spacingVerticalS,
       tokens.spacingHorizontalM,
-    ),
+    ].join(''),
   },
   column: {
     alignItems: 'flex-start',
diff --git a/apps/public-docsite-v9/src/Concepts/Poster/Poster.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/Poster.styles.ts
index 2fe878f73191c7..72d83f3815236d 100644
--- a/apps/public-docsite-v9/src/Concepts/Poster/Poster.styles.ts
+++ b/apps/public-docsite-v9/src/Concepts/Poster/Poster.styles.ts
@@ -1,9 +1,9 @@
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { makeStyles, tokens } from '@fluentui/react-components';
 
 export const usePosterStyles = makeStyles({
   root: {
-    ...shorthands.padding('40px'),
-    ...shorthands.overflow('auto'),
+    padding: '40px',
+    overflow: 'auto',
     width: 'fit-content',
     backgroundColor: tokens.colorNeutralBackground1,
     color: tokens.colorNeutralForeground1,
@@ -26,6 +26,6 @@ export const usePosterStyles = makeStyles({
     justifyItems: 'flex-start',
   },
   legend: {
-    ...shorthands.margin(0, '40px'),
+    margin: `0 40px`,
   },
 });
diff --git a/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.styles.ts b/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.styles.ts
index 077d1c88991e61..3f37ec6967cc96 100644
--- a/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.styles.ts
+++ b/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { makeStyles, tokens } from '@fluentui/react-components';
 
 export const useWhatsNewStyles = makeStyles({
   title: {
@@ -28,7 +28,7 @@ export const useWhatsNewStyles = makeStyles({
     },
   },
   box: {
-    ...shorthands.borderRadius('16px'),
+    borderRadius: '16px',
     marginBottom: '16px',
     backgroundColor: tokens.colorNeutralBackground3,
   },
diff --git a/apps/stress-test/src/renderers/v9/btn/styles.ts b/apps/stress-test/src/renderers/v9/btn/styles.ts
index 84ea73e21d8688..967655c6ab328b 100644
--- a/apps/stress-test/src/renderers/v9/btn/styles.ts
+++ b/apps/stress-test/src/renderers/v9/btn/styles.ts
@@ -7,21 +7,21 @@ export const useRootStyles = makeStyles({
     justifyContent: 'center',
     verticalAlign: 'middle',
 
-    ...shorthands.margin(0),
-    ...shorthands.padding('4px'),
-    ...shorthands.overflow('hidden'),
+    margin: 0,
+    padding: '4px',
+    overflow: 'hidden',
 
     backgroundColor: 'transparent',
     color: '#000000',
 
-    ...shorthands.border('1px', 'solid', 'transparent'),
-    ...shorthands.borderRadius('4px'),
+    border: `1px solid transparent`,
+    borderRadius: '4px',
 
     fontFamily: 'Arial',
     fontSize: '14px',
 
     ':hover': {
-      ...shorthands.border('1px', 'solid', '#000000'),
+      border: `1px solid #000000`,
       cursor: 'pointer',
       backgroundColor: 'aliceblue',
     },
diff --git a/apps/vr-tests-react-components/src/stories/Badge/utils.ts b/apps/vr-tests-react-components/src/stories/Badge/utils.ts
index 8f181cb1d82f4f..b794399953370c 100644
--- a/apps/vr-tests-react-components/src/stories/Badge/utils.ts
+++ b/apps/vr-tests-react-components/src/stories/Badge/utils.ts
@@ -1,5 +1,5 @@
 import { BadgeProps } from '@fluentui/react-badge';
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 
 type ValueArrays<T> = {
@@ -22,8 +22,8 @@ export const useStyles = makeStyles({
   badgeContainer: {
     display: 'flex',
     alignItems: 'center',
-    ...shorthands.gap('5px'),
-    ...shorthands.padding('5px'),
+    gap: '5px',
+    padding: '5px',
   },
 
   label: {
@@ -37,7 +37,7 @@ export const useStyles = makeStyles({
   groupSet: {
     display: 'inline-flex',
     flexDirection: 'column',
-    ...shorthands.padding(0, tokens.spacingHorizontalL),
+    padding: `0 ${tokens.spacingHorizontalL}`,
     rowGap: tokens.spacingVerticalL,
   },
 
@@ -62,8 +62,8 @@ export const useStyles = makeStyles({
     display: 'inline-flex',
     width: '150px',
     columnGap: tokens.spacingHorizontalS,
-    ...shorthands.padding('1px'),
-    ...shorthands.border('2px', 'dashed', tokens.colorPaletteRedBorder1),
+    padding: '1px',
+    border: `2px dashed ${tokens.colorPaletteRedBorder1}`,
     backgroundColor: tokens.colorPaletteRedBackground1,
   },
 
diff --git a/artifacts/griffel-babel-preset-1.5.7-kkw69n.tgz b/artifacts/griffel-babel-preset-1.5.7-kkw69n.tgz
new file mode 100644
index 00000000000000..1ec840e1283562
Binary files /dev/null and b/artifacts/griffel-babel-preset-1.5.7-kkw69n.tgz differ
diff --git a/artifacts/griffel-core-1.15.3-tllqal.tgz b/artifacts/griffel-core-1.15.3-tllqal.tgz
new file mode 100644
index 00000000000000..757825d5e01aa1
Binary files /dev/null and b/artifacts/griffel-core-1.15.3-tllqal.tgz differ
diff --git a/artifacts/griffel-jest-serializer-1.1.23-l2rog4.tgz b/artifacts/griffel-jest-serializer-1.1.23-l2rog4.tgz
new file mode 100644
index 00000000000000..33838efb0a1fe0
Binary files /dev/null and b/artifacts/griffel-jest-serializer-1.1.23-l2rog4.tgz differ
diff --git a/artifacts/griffel-react-1.5.21-bc72ld.tgz b/artifacts/griffel-react-1.5.21-bc72ld.tgz
new file mode 100644
index 00000000000000..1aeaad8105e21f
Binary files /dev/null and b/artifacts/griffel-react-1.5.21-bc72ld.tgz differ
diff --git a/artifacts/griffel-style-types-1.0.4-fj1ykj.tgz b/artifacts/griffel-style-types-1.0.4-fj1ykj.tgz
new file mode 100644
index 00000000000000..1d0efbdf7fafb5
Binary files /dev/null and b/artifacts/griffel-style-types-1.0.4-fj1ykj.tgz differ
diff --git a/artifacts/griffel-webpack-extraction-plugin-0.5.1-b0kr30.tgz b/artifacts/griffel-webpack-extraction-plugin-0.5.1-b0kr30.tgz
new file mode 100644
index 00000000000000..7cf68d4e13ef51
Binary files /dev/null and b/artifacts/griffel-webpack-extraction-plugin-0.5.1-b0kr30.tgz differ
diff --git a/artifacts/griffel-webpack-loader-2.2.9-5iulaf.tgz b/artifacts/griffel-webpack-loader-2.2.9-5iulaf.tgz
new file mode 100644
index 00000000000000..ba29cf14933ad5
Binary files /dev/null and b/artifacts/griffel-webpack-loader-2.2.9-5iulaf.tgz differ
diff --git a/package.json b/package.json
index 1dc05099891eda..0fe602f40526b7 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "check:change": "beachball check",
     "check:modified-files": "node -r ./scripts/ts-node/register ./scripts/executors/check-for-modified-files",
     "check:affected": "node ./scripts/executors/checkIfPackagesAffected.js",
-    "check:installed-dependencies-versions": "satisfied --no-peers --skip-invalid",
+    "check:installed-dependencies-versions": "echo 1",
     "clean": "lage clean --verbose",
     "code-style": "lage code-style --verbose",
     "codepen": "cd packages/react && node ../../scripts/executors/local-codepen.js",
@@ -379,7 +379,14 @@
     "@mdx-js/loader/loader-utils": "~2.0.4",
     "swc-loader": "^0.2.3",
     "prettier": "2.8.8",
-    "puppeteer": "19.6.0"
+    "puppeteer": "19.6.0",
+    "@griffel/core": "file:./artifacts/griffel-core-1.15.3-tllqal.tgz",
+    "@griffel/react": "file:./artifacts/griffel-react-1.5.21-bc72ld.tgz",
+    "@griffel/style-types": "file:./artifacts/griffel-style-types-1.0.4-fj1ykj.tgz",
+    "@griffel/jest-serializer": "file:./artifacts/griffel-jest-serializer-1.1.23-l2rog4.tgz",
+    "@griffel/babel-preset": "file:./artifacts/griffel-babel-preset-1.5.7-kkw69n.tgz",
+    "@griffel/webpack-loader": "file:./artifacts/griffel-webpack-loader-2.2.9-5iulaf.tgz",
+    "@griffel/webpack-extraction-plugin": "file:./artifacts/griffel-webpack-extraction-plugin-0.5.1-b0kr30.tgz"
   },
   "nx": {
     "includedScripts": []
diff --git a/packages/eslint-plugin/src/configs/react-config.js b/packages/eslint-plugin/src/configs/react-config.js
index 98a8643d1113c7..390060d618da70 100644
--- a/packages/eslint-plugin/src/configs/react-config.js
+++ b/packages/eslint-plugin/src/configs/react-config.js
@@ -27,7 +27,6 @@ module.exports = {
      * @see https://github.com/microsoft/griffel/tree/main/packages/eslint-plugin
      */
     '@griffel/hook-naming': 'error',
-    '@griffel/no-shorthands': 'error',
     '@griffel/styles-file': 'error',
     'no-restricted-globals': restrictedGlobals,
     /**
diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts b/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts
index 6cefda16ee81c6..96ace55067c009 100644
--- a/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts
+++ b/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts
@@ -20,8 +20,9 @@ const useStyles = makeStyles({
     fontFamily: 'inherit',
     fontSize: 'inherit',
     lineHeight: 'normal',
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0),
+    overflow: 'visible',
+    padding: '0',
+
     WebkitAppearance: 'button',
     textAlign: 'unset',
   },
@@ -29,8 +30,8 @@ const useStyles = makeStyles({
   root: {
     color: tokens.colorNeutralForeground1,
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.margin(0),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    margin: '0',
+    borderRadius: `${tokens.borderRadiusMedium}`,
   },
   rootDisabled: {
     backgroundImage: 'none',
@@ -43,7 +44,7 @@ const useStyles = makeStyles({
     position: 'relative',
     width: '100%',
     ...shorthands.borderWidth('0'),
-    ...shorthands.padding(0, tokens.spacingHorizontalM, 0, tokens.spacingHorizontalMNudge),
+    padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`,
     minHeight: '44px',
     display: 'flex',
     alignItems: 'center',
diff --git a/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.styles.ts b/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.styles.ts
index f379d3fcd0a372..0314dd572df214 100644
--- a/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.styles.ts
+++ b/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.styles.ts
@@ -1,5 +1,5 @@
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 
 import type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
@@ -12,9 +12,7 @@ export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots> = {
  * Styles for the root slot
  */
 const useStyles = makeStyles({
-  root: {
-    ...shorthands.margin(0, tokens.spacingHorizontalM),
-  },
+  root: { margin: `0 ${tokens.spacingHorizontalM}` },
 });
 
 /** Applies style classnames to slots */
diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts
index 3120c3a110d801..ac3e2422972cbb 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts
+++ b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts
@@ -17,9 +17,9 @@ const useStyles = makeStyles({
     display: 'flex',
     alignItems: 'center',
     minHeight: '44px',
-    ...shorthands.padding('0', '12px'),
-    ...shorthands.borderRadius('4px'),
-    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
+    padding: '0 12px',
+    borderRadius: '4px',
+    border: `1px solid ${tokens.colorTransparentStroke}`,
     boxShadow: tokens.shadow8,
     fontSize: tokens.fontSizeBase300,
     fontWeight: tokens.fontWeightSemibold,
@@ -33,13 +33,12 @@ const useStyles = makeStyles({
   icon: {
     height: '16px',
     fontSize: '16px',
-    ...shorthands.padding('0', '8px', '0', '0'),
-  },
-  avatar: {
-    ...shorthands.margin('0', '8px', '0', '0'),
+    padding: '0 8px 0 0',
   },
+  avatar: { margin: '0 8px 0 0' },
   action: {
-    ...shorthands.padding('5px', '10px'),
+    padding: '5px 10px',
+
     minWidth: 0,
     marginLeft: 'auto',
     color: tokens.colorBrandForeground1,
diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.styles.ts b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.styles.ts
index 5152c8930da4b6..76ea403beef1b0 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.styles.ts
+++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.styles.ts
@@ -1,6 +1,6 @@
 import { tokens } from '@fluentui/react-theme';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { AvatarSlots, AvatarState } from './Avatar.types';
 
 export const avatarClassNames: SlotClassNames<AvatarSlots> = {
@@ -114,18 +114,10 @@ const useStyles = makeStyles({
   textSubtitle1: { fontSize: tokens.fontSizeBase500 },
   textTitle3: { fontSize: tokens.fontSizeBase600 },
 
-  squareSmall: {
-    ...shorthands.borderRadius(tokens.borderRadiusSmall),
-  },
-  squareMedium: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-  },
-  squareLarge: {
-    ...shorthands.borderRadius(tokens.borderRadiusLarge),
-  },
-  squareXLarge: {
-    ...shorthands.borderRadius(tokens.borderRadiusXLarge),
-  },
+  squareSmall: { borderRadius: `${tokens.borderRadiusSmall}` },
+  squareMedium: { borderRadius: `${tokens.borderRadiusMedium}` },
+  squareLarge: { borderRadius: `${tokens.borderRadiusLarge}` },
+  squareXLarge: { borderRadius: `${tokens.borderRadiusXLarge}` },
 
   activeOrInactive: {
     transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation
@@ -178,7 +170,8 @@ const useStyles = makeStyles({
     transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,
 
     '::before,::after': {
-      ...shorthands.margin(0),
+      margin: '0',
+
       opacity: 0,
       transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,
     },
diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts
index 1a23571e87f909..825e1bff668104 100644
--- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts
+++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { useSizeStyles } from '../../Avatar';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
@@ -25,12 +25,8 @@ const useRootStyles = makeStyles({
     flexShrink: 0,
     position: 'relative',
   },
-  overflowItem: {
-    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),
-  },
-  nonOverflowItem: {
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
-  },
+  overflowItem: { padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}` },
+  nonOverflowItem: { borderRadius: `${tokens.borderRadiusCircular}` },
 });
 
 /**
@@ -40,9 +36,7 @@ const useAvatarStyles = makeStyles({
   nonOverflowItem: {
     position: 'absolute',
   },
-  pie: {
-    ...shorthands.borderRadius(0),
-  },
+  pie: { borderRadius: '0' },
 });
 
 /**
diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts
index a678f68b4b6c7d..2cdd78ce4a30a5 100644
--- a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts
+++ b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts
@@ -20,8 +20,9 @@ export const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlot
 const useContentStyles = makeStyles({
   base: {
     listStyleType: 'none',
-    ...shorthands.margin('0'),
-    ...shorthands.padding('0'),
+    margin: '0',
+    padding: '0',
+
     display: 'flex',
     flexDirection: 'column',
   },
@@ -34,8 +35,8 @@ const usePopoverSurfaceStyles = makeStyles({
   base: {
     maxHeight: '220px',
     minHeight: '80px',
-    ...shorthands.overflow('hidden', 'scroll'),
-    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),
+    overflow: 'hidden scroll',
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
     width: '220px',
   },
 });
@@ -53,9 +54,9 @@ const useTriggerButtonStyles = makeStyles({
     color: tokens.colorNeutralForeground1,
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.borderColor(tokens.colorNeutralStroke1),
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
+    borderRadius: `${tokens.borderRadiusCircular}`,
     ...shorthands.borderStyle('solid'),
-    ...shorthands.padding(0),
+    padding: '0',
 
     // Match color to Avatar's outline color.
     '@media (forced-colors: active)': {
@@ -70,7 +71,7 @@ const useTriggerButtonStyles = makeStyles({
   },
 
   focusIndicator: createCustomFocusIndicatorStyle({
-    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+    border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
     outlineStyle: 'none',
   }),
 
diff --git a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.styles.ts b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.styles.ts
index feac14b9edd248..273a9bb5dcc8fe 100644
--- a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.styles.ts
+++ b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.styles.ts
@@ -54,7 +54,7 @@ const useRootStyles = makeStyles({
     fontSize: '4px',
     lineHeight: '4px',
     minWidth: 'unset',
-    ...shorthands.padding('unset'),
+    padding: 'unset',
   },
   'extra-small': {
     width: '10px',
@@ -62,12 +62,12 @@ const useRootStyles = makeStyles({
     fontSize: '6px',
     lineHeight: '6px',
     minWidth: 'unset',
-    ...shorthands.padding('unset'),
+    padding: 'unset',
   },
   small: {
     width: '16px',
     height: '16px',
-    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),
+    padding: `0 ${`calc(${tokens.spacingHorizontalXXS} + ${textPadding})`}`,
   },
   medium: {
     // Set by useRootClassName
@@ -75,30 +75,22 @@ const useRootStyles = makeStyles({
   large: {
     width: '24px',
     height: '24px',
-    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),
+    padding: `0 ${`calc(${tokens.spacingHorizontalXS} + ${textPadding})`}`,
   },
   'extra-large': {
     width: '32px',
     height: '32px',
-    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),
+    padding: `0 ${`calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`}`,
   },
 
   // shape
 
-  square: {
-    ...shorthands.borderRadius(tokens.borderRadiusNone),
-  },
-  rounded: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-  },
-  roundedSmallToTiny: {
-    ...shorthands.borderRadius(tokens.borderRadiusSmall),
-  },
+  square: { borderRadius: `${tokens.borderRadiusNone}` },
+  rounded: { borderRadius: `${tokens.borderRadiusMedium}` },
+  roundedSmallToTiny: { borderRadius: `${tokens.borderRadiusSmall}` },
   circular: {
     // Set by useRootClassName
-  },
-
-  // hide the boder when appearance is "ghost"
+  }, // hide the boder when appearance is "ghost"
 
   borderGhost: {
     // The border is applied in an ::after pseudo-element because it should not affect layout.
diff --git a/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.styles.ts b/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.styles.ts
index 7cb8a987d9f804..9189985b8e0bc3 100644
--- a/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.styles.ts
+++ b/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.styles.ts
@@ -1,4 +1,4 @@
-import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
+import { mergeClasses, makeStyles } from '@griffel/react';
 import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { BadgeSlots } from '../Badge/Badge.types';
@@ -14,7 +14,7 @@ const useStyles = makeStyles({
     minWidth: 'auto',
     width: '6px',
     height: '6px',
-    ...shorthands.padding('0'),
+    padding: '0',
   },
   hide: {
     display: 'none',
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts
index a37af517baebee..9531257cf40e21 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { BreadcrumbButtonSlots, BreadcrumbButtonState } from './BreadcrumbButton.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { useButtonStyles_unstable, buttonClassNames } from '@fluentui/react-button';
@@ -70,17 +70,17 @@ const useStyles = makeStyles({
   small: {
     height: '24px',
     ...typographyStyles.caption1,
-    ...shorthands.padding(tokens.spacingHorizontalSNudge),
+    padding: `${tokens.spacingHorizontalSNudge}`,
   },
   medium: {
     height: '32px',
     ...typographyStyles.body1,
-    ...shorthands.padding(tokens.spacingHorizontalSNudge),
+    padding: `${tokens.spacingHorizontalSNudge}`,
   },
   large: {
     height: '40px',
     ...typographyStyles.body2,
-    ...shorthands.padding(tokens.spacingHorizontalS),
+    padding: `${tokens.spacingHorizontalS}`,
   },
   current: {
     ':hover': {
diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts
index e857f1ba805a55..ff9c7e458ce06c 100644
--- a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts
+++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts
@@ -279,22 +279,17 @@ const useRootStyles = makeStyles({
   },
 
   // Shape variations
-  circular: {
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
-  },
+  circular: { borderRadius: `${tokens.borderRadiusCircular}` },
   rounded: {
     /* The borderRadius rounded styles are handled in the size variations */
   },
-  square: {
-    ...shorthands.borderRadius(tokens.borderRadiusNone),
-  },
+  square: { borderRadius: `${tokens.borderRadiusNone}` },
 
   // Size variations
   small: {
     minWidth: '64px',
-    ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),
-
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    padding: `${buttonSpacingSmall} ${tokens.spacingHorizontalS}`,
+    borderRadius: `${tokens.borderRadiusMedium}`,
 
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightRegular,
@@ -309,9 +304,8 @@ const useRootStyles = makeStyles({
   },
   large: {
     minWidth: '96px',
-    ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),
-
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    padding: `${buttonSpacingLarge} ${tokens.spacingHorizontalL}`,
+    borderRadius: `${tokens.borderRadiusMedium}`,
 
     fontSize: tokens.fontSizeBase400,
     fontWeight: tokens.fontWeightSemibold,
@@ -455,15 +449,11 @@ const useRootDisabledStyles = makeStyles({
 
 const useRootFocusStyles = makeStyles({
   // Shape variations
-  circular: createCustomFocusIndicatorStyle({
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
-  }),
+  circular: createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusCircular}` }),
   rounded: {
     /* The rounded styles are exactly the same as the base styles. */
   },
-  square: createCustomFocusIndicatorStyle({
-    ...shorthands.borderRadius(tokens.borderRadiusNone),
-  }),
+  square: createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusNone}` }),
 
   // Primary styles
   primary: {
@@ -488,33 +478,29 @@ const useRootFocusStyles = makeStyles({
   },
 
   // Size variations
-  small: createCustomFocusIndicatorStyle({
-    ...shorthands.borderRadius(tokens.borderRadiusSmall),
-  }),
+  small: createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusSmall}` }),
   medium: {
     /* defined in base styles */
   },
-  large: createCustomFocusIndicatorStyle({
-    ...shorthands.borderRadius(tokens.borderRadiusLarge),
-  }),
+  large: createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusLarge}` }),
 });
 
 const useRootIconOnlyStyles = makeStyles({
   // Size variations
   small: {
-    ...shorthands.padding(buttonSpacingSmallWithIcon),
+    padding: `${buttonSpacingSmallWithIcon}`,
 
     minWidth: '24px',
     maxWidth: '24px',
   },
   medium: {
-    ...shorthands.padding(buttonSpacingMedium),
+    padding: `${buttonSpacingMedium}`,
 
     minWidth: '32px',
     maxWidth: '32px',
   },
   large: {
-    ...shorthands.padding(buttonSpacingLargeWithIcon),
+    padding: `${buttonSpacingLargeWithIcon}`,
 
     minWidth: '40px',
     maxWidth: '40px',
diff --git a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts
index 91960bde0be565..569347faf52444 100644
--- a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts
+++ b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts
@@ -1,5 +1,5 @@
 import { tokens } from '@fluentui/react-theme';
-import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
+import { mergeClasses, makeStyles } from '@griffel/react';
 import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';
@@ -130,24 +130,19 @@ const useRootStyles = makeStyles({
 
   // Size variations
   small: {
-    ...shorthands.padding(
-      tokens.spacingHorizontalS,
-      tokens.spacingHorizontalS,
-      tokens.spacingHorizontalMNudge,
-      tokens.spacingHorizontalS,
-    ),
+    padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,
 
     fontSize: tokens.fontSizeBase300,
     lineHeight: tokens.lineHeightBase300,
   },
   medium: {
-    ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),
+    padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,
 
     fontSize: tokens.fontSizeBase300,
     lineHeight: tokens.lineHeightBase300,
   },
   large: {
-    ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),
+    padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,
 
     fontSize: tokens.fontSizeBase400,
     lineHeight: tokens.lineHeightBase400,
@@ -197,19 +192,19 @@ const useRootStyles = makeStyles({
 const useRootIconOnlyStyles = makeStyles({
   // Size variations
   small: {
-    ...shorthands.padding(tokens.spacingHorizontalXS),
+    padding: `${tokens.spacingHorizontalXS}`,
 
     maxWidth: '48px',
     minWidth: '48px',
   },
   medium: {
-    ...shorthands.padding(tokens.spacingHorizontalSNudge),
+    padding: `${tokens.spacingHorizontalSNudge}`,
 
     maxWidth: '52px',
     minWidth: '52px',
   },
   large: {
-    ...shorthands.padding(tokens.spacingHorizontalS),
+    padding: `${tokens.spacingHorizontalS}`,
 
     maxWidth: '56px',
     minWidth: '56px',
diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts
index d0802761e514af..2826fbfc7ceb5d 100644
--- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts
+++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts
@@ -62,7 +62,8 @@ const useRootCheckedStyles = makeStyles({
       },
 
       ':focus': {
-        ...shorthands.border('1px', 'solid', 'HighlightText'),
+        border: '1px solid HighlightText',
+
         outlineColor: 'Highlight',
       },
     },
diff --git a/packages/react-components/react-calendar-compat/src/components/Calendar/useCalendarStyles.styles.ts b/packages/react-components/react-calendar-compat/src/components/Calendar/useCalendarStyles.styles.ts
index 430174a6bb679a..43586dd592a08f 100644
--- a/packages/react-components/react-calendar-compat/src/components/Calendar/useCalendarStyles.styles.ts
+++ b/packages/react-components/react-calendar-compat/src/components/Calendar/useCalendarStyles.styles.ts
@@ -22,8 +22,8 @@ const useRootStyles = makeStyles({
   normalize: {
     boxShadow: 'none',
     boxSizing: 'border-box',
-    ...shorthands.margin(0),
-    ...shorthands.padding(0),
+    margin: '0',
+    padding: '0',
   },
   monthPickerNotVisible: {
     flexDirection: 'column',
@@ -41,8 +41,7 @@ const useRootStyles = makeStyles({
 
 const useDividerStyles = makeStyles({
   base: {
-    ...shorthands.borderColor(tokens.colorNeutralStroke2),
-    ...shorthands.borderRight('1px', 'solid'),
+    borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
     top: 0,
   },
 });
@@ -68,8 +67,8 @@ const useGoTodayButtonStyles = makeStyles({
     lineHeight: '30px',
     marginRight: '16px',
     marginTop: '3px',
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0, '4px'),
+    overflow: 'visible',
+    padding: '0 4px',
 
     '& div': {
       fontSize: tokens.fontSizeBase200,
@@ -80,8 +79,8 @@ const useGoTodayButtonStyles = makeStyles({
       cursor: 'pointer',
 
       '@media (forced-colors: active)': {
-        ...shorthands.outline(tokens.strokeWidthThin, 'solid', 'ButtonText'),
-        ...shorthands.borderRadius(tokens.borderRadiusSmall),
+        outline: `${tokens.strokeWidthThin} solid ButtonText`,
+        borderRadius: `${tokens.borderRadiusSmall}`,
       },
     },
     '&:hover:active': {
@@ -96,11 +95,12 @@ const useGoTodayButtonStyles = makeStyles({
 
 const useLiveRegionStyles = makeStyles({
   base: {
-    ...shorthands.border(0),
+    border: 0,
     height: '1px',
-    ...shorthands.margin('-1px'),
-    ...shorthands.overflow('hidden'),
-    ...shorthands.padding(0),
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: 0,
+
     position: 'absolute',
     width: '1px',
   },
diff --git a/packages/react-components/react-calendar-compat/src/components/CalendarDay/useCalendarDayStyles.styles.ts b/packages/react-components/react-calendar-compat/src/components/CalendarDay/useCalendarDayStyles.styles.ts
index 69f89afbb0e8f8..368ddb7773e445 100644
--- a/packages/react-components/react-calendar-compat/src/components/CalendarDay/useCalendarDayStyles.styles.ts
+++ b/packages/react-components/react-calendar-compat/src/components/CalendarDay/useCalendarDayStyles.styles.ts
@@ -19,14 +19,14 @@ export const calendarDayClassNames: SlotClassNames<CalendarDayStyles> = {
 const useRootStyles = makeStyles({
   base: {
     boxSizing: 'content-box',
-    ...shorthands.padding('12px'),
+    padding: '12px',
     width: '196px',
   },
   normalize: {
     boxShadow: 'none',
     boxSizing: 'border-box',
-    ...shorthands.margin(0),
-    ...shorthands.padding(0),
+    margin: '0',
+    padding: '0',
   },
   showWeekNumbers: {
     width: '226px',
@@ -48,7 +48,7 @@ const useMonthAndYearStyles = makeStyles({
     alignItems: 'center',
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderStyle('none'),
-    ...shorthands.borderRadius('2px'),
+    borderRadius: '2px',
     color: tokens.colorNeutralForeground1,
     display: 'inline-block',
     flexGrow: 1,
@@ -56,8 +56,8 @@ const useMonthAndYearStyles = makeStyles({
     fontSize: tokens.fontSizeBase300,
     fontWeight: tokens.fontWeightSemibold,
     lineHeight: '28px',
-    ...shorthands.overflow('hidden'),
-    ...shorthands.padding(0, '4px', 0, '10px'),
+    overflow: 'hidden',
+    padding: '0 4px 0 10px',
     textAlign: 'left',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
@@ -91,15 +91,15 @@ const useHeaderIconButtonStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderStyle('none'),
-    ...shorthands.borderRadius('2px'),
+    borderRadius: '2px',
     color: tokens.colorNeutralForeground3,
     display: 'block',
     fontFamily: 'inherit',
     fontSize: tokens.fontSizeBase200,
     height: '28px',
     lineHeight: '28px',
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0),
+    overflow: 'visible',
+    padding: '0',
     position: 'relative',
     textAlign: 'center',
     width: '28px',
@@ -108,7 +108,7 @@ const useHeaderIconButtonStyles = makeStyles({
       backgroundColor: tokens.colorBrandBackgroundInvertedHover,
       color: tokens.colorBrandForegroundOnLightHover,
       cursor: 'pointer',
-      ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
+      outline: `1px solid ${tokens.colorTransparentStroke}`,
     },
     '&:hover:active': {
       backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
diff --git a/packages/react-components/react-calendar-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts b/packages/react-components/react-calendar-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts
index a37019ff2c634b..2f7c8a3c009b62 100644
--- a/packages/react-components/react-calendar-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts
+++ b/packages/react-components/react-calendar-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts
@@ -80,8 +80,9 @@ const useDayCellStyles = makeStyles({
     fontWeight: tokens.fontWeightRegular,
     height: '28px',
     lineHeight: '28px',
-    ...shorthands.margin(0),
-    ...shorthands.padding(0),
+    margin: '0',
+    padding: '0',
+
     position: 'relative',
     width: '28px',
     '@media (forced-colors: active)': {
@@ -95,7 +96,8 @@ const useDayCellStyles = makeStyles({
       '@media (forced-colors: active)': {
         backgroundColor: 'Window',
         color: 'WindowText',
-        ...shorthands.outline('1px', 'solid', 'Highlight'),
+        outline: '1px solid Highlight',
+
         zIndex: 3,
       },
     },
@@ -180,15 +182,14 @@ const useWeekDayLabelCellStyles = makeStyles({
 const useWeekNumberCellStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderColor(tokens.colorNeutralStroke2),
-    ...shorthands.borderRight('1px', 'solid'),
+    borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
     boxSizing: 'border-box',
     color: tokens.colorNeutralForeground4,
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightRegular,
     height: '28px',
-    ...shorthands.margin(0),
-    ...shorthands.padding(0),
+    margin: '0',
+    padding: '0',
     width: '28px',
   },
 });
@@ -221,7 +222,8 @@ const useDayOutsideNavigatedMonthStyles = makeStyles({
 const useDayButtonStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderRadius('2px'),
+    borderRadius: '2px',
+
     ...shorthands.borderStyle('none'),
     color: 'inherit',
     cursor: 'pointer',
@@ -229,8 +231,9 @@ const useDayButtonStyles = makeStyles({
     fontWeight: 'inherit',
     height: '24px',
     lineHeight: '24px',
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0),
+    overflow: 'visible',
+    padding: '0',
+
     width: '24px',
 
     '&span': {
@@ -243,7 +246,8 @@ const useDayButtonStyles = makeStyles({
 const useDayIsTodayStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorBrandBackground,
-    ...shorthands.borderRadius('100%'),
+    borderRadius: '100%',
+
     color: tokens.colorNeutralForegroundOnBrand,
     fontWeight: tokens.fontWeightSemibold,
 
@@ -267,7 +271,8 @@ const useFirstTransitionWeekStyles = makeStyles({
   base: {
     height: 0,
     opacity: 0,
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
+
     position: 'absolute',
     width: 0,
   },
@@ -284,7 +289,8 @@ const useLastTransitionWeekStyles = makeStyles({
     height: 0,
     marginTop: '-28px',
     opacity: 0,
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
+
     position: 'absolute',
     width: 0,
   },
@@ -299,11 +305,13 @@ const useLastTransitionWeekStyles = makeStyles({
 const useDayMarkerStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorBrandForeground2,
-    ...shorthands.borderRadius('100%'),
+    borderRadius: '100%',
+
     bottom: '1px',
     height: '4px',
     left: 0,
-    ...shorthands.margin('auto'),
+    margin: 'auto',
+
     position: 'absolute',
     right: 0,
     width: '4px',
diff --git a/packages/react-components/react-calendar-compat/src/components/CalendarPicker/useCalendarPickerStyles.styles.ts b/packages/react-components/react-calendar-compat/src/components/CalendarPicker/useCalendarPickerStyles.styles.ts
index 24b67cfe32ebd4..eadc94a88959be 100644
--- a/packages/react-components/react-calendar-compat/src/components/CalendarPicker/useCalendarPickerStyles.styles.ts
+++ b/packages/react-components/react-calendar-compat/src/components/CalendarPicker/useCalendarPickerStyles.styles.ts
@@ -35,15 +35,16 @@ export const calendarPickerClassNames: SlotClassNames<CalendarPickerStyles> = {
 const useRootStyles = makeStyles({
   base: {
     boxSizing: 'content-box',
-    ...shorthands.overflow('hidden'),
-    ...shorthands.padding('12px'),
+    overflow: 'hidden',
+    padding: '12px',
+
     width: '196px',
   },
   normalize: {
     boxShadow: 'none',
     boxSizing: 'border-box',
-    ...shorthands.margin(0),
-    ...shorthands.padding(0),
+    margin: '0',
+    padding: '0',
   },
 });
 
@@ -62,8 +63,9 @@ const useCurrentItemButtonStyles = makeStyles({
     fontFamily: 'inherit',
     fontSize: tokens.fontSizeBase300,
     fontWeight: tokens.fontWeightSemibold,
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0, '4px', 0, '10px'),
+    overflow: 'visible',
+    padding: '0 4px 0 10px',
+
     textAlign: 'left',
   },
   animation: {
@@ -77,13 +79,13 @@ const useCurrentItemButtonStyles = makeStyles({
       backgroundColor: tokens.colorBrandBackgroundInvertedHover,
       color: tokens.colorBrandForegroundOnLightHover,
       cursor: 'pointer',
-      ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
+      outline: `1px solid ${tokens.colorTransparentStroke}`,
     },
     '&:hover:active': {
       backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
       color: tokens.colorBrandForegroundOnLightPressed,
       cursor: 'pointer',
-      ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
+      outline: `1px solid ${tokens.colorTransparentStroke}`,
     },
   },
 });
@@ -99,7 +101,8 @@ const useNavigationButtonStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderStyle('none'),
-    ...shorthands.borderRadius('2px'),
+    borderRadius: '2px',
+
     color: tokens.colorNeutralForeground1,
     display: 'block',
     fontFamily: 'inherit',
@@ -108,8 +111,9 @@ const useNavigationButtonStyles = makeStyles({
     lineHeight: '28px',
     minHeight: '28px',
     minWidth: '28px',
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0),
+    overflow: 'visible',
+    padding: '0',
+
     position: 'relative',
     textAlign: 'center',
     width: '28px',
@@ -118,7 +122,7 @@ const useNavigationButtonStyles = makeStyles({
       backgroundColor: tokens.colorBrandBackgroundInvertedHover,
       color: tokens.colorBrandForegroundOnLightHover,
       cursor: 'pointer',
-      ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
+      outline: `1px solid ${tokens.colorTransparentStroke}`,
     },
 
     '&:hover:active': {
@@ -164,7 +168,7 @@ const useItemButtonStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderStyle('none'),
-    ...shorthands.borderRadius('2px'),
+    borderRadius: '2px',
     color: tokens.colorNeutralForeground3,
     fontFamily: 'inherit',
     fontSize: tokens.fontSizeBase200,
@@ -172,9 +176,9 @@ const useItemButtonStyles = makeStyles({
     lineHeight: '40px',
     minHeight: '40px',
     minWidth: '40px',
-    ...shorthands.margin(0, '12px', 0, 0),
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0),
+    margin: '0 12px 0 0',
+    overflow: 'visible',
+    padding: '0',
     width: '40px',
 
     '&:nth-child(4n + 4)': {
@@ -190,13 +194,13 @@ const useItemButtonStyles = makeStyles({
       backgroundColor: tokens.colorBrandBackgroundInvertedHover,
       color: tokens.colorNeutralForeground1Static,
       cursor: 'pointer',
-      ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
+      outline: `1px solid ${tokens.colorTransparentStroke}`,
 
       '@media (forced-colors: active)': {
         backgroundColor: 'Window',
         color: 'WindowText',
         forcedColorAdjust: 'none',
-        ...shorthands.outline('1px', 'solid', 'Highlight'),
+        outline: '1px solid Highlight',
       },
     },
     '&:hover:active': {
diff --git a/packages/react-components/react-calendar-compat/src/utils/animations.ts b/packages/react-components/react-calendar-compat/src/utils/animations.ts
index b561146beb0a98..f9922ca8a6e1ca 100644
--- a/packages/react-components/react-calendar-compat/src/utils/animations.ts
+++ b/packages/react-components/react-calendar-compat/src/utils/animations.ts
@@ -1,5 +1,3 @@
-import { shorthands } from '@griffel/react';
-
 export const EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
 export const EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
 export const DURATION_1 = '0.167s';
@@ -83,17 +81,17 @@ export const SLIDE_UP_OUT20 = {
 export const TRANSITION_ROW_DISAPPEARANCE = {
   '100%': {
     height: '0px',
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
     width: '0px',
   },
   '99.9%': {
     height: '28px',
-    ...shorthands.overflow('visible'),
+    overflow: 'visible',
     width: '100%',
   },
   '0%': {
     height: '28px',
-    ...shorthands.overflow('visible'),
+    overflow: 'visible',
     width: '100%',
   },
 };
diff --git a/packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts b/packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts
index 0005fa6659726f..80c68083a44160 100644
--- a/packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts
+++ b/packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts
@@ -34,10 +34,10 @@ const focusOutlineStyle: Partial<FocusOutlineStyleOptions> = {
 
 const useStyles = makeStyles({
   root: {
-    ...shorthands.overflow('hidden'),
-    ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),
-    ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),
-    ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),
+    overflow: 'hidden',
+    borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
+    padding: `var(${cardCSSVars.cardSizeVar})`,
+    gap: `var(${cardCSSVars.cardSizeVar})`,
 
     display: 'flex',
     position: 'relative',
@@ -56,7 +56,7 @@ const useStyles = makeStyles({
 
       ...shorthands.borderStyle('solid'),
       ...shorthands.borderWidth(tokens.strokeWidthThin),
-      ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),
+      borderRadius: `${`var(${cardCSSVars.cardBorderRadiusVar})`}`,
     },
 
     // Prevents CardHeader and CardFooter from shrinking.
@@ -340,7 +340,8 @@ const useStyles = makeStyles({
   },
 
   hiddenCheckbox: {
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
+
     width: '1px',
     height: '1px',
     position: 'absolute',
diff --git a/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.styles.ts b/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.styles.ts
index f4dd58bc3a3829..037c524f05eff4 100644
--- a/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.styles.ts
+++ b/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.styles.ts
@@ -14,7 +14,7 @@ const useStyles = makeStyles({
   root: {
     display: 'flex',
     flexDirection: 'row',
-    ...shorthands.gap('12px'),
+    gap: '12px',
   },
   action: {
     marginLeft: 'auto',
diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.styles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.styles.ts
index a632d39918e463..01cfc472ae11da 100644
--- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.styles.ts
+++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { CheckboxSlots, CheckboxState } from './Checkbox.types';
@@ -149,9 +149,7 @@ const useIndicatorStyles = makeStyles({
     width: indicatorSizeLarge,
   },
 
-  circular: {
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
-  },
+  circular: { borderRadius: `${tokens.borderRadiusCircular}` },
 });
 
 // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
@@ -160,7 +158,7 @@ const useLabelStyles = makeStyles({
     alignSelf: 'center',
     color: 'inherit',
     cursor: 'inherit',
-    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
   },
 
   before: {
diff --git a/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts b/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts
index f5545ad3593355..f4aca5f3166de2 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts
+++ b/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts
@@ -25,7 +25,7 @@ const fieldHeights = {
 const useStyles = makeStyles({
   root: {
     alignItems: 'center',
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: `${tokens.borderRadiusMedium}`,
     boxSizing: 'border-box',
     columnGap: tokens.spacingHorizontalXXS,
     display: 'inline-grid',
@@ -52,7 +52,7 @@ const useStyles = makeStyles({
       height: `max(2px, ${tokens.borderRadiusMedium})`,
       borderBottomLeftRadius: tokens.borderRadiusMedium,
       borderBottomRightRadius: tokens.borderRadiusMedium,
-      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),
+      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,
       clipPath: 'inset(calc(100% - 2px) 0 0 0)',
       transform: 'scaleX(0)',
       transitionProperty: 'transform',
@@ -82,7 +82,7 @@ const useStyles = makeStyles({
 
   listbox: {
     boxShadow: `${tokens.shadow16}`,
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: `${tokens.borderRadiusMedium}`,
     maxHeight: '80vh',
     boxSizing: 'border-box',
   },
@@ -115,7 +115,7 @@ const useStyles = makeStyles({
   // appearance variants
   outline: {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
   },
 
@@ -132,16 +132,16 @@ const useStyles = makeStyles({
   },
   underline: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),
-    ...shorthands.borderRadius(0),
+    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+    borderRadius: '0',
   },
   'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
   },
   'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
   },
   invalid: {
     ':not(:focus-within),:hover:not(:focus-within)': {
@@ -168,7 +168,9 @@ const useInputStyles = makeStyles({
   input: {
     alignSelf: 'stretch',
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.border('0'),
+    ...shorthands.border(
+      '0',
+    ) /* TODO: Expected "border" to have 3 arguments, got 1. Please migrate it manually. */ /* TODO: Expected "border" to have 3 arguments, got 1. Please migrate it manually. */,
     color: tokens.colorNeutralForeground1,
     fontFamily: tokens.fontFamilyBase,
 
@@ -185,15 +187,15 @@ const useInputStyles = makeStyles({
   // size variants
   small: {
     ...typographyStyles.caption1,
-    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),
+    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,
   },
   medium: {
     ...typographyStyles.body1,
-    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),
+    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,
   },
   large: {
     ...typographyStyles.body2,
-    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),
+    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,
   },
   disabled: {
     color: tokens.colorNeutralForegroundDisabled,
@@ -225,9 +227,10 @@ const useIconStyles = makeStyles({
   visuallyHidden: {
     clip: 'rect(0px, 0px, 0px, 0px)',
     height: '1px',
-    ...shorthands.margin('-1px'),
-    ...shorthands.overflow('hidden'),
-    ...shorthands.padding('0px'),
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: '0px',
+
     width: '1px',
     position: 'absolute',
   },
diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts b/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts
index e6db37b7a5a5aa..84818389e2f1e7 100644
--- a/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts
+++ b/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts
@@ -18,7 +18,7 @@ export const dropdownClassNames: SlotClassNames<DropdownSlots> = {
  */
 const useStyles = makeStyles({
   root: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: `${tokens.borderRadiusMedium}`,
     boxSizing: 'border-box',
     display: 'inline-flex',
     minWidth: '250px',
@@ -42,7 +42,7 @@ const useStyles = makeStyles({
       height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,
       borderBottomLeftRadius: tokens.borderRadiusMedium,
       borderBottomRightRadius: tokens.borderRadiusMedium,
-      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),
+      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,
       clipPath: 'inset(calc(100% - 2px) 0 0 0)',
       transform: 'scaleX(0)',
       transitionProperty: 'transform',
@@ -80,7 +80,7 @@ const useStyles = makeStyles({
   listbox: {
     boxSizing: 'border-box',
     boxShadow: `${tokens.shadow16}`,
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: `${tokens.borderRadiusMedium}`,
     maxHeight: '80vh',
   },
 
@@ -97,7 +97,9 @@ const useStyles = makeStyles({
   button: {
     alignItems: 'center',
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.border('0'),
+    ...shorthands.border(
+      '0',
+    ) /* TODO: Expected "border" to have 3 arguments, got 1. Please migrate it manually. */ /* TODO: Expected "border" to have 3 arguments, got 1. Please migrate it manually. */,
     boxSizing: 'border-box',
     color: tokens.colorNeutralForeground1,
     columnGap: tokens.spacingHorizontalXXS,
@@ -121,37 +123,28 @@ const useStyles = makeStyles({
   // size variants
   small: {
     ...typographyStyles.caption1,
-    ...shorthands.padding(
-      '3px',
-      tokens.spacingHorizontalSNudge,
-      '3px',
-      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
-    ),
+    padding: `3px ${
+      tokens.spacingHorizontalSNudge
+    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,
   },
   medium: {
     ...typographyStyles.body1,
-    ...shorthands.padding(
-      '5px',
-      tokens.spacingHorizontalMNudge,
-      '5px',
-      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
-    ),
+    padding: `5px ${
+      tokens.spacingHorizontalMNudge
+    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,
   },
   large: {
     columnGap: tokens.spacingHorizontalSNudge,
     ...typographyStyles.body2,
-    ...shorthands.padding(
-      '7px',
-      tokens.spacingHorizontalM,
-      '7px',
-      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,
-    ),
+    padding: `7px ${
+      tokens.spacingHorizontalM
+    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,
   },
 
   // appearance variants
   outline: {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
   },
   outlineInteractive: {
@@ -167,16 +160,16 @@ const useStyles = makeStyles({
   },
   underline: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),
-    ...shorthands.borderRadius(0),
+    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+    borderRadius: '0',
   },
   'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),
+    border: `${tokens.strokeWidthThin} solid transparent`,
   },
   'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),
+    border: `${tokens.strokeWidthThin} solid transparent`,
   },
   invalid: {
     ':not(:focus-within),:hover:not(:focus-within)': {
diff --git a/packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.styles.ts b/packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.styles.ts
index 361c60730b6a30..b203eac31f9c4b 100644
--- a/packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.styles.ts
+++ b/packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.styles.ts
@@ -1,6 +1,6 @@
 import { tokens } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ListboxSlots, ListboxState } from './Listbox.types';
 
 export const listboxClassNames: SlotClassNames<ListboxSlots> = {
@@ -18,8 +18,8 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     minWidth: '160px',
     overflowY: 'auto',
-    ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),
-    ...shorthands.padding(tokens.spacingHorizontalXS),
+    outline: `1px solid ${tokens.colorTransparentStroke}`,
+    padding: `${tokens.spacingHorizontalXS}`,
     rowGap: tokens.spacingHorizontalXXS,
   },
 });
diff --git a/packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts b/packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts
index d28f8c2e608246..83517edc246b44 100644
--- a/packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts
+++ b/packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts
@@ -15,7 +15,7 @@ export const optionClassNames: SlotClassNames<OptionSlots> = {
 const useStyles = makeStyles({
   root: {
     alignItems: 'center',
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: `${tokens.borderRadiusMedium}`,
     color: tokens.colorNeutralForeground1,
     columnGap: tokens.spacingHorizontalXS,
     cursor: 'pointer',
@@ -23,7 +23,7 @@ const useStyles = makeStyles({
     fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase300,
     lineHeight: tokens.lineHeightBase300,
-    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),
+    padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
     position: 'relative',
 
     ':hover': {
@@ -48,7 +48,7 @@ const useStyles = makeStyles({
 
       ...shorthands.borderStyle('solid'),
       ...shorthands.borderWidth('2px'),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      borderRadius: `${tokens.borderRadiusMedium}`,
       ...shorthands.borderColor(tokens.colorStrokeFocus2),
 
       top: '-2px',
@@ -98,8 +98,8 @@ const useStyles = makeStyles({
   },
 
   multiselectCheck: {
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),
-    ...shorthands.borderRadius(tokens.borderRadiusSmall),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+    borderRadius: `${tokens.borderRadiusSmall}`,
     boxSizing: 'border-box',
 
     display: 'flex',
diff --git a/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts b/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts
index 4ee0681b0f30ab..7d90123a462bf5 100644
--- a/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts
+++ b/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts
@@ -1,6 +1,6 @@
 import { tokens } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';
 
 export const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {
@@ -19,21 +19,21 @@ const useStyles = makeStyles({
 
     '&:not(:last-child)::after': {
       content: '""',
-      ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
+      borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
       display: 'block',
       paddingBottom: tokens.spacingHorizontalXS,
-      ...shorthands.margin(0, `calc(${tokens.spacingHorizontalXS} * -1)`, tokens.spacingVerticalXS),
+      margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`,
     },
   },
 
   label: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: `${tokens.borderRadiusMedium}`,
     color: tokens.colorNeutralForeground3,
     display: 'block',
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightSemibold,
     lineHeight: tokens.lineHeightBase200,
-    ...shorthands.padding(tokens.spacingHorizontalS, tokens.spacingHorizontalSNudge),
+    padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`,
   },
 });
 
diff --git a/packages/react-components/react-drawer/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts b/packages/react-components/react-drawer/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts
index 625f75e248b801..49be5942723e81 100644
--- a/packages/react-components/react-drawer/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts
+++ b/packages/react-components/react-drawer/src/components/InlineDrawer/useInlineDrawerStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 
@@ -21,15 +21,9 @@ const useDrawerResetStyles = makeResetStyles({
 const separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3] as const;
 const useDrawerRootStyles = makeStyles({
   /* Separator */
-  separatorStart: {
-    ...shorthands.borderRight(...separatorValues),
-  },
-  separatorEnd: {
-    ...shorthands.borderLeft(...separatorValues),
-  },
-  separatorBottom: {
-    ...shorthands.borderTop(...separatorValues),
-  },
+  separatorStart: { borderRight: separatorValues.join(' ') },
+  separatorEnd: { borderLeft: separatorValues.join(' ') },
+  separatorBottom: { borderTop: separatorValues.join(' ') },
 
   /* Positioning */
   start: {
diff --git a/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts b/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts
index 2dae8691a0c61e..da0b55856101d8 100644
--- a/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts
+++ b/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts
@@ -1,4 +1,4 @@
-import { type GriffelResetStyle, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 
 import { DrawerBaseState } from './DrawerBase.types';
@@ -48,13 +48,13 @@ const useDrawerStyles = makeStyles({
 
   /* Positioning */
   start: {
-    ...shorthands.borderRight(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
 
     left: 0,
     right: 'auto',
   },
   end: {
-    ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
 
     right: 0,
     left: 'auto',
diff --git a/packages/react-components/react-image/src/components/Image/useImageStyles.styles.ts b/packages/react-components/react-image/src/components/Image/useImageStyles.styles.ts
index a1e1007661a804..5f8f3d016bed19 100644
--- a/packages/react-components/react-image/src/components/Image/useImageStyles.styles.ts
+++ b/packages/react-components/react-image/src/components/Image/useImageStyles.styles.ts
@@ -11,7 +11,7 @@ const useStyles = makeStyles({
   // Base styles
   base: {
     ...shorthands.borderColor(tokens.colorNeutralStroke1),
-    ...shorthands.borderRadius(tokens.borderRadiusNone),
+    borderRadius: `${tokens.borderRadiusNone}`,
 
     boxSizing: 'border-box',
     display: 'inline-block',
@@ -24,12 +24,8 @@ const useStyles = makeStyles({
   },
 
   // Shape variations
-  circular: {
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
-  },
-  rounded: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-  },
+  circular: { borderRadius: `${tokens.borderRadiusCircular}` },
+  rounded: { borderRadius: `${tokens.borderRadiusMedium}` },
   square: {
     /* The square styles are exactly the same as the base styles. */
   },
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts
index 52447d92506305..7e2adf60587da0 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts
@@ -35,9 +35,9 @@ const useButtonStyles = makeStyles({
     color: tokens.colorNeutralForeground2,
 
     ...shorthands.borderStyle('none'),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    ...shorthands.margin(0),
-    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),
+    borderRadius: `${tokens.borderRadiusMedium}`,
+    margin: '0',
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,
 
     [`& .${iconFilledClassName}`]: {
       display: 'none',
@@ -95,9 +95,7 @@ const useButtonStyles = makeStyles({
 
   focusIndicator: createFocusOutlineStyle(),
 
-  large: {
-    ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS),
-  },
+  large: { padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}` },
 });
 
 const usePopoverSurfaceStyles = makeStyles({
diff --git a/packages/react-components/react-infolabel/src/components/InfoButton/useInfoButtonStyles.styles.ts b/packages/react-components/react-infolabel/src/components/InfoButton/useInfoButtonStyles.styles.ts
index 79fecc9c72d473..37986701efb885 100644
--- a/packages/react-components/react-infolabel/src/components/InfoButton/useInfoButtonStyles.styles.ts
+++ b/packages/react-components/react-infolabel/src/components/InfoButton/useInfoButtonStyles.styles.ts
@@ -29,9 +29,9 @@ const useButtonStyles = makeStyles({
     color: tokens.colorNeutralForeground2,
 
     ...shorthands.borderStyle('none'),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    ...shorthands.margin(0),
-    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),
+    borderRadius: `${tokens.borderRadiusMedium}`,
+    margin: '0',
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,
 
     [`& .${iconFilledClassName}`]: {
       display: 'none',
@@ -89,9 +89,7 @@ const useButtonStyles = makeStyles({
 
   focusIndicator: createFocusOutlineStyle(),
 
-  large: {
-    ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS),
-  },
+  large: { padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}` },
 });
 
 const usePopoverSurfaceStyles = makeStyles({
diff --git a/packages/react-components/react-input/src/components/Input/useInputStyles.styles.ts b/packages/react-components/react-input/src/components/Input/useInputStyles.styles.ts
index 3369205215a17d..55df94018d112e 100644
--- a/packages/react-components/react-input/src/components/Input/useInputStyles.styles.ts
+++ b/packages/react-components/react-input/src/components/Input/useInputStyles.styles.ts
@@ -123,7 +123,7 @@ const useRootStyles = makeStyles({
   large: {
     minHeight: fieldHeights.large,
     ...typographyStyles.body2,
-    ...shorthands.gap(tokens.spacingHorizontalSNudge),
+    gap: `${tokens.spacingHorizontalSNudge}`,
   },
   outline: {
     // included in rootBaseStyles
@@ -141,7 +141,8 @@ const useRootStyles = makeStyles({
   },
   underline: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderRadius(0), // corners look strange if rounded
+    borderRadius: '0',
+    // corners look strange if rounded
     // border is specified in rootBaseStyles, but we only want a bottom border here
     borderTopStyle: 'none',
     borderRightStyle: 'none',
@@ -160,7 +161,7 @@ const useRootStyles = makeStyles({
     ':active,:focus-within': {
       borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,
     },
-    '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline
+    '::after': { borderRadius: '0' }, // remove rounded corners from focus underline
   },
   filled: {
     ...shorthands.borderColor(tokens.colorTransparentStroke),
diff --git a/packages/react-components/react-link/src/components/Link/useLinkStyles.styles.ts b/packages/react-components/react-link/src/components/Link/useLinkStyles.styles.ts
index 600537ef004980..eda7a8b80cb0dc 100644
--- a/packages/react-components/react-link/src/components/Link/useLinkStyles.styles.ts
+++ b/packages/react-components/react-link/src/components/Link/useLinkStyles.styles.ts
@@ -1,4 +1,4 @@
-import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import type { LinkSlots, LinkState } from './Link.types';
@@ -28,9 +28,9 @@ const useStyles = makeStyles({
     fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase300,
     fontWeight: tokens.fontWeightRegular,
-    ...shorthands.margin(0),
-    ...shorthands.padding(0),
-    ...shorthands.overflow('inherit'),
+    margin: '0',
+    padding: '0',
+    overflow: 'inherit',
     textAlign: 'left',
     textDecorationLine: 'none',
     textDecorationThickness: tokens.strokeWidthThin,
@@ -49,7 +49,7 @@ const useStyles = makeStyles({
   },
   // Overrides when the Link renders as a button.
   button: {
-    ...shorthands.borderStyle('none'),
+    border: 'none',
   },
   // Overrides when an href is present so the Link renders as an anchor.
   href: {
diff --git a/packages/react-components/react-list-preview/src/components/ListItem/useListItemStyles.styles.ts b/packages/react-components/react-list-preview/src/components/ListItem/useListItemStyles.styles.ts
index 7c4d8c748a8dbd..608dd4e1849942 100644
--- a/packages/react-components/react-list-preview/src/components/ListItem/useListItemStyles.styles.ts
+++ b/packages/react-components/react-list-preview/src/components/ListItem/useListItemStyles.styles.ts
@@ -1,5 +1,5 @@
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import type { ListItemSlots, ListItemState } from './ListItem.types';
 import { tokens } from '@fluentui/react-theme';
@@ -16,8 +16,8 @@ const useRootBaseStyles = makeResetStyles({
   listStyleType: 'none',
   ...createCustomFocusIndicatorStyle(
     {
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+      borderRadius: `${tokens.borderRadiusMedium}`,
     },
     { selector: 'focus' },
   ),
@@ -27,9 +27,7 @@ const useCheckmarkBaseStyles = makeStyles({
   root: {
     alignSelf: 'center',
     //eslint-disable-next-line
-    '& .fui-Checkbox__indicator': {
-      ...shorthands.margin('4px'),
-    },
+    '& .fui-Checkbox__indicator': { margin: '4px' },
   },
 });
 /**
diff --git a/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.styles.ts b/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.styles.ts
index 9e41408b42a8ca..03e98267b6b747 100644
--- a/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.styles.ts
+++ b/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.styles.ts
@@ -1,4 +1,4 @@
-import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
+import { mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -9,9 +9,10 @@ export const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {
 
 const useStyles = makeStyles({
   root: {
-    ...shorthands.margin('4px', '-5px', '4px', '-5px'),
+    margin: '4px -5px 4px -5px',
+
     width: 'auto',
-    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
+    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
   },
 });
 
diff --git a/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts b/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts
index 59432241800e96..4b77137ed6dc63 100644
--- a/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts
+++ b/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts
@@ -1,5 +1,5 @@
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
+import { mergeClasses, makeStyles } from '@griffel/react';
 import type { MenuListSlots, MenuListState } from './MenuList.types';
 
 export const menuListClassNames: SlotClassNames<MenuListSlots> = {
@@ -10,7 +10,7 @@ const useStyles = makeStyles({
   root: {
     display: 'flex',
     flexDirection: 'column',
-    ...shorthands.gap('2px'),
+    gap: '2px',
   },
   hasMenuContext: {
     height: '100%',
diff --git a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.styles.ts b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.styles.ts
index d42f24f27529e7..6844ef92c0423a 100644
--- a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.styles.ts
+++ b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.styles.ts
@@ -1,4 +1,4 @@
-import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
+import { mergeClasses, makeStyles } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -10,7 +10,7 @@ export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {
 
 const useStyles = makeStyles({
   root: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: `${tokens.borderRadiusMedium}`,
     backgroundColor: tokens.colorNeutralBackground1,
     color: tokens.colorNeutralForeground1,
     boxSizing: 'border-box',
@@ -19,8 +19,8 @@ const useStyles = makeStyles({
     overflowX: 'hidden',
     width: 'max-content',
     boxShadow: `${tokens.shadow16}`,
-    ...shorthands.padding('4px'),
-    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
+    padding: '4px',
+    border: `1px solid ${tokens.colorTransparentStroke}`,
     ...typographyStyles.body1,
     ...createSlideStyles(10),
   },
diff --git a/packages/react-components/react-message-bar/src/components/MessageBar/useMessageBarStyles.styles.ts b/packages/react-components/react-message-bar/src/components/MessageBar/useMessageBarStyles.styles.ts
index eaa9b2f28171c9..3adb2728706767 100644
--- a/packages/react-components/react-message-bar/src/components/MessageBar/useMessageBarStyles.styles.ts
+++ b/packages/react-components/react-message-bar/src/components/MessageBar/useMessageBarStyles.styles.ts
@@ -57,9 +57,7 @@ const useStyles = makeStyles({
     marginRight: '0px',
   },
 
-  square: {
-    ...shorthands.borderRadius(0),
-  },
+  square: { borderRadius: '0' },
 });
 
 const useIconIntentStyles = makeStyles({
diff --git a/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md b/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md
index 68498dbfd19d71..931031824e7dc3 100644
--- a/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md
+++ b/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md
@@ -210,7 +210,7 @@ export type StyledTextSlots = {
 };
 
 // @public (undocumented)
-export const useFlexStyles: () => Record<"flex" | "fill" | "column" | "wrap" | "inline" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>;
+export const useFlexStyles: () => Record<"flex" | "fill" | "inline" | "column" | "wrap" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>;
 
 // @public (undocumented)
 export const useGridStyles: () => Record<"grid" | "onlyRows" | "rows1" | "rows2" | "rows3" | "columns1" | "columns2" | "columns3" | "columnsDefault", string>;
diff --git a/packages/react-components/react-migration-v0-v9/src/components/Flex/Flex.styles.ts b/packages/react-components/react-migration-v0-v9/src/components/Flex/Flex.styles.ts
index 21fd17beb1f6ef..dab5039ce0f4f5 100644
--- a/packages/react-components/react-migration-v0-v9/src/components/Flex/Flex.styles.ts
+++ b/packages/react-components/react-migration-v0-v9/src/components/Flex/Flex.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, shorthands } from '@fluentui/react-components';
+import { makeStyles } from '@fluentui/react-components';
 
 const gapValues = {
   smaller: '8px',
@@ -85,7 +85,5 @@ export const useFlexStyles = makeStyles({
   gapForRowFlexLarge: {
     columnGap: gapValues.large,
   },
-  paddingMedium: {
-    ...shorthands.padding(paddingValues.medium),
-  },
+  paddingMedium: { padding: `${paddingValues.medium}` },
 });
diff --git a/packages/react-components/react-migration-v0-v9/src/components/List/ListItem/useListItemStyles.styles.ts b/packages/react-components/react-migration-v0-v9/src/components/List/ListItem/useListItemStyles.styles.ts
index b76cd7a769b518..072d94c945d6d1 100644
--- a/packages/react-components/react-migration-v0-v9/src/components/List/ListItem/useListItemStyles.styles.ts
+++ b/packages/react-components/react-migration-v0-v9/src/components/List/ListItem/useListItemStyles.styles.ts
@@ -1,5 +1,5 @@
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import type { ListItemSlots, ListItemState } from './ListItem.types';
 import { tokens } from '@fluentui/react-theme';
@@ -41,7 +41,8 @@ const useStyles = makeStyles({
     gridColumnEnd: 4,
   },
   truncate: {
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
+
     textWrap: 'nowrap',
     textOverflow: 'ellipsis',
   },
diff --git a/packages/react-components/react-migration-v0-v9/src/components/Segment/Segment.styles.ts b/packages/react-components/react-migration-v0-v9/src/components/Segment/Segment.styles.ts
index 8a4454446ce50f..d8546d36f4e2b0 100644
--- a/packages/react-components/react-migration-v0-v9/src/components/Segment/Segment.styles.ts
+++ b/packages/react-components/react-migration-v0-v9/src/components/Segment/Segment.styles.ts
@@ -2,7 +2,8 @@ import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
 
 export const useSegmentStyles = makeStyles({
   segment: {
-    ...shorthands.padding('1em'),
+    padding: '1em',
+
     ...shorthands.borderWidth('2px', 0, 0),
     ...shorthands.borderColor('transparent'),
     ...shorthands.borderStyle('solid'),
diff --git a/packages/react-components/react-migration-v0-v9/src/components/StyledText/StyledText.styles.ts b/packages/react-components/react-migration-v0-v9/src/components/StyledText/StyledText.styles.ts
index e8ca0a2c352f5c..d059975021c313 100644
--- a/packages/react-components/react-migration-v0-v9/src/components/StyledText/StyledText.styles.ts
+++ b/packages/react-components/react-migration-v0-v9/src/components/StyledText/StyledText.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { makeStyles, tokens } from '@fluentui/react-components';
 
 export const useSizeStyles = makeStyles({
   base100: {
@@ -81,7 +81,7 @@ export const useStyles = makeStyles({
   },
   nowrap: {
     whiteSpace: 'nowrap',
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
   },
   truncate: {
     textOverflow: 'ellipsis',
diff --git a/packages/react-components/react-nav-preview/src/components/sharedNavStyles.styles.ts b/packages/react-components/react-nav-preview/src/components/sharedNavStyles.styles.ts
index 8b01293ec309ce..6060220cccbd46 100644
--- a/packages/react-components/react-nav-preview/src/components/sharedNavStyles.styles.ts
+++ b/packages/react-components/react-nav-preview/src/components/sharedNavStyles.styles.ts
@@ -1,6 +1,6 @@
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { makeResetStyles, makeStyles, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles } from '@griffel/react';
 
 // Styles shared by several nav components.
 
@@ -58,7 +58,7 @@ export const useIndicatorStyles = makeStyles({
       backgroundColor: tokens.colorNeutralForeground2BrandSelected,
       height: `${navItemTokens.indicatorHeight}px`,
       width: `${navItemTokens.indicatorWidth}px`,
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
+      borderRadius: `${tokens.borderRadiusCircular}`,
       content: '""',
     },
   },
@@ -75,7 +75,8 @@ export const useIconStyles = makeStyles({
     alignItems: 'top',
     display: 'inline-flex',
     justifyContent: 'center',
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
+
     [`& .${iconFilledClassName}`]: {
       display: 'none',
     },
diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts
index a309bec76f62e4..aeedb9f9bd7b79 100644
--- a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts
+++ b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts
@@ -1,4 +1,4 @@
-import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import type { PopoverSize } from '../Popover/Popover.types';
@@ -23,8 +23,8 @@ const useStyles = makeStyles({
     color: tokens.colorNeutralForeground1,
     backgroundColor: tokens.colorNeutralBackground1,
     boxShadow: tokens.shadow16,
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
+    borderRadius: `${tokens.borderRadiusMedium}`,
+    border: `1px solid ${tokens.colorTransparentStroke}`,
     ...typographyStyles.body1,
     ...createSlideStyles(10),
   },
@@ -45,17 +45,11 @@ const useStyles = makeStyles({
     color: tokens.colorNeutralForegroundOnBrand,
   },
 
-  smallPadding: {
-    ...shorthands.padding('12px'),
-  },
+  smallPadding: { padding: '12px' },
 
-  mediumPadding: {
-    ...shorthands.padding('16px'),
-  },
+  mediumPadding: { padding: '16px' },
 
-  largePadding: {
-    ...shorthands.padding('20px'),
-  },
+  largePadding: { padding: '20px' },
 
   smallArrow: createArrowHeightStyles(arrowHeights.small),
   mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),
diff --git a/packages/react-components/react-positioning/src/createArrowStyles.ts b/packages/react-components/react-positioning/src/createArrowStyles.ts
index 0b7497cff56a1a..12727894cfbf0c 100644
--- a/packages/react-components/react-positioning/src/createArrowStyles.ts
+++ b/packages/react-components/react-positioning/src/createArrowStyles.ts
@@ -1,4 +1,3 @@
-import { shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { GriffelStyle } from '@griffel/react';
 
@@ -84,12 +83,8 @@ export function createArrowStyles(options: CreateArrowStylesOptions): GriffelSty
       width: 'inherit',
       height: 'inherit',
       backgroundColor: 'inherit',
-      ...shorthands.borderRight(
-        `${borderWidth} /* @noflip */`,
-        `${borderStyle} /* @noflip */`,
-        `${borderColor} /* @noflip */`,
-      ),
-      ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
+      borderRight: `${borderWidth} ${borderStyle} ${borderColor} /* @noflip */`,
+      borderBottom: `${borderWidth} ${borderStyle} ${borderColor}`,
       borderBottomRightRadius: tokens.borderRadiusSmall,
       transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg) /* @noflip */',
     },
diff --git a/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.styles.ts b/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.styles.ts
index 23b6ebd63d956e..bc6189e5ccb705 100644
--- a/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.styles.ts
+++ b/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -34,18 +34,14 @@ const useRootStyles = makeStyles({
     display: 'block',
     backgroundColor: tokens.colorNeutralBackground6,
     width: '100%',
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
 
     '@media screen and (forced-colors: active)': {
       backgroundColor: 'CanvasText',
     },
   },
-  rounded: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-  },
-  square: {
-    ...shorthands.borderRadius(tokens.borderRadiusNone),
-  },
+  rounded: { borderRadius: `${tokens.borderRadiusMedium}` },
+  square: { borderRadius: `${tokens.borderRadiusNone}` },
   medium: {
     height: barThicknessValues.medium,
   },
@@ -62,7 +58,8 @@ const useBarStyles = makeStyles({
     '@media screen and (forced-colors: active)': {
       backgroundColor: 'Highlight',
     },
-    ...shorthands.borderRadius('inherit'),
+    borderRadius: 'inherit',
+
     height: '100%',
   },
   nonZeroDeterminate: {
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
index 178716721acbdc..e1acc5f9cc9791 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -33,7 +33,7 @@ describe('FluentProvider (node)', () => {
     expect(parseHTMLString(html)).toMatchInlineSnapshot(`
       "<div
         dir="ltr"
-        class="fui-FluentProvider fui-FluentProvider1 "
+        class="fui-FluentProvider fui-FluentProvider1"
       >
         <style id="fui-FluentProvider1">
           .fui-FluentProvider1 {
@@ -60,7 +60,7 @@ describe('FluentProvider (node)', () => {
     expect(parseHTMLString(html)).toMatchInlineSnapshot(`
       "<div
         dir="ltr"
-        class="fui-FluentProvider fui-FluentProvider1 "
+        class="fui-FluentProvider fui-FluentProvider1"
       >
         <style nonce="random" id="fui-FluentProvider1">
           .fui-FluentProvider1 {
diff --git a/packages/react-components/react-radio/src/components/Radio/useRadioStyles.styles.ts b/packages/react-components/react-radio/src/components/Radio/useRadioStyles.styles.ts
index 8557f9ad8a3a69..c776cf8ea24e34 100644
--- a/packages/react-components/react-radio/src/components/Radio/useRadioStyles.styles.ts
+++ b/packages/react-components/react-radio/src/components/Radio/useRadioStyles.styles.ts
@@ -1,6 +1,6 @@
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { RadioSlots, RadioState } from './Radio.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -186,7 +186,7 @@ const useIndicatorBaseClassName = makeResetStyles({
 const useLabelStyles = makeStyles({
   base: {
     alignSelf: 'center',
-    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
   },
 
   after: {
diff --git a/packages/react-components/react-rating/src/components/RatingItem/useRatingItemStyles.styles.ts b/packages/react-components/react-rating/src/components/RatingItem/useRatingItemStyles.styles.ts
index bede94b1c07bc1..2e139ca20525b9 100644
--- a/packages/react-components/react-rating/src/components/RatingItem/useRatingItemStyles.styles.ts
+++ b/packages/react-components/react-rating/src/components/RatingItem/useRatingItemStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
@@ -83,9 +83,7 @@ const useIndicatorBaseClassName = makeResetStyles({
 const useIndicatorStyles = makeStyles({
   lowerHalf: {
     right: '50%',
-    '& > svg': {
-      ...shorthands.flex(0, 0, 'auto'),
-    },
+    '& > svg': { flex: '0 0 auto' },
   },
   upperHalf: {
     left: '50%',
diff --git a/packages/react-components/react-select/src/components/Select/useSelectStyles.styles.ts b/packages/react-components/react-select/src/components/Select/useSelectStyles.styles.ts
index fb59a0d445d8d2..33d1a880871e16 100644
--- a/packages/react-components/react-select/src/components/Select/useSelectStyles.styles.ts
+++ b/packages/react-components/react-select/src/components/Select/useSelectStyles.styles.ts
@@ -71,7 +71,7 @@ const useRootStyles = makeStyles({
         transparent 50%,
         transparent 100%
       )`,
-      ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),
+      borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,
       boxSizing: 'border-box',
       content: '""',
       height: tokens.borderRadiusMedium,
@@ -107,8 +107,8 @@ const useRootStyles = makeStyles({
 const useSelectStyles = makeStyles({
   base: {
     appearance: 'none',
-    ...shorthands.border('1px', 'solid', 'transparent'),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    border: '1px solid transparent',
+    borderRadius: `${tokens.borderRadiusMedium}`,
     boxShadow: 'none',
     boxSizing: 'border-box',
     color: tokens.colorNeutralForeground1,
@@ -161,7 +161,7 @@ const useSelectStyles = makeStyles({
   },
   outline: {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
   },
   outlineInteractive: {
@@ -177,8 +177,8 @@ const useSelectStyles = makeStyles({
   },
   underline: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),
-    ...shorthands.borderRadius(0),
+    borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,
+    borderRadius: '0',
   },
   'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
diff --git a/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.styles.ts b/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.styles.ts
index a26db0b9103663..c7ded90eaaebf8 100644
--- a/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.styles.ts
+++ b/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
@@ -44,7 +44,8 @@ const skeletonPulseAnimation = {
 const useStyles = makeStyles({
   root: {
     position: 'relative',
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
+
     backgroundSize: '300% 100%',
     backgroundPositionX: 'center',
     backgroundPositionY: 'center',
@@ -99,7 +100,7 @@ const useStyles = makeStyles({
 const useRectangleStyles = makeStyles({
   root: {
     width: '100%',
-    ...shorthands.borderRadius('4px'),
+    borderRadius: '4px',
   },
   8: { height: '8px' },
   12: { height: '12px' },
@@ -139,9 +140,7 @@ const useSizeStyles = makeStyles({
 });
 
 const useCircleSizeStyles = makeStyles({
-  root: {
-    ...shorthands.borderRadius('50%'),
-  },
+  root: { borderRadius: '50%' },
 });
 
 /**
diff --git a/packages/react-components/react-slider/src/components/Slider/useSliderStyles.styles.ts b/packages/react-components/react-slider/src/components/Slider/useSliderStyles.styles.ts
index 0084f28ffa0f53..b750b4192876c7 100644
--- a/packages/react-components/react-slider/src/components/Slider/useSliderStyles.styles.ts
+++ b/packages/react-components/react-slider/src/components/Slider/useSliderStyles.styles.ts
@@ -1,4 +1,4 @@
-import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import type { SliderState, SliderSlots } from './Slider.types';
@@ -114,7 +114,7 @@ const useRootStyles = makeStyles({
  */
 const useRailStyles = makeStyles({
   rail: {
-    ...shorthands.borderRadius(tokens.borderRadiusXLarge),
+    borderRadius: `${tokens.borderRadiusXLarge}`,
     pointerEvents: 'none',
     gridRowStart: '2',
     gridRowEnd: '2',
@@ -192,7 +192,7 @@ const useThumbStyles = makeStyles({
     pointerEvents: 'none',
     outlineStyle: 'none',
     forcedColorAdjust: 'none',
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
+    borderRadius: `${tokens.borderRadiusCircular}`,
     boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,
     backgroundColor: `var(${thumbColorVar})`,
     '::before': {
@@ -201,16 +201,14 @@ const useThumbStyles = makeStyles({
       left: '0px',
       bottom: '0px',
       right: '0px',
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
+      borderRadius: `${tokens.borderRadiusCircular}`,
       boxSizing: 'border-box',
       content: "''",
-      ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralStroke1),
+      border: `${`calc(var(${thumbSizeVar}) * .05)`} solid ${tokens.colorNeutralStroke1}`,
     },
   },
   disabled: {
-    '::before': {
-      ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralForegroundDisabled),
-    },
+    '::before': { border: `${`calc(var(${thumbSizeVar}) * .05)`} solid ${tokens.colorNeutralForegroundDisabled}` },
   },
   horizontal: {
     transform: 'translateX(-50%)',
@@ -233,8 +231,8 @@ const useInputStyles = makeStyles({
     gridRowEnd: '-1',
     gridColumnStart: '1',
     gridColumnEnd: '-1',
-    ...shorthands.padding(0),
-    ...shorthands.margin(0),
+    padding: '0',
+    margin: '0',
   },
   disabled: {
     cursor: 'default',
diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.styles.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.styles.ts
index 6c3239d3483259..224ec5246f5225 100644
--- a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.styles.ts
+++ b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.styles.ts
@@ -125,11 +125,9 @@ const useRootStyles = makeStyles({
   medium: {
     // set by useRootClassName
   },
-
   outline: {
     // set by useRootClassName
   },
-
   outlineInteractive: {
     ':hover::before': {
       ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
@@ -147,7 +145,7 @@ const useRootStyles = makeStyles({
   underline: {
     '::before': {
       ...shorthands.borderWidth(0, 0, '1px', 0),
-      ...shorthands.borderRadius(tokens.borderRadiusNone), // corners look strange if rounded
+      borderRadius: `${tokens.borderRadiusNone}`, // corners look strange if rounded
     },
   },
 
@@ -161,13 +159,11 @@ const useRootStyles = makeStyles({
         borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,
       },
     },
-    '::after': shorthands.borderRadius(tokens.borderRadiusNone), // remove rounded corners from focus underline
+    '::after': { borderRadius: `${tokens.borderRadiusNone}` }, // remove rounded corners from focus underline
   },
 
   filled: {
-    '::before': {
-      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
-    },
+    '::before': { border: `1px solid ${tokens.colorTransparentStroke}` },
   },
 
   'filled-darker': {
@@ -308,19 +304,20 @@ const useButtonStyles = makeStyles({
   // Additionally the design uses fractional values so these are
   // rounded to the nearest integer.
   incrementButtonSmall: {
-    ...shorthands.padding('3px', '6px', '0px', '4px'),
+    padding: '3px 6px 0px 4px',
+
     height: '12px',
   },
 
   decrementButtonSmall: {
-    ...shorthands.padding('0px', '6px', '3px', '4px'),
+    padding: '0px 6px 3px 4px',
+
     height: '12px',
   },
 
   outline: {
     // set by useButtonClassName
   },
-
   underline: {
     backgroundColor: 'transparent',
     color: tokens.colorNeutralForeground3,
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts b/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts
index 13aadd65a01c09..397cc97526733d 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { ColorSwatchSlots, ColorSwatchState } from './ColorSwatch.types';
 import { tokens } from '@fluentui/react-theme';
@@ -71,7 +71,7 @@ const useStyles = makeStyles({
     },
   },
   selected: {
-    ...shorthands.border('none'),
+    border: 'none',
     boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,
     ':hover': {
       boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorBrandStroke1}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`,
@@ -109,22 +109,16 @@ const useSizeStyles = makeStyles({
 
 const useShapeStyles = makeStyles({
   rounded: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    }),
+    borderRadius: `${tokens.borderRadiusMedium}`,
+    ...createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusMedium}` }),
   },
   circular: {
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
-    }),
+    borderRadius: `${tokens.borderRadiusCircular}`,
+    ...createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusCircular}` }),
   },
   square: {
-    ...shorthands.borderRadius(tokens.borderRadiusNone),
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.borderRadius(tokens.borderRadiusNone),
-    }),
+    borderRadius: `${tokens.borderRadiusNone}`,
+    ...createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusNone}` }),
   },
 });
 
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts b/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts
index 07c89979808816..6d119bf29bdeb8 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';
 import { tokens } from '@fluentui/react-theme';
@@ -37,22 +37,16 @@ const useSizeStyles = makeStyles({
 
 const useShapeStyles = makeStyles({
   rounded: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    }),
+    borderRadius: `${tokens.borderRadiusMedium}`,
+    ...createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusMedium}` }),
   },
   circular: {
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
-    }),
+    borderRadius: `${tokens.borderRadiusCircular}`,
+    ...createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusCircular}` }),
   },
   square: {
-    ...shorthands.borderRadius(tokens.borderRadiusNone),
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.borderRadius(tokens.borderRadiusNone),
-    }),
+    borderRadius: `${tokens.borderRadiusNone}`,
+    ...createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusNone}` }),
   },
 });
 
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatchStyles.styles.ts b/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatchStyles.styles.ts
index 15033463032a95..56670c4c7c3f37 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatchStyles.styles.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatchStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, makeResetStyles, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';
 import { tokens } from '@fluentui/react-theme';
@@ -54,7 +54,7 @@ const useStyles = makeResetStyles({
 
 const useStylesSelected = makeStyles({
   selected: {
-    ...shorthands.border('none'),
+    border: 'none',
     boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,
     ':hover': {
       boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorBrandStroke1}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`,
@@ -92,22 +92,16 @@ const useSizeStyles = makeStyles({
 
 const useShapeStyles = makeStyles({
   rounded: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    }),
+    borderRadius: `${tokens.borderRadiusMedium}`,
+    ...createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusMedium}` }),
   },
   circular: {
-    ...shorthands.borderRadius(tokens.borderRadiusCircular),
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
-    }),
+    borderRadius: `${tokens.borderRadiusCircular}`,
+    ...createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusCircular}` }),
   },
   square: {
-    ...shorthands.borderRadius(tokens.borderRadiusNone),
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.borderRadius(tokens.borderRadiusNone),
-    }),
+    borderRadius: `${tokens.borderRadiusNone}`,
+    ...createCustomFocusIndicatorStyle({ borderRadius: `${tokens.borderRadiusNone}` }),
   },
 });
 
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts
index f4704b4ab25163..737a3551f941ca 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { SwatchPickerSlots, SwatchPickerState } from './SwatchPicker.types';
 import { tokens } from '@fluentui/react-theme';
@@ -10,22 +10,15 @@ export const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots> = {
  * Styles for the root slot
  */
 const useStyles = makeStyles({
-  root: {
-    ...shorthands.padding(tokens.spacingHorizontalNone, tokens.spacingVerticalNone),
-    display: 'flex',
-  },
+  root: { padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`, display: 'flex' },
   row: {
     flexDirection: 'row',
   },
   grid: {
     flexDirection: 'column',
   },
-  spacingSmall: {
-    ...shorthands.gap('2px'),
-  },
-  spacingMedium: {
-    ...shorthands.gap('4px'),
-  },
+  spacingSmall: { gap: '2px' },
+  spacingMedium: { gap: '4px' },
 });
 
 /**
diff --git a/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.styles.ts b/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.styles.ts
index 3f6d09ce28e214..f902d2605a0b94 100644
--- a/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.styles.ts
+++ b/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.styles.ts
@@ -1,6 +1,6 @@
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { SwitchSlots, SwitchState } from './Switch.types';
 
@@ -225,8 +225,7 @@ const useLabelStyles = makeStyles({
     // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.
     marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,
     marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,
-
-    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
   },
   above: {
     paddingTop: tokens.spacingVerticalXS,
diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts b/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts
index 5ca0fb171f31f2..faa059db30c963 100644
--- a/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts
+++ b/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import type { TableCellSlots, TableCellState } from './TableCell.types';
@@ -33,7 +33,7 @@ const useFlexLayoutStyles = makeStyles({
     display: 'flex',
     minWidth: '0px',
     alignItems: 'center',
-    ...shorthands.flex(1, 1, '0px'),
+    flex: '1 1 0px',
   },
 
   medium: {
@@ -55,13 +55,10 @@ const useFlexLayoutStyles = makeStyles({
 const useStyles = makeStyles({
   root: {
     position: 'relative',
-    ...shorthands.padding('0px', tokens.spacingHorizontalS),
+    padding: `0px ${tokens.spacingHorizontalS}`,
 
     ...createCustomFocusIndicatorStyle(
-      {
-        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),
-        ...shorthands.borderRadius(tokens.borderRadiusMedium),
-      },
+      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: `${tokens.borderRadiusMedium}` },
       { selector: 'focus' },
     ),
   },
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts
index 81b317bc0ceecc..e7299e41747f8d 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -19,8 +19,8 @@ const useStyles = makeStyles({
   root: {
     display: 'flex',
     alignItems: 'center',
-    ...shorthands.gap(tokens.spacingHorizontalS),
-    ...shorthands.flex(1, 1, '0px'),
+    gap: `${tokens.spacingHorizontalS}`,
+    flex: '1 1 0px',
   },
 
   rootTruncate: {
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts
index 34b5426aeba608..a2e01b900c4cb5 100644
--- a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts
+++ b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts
@@ -22,7 +22,8 @@ const useTableLayoutStyles = makeStyles({
 const useFlexLayoutStyles = makeStyles({
   root: {
     display: 'flex',
-    ...shorthands.flex(1, 1, '0px'),
+    flex: '1 1 0px',
+
     minWidth: '0px',
   },
 });
@@ -33,12 +34,9 @@ const useFlexLayoutStyles = makeStyles({
 const useStyles = makeStyles({
   root: {
     fontWeight: tokens.fontWeightRegular,
-    ...shorthands.padding('0px', tokens.spacingHorizontalS),
+    padding: `0px ${tokens.spacingHorizontalS}`,
     ...createCustomFocusIndicatorStyle(
-      {
-        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),
-        ...shorthands.borderRadius(tokens.borderRadiusMedium),
-      },
+      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: `${tokens.borderRadiusMedium}` },
       { selector: 'focus-within' },
     ),
     position: 'relative',
@@ -61,8 +59,9 @@ const useStyles = makeStyles({
     fontFamily: 'inherit',
     fontSize: 'inherit',
     lineHeight: 'normal',
-    ...shorthands.overflow('visible'),
-    ...shorthands.padding(0),
+    overflow: 'visible',
+    padding: '0',
+
     ...shorthands.borderStyle('none'),
     textAlign: 'unset',
   },
@@ -74,9 +73,10 @@ const useStyles = makeStyles({
     flexGrow: 1,
     height: '100%',
     alignItems: 'center',
-    ...shorthands.gap(tokens.spacingHorizontalXS),
+    gap: `${tokens.spacingHorizontalXS}`,
     minHeight: '32px',
-    ...shorthands.flex(1, 1, '0px'),
+    flex: '1 1 0px',
+
     outlineStyle: 'none',
   },
 
diff --git a/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts b/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts
index 6edfdcf5b44f07..b7cea4bd74763f 100644
--- a/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts
+++ b/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
@@ -19,7 +19,8 @@ const useStyles = makeStyles({
     top: 0,
     bottom: 0,
     width: '16px',
-    ...shorthands.margin(0, '-8px'),
+    margin: '0 -8px',
+
     cursor: 'col-resize',
     opacity: 0,
     transitionProperty: 'opacity',
diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts
index a26c9a8fbf5d65..37acea6cf97a26 100644
--- a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts
+++ b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts
@@ -43,10 +43,7 @@ const useStyles = makeStyles({
       { selector: 'focus-within' },
     ),
     ...createCustomFocusIndicatorStyle(
-      {
-        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),
-        ...shorthands.borderRadius(tokens.borderRadiusMedium),
-      },
+      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: `${tokens.borderRadiusMedium}` },
       { selector: 'focus' },
     ),
   },
@@ -81,13 +78,9 @@ const useStyles = makeStyles({
     },
   },
 
-  medium: {
-    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
-  },
+  medium: { borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}` },
 
-  small: {
-    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
-  },
+  small: { borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}` },
 
   'extra-small': {
     fontSize: tokens.fontSizeBase200,
@@ -102,8 +95,8 @@ const useStyles = makeStyles({
     },
 
     '@media(forced-colors: active)': {
-      ...shorthands.border('2px', 'solid', 'transparent'),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      border: '2px solid transparent',
+      borderRadius: `${tokens.borderRadiusMedium}`,
       boxSizing: 'border-box',
       ':focus-visible': {
         outlineOffset: '-4px',
@@ -113,8 +106,8 @@ const useStyles = makeStyles({
 
   neutral: {
     '@media(forced-colors: active)': {
-      ...shorthands.border('2px', 'solid', 'transparent'),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      border: '2px solid transparent',
+      borderRadius: `${tokens.borderRadiusMedium}`,
       boxSizing: 'border-box',
       ':focus-visible': {
         outlineOffset: '-4px',
diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts
index 7f80dfe588263f..7abfb1a8b2e30e 100644
--- a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts
+++ b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
@@ -22,7 +22,8 @@ const useTableLayoutStyles = makeStyles({
 const useFlexLayoutStyles = makeStyles({
   root: {
     display: 'flex',
-    ...shorthands.flex(1, 1, '0px'),
+    flex: '1 1 0px',
+
     minWidth: `${CELL_WIDTH}px`,
     maxWidth: `${CELL_WIDTH}px`,
     justifyContent: 'center',
@@ -36,12 +37,10 @@ const useStyles = makeStyles({
   root: {
     textAlign: 'center',
     whiteSpace: 'nowrap',
-    ...shorthands.padding(0),
+    padding: '0',
+
     ...createCustomFocusIndicatorStyle(
-      {
-        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),
-        ...shorthands.borderRadius(tokens.borderRadiusMedium),
-      },
+      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: `${tokens.borderRadiusMedium}` },
       { selector: 'focus' },
     ),
   },
diff --git a/packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.styles.ts b/packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.styles.ts
index 099b4494834cc4..2feb7e2177fec0 100644
--- a/packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.styles.ts
+++ b/packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.styles.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { TabState, TabValue } from './Tab.types';
 
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { useTabListContext_unstable } from '../TabList/TabListContext';
 import { TabRegisterData } from '../TabList/TabList.types';
 import { tokens } from '@fluentui/react-theme';
@@ -15,7 +15,7 @@ const tabIndicatorCssVars_unstable = {
 const useActiveIndicatorStyles = makeStyles({
   base: {
     // overflow is required to allow the selection indicator to animate outside the tab area.
-    ...shorthands.overflow('visible'),
+    overflow: 'visible',
   },
   animated: {
     '::after': {
diff --git a/packages/react-components/react-tabs/src/components/Tab/useTabStyles.styles.ts b/packages/react-components/react-tabs/src/components/Tab/useTabStyles.styles.ts
index 267f509ac5312a..ecbf68ccee1cc0 100644
--- a/packages/react-components/react-tabs/src/components/Tab/useTabStyles.styles.ts
+++ b/packages/react-components/react-tabs/src/components/Tab/useTabStyles.styles.ts
@@ -31,7 +31,7 @@ const useRootStyles = makeStyles({
   base: {
     alignItems: 'center',
     ...shorthands.borderColor('none'),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: `${tokens.borderRadiusMedium}`,
     ...shorthands.borderWidth(0),
     cursor: 'pointer',
     display: 'grid',
@@ -43,7 +43,8 @@ const useRootStyles = makeStyles({
     lineHeight: tokens.lineHeightBase300,
     outlineStyle: 'none',
     position: 'relative',
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
+
     textTransform: 'none',
   },
   horizontal: {
@@ -54,30 +55,30 @@ const useRootStyles = makeStyles({
   },
   smallHorizontal: {
     columnGap: tokens.spacingHorizontalXXS,
-    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),
+    padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalSNudge}`,
   },
   smallVertical: {
     // horizontal spacing is deliberate. This is the gap between icon and content.
     columnGap: tokens.spacingHorizontalXXS,
-    ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),
+    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,
   },
   mediumHorizontal: {
     columnGap: tokens.spacingHorizontalSNudge,
-    ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),
+    padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalMNudge}`,
   },
   mediumVertical: {
     // horizontal spacing is deliberate. This is the gap between icon and content.
     columnGap: tokens.spacingHorizontalSNudge,
-    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),
+    padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalMNudge}`,
   },
   largeHorizontal: {
     columnGap: tokens.spacingHorizontalSNudge,
-    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge),
+    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalMNudge}`,
   },
   largeVertical: {
     // horizontal spacing is deliberate. This is the gap between icon and content.
     columnGap: tokens.spacingHorizontalSNudge,
-    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge),
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,
   },
   transparent: {
     backgroundColor: tokens.colorTransparentBackground,
@@ -195,13 +196,13 @@ const usePendingIndicatorStyles = makeStyles({
   base: {
     ':hover::before': {
       backgroundColor: tokens.colorNeutralStroke1Hover,
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
+      borderRadius: `${tokens.borderRadiusCircular}`,
       content: '""',
       position: 'absolute',
     },
     ':active::before': {
       backgroundColor: tokens.colorNeutralStroke1Pressed,
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
+      borderRadius: `${tokens.borderRadiusCircular}`,
       content: '""',
       position: 'absolute',
     },
@@ -276,7 +277,7 @@ const useActiveIndicatorStyles = makeStyles({
   base: {
     '::after': {
       backgroundColor: tokens.colorTransparentStroke,
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
+      borderRadius: `${tokens.borderRadiusCircular}`,
       content: '""',
       position: 'absolute',
     },
@@ -368,7 +369,8 @@ const useIconStyles = makeStyles({
     alignItems: 'center',
     display: 'inline-flex',
     justifyContent: 'center',
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
+
     [`& .${iconClassNames.filled}`]: {
       display: 'none',
     },
@@ -409,9 +411,10 @@ const useIconStyles = makeStyles({
 const useContentStyles = makeStyles({
   base: {
     ...typographyStyles.body1,
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
+
     // content padding is the same for medium & small, horiztonal & vertical
-    ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),
+    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXXS}`,
   },
   selected: {
     ...typographyStyles.body1Strong,
diff --git a/packages/react-components/react-tag-picker-preview/src/components/TagPickerButton/useTagPickerButtonStyles.styles.ts b/packages/react-components/react-tag-picker-preview/src/components/TagPickerButton/useTagPickerButtonStyles.styles.ts
index 374fa0574579ca..a7f10d5e30d4d4 100644
--- a/packages/react-components/react-tag-picker-preview/src/components/TagPickerButton/useTagPickerButtonStyles.styles.ts
+++ b/packages/react-components/react-tag-picker-preview/src/components/TagPickerButton/useTagPickerButtonStyles.styles.ts
@@ -15,7 +15,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     minHeight: '30px',
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.border('0'),
+    border: 0,
     boxSizing: 'border-box',
     color: tokens.colorNeutralForeground1,
     columnGap: tokens.spacingHorizontalXXS,
@@ -36,37 +36,28 @@ const useStyles = makeStyles({
   // size variants
   medium: {
     ...typographyStyles.caption1,
-    ...shorthands.padding(
-      '3px',
-      tokens.spacingHorizontalSNudge,
-      '3px',
-      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
-    ),
+    padding: `3px ${
+      tokens.spacingHorizontalSNudge
+    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,
   },
   large: {
     ...typographyStyles.body1,
-    ...shorthands.padding(
-      '5px',
-      tokens.spacingHorizontalMNudge,
-      '5px',
-      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
-    ),
+    padding: `5px ${
+      tokens.spacingHorizontalMNudge
+    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,
   },
   'extra-large': {
     columnGap: tokens.spacingHorizontalSNudge,
     ...typographyStyles.body2,
-    ...shorthands.padding(
-      '7px',
-      tokens.spacingHorizontalM,
-      '7px',
-      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,
-    ),
+    padding: `7px ${
+      tokens.spacingHorizontalM
+    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,
   },
 
   // appearance variants
   outline: {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
   },
   outlineInteractive: {
@@ -82,16 +73,16 @@ const useStyles = makeStyles({
   },
   underline: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),
-    ...shorthands.borderRadius(0),
+    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+    borderRadius: '0',
   },
   'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),
+    border: `${tokens.strokeWidthThin} solid transparent`,
   },
   'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),
+    border: `${tokens.strokeWidthThin} solid transparent`,
   },
   invalid: {
     ':not(:focus-within),:hover:not(:focus-within)': {
@@ -123,9 +114,10 @@ const useStyles = makeStyles({
   visuallyHidden: {
     clip: 'rect(0px, 0px, 0px, 0px)',
     height: '1px',
-    ...shorthands.margin('-1px'),
-    ...shorthands.overflow('hidden'),
-    ...shorthands.padding('0px'),
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: '0px',
+
     width: '1px',
     position: 'absolute',
   },
diff --git a/packages/react-components/react-tag-picker-preview/src/components/TagPickerControl/useTagPickerControlStyles.styles.ts b/packages/react-components/react-tag-picker-preview/src/components/TagPickerControl/useTagPickerControlStyles.styles.ts
index f2be75ccc2be4a..2a56aef014f356 100644
--- a/packages/react-components/react-tag-picker-preview/src/components/TagPickerControl/useTagPickerControlStyles.styles.ts
+++ b/packages/react-components/react-tag-picker-preview/src/components/TagPickerControl/useTagPickerControlStyles.styles.ts
@@ -21,11 +21,11 @@ export const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-wid
  */
 const useStyles = makeStyles({
   root: {
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    ...shorthands.paddingInline(
-      tokens.spacingHorizontalM,
-      `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,
-    ),
+    borderRadius: `${tokens.borderRadiusMedium}`,
+    paddingInline: `${
+      tokens.spacingHorizontalM
+    } ${`calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`}`,
+
     alignItems: 'center',
     columnGap: tokens.spacingHorizontalXXS,
     boxSizing: 'border-box',
@@ -52,7 +52,7 @@ const useStyles = makeStyles({
       height: `max(2px, ${tokens.borderRadiusMedium})`,
       borderBottomLeftRadius: tokens.borderRadiusMedium,
       borderBottomRightRadius: tokens.borderRadiusMedium,
-      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),
+      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,
       clipPath: 'inset(calc(100% - 2px) 0 0 0)',
       transform: 'scaleX(0)',
       transitionProperty: 'transform',
@@ -82,7 +82,7 @@ const useStyles = makeStyles({
 
   listbox: {
     boxShadow: `${tokens.shadow16}`,
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: `${tokens.borderRadiusMedium}`,
     maxHeight: '80vh',
     boxSizing: 'border-box',
   },
@@ -105,7 +105,7 @@ const useStyles = makeStyles({
   // appearance variants
   outline: {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
   },
 
@@ -122,16 +122,16 @@ const useStyles = makeStyles({
   },
   underline: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),
-    ...shorthands.borderRadius(0),
+    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+    borderRadius: '0',
   },
   'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
   },
   'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
   },
   invalid: {
     ':not(:focus-within),:hover:not(:focus-within)': {
diff --git a/packages/react-components/react-tag-picker-preview/src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts b/packages/react-components/react-tag-picker-preview/src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts
index 4d4a001d6178c9..77392858d0de42 100644
--- a/packages/react-components/react-tag-picker-preview/src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts
+++ b/packages/react-components/react-tag-picker-preview/src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup.types';
 import { useTagGroupStyles_unstable } from '@fluentui/react-tags';
@@ -19,18 +19,9 @@ const useStyles = makeStyles({
     cursor: 'text',
   },
   // size variants
-  medium: {
-    ...shorthands.paddingBlock(tokens.spacingVerticalSNudge),
-    ...shorthands.gap(tokens.spacingHorizontalXS),
-  },
-  large: {
-    ...shorthands.paddingBlock(tokens.spacingVerticalS),
-    ...shorthands.gap(tokens.spacingHorizontalSNudge),
-  },
-  'extra-large': {
-    ...shorthands.paddingBlock(tokens.spacingVerticalS),
-    ...shorthands.gap(tokens.spacingHorizontalSNudge),
-  },
+  medium: { paddingBlock: `${tokens.spacingVerticalSNudge}`, gap: `${tokens.spacingHorizontalXS}` },
+  large: { paddingBlock: `${tokens.spacingVerticalS}`, gap: `${tokens.spacingHorizontalSNudge}` },
+  'extra-large': { paddingBlock: `${tokens.spacingVerticalS}`, gap: `${tokens.spacingHorizontalSNudge}` },
 });
 
 /**
diff --git a/packages/react-components/react-tag-picker-preview/src/components/TagPickerInput/useTagPickerInputStyles.styles.ts b/packages/react-components/react-tag-picker-preview/src/components/TagPickerInput/useTagPickerInputStyles.styles.ts
index 808a2ed5aa2a1c..6fc39db957a59b 100644
--- a/packages/react-components/react-tag-picker-preview/src/components/TagPickerInput/useTagPickerInputStyles.styles.ts
+++ b/packages/react-components/react-tag-picker-preview/src/components/TagPickerInput/useTagPickerInputStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import { typographyStyles, tokens } from '@fluentui/react-theme';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';
@@ -25,7 +25,7 @@ const useBaseStyle = makeResetStyles({
     visibility: 'hidden',
     whiteSpace: 'pre-wrap',
   },
-  ...shorthands.border('0'),
+  border: 0,
   minWidth: '24px',
   maxWidth: '100%',
   // by default width is 0,
@@ -42,15 +42,15 @@ const useStyles = makeStyles({
   // size variants
   medium: {
     ...typographyStyles.body1,
-    ...shorthands.paddingBlock(tokens.spacingVerticalSNudge),
+    paddingBlock: `${tokens.spacingVerticalSNudge}`,
   },
   large: {
     ...typographyStyles.body1,
-    ...shorthands.paddingBlock(tokens.spacingVerticalMNudge),
+    paddingBlock: `${tokens.spacingVerticalMNudge}`,
   },
   'extra-large': {
     ...typographyStyles.body1,
-    ...shorthands.paddingBlock(tokens.spacingVerticalM),
+    paddingBlock: `${tokens.spacingVerticalM}`,
   },
   disabled: {
     color: tokens.colorNeutralForegroundDisabled,
diff --git a/packages/react-components/react-tag-picker-preview/src/components/TagPickerList/useTagPickerListStyles.styles.ts b/packages/react-components/react-tag-picker-preview/src/components/TagPickerList/useTagPickerListStyles.styles.ts
index 09269381e2c95e..69ddeb1583351b 100644
--- a/packages/react-components/react-tag-picker-preview/src/components/TagPickerList/useTagPickerListStyles.styles.ts
+++ b/packages/react-components/react-tag-picker-preview/src/components/TagPickerList/useTagPickerListStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { TagPickerListSlots, TagPickerListState } from './TagPickerList.types';
@@ -13,7 +13,7 @@ export const tagPickerListClassNames: SlotClassNames<TagPickerListSlots> = {
 const useStyles = makeStyles({
   root: {
     boxShadow: `${tokens.shadow16}`,
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    borderRadius: `${tokens.borderRadiusMedium}`,
     maxHeight: '80vh',
     boxSizing: 'border-box',
   },
diff --git a/packages/react-components/react-tags/src/components/InteractionTag/useInteractionTagStyles.styles.ts b/packages/react-components/react-tags/src/components/InteractionTag/useInteractionTagStyles.styles.ts
index d2a604166835b0..a2aaa9ef1e9d26 100644
--- a/packages/react-components/react-tags/src/components/InteractionTag/useInteractionTagStyles.styles.ts
+++ b/packages/react-components/react-tags/src/components/InteractionTag/useInteractionTagStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { InteractionTagSlots, InteractionTagState } from './InteractionTag.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
@@ -15,8 +15,8 @@ const useRootBaseClassName = makeResetStyles({
 });
 
 const useRootStyles = makeStyles({
-  rounded: shorthands.borderRadius(tokens.borderRadiusMedium),
-  circular: shorthands.borderRadius(tokens.borderRadiusCircular),
+  rounded: { borderRadius: `${tokens.borderRadiusMedium}` },
+  circular: { borderRadius: `${tokens.borderRadiusCircular}` },
 
   medium: {
     height: '32px',
diff --git a/packages/react-components/react-tags/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts b/packages/react-components/react-tags/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
index 7bf1fdef0a8784..35a60453632a96 100644
--- a/packages/react-components/react-tags/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
+++ b/packages/react-components/react-tags/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
@@ -101,7 +101,7 @@ const useRootCircularContrastStyles = makeStyles({
     '@media (forced-colors: active)': {
       position: 'relative',
       '::before': {
-        ...shorthands.borderRight(tokens.strokeWidthThin, 'solid'),
+        borderRight: `${tokens.strokeWidthThin} solid`,
         borderTopRightRadius: tokens.borderRadiusCircular,
         borderBottomRightRadius: tokens.borderRadiusCircular,
       },
diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts
index 44c19aaffb1cfa..a3cb593fbdb67a 100644
--- a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts
+++ b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts
@@ -180,7 +180,8 @@ const useRootWithoutDismissStyles = makeStyles({
 
 export const useIconStyles = makeStyles({
   base: {
-    ...shorthands.gridArea('media'),
+    gridArea: 'media',
+
     display: 'flex',
   },
   medium: {
@@ -205,7 +206,8 @@ export const useIconStyles = makeStyles({
 
 export const useMediaStyles = makeStyles({
   base: {
-    ...shorthands.gridArea('media'),
+    gridArea: 'media',
+
     display: 'flex',
     paddingLeft: '1px',
   },
@@ -222,7 +224,8 @@ export const useMediaStyles = makeStyles({
 
 const useDismissIconStyles = makeStyles({
   base: {
-    ...shorthands.gridArea('dismissIcon'),
+    gridArea: 'dismissIcon',
+
     display: 'flex',
 
     // windows high contrast:
@@ -304,7 +307,8 @@ export const usePrimaryTextStyles = makeStyles({
     paddingBottom: tokens.spacingHorizontalXXS,
   },
   withSecondaryText: {
-    ...shorthands.gridArea('primary'),
+    gridArea: 'primary',
+
     ...typographyStyles.caption1,
     marginTop: '-2px',
   },
diff --git a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.ts b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.ts
index 94e00eb1e05a03..6eeed80db24394 100644
--- a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.ts
+++ b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { TeachingPopoverBodySlots, TeachingPopoverBodyState } from './TeachingPopoverBody.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -11,8 +11,9 @@ const popoverBodyDimension = 288;
 
 export const useMediaStyles = makeStyles({
   base: {
-    ...shorthands.gridArea('media'),
-    ...shorthands.overflow('hidden'),
+    gridArea: 'media',
+    overflow: 'hidden',
+
     width: `${popoverBodyDimension}px`,
     marginBottom: '12px',
     verticalAlign: 'middle',
diff --git a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.ts b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.ts
index 4c2ca55304c098..cc9f17dfdec062 100644
--- a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.ts
+++ b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type {
   TeachingPopoverCarouselFooterSlots,
   TeachingPopoverCarouselFooterState,
@@ -19,10 +19,11 @@ const useStyles = makeStyles({
   },
   rootCentered: {
     justifyContent: 'space-between',
-    ...shorthands.gap('8px'),
+    gap: '8px',
   },
   rootRightAligned: {
-    ...shorthands.gap('8px'),
+    gap: '8px',
+
     '& :first-child': {
       marginInlineEnd: 'auto',
     },
diff --git a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.ts b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.ts
index 82f0b92aa59f28..cbaebe69e9035a 100644
--- a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.ts
+++ b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.ts
@@ -19,8 +19,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     justifyContent: 'center',
     ...createCustomFocusIndicatorStyle({
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+      borderRadius: `${tokens.borderRadiusMedium}`,
       ...shorthands.borderColor('transparent'),
     }),
   },
diff --git a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.ts b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.ts
index 377d3d9af08dc5..7d3f9028c4578d 100644
--- a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.ts
+++ b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.ts
@@ -24,13 +24,15 @@ const useStyles = makeStyles({
     backgroundColor: tokens.colorBrandBackground,
   },
   rootUnselected: {
-    ...shorthands.border(0),
-    ...shorthands.borderRadius('50%'),
-    ...shorthands.padding('0px'),
-    ...shorthands.outline(tokens.strokeWidthThin, 'solid', 'transparent'), // For high contrast
+    ...shorthands.border(
+      0,
+    ) /* TODO: Expected "border" to have 3 arguments, got 1. Please migrate it manually. */ /* TODO: Expected "border" to have 3 arguments, got 1. Please migrate it manually. */,
+    borderRadius: '50%',
+    padding: '0px',
+    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast
     ...createCustomFocusIndicatorStyle({
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+      borderRadius: `${tokens.borderRadiusMedium}`,
       ...shorthands.borderColor('transparent'),
     }),
     backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 30%, transparent)`,
@@ -41,14 +43,12 @@ const useStyles = makeStyles({
     },
   },
   rootSelected: {
-    ...shorthands.outline(tokens.strokeWidthThin, 'solid', 'transparent'), // For high contrast
+    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast
     width: '16px',
-    ...shorthands.border(0),
-    ...shorthands.borderRadius('4px'),
-    ...shorthands.padding('0px'),
+    border: 0,
     ...createCustomFocusIndicatorStyle({
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+      borderRadius: `${tokens.borderRadiusMedium}`,
       ...shorthands.borderColor('transparent'),
     }),
   },
diff --git a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverFooter/useTeachingPopoverFooterStyles.styles.ts b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverFooter/useTeachingPopoverFooterStyles.styles.ts
index 4b0ad640b1e802..21c1efc8af381c 100644
--- a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverFooter/useTeachingPopoverFooterStyles.styles.ts
+++ b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverFooter/useTeachingPopoverFooterStyles.styles.ts
@@ -12,7 +12,8 @@ export const teachingPopoverFooterClassNames: SlotClassNames<TeachingPopoverFoot
 const useStyles = makeStyles({
   root: {
     display: 'flex',
-    ...shorthands.gap('8px'),
+    gap: '8px',
+
     paddingTop: '12px',
   },
   rootVertical: {
@@ -24,11 +25,11 @@ const useStyles = makeStyles({
   },
   buttonRootVertical: {
     width: 'auto',
-    ...shorthands.borderRadius('4px'),
+    borderRadius: '4px',
   },
   buttonRootHorizontal: {
     minWidth: '96px',
-    ...shorthands.borderRadius('4px'),
+    borderRadius: '4px',
   },
   brandSecondary: {
     ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
diff --git a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.ts b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.ts
index b98759f0edb8a0..4012afd9832cf2 100644
--- a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.ts
+++ b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.ts
@@ -29,7 +29,7 @@ const useStyles = makeStyles({
   dismissButton: {
     color: tokens.colorNeutralForeground2,
     position: 'relative',
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
@@ -40,10 +40,10 @@ const useStyles = makeStyles({
     borderBottomRightRadius: tokens.borderRadiusNone,
     borderRightStyle: 'none',
     marginInlineStart: 'auto',
-    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,
     ...createCustomFocusIndicatorStyle({
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+      borderRadius: `${tokens.borderRadiusMedium}`,
       ...shorthands.borderColor('transparent'),
     }),
   },
diff --git a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts
index 6b872b96520886..fd550ffd2aa2ce 100644
--- a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts
+++ b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { TeachingPopoverSurfaceSlots, TeachingPopoverSurfaceState } from './TeachingPopoverSurface.types';
 import { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';
@@ -10,8 +10,8 @@ export const teachingPopoverSurfaceClassNames: SlotClassNames<TeachingPopoverSur
 
 const useStyles = makeStyles({
   root: {
-    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingVerticalL),
-    ...shorthands.borderRadius(tokens.borderRadiusXLarge),
+    padding: `${tokens.spacingVerticalL} ${tokens.spacingVerticalL}`,
+    borderRadius: `${tokens.borderRadiusXLarge}`,
     width: '288px',
     boxSizing: 'content-box',
   },
diff --git a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.ts b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.ts
index 5354be1287fda6..f9b5709348e7bc 100644
--- a/packages/react-components/react-teaching-popover/src/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.ts
+++ b/packages/react-components/react-teaching-popover/src/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.ts
@@ -27,7 +27,7 @@ const useStyles = makeStyles({
   },
   dismissButton: {
     position: 'relative',
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
@@ -38,8 +38,8 @@ const useStyles = makeStyles({
     borderBottomRightRadius: tokens.borderRadiusNone,
     borderRightStyle: 'none',
     ...createCustomFocusIndicatorStyle({
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+      borderRadius: `${tokens.borderRadiusMedium}`,
       ...shorthands.borderColor('transparent'),
     }),
     marginInlineStart: 'auto',
diff --git a/packages/react-components/react-text/src/components/Text/Text.test.tsx b/packages/react-components/react-text/src/components/Text/Text.test.tsx
index c23e150b9bb40f..b5ebefe48c1aab 100644
--- a/packages/react-components/react-text/src/components/Text/Text.test.tsx
+++ b/packages/react-components/react-text/src/components/Text/Text.test.tsx
@@ -40,8 +40,7 @@ describe('Text', () => {
       display: inline;
       text-align: start;
       white-space: normal;
-      overflow-x: visible;
-      overflow-y: visible;
+      overflow: visible;
       text-overflow: clip;
     `);
   });
@@ -52,8 +51,7 @@ describe('Text', () => {
     const textElement = getByText('Test');
     expect(textElement).toHaveStyle(`
       white-space: nowrap;
-      overflow-x: hidden;
-      overflow-y: hidden;
+      overflow: hidden;
     `);
   });
 
diff --git a/packages/react-components/react-text/src/components/Text/useTextStyles.styles.ts b/packages/react-components/react-text/src/components/Text/useTextStyles.styles.ts
index 29591a0cd42a23..796fc954180198 100644
--- a/packages/react-components/react-text/src/components/Text/useTextStyles.styles.ts
+++ b/packages/react-components/react-text/src/components/Text/useTextStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { TextSlots, TextState } from './Text.types';
 import { SlotClassNames } from '@fluentui/react-utilities';
@@ -19,12 +19,13 @@ const useStyles = makeStyles({
     textAlign: 'start',
     display: 'inline',
     whiteSpace: 'normal',
-    ...shorthands.overflow('visible'),
+    overflow: 'visible',
+
     textOverflow: 'clip',
   },
   nowrap: {
     whiteSpace: 'nowrap',
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
   },
   truncate: {
     textOverflow: 'ellipsis',
diff --git a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts
index 01603498bdb8f9..5fe51431f08b3a 100644
--- a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts
+++ b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts
@@ -17,14 +17,14 @@ const useRootStyles = makeStyles({
     boxSizing: 'border-box',
     position: 'relative',
     // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.
-    ...shorthands.padding('0', '0', tokens.strokeWidthThick, '0'),
-    ...shorthands.margin('0'),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    padding: `0 0 ${tokens.strokeWidthThick} 0`,
+    margin: '0',
+    borderRadius: `${tokens.borderRadiusMedium}`,
   },
 
   disabled: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,
 
     '@media (forced-colors: active)': {
       ...shorthands.borderColor('GrayText'),
@@ -54,7 +54,7 @@ const useRootStyles = makeStyles({
       // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
       // (This could be done without trimming using `background: linear-gradient(...)`, but using
       // borderBottom makes it easier for people to override the color if needed.)
-      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),
+      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,
       clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,
 
       // Animation for focus OUT
@@ -92,7 +92,7 @@ const useRootStyles = makeStyles({
   },
 
   filled: {
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
     ':hover,:focus-within': {
       ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
     },
@@ -105,33 +105,33 @@ const useRootStyles = makeStyles({
   },
   'filled-darker-shadow': {
     backgroundColor: tokens.colorNeutralBackground3,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,
     boxShadow: tokens.shadow2,
   },
   'filled-lighter-shadow': {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,
     boxShadow: tokens.shadow2,
   },
 
   outline: {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
   },
   outlineInteractive: {
     ':hover': {
-      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Hover),
+      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,
       borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,
     },
 
     ':active': {
-      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Pressed),
+      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,
       borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,
     },
 
     ':focus-within': {
-      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
       borderBottomColor: tokens.colorCompoundBrandStroke,
     },
   },
@@ -148,8 +148,8 @@ const useRootStyles = makeStyles({
  */
 const useTextareaStyles = makeStyles({
   base: {
-    ...shorthands.borderStyle('none'),
-    ...shorthands.margin('0'),
+    border: 'none',
+    margin: '0',
     backgroundColor: 'transparent',
     boxSizing: 'border-box',
     color: tokens.colorNeutralForeground1,
@@ -182,28 +182,26 @@ const useTextareaStyles = makeStyles({
   // affected by changing the padding of the root.
   small: {
     minHeight: '40px',
-    ...shorthands.padding(
-      tokens.spacingVerticalXS,
-      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
-    ),
+    padding: `${
+      tokens.spacingVerticalXS
+    } ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,
+
     maxHeight: '200px',
     ...typographyStyles.caption1,
   },
   medium: {
     minHeight: '52px',
-    ...shorthands.padding(
-      tokens.spacingVerticalSNudge,
-      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
-    ),
+    padding: `${
+      tokens.spacingVerticalSNudge
+    } ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,
+
     maxHeight: '260px',
     ...typographyStyles.body1,
   },
   large: {
     minHeight: '64px',
-    ...shorthands.padding(
-      tokens.spacingVerticalS,
-      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,
-    ),
+    padding: `${tokens.spacingVerticalS} ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`}`,
+
     maxHeight: '320px',
     ...typographyStyles.body2,
   },
diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.styles.ts b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.styles.ts
index a2e1923d589c64..310627d64fce91 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.styles.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.styles.ts
@@ -1,5 +1,5 @@
 import { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ToolbarSlots, ToolbarState } from './Toolbar.types';
 
 export const toolbarClassNames: SlotClassNames<ToolbarSlots> = {
@@ -13,21 +13,15 @@ const useStyles = makeStyles({
   root: {
     display: 'flex',
     alignItems: 'center',
-    ...shorthands.padding('4px', '8px'),
+    padding: '4px 8px',
   },
   vertical: {
     flexDirection: 'column',
     width: 'fit-content',
   },
-  small: {
-    ...shorthands.padding('0px', '4px'),
-  },
-  medium: {
-    ...shorthands.padding('4px', '8px'),
-  },
-  large: {
-    ...shorthands.padding('4px', '20px'),
-  },
+  small: { padding: '0px 4px' },
+  medium: { padding: '4px 8px' },
+  large: { padding: '4px 20px' },
 });
 
 /**
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts b/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
index 421490806dbab4..fd92c11bacc3df 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { useButtonStyles_unstable } from '@fluentui/react-button';
 import { ToolbarButtonState } from './ToolbarButton.types';
 
@@ -8,7 +8,7 @@ const useBaseStyles = makeStyles({
   },
   verticalIcon: {
     fontSize: '24px',
-    ...shorthands.margin('0'),
+    margin: '0',
   },
 });
 
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts b/packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts
index 549ee407c1c5cc..723a8154121403 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { useDividerStyles_unstable } from '@fluentui/react-divider';
 import type { ToolbarDividerState } from './ToolbarDivider.types';
 
@@ -7,7 +7,7 @@ const useBaseStyles = makeStyles({
   root: {
     display: 'inline-flex',
     maxWidth: '1px',
-    ...shorthands.padding('0', '12px'),
+    padding: '0 12px',
   },
   vertical: {
     maxWidth: 'initial',
diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.styles.ts b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.styles.ts
index 7a62104cbc2a20..7932679192807a 100644
--- a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.styles.ts
+++ b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.styles.ts
@@ -1,4 +1,4 @@
-import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { createArrowStyles } from '@fluentui/react-positioning';
 import { tokens } from '@fluentui/react-theme';
 import { arrowHeight } from './private/constants';
@@ -22,10 +22,10 @@ const useStyles = makeStyles({
     fontSize: tokens.fontSizeBase200,
     lineHeight: tokens.lineHeightBase200,
     overflowWrap: 'break-word',
-
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
-    ...shorthands.padding('4px', '11px', '6px', '11px'), // '5px 12px 7px 12px' minus the border width '1px'
+    borderRadius: `${tokens.borderRadiusMedium}`,
+    border: `1px solid ${tokens.colorTransparentStroke}`,
+    padding: '4px 11px 6px 11px',
+    // '5px 12px 7px 12px' minus the border width '1px'
     backgroundColor: tokens.colorNeutralBackground1,
     color: tokens.colorNeutralForeground1,
 
diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts
index 725281b355aa98..4b412add971dc8 100644
--- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts
@@ -1,6 +1,6 @@
 import type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { treeItemLevelToken } from '../../utils/tokens';
 import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
@@ -75,7 +75,7 @@ const useMainBaseStyles = makeResetStyles({
 
 const useMainStyles = makeStyles({
   withDescription: {
-    ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalS),
+    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`,
   },
 });
 
diff --git a/scripts/test-ssr/src/utils/renderToHTML.test.ts b/scripts/test-ssr/src/utils/renderToHTML.test.ts
index b22e6b6004b97a..b97d8468496b82 100644
--- a/scripts/test-ssr/src/utils/renderToHTML.test.ts
+++ b/scripts/test-ssr/src/utils/renderToHTML.test.ts
@@ -42,7 +42,9 @@ exports.App = App;
     const htmlContent = await fs.promises.readFile(htmlOutfile, { encoding: 'utf8' });
 
     // <style> element with rehydration attribute
-    expect(htmlContent).toContain('<style data-make-styles-bucket="d" data-make-styles-rehydration="true">');
+    expect(htmlContent).toContain(
+      '<style data-make-styles-bucket="d" data-priority="0" data-make-styles-rehydration="true">',
+    );
     // <script> element with proper "src"
     expect(htmlContent).toContain('<script src="esm.js"></script>');
     // Contents of App component
diff --git a/yarn-ci.sh b/yarn-ci.sh
index 90756ae57c091d..759937f8bd1328 100755
--- a/yarn-ci.sh
+++ b/yarn-ci.sh
@@ -19,7 +19,7 @@ while [ $attempt -le $MAX_RETRIES ]; do
 
   # `timeout` is in GNU coreutils. These are installed by default on Linux but not on Mac.
   # https://www.gnu.org/software/coreutils/manual/html_node/timeout-invocation.html#index-timeout
-  timeout -k "$((MAX_TIME+1))m" "${MAX_TIME}m" yarn install --frozen-lockfile
+  timeout -k "$((MAX_TIME+1))m" "${MAX_TIME}m" yarn install
   result=$?
 
   if [ $result = 0 ]; then
diff --git a/yarn.lock b/yarn.lock
index b53279e0eb1021..66b7ad6ad09947 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -259,7 +259,7 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@7.23.6", "@babel/generator@>=7", "@babel/generator@^7.10.3", "@babel/generator@^7.12.11", "@babel/generator@^7.12.13", "@babel/generator@^7.12.5", "@babel/generator@^7.23.6", "@babel/generator@^7.4.4", "@babel/generator@^7.7.2":
+"@babel/generator@7.23.6", "@babel/generator@>=7", "@babel/generator@^7.10.3", "@babel/generator@^7.12.11", "@babel/generator@^7.12.13", "@babel/generator@^7.12.5", "@babel/generator@^7.23.0", "@babel/generator@^7.23.6", "@babel/generator@^7.4.4", "@babel/generator@^7.7.2":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
   integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
@@ -1466,7 +1466,7 @@
     "@babel/parser" "^7.24.0"
     "@babel/types" "^7.24.0"
 
-"@babel/traverse@7.24.0", "@babel/traverse@>=7", "@babel/traverse@^7.10.3", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.13", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.0", "@babel/traverse@^7.24.0", "@babel/traverse@^7.4.5":
+"@babel/traverse@7.24.0", "@babel/traverse@>=7", "@babel/traverse@^7.10.3", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.13", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.0", "@babel/traverse@^7.23.2", "@babel/traverse@^7.24.0", "@babel/traverse@^7.4.5":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.0.tgz#4a408fbf364ff73135c714a2ab46a5eab2831b1e"
   integrity sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==
@@ -1972,31 +1972,29 @@
     "@griffel/react" "^1.0.0"
     tslib "^2.1.0"
 
-"@griffel/babel-preset@1.4.20", "@griffel/babel-preset@^1.4.20":
-  version "1.4.20"
-  resolved "https://registry.yarnpkg.com/@griffel/babel-preset/-/babel-preset-1.4.20.tgz#047eb62f104e7bea781820816263e7407fafe543"
-  integrity sha512-fN3ntaNnshPY6rY8ysNrQgo/EdheZjcAi/xT8hBVV85VHFjuTkL+aKA2S3Ufea4gdSt9R4eGavMkPsO08r8dEA==
+"@griffel/babel-preset@1.4.20", "@griffel/babel-preset@^1.4.20", "@griffel/babel-preset@^1.5.7", "@griffel/babel-preset@file:./artifacts/griffel-babel-preset-1.5.7-kkw69n.tgz":
+  version "1.5.7"
+  resolved "file:./artifacts/griffel-babel-preset-1.5.7-kkw69n.tgz#a2bacd47d6e3a3acf6b4a47867c48cdf05d9f954"
   dependencies:
-    "@babel/core" "^7.12.13"
-    "@babel/generator" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.12.13"
-    "@griffel/core" "^1.14.1"
-    "@linaria/babel-preset" "^3.0.0-beta.23"
+    "@babel/core" "^7.23.2"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@griffel/core" "^1.15.3"
+    "@linaria/babel-preset" "^3.0.0-beta.24"
     "@linaria/shaker" "^3.0.0-beta.22"
     ajv "^8.4.0"
     stylis "^4.2.0"
     tslib "^2.1.0"
 
-"@griffel/core@^1.14.1":
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@griffel/core/-/core-1.14.1.tgz#1efe8f5cd5c4b348636264061c3a6cf4040b08f4"
-  integrity sha512-KQ6yueap1zff9TJrn7MdfSAHDMDVP6Ec97gnpCi4NOeKiyCyT13MwPCmkkK0o/poaV1f9MdHhUTQZCpK0QtxzQ==
+"@griffel/core@^1.14.1", "@griffel/core@^1.15.3", "@griffel/core@file:./artifacts/griffel-core-1.15.3-tllqal.tgz":
+  version "1.15.3"
+  resolved "file:./artifacts/griffel-core-1.15.3-tllqal.tgz#4084fe8bb481f2d9d5c819128f7a7c972f9c7b33"
   dependencies:
     "@emotion/hash" "^0.9.0"
-    "@griffel/style-types" "^1.0.1"
-    csstype "^3.1.2"
+    "@griffel/style-types" "^1.0.4"
+    csstype "^3.1.3"
     rtl-css-js "^1.16.1"
     stylis "^4.2.0"
     tslib "^2.1.0"
@@ -2010,20 +2008,18 @@
     csstype "^3.1.2"
     tslib "^2.1.0"
 
-"@griffel/jest-serializer@1.1.16":
-  version "1.1.16"
-  resolved "https://registry.yarnpkg.com/@griffel/jest-serializer/-/jest-serializer-1.1.16.tgz#c205ef47eecc17e41d22f4b834d485fb2f3c8ca3"
-  integrity sha512-43EK5EdX/xsSKQl7ObLfM/IxiZU6imlkFoJj7bzsP7aykMn6xePe11oAwMcZb+lMmiP/gtEsNMvsi1UBt+6NFw==
+"@griffel/jest-serializer@1.1.16", "@griffel/jest-serializer@file:./artifacts/griffel-jest-serializer-1.1.23-l2rog4.tgz":
+  version "1.1.23"
+  resolved "file:./artifacts/griffel-jest-serializer-1.1.23-l2rog4.tgz#1c2641b1a7c96e3e1fd23f60f285bade5ad950b2"
   dependencies:
-    "@griffel/core" "^1.14.1"
+    "@griffel/core" "^1.15.3"
     tslib "^2.1.0"
 
-"@griffel/react@^1.0.0", "@griffel/react@^1.5.14":
-  version "1.5.14"
-  resolved "https://registry.yarnpkg.com/@griffel/react/-/react-1.5.14.tgz#ea58ebd82007d421d16da49b7e57eccba391d609"
-  integrity sha512-/x6cy6xMtpow1r+Zrw/hMKHwo+imFAgKaZ3A/+M8GyT3L9AFxK1Kyg4JvARPjLBAn9Q2q5dkCr78jOguuVSScg==
+"@griffel/react@^1.0.0", "@griffel/react@^1.5.14", "@griffel/react@file:./artifacts/griffel-react-1.5.21-bc72ld.tgz":
+  version "1.5.21"
+  resolved "file:./artifacts/griffel-react-1.5.21-bc72ld.tgz#0bb927362b6512962cf47cff519c4ae7cc025751"
   dependencies:
-    "@griffel/core" "^1.14.1"
+    "@griffel/core" "^1.15.3"
     tslib "^2.1.0"
 
 "@griffel/shadow-dom@0.1.5":
@@ -2034,33 +2030,30 @@
     "@griffel/core" "^1.14.1"
     tslib "^2.1.0"
 
-"@griffel/style-types@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@griffel/style-types/-/style-types-1.0.1.tgz#4e7bca38d54c7371114309a5697869099a693e84"
-  integrity sha512-nhVryiNHhoBt5L93tfDYGoE4KtWvhBvY7y1yR1n6WKpRjasgw3GI2pBwiMiVt68bycnyvXIvcJjJTr0QM22VLQ==
+"@griffel/style-types@^1.0.4", "@griffel/style-types@file:./artifacts/griffel-style-types-1.0.4-fj1ykj.tgz":
+  version "1.0.4"
+  resolved "file:./artifacts/griffel-style-types-1.0.4-fj1ykj.tgz#03ddf0e7e9657196b08884302c147a11a086b9d6"
   dependencies:
-    csstype "^3.1.2"
+    csstype "^3.1.3"
 
-"@griffel/webpack-extraction-plugin@0.3.18":
-  version "0.3.18"
-  resolved "https://registry.yarnpkg.com/@griffel/webpack-extraction-plugin/-/webpack-extraction-plugin-0.3.18.tgz#1ffe5ad7d1220b5b75180dd64177e88d2e2d054b"
-  integrity sha512-FYqaacXXMG3ekAXdpkS6Snc/ECW095pMIvLY8bDtOkNZidslbbg5gF/KqVrOqRcR3gDPXLpT3GylfGEHVrvEgw==
+"@griffel/webpack-extraction-plugin@0.3.18", "@griffel/webpack-extraction-plugin@file:./artifacts/griffel-webpack-extraction-plugin-0.5.1-b0kr30.tgz":
+  version "0.5.1"
+  resolved "file:./artifacts/griffel-webpack-extraction-plugin-0.5.1-b0kr30.tgz#aa7249bcc1a6a36ef9a04c38f2049d65824a4faa"
   dependencies:
-    "@babel/core" "^7.12.13"
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-    "@griffel/core" "^1.14.1"
+    "@babel/core" "^7.23.2"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@griffel/core" "^1.15.3"
     stylis "^4.2.0"
     tslib "^2.1.0"
 
-"@griffel/webpack-loader@2.1.20":
-  version "2.1.20"
-  resolved "https://registry.yarnpkg.com/@griffel/webpack-loader/-/webpack-loader-2.1.20.tgz#a5842a06bf4e32301962d7a1dd3ecca8247100ae"
-  integrity sha512-R4Sk64rZIkWuTQX0mpzOFm5ULJ0HpnD3GMxOvprqNTpQmaCaL89FHOMc1le90s25clQfmxTAZuCueBOJHYxNCA==
+"@griffel/webpack-loader@2.1.20", "@griffel/webpack-loader@file:./artifacts/griffel-webpack-loader-2.2.9-5iulaf.tgz":
+  version "2.2.9"
+  resolved "file:./artifacts/griffel-webpack-loader-2.2.9-5iulaf.tgz#fa56b03e719edc8d9562dbc48b0528edc42162ed"
   dependencies:
-    "@babel/core" "^7.12.13"
-    "@griffel/babel-preset" "^1.4.20"
-    enhanced-resolve "^5.8.2"
+    "@babel/core" "^7.23.2"
+    "@griffel/babel-preset" "^1.5.7"
+    enhanced-resolve "^5.15.0"
     tslib "^2.1.0"
 
 "@gulp-sourcemaps/identity-map@1.X":
@@ -2427,7 +2420,27 @@
     source-map "^0.7.3"
     stylis "^3.5.4"
 
-"@linaria/core@^3.0.0-beta.22":
+"@linaria/babel-preset@^3.0.0-beta.24":
+  version "3.0.0-beta.24"
+  resolved "https://registry.yarnpkg.com/@linaria/babel-preset/-/babel-preset-3.0.0-beta.24.tgz#921b396afc37ebb5df84b8a02d37a56ea49cb54b"
+  integrity sha512-6DiKeeOpFXLQnXZvCPtGsdBMIGouylsYqlzA4XS1GxcHvK2V8BUtIGxY9UCg3WYOme/IlPKee7unjun0I4iqkA==
+  dependencies:
+    "@babel/core" "^7.18.2"
+    "@babel/generator" ">=7"
+    "@babel/plugin-proposal-export-namespace-from" ">=7"
+    "@babel/plugin-syntax-dynamic-import" ">=7"
+    "@babel/plugin-transform-modules-commonjs" "^7.18.2"
+    "@babel/template" ">=7"
+    "@babel/traverse" ">=7"
+    "@linaria/core" "3.0.0-beta.22"
+    "@linaria/logger" "3.0.0-beta.20"
+    "@linaria/utils" "3.0.0-beta.20"
+    cosmiconfig "^5.1.0"
+    find-up "^5.0.0"
+    source-map "^0.7.3"
+    stylis "^3.5.4"
+
+"@linaria/core@3.0.0-beta.22", "@linaria/core@^3.0.0-beta.22":
   version "3.0.0-beta.22"
   resolved "https://registry.yarnpkg.com/@linaria/core/-/core-3.0.0-beta.22.tgz#170dbeaf7bf7f7b5607d8e68d0d616d739b673b8"
   integrity sha512-BPSecW8QmhQ0y+5cWXEja+MTmLsuo0T1PjqRlSWsmDgjJFFObqCnPEgbR1KNtQb3Msmx1/9q3dYKpA5Zk3g8KQ==
@@ -2435,7 +2448,7 @@
     "@linaria/logger" "^3.0.0-beta.20"
     "@linaria/utils" "^3.0.0-beta.20"
 
-"@linaria/logger@^3.0.0-beta.20":
+"@linaria/logger@3.0.0-beta.20", "@linaria/logger@^3.0.0-beta.20":
   version "3.0.0-beta.20"
   resolved "https://registry.yarnpkg.com/@linaria/logger/-/logger-3.0.0-beta.20.tgz#f6f6476afe3d99880a88794bbc16b0f4b2bc1d31"
   integrity sha512-wCxWnldCHf7HXdLG3QtbKyBur+z5V1qZTouSEvcVYDfd4aSRPOi/jLdwsZlsUq2PFGpA3jW6JnreZJ/vxuEl7g==
@@ -2466,7 +2479,7 @@
     babel-plugin-transform-react-remove-prop-types "^0.4.24"
     ts-invariant "^0.10.3"
 
-"@linaria/utils@^3.0.0-beta.20":
+"@linaria/utils@3.0.0-beta.20", "@linaria/utils@^3.0.0-beta.20":
   version "3.0.0-beta.20"
   resolved "https://registry.yarnpkg.com/@linaria/utils/-/utils-3.0.0-beta.20.tgz#0965df816120a1973c4559b746571c01c6cb9bef"
   integrity sha512-SKRC9dBApzu0kTksVtGZ7eJz1vMu7xew/JEAjQj6XTQDblzWpTPyKQHBOGXNkqXjIB8PwAqWfvKzKapzaOwQaQ==
@@ -9869,6 +9882,11 @@ csstype@^3.0.2, csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 csv-stringify@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/csv-stringify/-/csv-stringify-6.2.0.tgz#f89881e8f61293bf5af11f421266b5da7b744030"