fix: minify styled-components css

package.config.ts

@@ -14,6 +14,6 @@ export default defineConfig({
     noImplicitBrowsersList: 'off',
   },
   tsconfig: 'tsconfig.dist.json',
-  babel: {reactCompiler: true},
+  babel: {reactCompiler: true, styledComponents: true},
   reactCompilerOptions: {target: '18'},
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.10.17",
+  "version": "2.10.18-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -122,7 +122,7 @@
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.12.3",
+    "@sanity/pkg-utils": "^6.13.0",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.20",
@@ -155,6 +155,7 @@
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.4",
     "babel-plugin-react-compiler": "19.0.0-beta-55955c9-20241229",
+    "babel-plugin-styled-components": "^2.1.4",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.13.0",

src/core/components/autocomplete/autocomplete.styles.tsx

@@ -5,7 +5,7 @@ import {Box} from '../../primitives'
 /**
  * @internal
  */
-export const Root = styled.div`
+export const StyledAutocomplete = styled.div`
   line-height: 0;
 `
 

src/core/components/autocomplete/autocomplete.tsx

@@ -33,7 +33,7 @@
   TextInput,
 } from '../../primitives'
 import {Radius} from '../../types'
-import {AnimatedSpinnerIcon, ListBox, Root} from './autocomplete.styles'
+import {AnimatedSpinnerIcon, ListBox, StyledAutocomplete} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
@@ -97,7 +97,7 @@
 const DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>
   option.value.toLowerCase().indexOf(query.toLowerCase()) > -1
 
 const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   Option extends BaseAutocompleteOption,
 >(
   props: AutocompleteProps<Option> &
@@ -633,14 +633,14 @@
   const results = useMemo(() => {
     if (renderPopover) {
       return renderPopover(
         {
           content,
           hidden: !expanded,
           inputElement: inputElementRef.current,
           onMouseEnter: handlePopoverMouseEnter,
           onMouseLeave: handlePopoverMouseLeave,
         },
         resultsPopoverElementRef,
       )
     }
 
@@ -663,7 +663,7 @@
         portal
         radius={radius}
         ref={resultsPopoverElementRef}
         referenceElement={inputElementRef.current}
         {...popover}
       />
     )
@@ -679,7 +679,7 @@
   ])
 
   return (
-    <Root
+    <StyledAutocomplete
       data-ui="Autocomplete"
       onBlur={handleRootBlur}
       onFocus={handleRootFocus}
@@ -688,7 +688,7 @@
     >
       {input}
       {results}
-    </Root>
+    </StyledAutocomplete>
   )
 })
 

src/core/components/breadcrumbs/breadcrumbs.styles.ts

@@ -1,7 +1,7 @@
 import {styled} from 'styled-components'
 import {Button} from '../../primitives'
 
-export const Root = styled.ol`
+export const StyledBreadcrumbs = styled.ol`
   margin: 0;
   padding: 0;
   display: flex;

src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -10,7 +10,7 @@
 } from 'react'
 import {useArrayProp, useClickOutsideEvent} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
-import {ExpandButton, Root} from './breadcrumbs.styles'
+import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
 
 /**
  * @beta
@@ -24,7 +24,7 @@
 /**
  * @beta
  */
 export const Breadcrumbs = forwardRef(function Breadcrumbs(
   props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
   ref: React.ForwardedRef<HTMLOListElement>,
 ) {
@@ -81,7 +81,7 @@
   }, [collapse, expand, maxLength, open, rawItems, space])
 
   return (
-    <Root data-ui="Breadcrumbs" {...restProps} ref={ref}>
+    <StyledBreadcrumbs data-ui="Breadcrumbs" {...restProps} ref={ref}>
       {items.map((item, itemIndex) => (
         <Fragment key={itemIndex}>
           {itemIndex > 0 && (
@@ -92,7 +92,7 @@
           <Box as="li">{item}</Box>
         </Fragment>
       ))}
-    </Root>
+    </StyledBreadcrumbs>
   )
 })
 Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'

src/core/components/dialog/dialog.tsx

@@ -99,7 +99,7 @@ function isTargetWithinScope(
   )
 }
 
-const Root = styled(Layer)<
+const StyledDialog = styled(Layer)<
   ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps & AnimationDialogStyleProps
 >(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle)
 
@@ -388,7 +388,7 @@ export const Dialog = forwardRef(function Dialog(
 
   return (
     <Portal __unstable_name={portalProp}>
-      <Root
+      <StyledDialog
         {...restProps}
         $animate={animate}
         $padding={padding}
@@ -424,7 +424,7 @@ export const Dialog = forwardRef(function Dialog(
           {children}
         </DialogCard>
         <div ref={postDivRef} tabIndex={0} />
-      </Root>
+      </StyledDialog>
     </Portal>
   )
 })

src/core/components/hotkeys/hotkeys.tsx

@@ -15,7 +15,7 @@ export interface HotkeysProps {
   keys?: string[]
 }
 
-const Root = styled.kbd`
+const StyledHotkeys = styled.kbd`
   font: inherit;
   padding: 1px;
 
@@ -47,15 +47,15 @@ export const Hotkeys = forwardRef(function Hotkeys(
   }
 
   return (
-    <Root data-ui="Hotkeys" {...restProps} ref={ref}>
+    <StyledHotkeys data-ui="Hotkeys" {...restProps} ref={ref}>
       <Inline as="span" space={space}>
         {keys.map((key, i) => (
           <Key fontSize={fontSize} key={i} padding={padding} radius={radius}>
             {key}
           </Key>
         ))}
       </Inline>
-    </Root>
+    </StyledHotkeys>
   )
 })
 Hotkeys.displayName = 'ForwardRef(Hotkeys)'

src/core/components/menu/menu.tsx

@@ -31,7 +31,7 @@ export interface MenuProps extends ResponsivePaddingProps {
   'onBlurCapture'?: (event: FocusEvent) => void
 }
 
-const Root = styled(Box)`
+const StyledMenu = styled(Box)`
   outline: none;
   overflow: auto;
 `
@@ -159,7 +159,7 @@ export const Menu = forwardRef(function Menu(
 
   return (
     <MenuContext.Provider value={value}>
-      <Root
+      <StyledMenu
         data-ui="Menu"
         {...restProps}
         onKeyDown={handleKeyDown}
@@ -169,7 +169,7 @@ export const Menu = forwardRef(function Menu(
         tabIndex={-1}
       >
         <Stack space={space}>{children}</Stack>
-      </Root>
+      </StyledMenu>
     </MenuContext.Provider>
   )
 })

src/core/components/skeleton/skeleton.tsx

@@ -6,10 +6,9 @@ import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {skeletonStyle} from './styles'
 
-const Root = styled(Box)<{$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  skeletonStyle,
-)
+const StyledSkeleton = styled(Box)<
+  {$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps
+>(responsiveRadiusStyle, skeletonStyle)
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -46,7 +45,7 @@ export const Skeleton = forwardRef(function Skeleton(
   }, [delay])
 
   return (
-    <Root
+    <StyledSkeleton
       {...restProps}
       $animated={animated}
       $radius={useArrayProp(radius)}

src/core/components/skeleton/textSkeleton.tsx

@@ -5,7 +5,7 @@ import {useArrayProp} from '../../hooks'
 import {ThemeProps, _responsive} from '../../styles'
 import {Skeleton, SkeletonProps} from './skeleton'
 
-const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
+const StyledSkeleton = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
   props: {
     $size: number[]
     $style: ThemeFontKey
@@ -69,7 +69,7 @@ export const TextSkeleton = forwardRef(function TextSkeleton(
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)
 
-  return <Root {...restProps} $size={$size} ref={ref} $style="text" />
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="text" />
 })
 TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
 
@@ -85,7 +85,7 @@ export const LabelSkeleton = forwardRef(function TextSkeleton(
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)
 
-  return <Root {...restProps} $size={$size} ref={ref} $style="label" />
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="label" />
 })
 LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
 
@@ -101,7 +101,7 @@ export const HeadingSkeleton = forwardRef(function TextSkeleton(
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)
 
-  return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="heading" />
 })
 HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
 
@@ -117,6 +117,6 @@ export const CodeSkeleton = forwardRef(function TextSkeleton(
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)
 
-  return <Root {...restProps} $size={$size} ref={ref} $style="code" />
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="code" />
 })
 CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

src/core/components/toast/toast.tsx

@@ -40,7 +40,7 @@ const ROLES = {
   info: 'alert',
 } as const
 
-const Root = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
+const StyledToast = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
   rootStyles,
 )
 
@@ -60,7 +60,7 @@ export function Toast(
   const role = status ? ROLES[status] : 'status'
 
   return (
-    <Root
+    <StyledToast
       data-ui="Toast"
       role={role}
       {...restProps}
@@ -100,7 +100,7 @@ export function Toast(
           </Box>
         )}
       </Flex>
-    </Root>
+    </StyledToast>
   )
 }
 

src/core/components/toast/toastProvider.tsx

@@ -28,7 +28,7 @@ export interface ToastProviderProps {
   zOffset?: number | number[]
 }
 
-const Root = styled(Layer)`
+const StyledToastProvider = styled(Layer)`
   position: fixed;
   top: 0;
   left: 0;
@@ -153,7 +153,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement<any
     <ToastContext.Provider value={value}>
       {children}
       {mounted && (
-        <Root data-ui="ToastProvider" zOffset={zOffset}>
+        <StyledToastProvider data-ui="ToastProvider" zOffset={zOffset}>
           <ToastContainer>
             <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
               <AnimatePresence initial={false}>
@@ -184,7 +184,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement<any
               </AnimatePresence>
             </Box>
           </ToastContainer>
-        </Root>
+        </StyledToastProvider>
       )}
     </ToastContext.Provider>
   )