Skip to content

Commit 67262ec

Browse files
stipsanstipsan
authored
fix: minify styled-components css (#1544)
1 parent 1b0008f commit 67262ec

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+177
-156
lines changed

‎package.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ export default defineConfig({
1414
noImplicitBrowsersList: 'off',
1515
},
1616
tsconfig: 'tsconfig.dist.json',
17-
babel: {reactCompiler: true},
17+
babel: {reactCompiler: true, styledComponents: true},
1818
reactCompilerOptions: {target: '18'},
1919
})

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@sanity/ui",
3-
"version": "2.10.17",
3+
"version": "2.10.18-canary.0",
44
"keywords": [
55
"sanity",
66
"ui",
@@ -122,7 +122,7 @@
122122
"@commitlint/cli": "^19.6.1",
123123
"@commitlint/config-conventional": "^19.6.0",
124124
"@juggle/resize-observer": "^3.4.0",
125-
"@sanity/pkg-utils": "^6.12.3",
125+
"@sanity/pkg-utils": "^6.13.0",
126126
"@sanity/prettier-config": "^1.0.3",
127127
"@sanity/semantic-release-preset": "^5.0.0",
128128
"@sanity/ui-workshop": "^2.0.20",
@@ -155,6 +155,7 @@
155155
"@typescript-eslint/parser": "^7.18.0",
156156
"@vitejs/plugin-react": "^4.3.4",
157157
"babel-plugin-react-compiler": "19.0.0-beta-55955c9-20241229",
158+
"babel-plugin-styled-components": "^2.1.4",
158159
"commitizen": "^4.3.1",
159160
"cypress": "^13.17.0",
160161
"cypress-real-events": "^1.13.0",

‎pnpm-lock.yaml

Lines changed: 25 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {Box} from '../../primitives'
55
/**
66
* @internal
77
*/
8-
export const Root = styled.div`
8+
export const StyledAutocomplete = styled.div`
99
line-height: 0;
1010
`
1111

‎src/core/components/autocomplete/autocomplete.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import {
3333
TextInput,
3434
} from '../../primitives'
3535
import {Radius} from '../../types'
36-
import {AnimatedSpinnerIcon, ListBox, Root} from './autocomplete.styles'
36+
import {AnimatedSpinnerIcon, ListBox, StyledAutocomplete} from './autocomplete.styles'
3737
import {AutocompleteOption} from './autocompleteOption'
3838
import {autocompleteReducer} from './autocompleteReducer'
3939
import {
@@ -679,7 +679,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
679679
])
680680

681681
return (
682-
<Root
682+
<StyledAutocomplete
683683
data-ui="Autocomplete"
684684
onBlur={handleRootBlur}
685685
onFocus={handleRootFocus}
@@ -688,7 +688,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
688688
>
689689
{input}
690690
{results}
691-
</Root>
691+
</StyledAutocomplete>
692692
)
693693
})
694694

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {styled} from 'styled-components'
22
import {Button} from '../../primitives'
33

4-
export const Root = styled.ol`
4+
export const StyledBreadcrumbs = styled.ol`
55
margin: 0;
66
padding: 0;
77
display: flex;

‎src/core/components/breadcrumbs/breadcrumbs.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from 'react'
1111
import {useArrayProp, useClickOutsideEvent} from '../../hooks'
1212
import {Box, Popover, Stack, Text} from '../../primitives'
13-
import {ExpandButton, Root} from './breadcrumbs.styles'
13+
import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
1414

1515
/**
1616
* @beta
@@ -81,7 +81,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
8181
}, [collapse, expand, maxLength, open, rawItems, space])
8282

8383
return (
84-
<Root data-ui="Breadcrumbs" {...restProps} ref={ref}>
84+
<StyledBreadcrumbs data-ui="Breadcrumbs" {...restProps} ref={ref}>
8585
{items.map((item, itemIndex) => (
8686
<Fragment key={itemIndex}>
8787
{itemIndex > 0 && (
@@ -92,7 +92,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
9292
<Box as="li">{item}</Box>
9393
</Fragment>
9494
))}
95-
</Root>
95+
</StyledBreadcrumbs>
9696
)
9797
})
9898
Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'

‎src/core/components/dialog/dialog.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ function isTargetWithinScope(
9999
)
100100
}
101101

102-
const Root = styled(Layer)<
102+
const StyledDialog = styled(Layer)<
103103
ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps & AnimationDialogStyleProps
104104
>(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle)
105105

@@ -388,7 +388,7 @@ export const Dialog = forwardRef(function Dialog(
388388

389389
return (
390390
<Portal __unstable_name={portalProp}>
391-
<Root
391+
<StyledDialog
392392
{...restProps}
393393
$animate={animate}
394394
$padding={padding}
@@ -424,7 +424,7 @@ export const Dialog = forwardRef(function Dialog(
424424
{children}
425425
</DialogCard>
426426
<div ref={postDivRef} tabIndex={0} />
427-
</Root>
427+
</StyledDialog>
428428
</Portal>
429429
)
430430
})

‎src/core/components/hotkeys/hotkeys.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export interface HotkeysProps {
1515
keys?: string[]
1616
}
1717

18-
const Root = styled.kbd`
18+
const StyledHotkeys = styled.kbd`
1919
font: inherit;
2020
padding: 1px;
2121
@@ -47,15 +47,15 @@ export const Hotkeys = forwardRef(function Hotkeys(
4747
}
4848

4949
return (
50-
<Root data-ui="Hotkeys" {...restProps} ref={ref}>
50+
<StyledHotkeys data-ui="Hotkeys" {...restProps} ref={ref}>
5151
<Inline as="span" space={space}>
5252
{keys.map((key, i) => (
5353
<Key fontSize={fontSize} key={i} padding={padding} radius={radius}>
5454
{key}
5555
</Key>
5656
))}
5757
</Inline>
58-
</Root>
58+
</StyledHotkeys>
5959
)
6060
})
6161
Hotkeys.displayName = 'ForwardRef(Hotkeys)'

‎src/core/components/menu/menu.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export interface MenuProps extends ResponsivePaddingProps {
3131
'onBlurCapture'?: (event: FocusEvent) => void
3232
}
3333

34-
const Root = styled(Box)`
34+
const StyledMenu = styled(Box)`
3535
outline: none;
3636
overflow: auto;
3737
`
@@ -159,7 +159,7 @@ export const Menu = forwardRef(function Menu(
159159

160160
return (
161161
<MenuContext.Provider value={value}>
162-
<Root
162+
<StyledMenu
163163
data-ui="Menu"
164164
{...restProps}
165165
onKeyDown={handleKeyDown}
@@ -169,7 +169,7 @@ export const Menu = forwardRef(function Menu(
169169
tabIndex={-1}
170170
>
171171
<Stack space={space}>{children}</Stack>
172-
</Root>
172+
</StyledMenu>
173173
</MenuContext.Provider>
174174
)
175175
})

‎src/core/components/skeleton/skeleton.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@ import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
66
import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
77
import {skeletonStyle} from './styles'
88

9-
const Root = styled(Box)<{$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps>(
10-
responsiveRadiusStyle,
11-
skeletonStyle,
12-
)
9+
const StyledSkeleton = styled(Box)<
10+
{$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps
11+
>(responsiveRadiusStyle, skeletonStyle)
1312

1413
/**
1514
* This API might change. DO NOT USE IN PRODUCTION.
@@ -46,7 +45,7 @@ export const Skeleton = forwardRef(function Skeleton(
4645
}, [delay])
4746

4847
return (
49-
<Root
48+
<StyledSkeleton
5049
{...restProps}
5150
$animated={animated}
5251
$radius={useArrayProp(radius)}

‎src/core/components/skeleton/textSkeleton.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {useArrayProp} from '../../hooks'
55
import {ThemeProps, _responsive} from '../../styles'
66
import {Skeleton, SkeletonProps} from './skeleton'
77

8-
const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
8+
const StyledSkeleton = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
99
props: {
1010
$size: number[]
1111
$style: ThemeFontKey
@@ -69,7 +69,7 @@ export const TextSkeleton = forwardRef(function TextSkeleton(
6969
const {size = 2, ...restProps} = props
7070
const $size = useArrayProp(size)
7171

72-
return <Root {...restProps} $size={$size} ref={ref} $style="text" />
72+
return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="text" />
7373
})
7474
TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
7575

@@ -85,7 +85,7 @@ export const LabelSkeleton = forwardRef(function TextSkeleton(
8585
const {size = 2, ...restProps} = props
8686
const $size = useArrayProp(size)
8787

88-
return <Root {...restProps} $size={$size} ref={ref} $style="label" />
88+
return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="label" />
8989
})
9090
LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
9191

@@ -101,7 +101,7 @@ export const HeadingSkeleton = forwardRef(function TextSkeleton(
101101
const {size = 2, ...restProps} = props
102102
const $size = useArrayProp(size)
103103

104-
return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
104+
return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="heading" />
105105
})
106106
HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
107107

@@ -117,6 +117,6 @@ export const CodeSkeleton = forwardRef(function TextSkeleton(
117117
const {size = 2, ...restProps} = props
118118
const $size = useArrayProp(size)
119119

120-
return <Root {...restProps} $size={$size} ref={ref} $style="code" />
120+
return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="code" />
121121
})
122122
CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

‎src/core/components/toast/toast.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const ROLES = {
4040
info: 'alert',
4141
} as const
4242

43-
const Root = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
43+
const StyledToast = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
4444
rootStyles,
4545
)
4646

@@ -60,7 +60,7 @@ export function Toast(
6060
const role = status ? ROLES[status] : 'status'
6161

6262
return (
63-
<Root
63+
<StyledToast
6464
data-ui="Toast"
6565
role={role}
6666
{...restProps}
@@ -100,7 +100,7 @@ export function Toast(
100100
</Box>
101101
)}
102102
</Flex>
103-
</Root>
103+
</StyledToast>
104104
)
105105
}
106106

‎src/core/components/toast/toastProvider.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export interface ToastProviderProps {
2828
zOffset?: number | number[]
2929
}
3030

31-
const Root = styled(Layer)`
31+
const StyledToastProvider = styled(Layer)`
3232
position: fixed;
3333
top: 0;
3434
left: 0;
@@ -153,7 +153,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement<any
153153
<ToastContext.Provider value={value}>
154154
{children}
155155
{mounted && (
156-
<Root data-ui="ToastProvider" zOffset={zOffset}>
156+
<StyledToastProvider data-ui="ToastProvider" zOffset={zOffset}>
157157
<ToastContainer>
158158
<Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
159159
<AnimatePresence initial={false}>
@@ -184,7 +184,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement<any
184184
</AnimatePresence>
185185
</Box>
186186
</ToastContainer>
187-
</Root>
187+
</StyledToastProvider>
188188
)}
189189
</ToastContext.Provider>
190190
)

0 commit comments

Comments
 (0)