chore: cleanup sx prop (#7032)

francinelucca · web-flow · commit 9fce5419ce76 · 2025-10-20T12:08:45.000Z
diff --git a/.changeset/mean-kangaroos-count.md b/.changeset/mean-kangaroos-count.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": major
+"@primer/styled-react": patch
+---
+
+- remove sx, SxProp, exports
+- add type ThemeColorPaths, type ThemeShadowPaths
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -31,8 +31,6 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type BannerProps",
   "BaseStyles",
   "type BaseStylesProps",
-  "type BetterCssProperties",
-  "type BetterSystemStyleObject",
   "BranchName",
   "type BranchNameProps",
   "Breadcrumb",
@@ -95,7 +93,6 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "LinkButton",
   "type LinkButtonProps",
   "type LinkProps",
-  "merge",
   "NavList",
   "type NavListDividerProps",
   "type NavListGroupHeadingProps",
@@ -172,8 +169,6 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type SubNavLinkProps",
   "type SubNavLinksProps",
   "type SubNavProps",
-  "sx",
-  "type SxProp",
   "Text",
   "Textarea",
   "type TextareaProps",
@@ -184,9 +179,11 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type TextInputWithTokensProps",
   "type TextProps",
   "theme",
+  "ThemeColorPaths",
   "themeGet",
   "ThemeProvider",
   "type ThemeProviderProps",
+  "ThemeShadowPaths",
   "Timeline",
   "type TimelineBadgeProps",
   "type TimelineBodyProps",
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -1,6 +1,6 @@
 'use client'
 
-export {default as theme} from './theme'
+export {default as theme, type ThemeColorPaths, type ThemeShadowPaths} from './theme'
 export {get as themeGet} from './constants'
 export {default as BaseStyles} from './BaseStyles'
 export type {BaseStylesProps} from './BaseStyles'
@@ -225,8 +225,5 @@ export type {
   ChildrenPropTypes as PageHeaderChildrenPropTypes,
 } from './PageHeader'
 
-export {default as sx, merge} from './sx'
-export type {BetterCssProperties, BetterSystemStyleObject, SxProp} from './sx'
-
 export {SkeletonBox} from './Skeleton'
 export type {SkeletonBoxProps} from './Skeleton'
diff --git a/packages/react/src/sx.ts b/packages/react/src/sx.ts
@@ -2,7 +2,6 @@ import type {SystemCssProperties, SystemStyleObject} from '@styled-system/css'
 import css from '@styled-system/css'
 import type {ThemeColorPaths, ThemeShadowPaths} from './theme'
 import type {ColorProps, BorderColorProps, ShadowProps} from 'styled-system'
-import merge from 'deepmerge'
 
 export type BetterCssProperties = {
   [K in keyof SystemCssProperties]: K extends keyof ColorProps
@@ -37,5 +36,3 @@ export interface SxProp {
 const sx = (props: SxProp) => css(props.sx)
 
 export default sx
-
-export {merge}
diff --git a/packages/styled-react/src/components/ActionMenu.tsx b/packages/styled-react/src/components/ActionMenu.tsx
@@ -1,5 +1,5 @@
-import {ActionMenu as PrimerActionMenu, type SxProp, type SlotMarker} from '@primer/react'
-import {sx} from '../sx'
+import {ActionMenu as PrimerActionMenu, type SlotMarker} from '@primer/react'
+import {sx, type SxProp} from '../sx'
 import styled from 'styled-components'
 import type {ComponentProps} from 'react'
 
diff --git a/packages/styled-react/src/components/Button.tsx b/packages/styled-react/src/components/Button.tsx
@@ -1,6 +1,5 @@
 import {Button as PrimerButton, type ButtonProps as PrimerButtonProps, type SlotMarker} from '@primer/react'
-import type {SxProp, CSSCustomProperties} from '../sx'
-import type {BetterSystemStyleObject} from '../styled-props'
+import type {SxProp, CSSCustomProperties, BetterSystemStyleObject} from '../sx'
 import {forwardRef} from 'react'
 import type {ForwardRefComponent} from '../polymorphic'
 import styled from 'styled-components'
diff --git a/packages/styled-react/src/components/CircleBadge.tsx b/packages/styled-react/src/components/CircleBadge.tsx
@@ -1,11 +1,7 @@
-import {
-  CircleBadge as PrimerCircleBadge,
-  type CircleBadgeProps as PrimerCircleBadgeProps,
-  sx,
-  type SxProp,
-} from '@primer/react'
+import {CircleBadge as PrimerCircleBadge, type CircleBadgeProps as PrimerCircleBadgeProps} from '@primer/react'
 import styled from 'styled-components'
 import {type ForwardRefComponent} from '../polymorphic'
+import sx, {type SxProp} from '../sx'
 
 type CircleBadgeProps<As extends React.ElementType> = PrimerCircleBadgeProps<As> & SxProp
 
diff --git a/packages/styled-react/src/components/FormControl.tsx b/packages/styled-react/src/components/FormControl.tsx
@@ -1,11 +1,7 @@
-import {
-  FormControl as PrimerFormControl,
-  type FormControlProps as PrimerFormControlProps,
-  type SxProp,
-} from '@primer/react'
+import {FormControl as PrimerFormControl, type FormControlProps as PrimerFormControlProps} from '@primer/react'
 import {type PropsWithChildren} from 'react'
 import styled from 'styled-components'
-import {sx} from '../sx'
+import {sx, type SxProp} from '../sx'
 
 type FormControlProps = PropsWithChildren<PrimerFormControlProps> & SxProp
 
diff --git a/packages/styled-react/src/components/IconButton.tsx b/packages/styled-react/src/components/IconButton.tsx
@@ -2,13 +2,12 @@ import {
   IconButton as PrimerIconButton,
   type IconButtonProps as PrimerIconButtonProps,
   type SlotMarker,
-  type SxProp,
 } from '@primer/react'
 import {type ForwardRefComponent} from '../polymorphic'
 import {generateCustomSxProp} from './Button'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
-import {sx} from '../sx'
+import {sx, type SxProp} from '../sx'
 
 type IconButtonProps = PrimerIconButtonProps & SxProp & {as?: React.ElementType}
 
diff --git a/packages/styled-react/src/components/LinkButton.tsx b/packages/styled-react/src/components/LinkButton.tsx
@@ -1,11 +1,7 @@
-import {
-  LinkButton as PrimerLinkButton,
-  type LinkButtonProps as PrimerLinkButtonProps,
-  sx,
-  type SxProp,
-} from '@primer/react'
+import {LinkButton as PrimerLinkButton, type LinkButtonProps as PrimerLinkButtonProps} from '@primer/react'
 import styled from 'styled-components'
 import {type ForwardRefComponent} from '../polymorphic'
+import {sx, type SxProp} from '../sx'
 
 type LinkButtonProps = PrimerLinkButtonProps & SxProp
 
diff --git a/packages/styled-react/src/components/Overlay.tsx b/packages/styled-react/src/components/Overlay.tsx
@@ -1,6 +1,7 @@
-import {Overlay as PrimerOverlay, type OverlayProps as PrimerOverlayProps, sx, type SxProp} from '@primer/react'
+import {Overlay as PrimerOverlay, type OverlayProps as PrimerOverlayProps} from '@primer/react'
 import styled from 'styled-components'
 import {type ForwardRefComponent} from '../polymorphic'
+import {sx, type SxProp} from '../sx'
 
 type OverlayProps = PrimerOverlayProps & SxProp
 
diff --git a/packages/styled-react/src/components/Tooltip.tsx b/packages/styled-react/src/components/Tooltip.tsx
@@ -1,11 +1,7 @@
-import {
-  Tooltip as PrimerTooltip,
-  type TooltipProps as PrimerTooltipProps,
-  type SxProp,
-  type SlotMarker,
-} from '@primer/react'
+import {Tooltip as PrimerTooltip, type TooltipProps as PrimerTooltipProps, type SlotMarker} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef, type ForwardRefExoticComponent, type RefAttributes} from 'react'
+import type {SxProp} from '../sx'
 
 type TooltipProps = PrimerTooltipProps & SxProp
 
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
@@ -13,7 +13,6 @@ export {
   type ThemeProviderProps,
   type BaseStylesProps,
 } from './components/FeatureFlaggedTheming'
-export {merge} from '@primer/react'
 export {theme} from '@primer/react'
 export {themeGet} from '@primer/react'
 
@@ -84,6 +83,6 @@ export {Token, type TokenProps} from './components/Token'
 export {Truncate, type TruncateProps} from './components/Truncate'
 export {UnderlineNav, type UnderlineNavProps, type UnderlineNavItemProps} from './components/UnderlineNav'
 
-export {sx, type SxProp} from './sx'
+export {merge, sx, type SxProp} from './sx'
 
-export type {BetterSystemStyleObject} from './styled-props'
+export {type BetterSystemStyleObject} from './sx'
diff --git a/packages/styled-react/src/styled-props.ts b/packages/styled-react/src/styled-props.ts
@@ -23,5 +23,3 @@ export type StyledProps = SxProp &
   BorderProps &
   PositionProps &
   ShadowProps
-
-export type {BetterSystemStyleObject} from '@primer/react'
diff --git a/packages/styled-react/src/sx.ts b/packages/styled-react/src/sx.ts
@@ -1,4 +1,41 @@
-export {sx, type SxProp} from '@primer/react'
+import type {SystemCssProperties, SystemStyleObject} from '@styled-system/css'
+import css from '@styled-system/css'
+import type {ThemeColorPaths, ThemeShadowPaths} from '@primer/react'
+import type {ColorProps, BorderColorProps, ShadowProps} from 'styled-system'
+import merge from 'deepmerge'
+
+export type BetterCssProperties = {
+  [K in keyof SystemCssProperties]: K extends keyof ColorProps
+    ? ThemeColorPaths | SystemCssProperties[K]
+    : K extends keyof BorderColorProps
+      ? ThemeColorPaths | SystemCssProperties[K]
+      : K extends keyof ShadowProps
+        ? ThemeShadowPaths | SystemCssProperties[K]
+        : SystemCssProperties[K]
+}
+
+// Support CSS custom properties in the `sx` prop
 export type CSSCustomProperties = {
   [key: `--${string}`]: string | number
 }
+
+type CSSSelectorObject = {
+  [cssSelector: string]: SystemStyleObject | CSSCustomProperties
+}
+
+export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject | CSSCustomProperties | CSSSelectorObject
+
+export interface SxProp {
+  /**
+   * @deprecated The `sx` prop is deprecated. Replace with a `div` or
+   * appropriate HTML element instead, with a CSS class for styling.
+   * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
+   * */
+  sx?: BetterSystemStyleObject
+}
+
+const sx = (props: SxProp) => css(props.sx)
+
+export default sx
+
+export {merge, sx}
