Skip to content

Commit a19d019

Browse files
AndaristAndarist
authoredDec 9, 2024··
Convert @emotion/styled's source code to TypeScript (#3284)
* Convert `@emotion/styled`'s source code to TypeScript * fixed entrypoint extension * fix types reference * add changeset * more localized cast * remove redundant cast * organize imports
·
@emotion/use-insertion-effect-with-fallbacks@1.2.0@emotion/cache@11.14.0
1 parent 5974e33 commit a19d019

19 files changed

+352
-393
lines changed
 

‎.changeset/metal-cups-allow.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@emotion/styled': minor
3+
---
4+
5+
Source code has been migrated to TypeScript. From now on type declarations will be emitted based on that, instead of being hand-written.

‎packages/serialize/src/index.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -398,11 +398,11 @@ export function serializeStyles(
398398
strings as Interpolation
399399
)
400400
} else {
401-
const asTemplateStringsArr = strings as TemplateStringsArray
402-
if (isDevelopment && asTemplateStringsArr[0] === undefined) {
401+
const templateStringsArr = strings as TemplateStringsArray
402+
if (isDevelopment && templateStringsArr[0] === undefined) {
403403
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
404404
}
405-
styles += asTemplateStringsArr[0]
405+
styles += templateStringsArr[0]
406406
}
407407
// we start at 1 since we've already handled the first arg
408408
for (let i = 1; i < args.length; i++) {

‎packages/styled/base/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"main": "dist/emotion-styled-base.cjs.js",
33
"module": "dist/emotion-styled-base.esm.js",
44
"umd:main": "dist/emotion-styled-base.umd.min.js",
5-
"types": "../types/base",
5+
"types": "dist/emotion-styled-base.cjs.d.ts",
66
"preconstruct": {
77
"umdName": "emotionStyledBase"
88
}

‎packages/styled/package.json

+10-11
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "styled API for emotion",
55
"main": "dist/emotion-styled.cjs.js",
66
"module": "dist/emotion-styled.esm.js",
7-
"types": "types/index.d.ts",
7+
"types": "dist/emotion-styled.cjs.d.ts",
88
"license": "MIT",
99
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/styled",
1010
"scripts": {
@@ -40,7 +40,6 @@
4040
"src",
4141
"dist",
4242
"base",
43-
"types/*.d.ts",
4443
"macro.*"
4544
],
4645
"umd:main": "dist/emotion-styled.umd.min.js",
@@ -164,22 +163,22 @@
164163
},
165164
"imports": {
166165
"#is-development": {
167-
"development": "./src/conditions/true.js",
168-
"default": "./src/conditions/false.js"
166+
"development": "./src/conditions/true.ts",
167+
"default": "./src/conditions/false.ts"
169168
},
170169
"#is-browser": {
171-
"edge-light": "./src/conditions/false.js",
172-
"workerd": "./src/conditions/false.js",
173-
"worker": "./src/conditions/false.js",
174-
"browser": "./src/conditions/true.js",
175-
"default": "./src/conditions/is-browser.js"
170+
"edge-light": "./src/conditions/false.ts",
171+
"workerd": "./src/conditions/false.ts",
172+
"worker": "./src/conditions/false.ts",
173+
"browser": "./src/conditions/true.ts",
174+
"default": "./src/conditions/is-browser.ts"
176175
}
177176
},
178177
"preconstruct": {
179178
"umdName": "emotionStyled",
180179
"entrypoints": [
181-
"./index.js",
182-
"./base.js"
180+
"./index.ts",
181+
"./base.tsx"
183182
],
184183
"exports": {
185184
"extra": {

‎packages/styled/src/base.d.ts

-2
This file was deleted.

‎packages/styled/src/base.js ‎packages/styled/src/base.tsx

+56-42
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,40 @@
1-
import * as React from 'react'
2-
import {
3-
getDefaultShouldForwardProp,
4-
composeShouldForwardProps
5-
/*
6-
type StyledOptions,
7-
type CreateStyled,
8-
type PrivateStyledComponent,
9-
type StyledElementType
10-
*/
11-
} from './utils'
12-
import { withEmotionCache, ThemeContext } from '@emotion/react'
13-
import isDevelopment from '#is-development'
141
import isBrowser from '#is-browser'
2+
import isDevelopment from '#is-development'
3+
import { Theme, ThemeContext, withEmotionCache } from '@emotion/react'
4+
import { Interpolation, serializeStyles } from '@emotion/serialize'
5+
import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'
156
import {
7+
EmotionCache,
168
getRegisteredStyles,
179
insertStyles,
18-
registerStyles
10+
registerStyles,
11+
SerializedStyles
1912
} from '@emotion/utils'
20-
import { serializeStyles } from '@emotion/serialize'
21-
import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'
13+
import * as React from 'react'
14+
import { CreateStyled, ElementType, StyledOptions } from './types'
15+
import { composeShouldForwardProps, getDefaultShouldForwardProp } from './utils'
16+
export type {
17+
ArrayInterpolation,
18+
ComponentSelector,
19+
CSSObject,
20+
FunctionInterpolation,
21+
Interpolation
22+
} from '@emotion/serialize'
2223

2324
const ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
2425
Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
2526
You can read more about this here:
2627
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`
2728

28-
const Insertion = ({ cache, serialized, isStringTag }) => {
29+
const Insertion = ({
30+
cache,
31+
serialized,
32+
isStringTag
33+
}: {
34+
cache: EmotionCache
35+
serialized: SerializedStyles
36+
isStringTag: boolean
37+
}) => {
2938
registerStyles(cache, serialized, isStringTag)
3039

3140
const rules = useInsertionEffectAlwaysWithSyncFallback(() =>
@@ -52,10 +61,7 @@ const Insertion = ({ cache, serialized, isStringTag }) => {
5261
return null
5362
}
5463

55-
let createStyled /*: CreateStyled */ = (
56-
tag /*: any */,
57-
options /* ?: StyledOptions */
58-
) => {
64+
const createStyled = (tag: ElementType, options?: StyledOptions) => {
5965
if (isDevelopment) {
6066
if (tag === undefined) {
6167
throw new Error(
@@ -66,8 +72,8 @@ let createStyled /*: CreateStyled */ = (
6672
const isReal = tag.__emotion_real === tag
6773
const baseTag = (isReal && tag.__emotion_base) || tag
6874

69-
let identifierName
70-
let targetClassName
75+
let identifierName: string | undefined
76+
let targetClassName: string | undefined
7177
if (options !== undefined) {
7278
identifierName = options.label
7379
targetClassName = options.target
@@ -78,9 +84,11 @@ let createStyled /*: CreateStyled */ = (
7884
shouldForwardProp || getDefaultShouldForwardProp(baseTag)
7985
const shouldUseAs = !defaultShouldForwardProp('as')
8086

81-
/* return function<Props>(): PrivateStyledComponent<Props> { */
8287
return function () {
83-
let args = arguments
88+
// eslint-disable-next-line prefer-rest-params
89+
let args = arguments as any as Array<
90+
TemplateStringsArray | Interpolation<Theme>
91+
>
8492
let styles =
8593
isReal && tag.__emotion_styles !== undefined
8694
? tag.__emotion_styles.slice(0)
@@ -89,29 +97,35 @@ let createStyled /*: CreateStyled */ = (
8997
if (identifierName !== undefined) {
9098
styles.push(`label:${identifierName};`)
9199
}
92-
if (args[0] == null || args[0].raw === undefined) {
100+
if (
101+
args[0] == null ||
102+
(args[0] as TemplateStringsArray).raw === undefined
103+
) {
104+
// eslint-disable-next-line prefer-spread
93105
styles.push.apply(styles, args)
94106
} else {
95-
if (isDevelopment && args[0][0] === undefined) {
107+
const templateStringsArr = args[0] as TemplateStringsArray
108+
if (isDevelopment && templateStringsArr[0] === undefined) {
96109
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
97110
}
98-
styles.push(args[0][0])
111+
styles.push(templateStringsArr[0])
99112
let len = args.length
100113
let i = 1
101114
for (; i < len; i++) {
102-
if (isDevelopment && args[0][i] === undefined) {
115+
if (isDevelopment && templateStringsArr[i] === undefined) {
103116
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
104117
}
105-
styles.push(args[i], args[0][i])
118+
styles.push(args[i], templateStringsArr[i])
106119
}
107120
}
108121

109-
const Styled /*: PrivateStyledComponent<Props> */ = withEmotionCache(
110-
(props, cache, ref) => {
111-
const FinalTag = (shouldUseAs && props.as) || baseTag
122+
const Styled: ElementType = withEmotionCache(
123+
(props: Record<string, unknown>, cache, ref) => {
124+
const FinalTag =
125+
(shouldUseAs && (props.as as React.ElementType)) || baseTag
112126

113127
let className = ''
114-
let classInterpolations = []
128+
let classInterpolations: Interpolation<Theme>[] = []
115129
let mergedProps = props
116130
if (props.theme == null) {
117131
mergedProps = {}
@@ -146,7 +160,7 @@ let createStyled /*: CreateStyled */ = (
146160
? getDefaultShouldForwardProp(FinalTag)
147161
: defaultShouldForwardProp
148162

149-
let newProps = {}
163+
let newProps: Record<string, unknown> = {}
150164

151165
for (let key in props) {
152166
if (shouldUseAs && key === 'as') continue
@@ -196,20 +210,20 @@ let createStyled /*: CreateStyled */ = (
196210
return `.${targetClassName}`
197211
}
198212
})
199-
200-
Styled.withComponent = (
201-
nextTag /*: StyledElementType<Props> */,
202-
nextOptions /* ?: StyledOptions */
213+
;(Styled as any).withComponent = (
214+
nextTag: ElementType,
215+
nextOptions: StyledOptions
203216
) => {
204-
return createStyled(nextTag, {
217+
const newStyled = createStyled(nextTag, {
205218
...options,
206219
...nextOptions,
207220
shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
208-
})(...styles)
221+
})
222+
return (newStyled as any)(...styles)
209223
}
210224

211225
return Styled
212226
}
213227
}
214228

215-
export default createStyled
229+
export default createStyled as CreateStyled

‎packages/styled/src/conditions/true.js ‎packages/styled/src/conditions/true.ts

File renamed without changes.

‎packages/styled/src/index.d.ts

-2
This file was deleted.

‎packages/styled/src/index.js

-11
This file was deleted.

‎packages/styled/src/index.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Theme } from '@emotion/react'
2+
import styled from './base'
3+
import { ReactJSXIntrinsicElements } from './jsx-namespace'
4+
import { tags } from './tags'
5+
import {
6+
CreateStyledComponent,
7+
CreateStyled as BaseCreateStyled
8+
} from './types'
9+
export type {
10+
ArrayInterpolation,
11+
ComponentSelector,
12+
CSSObject,
13+
FunctionInterpolation,
14+
Interpolation
15+
} from '@emotion/serialize'
16+
export type {
17+
CreateStyledComponent,
18+
FilteringStyledOptions,
19+
StyledComponent,
20+
StyledOptions
21+
} from './types'
22+
23+
export type StyledTags = {
24+
[Tag in keyof ReactJSXIntrinsicElements]: CreateStyledComponent<
25+
{
26+
theme?: Theme
27+
as?: React.ElementType
28+
},
29+
ReactJSXIntrinsicElements[Tag]
30+
>
31+
}
32+
33+
export interface CreateStyled extends BaseCreateStyled, StyledTags {}
34+
35+
// bind it to avoid mutating the original function
36+
const newStyled = styled.bind(null) as CreateStyled
37+
38+
tags.forEach(tagName => {
39+
;(newStyled as any)[tagName] = newStyled(tagName as keyof typeof newStyled)
40+
})
41+
42+
export default newStyled

‎packages/styled/types/jsx-namespace.d.ts ‎packages/styled/src/jsx-namespace.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
77
? true
88
: false
99

10-
export type ReactJSXIntrinsicElements = true extends IsPreReact19
11-
? /** @ts-ignore */
12-
JSX.IntrinsicElements
13-
: /** @ts-ignore */
14-
React.JSX.IntrinsicElements
10+
// prettier-ignore
11+
/** @ts-ignore */
12+
export type ReactJSXIntrinsicElements = true extends IsPreReact19 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements

‎packages/styled/src/tags.js ‎packages/styled/src/tags.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -135,4 +135,4 @@ export const tags = [
135135
'svg',
136136
'text',
137137
'tspan'
138-
]
138+
] as const

‎packages/styled/src/types.ts

+190
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
import { ComponentSelector, Interpolation } from '@emotion/serialize'
2+
import { ReactJSXIntrinsicElements } from './jsx-namespace'
3+
import { PropsOf, Theme } from '@emotion/react'
4+
5+
/** Same as StyledOptions but shouldForwardProp must be a type guard */
6+
export interface FilteringStyledOptions<
7+
Props = Record<string, any>,
8+
ForwardedProps extends keyof Props & string = keyof Props & string
9+
> {
10+
label?: string
11+
shouldForwardProp?: (propName: string) => propName is ForwardedProps
12+
target?: string
13+
}
14+
15+
export interface StyledOptions<Props = Record<string, any>> {
16+
label?: string
17+
shouldForwardProp?: (propName: string) => boolean
18+
target?: string
19+
}
20+
21+
/**
22+
* @typeparam ComponentProps Props which will be included when withComponent is called
23+
* @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called
24+
*/
25+
export interface StyledComponent<
26+
ComponentProps extends {},
27+
SpecificComponentProps extends {} = {},
28+
JSXProps extends {} = {}
29+
> extends React.FC<ComponentProps & SpecificComponentProps & JSXProps>,
30+
ComponentSelector {
31+
withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(
32+
component: C
33+
): StyledComponent<
34+
ComponentProps & PropsOf<C>,
35+
{},
36+
{ ref?: React.Ref<InstanceType<C>> }
37+
>
38+
withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
39+
component: C
40+
): StyledComponent<ComponentProps & PropsOf<C>>
41+
withComponent<Tag extends keyof ReactJSXIntrinsicElements>(
42+
tag: Tag
43+
): StyledComponent<ComponentProps, ReactJSXIntrinsicElements[Tag]>
44+
}
45+
46+
/**
47+
* @typeparam ComponentProps Props which will be included when withComponent is called
48+
* @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called
49+
*/
50+
export interface CreateStyledComponent<
51+
ComponentProps extends {},
52+
SpecificComponentProps extends {} = {},
53+
JSXProps extends {} = {}
54+
> {
55+
(
56+
template: TemplateStringsArray,
57+
...styles: Array<
58+
Interpolation<ComponentProps & SpecificComponentProps & { theme: Theme }>
59+
>
60+
): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>
61+
62+
/**
63+
* @typeparam AdditionalProps Additional props to add to your styled component
64+
*/
65+
<AdditionalProps extends {}>(
66+
template: TemplateStringsArray,
67+
...styles: Array<
68+
Interpolation<
69+
ComponentProps &
70+
SpecificComponentProps &
71+
AdditionalProps & { theme: Theme }
72+
>
73+
>
74+
): StyledComponent<
75+
ComponentProps & AdditionalProps,
76+
SpecificComponentProps,
77+
JSXProps
78+
>
79+
80+
/**
81+
* @typeparam AdditionalProps Additional props to add to your styled component
82+
*/
83+
<AdditionalProps extends {} = {}>(
84+
...styles: Array<
85+
Interpolation<
86+
ComponentProps &
87+
SpecificComponentProps &
88+
AdditionalProps & { theme: Theme }
89+
>
90+
>
91+
): StyledComponent<
92+
ComponentProps & AdditionalProps,
93+
SpecificComponentProps,
94+
JSXProps
95+
>
96+
}
97+
98+
/**
99+
* @desc
100+
* This function accepts a React component or tag ('div', 'a' etc).
101+
*
102+
* @example styled(MyComponent)({ width: 100 })
103+
* @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width })
104+
* @example styled('div')({ width: 100 })
105+
* @example styled('div')<Props>(props => ({ width: props.width })
106+
*/
107+
export interface CreateStyled {
108+
<
109+
C extends React.ComponentClass<React.ComponentProps<C>>,
110+
ForwardedProps extends keyof React.ComponentProps<C> &
111+
string = keyof React.ComponentProps<C> & string
112+
>(
113+
component: C,
114+
options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
115+
): CreateStyledComponent<
116+
Pick<PropsOf<C>, ForwardedProps> & {
117+
theme?: Theme
118+
},
119+
{},
120+
{
121+
ref?: React.Ref<InstanceType<C>>
122+
}
123+
>
124+
125+
<C extends React.ComponentClass<React.ComponentProps<C>>>(
126+
component: C,
127+
options?: StyledOptions<React.ComponentProps<C>>
128+
): CreateStyledComponent<
129+
PropsOf<C> & {
130+
theme?: Theme
131+
},
132+
{},
133+
{
134+
ref?: React.Ref<InstanceType<C>>
135+
}
136+
>
137+
138+
<
139+
C extends React.ComponentType<React.ComponentProps<C>>,
140+
ForwardedProps extends keyof React.ComponentProps<C> &
141+
string = keyof React.ComponentProps<C> & string
142+
>(
143+
component: C,
144+
options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
145+
): CreateStyledComponent<
146+
Pick<PropsOf<C>, ForwardedProps> & {
147+
theme?: Theme
148+
}
149+
>
150+
151+
<C extends React.ComponentType<React.ComponentProps<C>>>(
152+
component: C,
153+
options?: StyledOptions<React.ComponentProps<C>>
154+
): CreateStyledComponent<
155+
PropsOf<C> & {
156+
theme?: Theme
157+
}
158+
>
159+
160+
<
161+
Tag extends keyof ReactJSXIntrinsicElements,
162+
ForwardedProps extends keyof ReactJSXIntrinsicElements[Tag] &
163+
string = keyof ReactJSXIntrinsicElements[Tag] & string
164+
>(
165+
tag: Tag,
166+
options: FilteringStyledOptions<
167+
ReactJSXIntrinsicElements[Tag],
168+
ForwardedProps
169+
>
170+
): CreateStyledComponent<
171+
{ theme?: Theme; as?: React.ElementType },
172+
Pick<ReactJSXIntrinsicElements[Tag], ForwardedProps>
173+
>
174+
175+
<Tag extends keyof ReactJSXIntrinsicElements>(
176+
tag: Tag,
177+
options?: StyledOptions<ReactJSXIntrinsicElements[Tag]>
178+
): CreateStyledComponent<
179+
{ theme?: Theme; as?: React.ElementType },
180+
ReactJSXIntrinsicElements[Tag]
181+
>
182+
}
183+
184+
export type ElementType = React.ElementType & {
185+
defaultProps?: Partial<any>
186+
__emotion_real?: ElementType
187+
__emotion_base?: ElementType
188+
__emotion_styles?: Interpolation<Theme>[]
189+
__emotion_forwardProp?: (propName: string) => boolean
190+
}

‎packages/styled/src/utils.js

-86
This file was deleted.

‎packages/styled/src/utils.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from 'react'
2+
import isPropValid from '@emotion/is-prop-valid'
3+
import { StyledOptions, ElementType } from './types'
4+
5+
const testOmitPropsOnStringTag = isPropValid
6+
const testOmitPropsOnComponent = (key: string) => key !== 'theme'
7+
8+
export const getDefaultShouldForwardProp = (tag: React.ElementType) =>
9+
typeof tag === 'string' &&
10+
// 96 is one less than the char code
11+
// for "a" so this is checking that
12+
// it's a lowercase character
13+
tag.charCodeAt(0) > 96
14+
? testOmitPropsOnStringTag
15+
: testOmitPropsOnComponent
16+
17+
export const composeShouldForwardProps = (
18+
tag: ElementType,
19+
options: StyledOptions | undefined,
20+
isReal: boolean
21+
) => {
22+
let shouldForwardProp
23+
if (options) {
24+
const optionsShouldForwardProp = options.shouldForwardProp
25+
shouldForwardProp =
26+
tag.__emotion_forwardProp && optionsShouldForwardProp
27+
? (propName: string) =>
28+
tag.__emotion_forwardProp!(propName) &&
29+
optionsShouldForwardProp(propName)
30+
: optionsShouldForwardProp
31+
}
32+
33+
if (typeof shouldForwardProp !== 'function' && isReal) {
34+
shouldForwardProp = tag.__emotion_forwardProp
35+
}
36+
37+
return shouldForwardProp
38+
}

‎packages/styled/types/base.d.ts

+2-197
Original file line numberDiff line numberDiff line change
@@ -1,197 +1,2 @@
1-
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
2-
// TypeScript Version: 3.2
3-
4-
import * as React from 'react'
5-
import { ComponentSelector, Interpolation } from '@emotion/serialize'
6-
import { PropsOf, Theme } from '@emotion/react'
7-
import { ReactJSXIntrinsicElements } from './jsx-namespace'
8-
9-
export {
10-
ArrayInterpolation,
11-
CSSObject,
12-
FunctionInterpolation
13-
} from '@emotion/serialize'
14-
15-
export { ComponentSelector, Interpolation }
16-
17-
/** Same as StyledOptions but shouldForwardProp must be a type guard */
18-
export interface FilteringStyledOptions<
19-
Props = Record<string, any>,
20-
ForwardedProps extends keyof Props & string = keyof Props & string
21-
> {
22-
label?: string
23-
shouldForwardProp?: (propName: string) => propName is ForwardedProps
24-
target?: string
25-
}
26-
27-
export interface StyledOptions<Props = Record<string, any>> {
28-
label?: string
29-
shouldForwardProp?: (propName: string) => boolean
30-
target?: string
31-
}
32-
33-
/**
34-
* @typeparam ComponentProps Props which will be included when withComponent is called
35-
* @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called
36-
*/
37-
export interface StyledComponent<
38-
ComponentProps extends {},
39-
SpecificComponentProps extends {} = {},
40-
JSXProps extends {} = {}
41-
> extends React.FC<ComponentProps & SpecificComponentProps & JSXProps>,
42-
ComponentSelector {
43-
withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(
44-
component: C
45-
): StyledComponent<
46-
ComponentProps & PropsOf<C>,
47-
{},
48-
{ ref?: React.Ref<InstanceType<C>> }
49-
>
50-
withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
51-
component: C
52-
): StyledComponent<ComponentProps & PropsOf<C>>
53-
withComponent<Tag extends keyof ReactJSXIntrinsicElements>(
54-
tag: Tag
55-
): StyledComponent<ComponentProps, ReactJSXIntrinsicElements[Tag]>
56-
}
57-
58-
/**
59-
* @typeparam ComponentProps Props which will be included when withComponent is called
60-
* @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called
61-
*/
62-
export interface CreateStyledComponent<
63-
ComponentProps extends {},
64-
SpecificComponentProps extends {} = {},
65-
JSXProps extends {} = {}
66-
> {
67-
(
68-
template: TemplateStringsArray,
69-
...styles: Array<
70-
Interpolation<ComponentProps & SpecificComponentProps & { theme: Theme }>
71-
>
72-
): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>
73-
74-
/**
75-
* @typeparam AdditionalProps Additional props to add to your styled component
76-
*/
77-
<AdditionalProps extends {}>(
78-
template: TemplateStringsArray,
79-
...styles: Array<
80-
Interpolation<
81-
ComponentProps &
82-
SpecificComponentProps &
83-
AdditionalProps & { theme: Theme }
84-
>
85-
>
86-
): StyledComponent<
87-
ComponentProps & AdditionalProps,
88-
SpecificComponentProps,
89-
JSXProps
90-
>
91-
92-
/**
93-
* @typeparam AdditionalProps Additional props to add to your styled component
94-
*/
95-
<AdditionalProps extends {} = {}>(
96-
...styles: Array<
97-
Interpolation<
98-
ComponentProps &
99-
SpecificComponentProps &
100-
AdditionalProps & { theme: Theme }
101-
>
102-
>
103-
): StyledComponent<
104-
ComponentProps & AdditionalProps,
105-
SpecificComponentProps,
106-
JSXProps
107-
>
108-
}
109-
110-
/**
111-
* @desc
112-
* This function accepts a React component or tag ('div', 'a' etc).
113-
*
114-
* @example styled(MyComponent)({ width: 100 })
115-
* @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width })
116-
* @example styled('div')({ width: 100 })
117-
* @example styled('div')<Props>(props => ({ width: props.width })
118-
*/
119-
export interface CreateStyled {
120-
<
121-
C extends React.ComponentClass<React.ComponentProps<C>>,
122-
ForwardedProps extends keyof React.ComponentProps<C> &
123-
string = keyof React.ComponentProps<C> & string
124-
>(
125-
component: C,
126-
options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
127-
): CreateStyledComponent<
128-
Pick<PropsOf<C>, ForwardedProps> & {
129-
theme?: Theme
130-
},
131-
{},
132-
{
133-
ref?: React.Ref<InstanceType<C>>
134-
}
135-
>
136-
137-
<C extends React.ComponentClass<React.ComponentProps<C>>>(
138-
component: C,
139-
options?: StyledOptions<React.ComponentProps<C>>
140-
): CreateStyledComponent<
141-
PropsOf<C> & {
142-
theme?: Theme
143-
},
144-
{},
145-
{
146-
ref?: React.Ref<InstanceType<C>>
147-
}
148-
>
149-
150-
<
151-
C extends React.ComponentType<React.ComponentProps<C>>,
152-
ForwardedProps extends keyof React.ComponentProps<C> &
153-
string = keyof React.ComponentProps<C> & string
154-
>(
155-
component: C,
156-
options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
157-
): CreateStyledComponent<
158-
Pick<PropsOf<C>, ForwardedProps> & {
159-
theme?: Theme
160-
}
161-
>
162-
163-
<C extends React.ComponentType<React.ComponentProps<C>>>(
164-
component: C,
165-
options?: StyledOptions<React.ComponentProps<C>>
166-
): CreateStyledComponent<
167-
PropsOf<C> & {
168-
theme?: Theme
169-
}
170-
>
171-
172-
<
173-
Tag extends keyof ReactJSXIntrinsicElements,
174-
ForwardedProps extends keyof ReactJSXIntrinsicElements[Tag] &
175-
string = keyof ReactJSXIntrinsicElements[Tag] & string
176-
>(
177-
tag: Tag,
178-
options: FilteringStyledOptions<
179-
ReactJSXIntrinsicElements[Tag],
180-
ForwardedProps
181-
>
182-
): CreateStyledComponent<
183-
{ theme?: Theme; as?: React.ElementType },
184-
Pick<ReactJSXIntrinsicElements[Tag], ForwardedProps>
185-
>
186-
187-
<Tag extends keyof ReactJSXIntrinsicElements>(
188-
tag: Tag,
189-
options?: StyledOptions<ReactJSXIntrinsicElements[Tag]>
190-
): CreateStyledComponent<
191-
{ theme?: Theme; as?: React.ElementType },
192-
ReactJSXIntrinsicElements[Tag]
193-
>
194-
}
195-
196-
declare const styled: CreateStyled
197-
export default styled
1+
// TypeScript Version: 4.1
2+
export * from '../base'

‎packages/styled/types/index.d.ts

+1-32
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,2 @@
1-
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
21
// TypeScript Version: 4.1
3-
4-
import { Theme } from '@emotion/react'
5-
import { CreateStyled as BaseCreateStyled, CreateStyledComponent } from './base'
6-
import { ReactJSXIntrinsicElements } from './jsx-namespace'
7-
8-
export {
9-
ArrayInterpolation,
10-
ComponentSelector,
11-
CSSObject,
12-
FunctionInterpolation,
13-
Interpolation,
14-
StyledComponent,
15-
StyledOptions,
16-
FilteringStyledOptions,
17-
CreateStyledComponent
18-
} from './base'
19-
20-
export type StyledTags = {
21-
[Tag in keyof ReactJSXIntrinsicElements]: CreateStyledComponent<
22-
{
23-
theme?: Theme
24-
as?: React.ElementType
25-
},
26-
ReactJSXIntrinsicElements[Tag]
27-
>
28-
}
29-
30-
export interface CreateStyled extends BaseCreateStyled, StyledTags {}
31-
32-
declare const styled: CreateStyled
33-
export default styled
2+
export * from '..'

0 commit comments

Comments
 (0)
Please sign in to comment.