Skip to content

Commit 7232511

Browse files
igorwesseligorwessel
committed
feat: separate define interface in functions
Separating the responsibilities of defining an interface into functions.
1 parent 8f04f32 commit 7232511

File tree

6 files changed

+116
-54
lines changed

6 files changed

+116
-54
lines changed

‎packages/styled-components/src/create.ts‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import { StyleGenerator } from '@xstyled/system'
22
import { createCssFunction, XCSSFunction } from './createCssFunction'
3+
import { css as scCss } from 'styled-components'
4+
import { scStyled } from './scStyled'
35
import { createX, X } from './createX'
4-
import { createStyled, XStyled } from './createStyled'
6+
import {
7+
createStyled,
8+
defineStyledInterface,
9+
defineXStyledInterface,
10+
XStyled,
11+
} from './createStyled'
512
import {
613
createCreateGlobalStyle,
714
XCreateGlobalStyle,
@@ -17,10 +24,12 @@ interface XStyledSet<TGen extends StyleGenerator> {
1724
export const createCss = <TGen extends StyleGenerator>(
1825
generator: TGen,
1926
): XStyledSet<TGen> => {
27+
const css = createCssFunction(scCss, generator)
28+
2029
return {
21-
css: createCssFunction(generator),
22-
x: createX(generator),
23-
styled: createStyled(generator),
30+
css,
31+
x: defineXStyledInterface(createX(scStyled, css, generator)),
32+
styled: defineStyledInterface(createStyled(scStyled, css, generator)),
2433
createGlobalStyle: createCreateGlobalStyle(generator),
2534
}
2635
}

‎packages/styled-components/src/createCreateGlobalStyle.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { createGlobalStyle as scCreateGlobalStyle } from 'styled-components'
1+
import {
2+
css as scCss,
3+
createGlobalStyle as scCreateGlobalStyle,
4+
} from 'styled-components'
25
import { StyleGenerator } from '@xstyled/system'
36
import { createCssFunction } from './createCssFunction'
47

@@ -7,7 +10,7 @@ export type XCreateGlobalStyle = typeof scCreateGlobalStyle
710
export const createCreateGlobalStyle = <TGen extends StyleGenerator>(
811
generator: TGen,
912
): XCreateGlobalStyle => {
10-
const css = createCssFunction(generator)
13+
const css = createCssFunction(scCss, generator)
1114
return ((
1215
...args: Parameters<XCreateGlobalStyle>
1316
): ReturnType<XCreateGlobalStyle> =>

‎packages/styled-components/src/createCssFunction.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* eslint-disable no-continue, no-loop-func, no-cond-assign */
22
import {
3-
css as scCss,
43
FlattenSimpleInterpolation,
54
ThemedCssFunction,
65
} from 'styled-components'
@@ -11,11 +10,12 @@ import { createTransform } from '@xstyled/core'
1110
export type XCSSFunction = ThemedCssFunction<Theme>
1211

1312
export const createCssFunction = <TGen extends StyleGenerator>(
13+
scCssFN: ThemedCssFunction<any>,
1414
generator: TGen,
1515
): XCSSFunction => {
1616
const transform = createTransform(generator)
1717
return ((...args: Parameters<XCSSFunction>) => {
18-
const scCssArgs = scCss(...args)
18+
const scCssArgs = scCssFN(...args)
1919
const flattenedArgs = flattenStrings(scCssArgs as any[])
2020
return flattenedArgs.map(transform) as FlattenSimpleInterpolation
2121
}) as XCSSFunction

‎packages/styled-components/src/createStyled.ts‎

Lines changed: 72 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,12 @@ import { string } from '@xstyled/util'
55
import { StyleGenerator, StyleGeneratorProps, Theme } from '@xstyled/system'
66
import {
77
StyledConfig,
8+
StyledInterface,
89
ThemedBaseStyledInterface,
910
ThemedStyledFunction,
1011
} from 'styled-components'
11-
import { scStyled } from './scStyled'
1212
import { createCssFunction, XCSSFunction } from './createCssFunction'
13-
14-
const getCreateStyle = (
15-
baseCreateStyle: ThemedStyledFunction<any, any>,
16-
css: XCSSFunction,
17-
generator?: StyleGenerator,
18-
) => {
19-
const createStyle = (...args: Parameters<typeof css>) =>
20-
// @ts-ignore
21-
baseCreateStyle`${css(...args)}${generator}`
22-
createStyle.attrs = (attrs: Parameters<typeof baseCreateStyle.attrs>[0]) =>
23-
getCreateStyle(baseCreateStyle.attrs(attrs), css, generator)
24-
createStyle.withConfig = (config: StyledConfig<any>) =>
25-
getCreateStyle(baseCreateStyle.withConfig(config), css, generator)
26-
return createStyle
27-
}
13+
import { ReactNativeStyledInterface } from 'styled-components/native'
2814

2915
type BoxStyledTags<TProps extends object> = {
3016
[Key in keyof BoxElements]: ThemedStyledFunction<
@@ -38,6 +24,13 @@ export interface XStyled<TGen extends StyleGenerator>
3824
extends ThemedBaseStyledInterface<Theme>,
3925
BoxStyledTags<StyleGeneratorProps<TGen>> {}
4026

27+
export type StyledFunctions<XObj> = {
28+
scStyled: StyledInterface | ReactNativeStyledInterface<Theme>
29+
styled?: XObj
30+
xstyled?: XObj
31+
x?: XObj
32+
}
33+
4134
const createShouldForwardProp = (
4235
generator: StyleGenerator,
4336
): ((
@@ -67,37 +60,85 @@ const createShouldForwardProp = (
6760
}
6861
}
6962

70-
export const createBaseStyled = <TGen extends StyleGenerator>(
63+
const getCreateStyle = (
64+
baseCreateStyle: ThemedStyledFunction<any, any>,
65+
css: XCSSFunction,
66+
generator?: StyleGenerator,
67+
) => {
68+
const createStyle = (...args: Parameters<typeof css>) =>
69+
// @ts-ignore
70+
baseCreateStyle`${css(...args)}${generator}`
71+
createStyle.attrs = (attrs: Parameters<typeof baseCreateStyle.attrs>[0]) =>
72+
getCreateStyle(baseCreateStyle.attrs(attrs), css, generator)
73+
createStyle.withConfig = (config: StyledConfig<any>) =>
74+
getCreateStyle(baseCreateStyle.withConfig(config), css, generator)
75+
return createStyle
76+
}
77+
78+
export const createBaseStyled = <XObj, TGen extends StyleGenerator>(
79+
scStyled: StyledInterface | ReactNativeStyledInterface<Theme>,
7180
css: XCSSFunction,
7281
generator?: TGen,
73-
): XStyled<TGen> => {
82+
): XObj => {
7483
const config = generator
7584
? {
7685
shouldForwardProp: createShouldForwardProp(generator),
7786
}
7887
: {}
7988
return ((component: Parameters<typeof scStyled>[0]) => {
80-
const baseStyled = scStyled(component)
89+
const baseStyled = (scStyled as StyledInterface)(component)
8190
return getCreateStyle(
8291
config ? baseStyled.withConfig(config) : baseStyled,
8392
css,
8493
generator,
8594
)
86-
}) as XStyled<TGen>
95+
}) as unknown as XObj
8796
}
8897

89-
export const createStyled = <TGen extends StyleGenerator>(
98+
export const createStyled = <
99+
SCFN extends StyledInterface | ReactNativeStyledInterface<Theme>,
100+
SCCSSFN extends ReturnType<typeof createCssFunction>,
101+
XObj,
102+
TGen extends StyleGenerator,
103+
>(
104+
scStyled: SCFN,
105+
cssFunction: SCCSSFN,
90106
generator: TGen,
91-
): XStyled<TGen> => {
92-
const css = createCssFunction(generator)
93-
const styled = createBaseStyled(css)
94-
const xstyled = createBaseStyled(css, generator)
107+
): StyledFunctions<XObj> => {
108+
const styled = createBaseStyled<XObj, TGen>(scStyled, cssFunction)
109+
const xstyled = createBaseStyled<XObj, TGen>(scStyled, cssFunction, generator)
110+
111+
return { scStyled, styled, xstyled }
112+
}
113+
114+
export const defineStyledInterface = <XObj>({
115+
scStyled,
116+
styled,
117+
xstyled,
118+
}: StyledFunctions<XObj>): XObj => {
119+
//@ts-ignore
95120
styled.box = xstyled('div')
96-
Object.keys(scStyled).forEach((key) => {
97-
// @ts-ignore
98-
styled[key] = styled(key)
99-
// @ts-ignore
100-
styled[`${key}Box`] = xstyled(key)
121+
122+
Object.keys(scStyled).forEach((tag) => {
123+
//@ts-ignore
124+
styled[tag] = styled(tag)
125+
126+
//@ts-ignore
127+
styled[`${tag}Box`] = xstyled(tag)
101128
})
102-
return styled
129+
130+
return styled as XObj
131+
}
132+
133+
export const defineXStyledInterface = <XObj>({
134+
scStyled,
135+
styled,
136+
xstyled,
137+
}: StyledFunctions<XObj>): XObj => {
138+
Object.keys(scStyled).forEach((tag) => {
139+
//@ts-ignore
140+
styled[tag] = xstyled(tag)``
141+
})
142+
143+
return styled as XObj
103144
}

‎packages/styled-components/src/createX.ts‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
/* eslint-disable no-continue, no-loop-func, no-cond-assign */
2-
import { StyledComponent, DefaultTheme } from 'styled-components'
3-
import { scStyled } from './scStyled'
4-
import { StyleGenerator, StyleGeneratorProps } from '@xstyled/system'
5-
import { createBaseStyled } from './createStyled'
2+
import {
3+
StyledComponent,
4+
DefaultTheme,
5+
StyledInterface,
6+
} from 'styled-components'
7+
import { ReactNativeStyledInterface } from 'styled-components/native'
8+
import { StyleGenerator, StyleGeneratorProps, Theme } from '@xstyled/system'
9+
import { createBaseStyled, StyledFunctions } from './createStyled'
610
import { createCssFunction } from './createCssFunction'
711

812
type JSXElementKeys = keyof JSX.IntrinsicElements
@@ -20,14 +24,19 @@ export type X<TGen extends StyleGenerator> = {
2024
>
2125
}
2226

23-
export const createX = <TGen extends StyleGenerator>(
27+
export const createX = <
28+
StyledFunction extends StyledInterface | ReactNativeStyledInterface<Theme>,
29+
StyledCssFunction extends ReturnType<typeof createCssFunction>,
30+
XObj,
31+
TGen extends StyleGenerator,
32+
>(
33+
scStyled: StyledFunction,
34+
cssFunction: StyledCssFunction,
2435
generator: TGen,
25-
): X<TGen> => {
26-
const xstyled = createBaseStyled(createCssFunction(generator), generator)
27-
const x = {} as X<TGen>
28-
Object.keys(scStyled).forEach((tag) => {
29-
// @ts-ignore
30-
x[tag] = xstyled(tag)``
31-
})
32-
return x
36+
): StyledFunctions<XObj> => {
37+
const xstyled = createBaseStyled<XObj, TGen>(scStyled, cssFunction, generator)
38+
39+
const x = {} as XObj
40+
41+
return { scStyled, styled: x, xstyled }
3342
}

‎packages/styled-components/src/scStyled.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import styled from 'styled-components'
1+
import styled, { StyledInterface } from 'styled-components'
22

33
// Provide interop since `styled-components` does not work out of the box with ESM
4-
export const scStyled =
4+
export const scStyled: StyledInterface =
55
// @ts-ignore
66
typeof styled === 'function' ? styled : styled.default

0 commit comments

Comments
 (0)