Skip to content

Commit

Permalink
More work on the types (stitchesjs#734)
Browse files Browse the repository at this point in the history 
* peace

* run tracing
  • Loading branch information
@hadihallak
hadihallak authored Aug 25, 2021
1 parent 974c588 commit a539599
Show file tree
Hide file tree
Showing 10 changed files with 11,440 additions and 16,635 deletions.
11 changes: 11 additions & 0 deletions packages/react/types/config.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,17 @@ export interface DefaultThemeMap {
marginInline: 'space'
marginInlineEnd: 'space'
marginInlineStart: 'space'
scrollMargin: 'space'
scrollMarginTop: 'space'
scrollMarginRight: 'space'
scrollMarginBottom: 'space'
scrollMarginLeft: 'space'
scrollMarginBlock: 'space'
scrollMarginBlockEnd: 'space'
scrollMarginBlockStart: 'space'
scrollMarginInline: 'space'
scrollMarginInlineEnd: 'space'
scrollMarginInlineStart: 'space'
padding: 'space'
paddingTop: 'space'
paddingRight: 'space'
Expand Down
20 changes: 5 additions & 15 deletions packages/react/types/css-util.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,7 @@ export type CSS<
}
// known utility styles
& {
[K in keyof Utils]?: K extends keyof CSSProperties
? unknown
: Utils[K] extends (arg: infer P) => any
[K in keyof Utils as K extends keyof CSSProperties ? never: K]?: Utils[K] extends (arg: infer P) => any
? (
| (
P extends any[]
Expand Down Expand Up @@ -85,32 +83,24 @@ export type CSS<
}
// known theme styles
& {
[K in keyof ThemeMap]?: (
K extends keyof CSSProperties
? unknown
: K extends keyof CSSProperties
? unknown
: K extends keyof Utils
? unknown
: (
[K in keyof ThemeMap as K extends keyof CSSProperties ? never : K extends keyof Utils ? never : K]?: (
| Native.Globals
| Util.Index
| undefined
)
)
}
// unknown css declaration styles
& (true extends Flat ? Record<never, never> : {
/** Unknown property. */
[K in string]: (
[K:string]: (
| number
| string
| CSS<Media, Theme, ThemeMap, Utils>
| {}
| undefined
)
})
)
}))


/** Unique symbol used to reference a property value. */
export declare const $$PropertyValue: unique symbol
Expand Down
10 changes: 3 additions & 7 deletions packages/react/types/stitches.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,15 +189,11 @@ export default interface Stitches<
styled: {
<
Type extends (
| string
| React.ExoticComponent<any>
| React.JSXElementConstructor<any>
| Util.Function
| keyof JSX.IntrinsicElements | React.ComponentType<any>
),
Composers extends (
| string
| React.ExoticComponent<any>
| React.JSXElementConstructor<any>
| React.ComponentType<any>
| Util.Function
| { [name: string]: unknown }
)[]
Expand All @@ -206,7 +202,7 @@ export default interface Stitches<
...composers: {
[K in keyof Composers]: (
// Strings, React Components, and Functions can be skipped over
Composers[K] extends string | React.ExoticComponent<any> | React.JSXElementConstructor<any> | Util.Function
Composers[K] extends (string | React.ComponentType<any> | Util.Function)
? Composers[K]
: CSSUtil.CSS<Media, Theme, ThemeMap, Utils, true> & {
/** The **variants** property lets you set a subclass of styles based on a key-value pair.
Expand Down
24 changes: 9 additions & 15 deletions packages/react/types/styled-component.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@ import type * as Util from './util'

export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;

/** Removes index signatures from a type */
type RemoveIndex<T> = {
[ K in keyof T as string extends K ? never : number extends K ? never : K ] : T[K]
};
/** Returns a new Styled Component. */
export interface StyledComponent<
Type = 'span',
Expand All @@ -16,22 +12,20 @@ export interface StyledComponent<
CSS = {}
> extends React.ForwardRefExoticComponent<
Util.Assign<
Type extends React.ElementType
Type extends IntrinsicElementsKeys | React.ComponentType<any>
? React.ComponentPropsWithRef<Type>
: never,
TransformProps<Props, Media> & { css?: CSS }
>
> {
<C, As = Type>(
props: (
As extends ''
? { as: IntrinsicElementsKeys }
: As extends React.ComponentType<infer P>
? Util.Assign<P, TransformProps<Props, Media> & { as: As, css?: RemoveIndex<CSS> & {[k in keyof C]: k extends keyof CSS ? CSS[k]: never}}>
: As extends IntrinsicElementsKeys
? Util.Assign<JSX.IntrinsicElements[As], TransformProps<Props, Media> & { as: As, css?: RemoveIndex<CSS> & {[k in keyof C]: k extends keyof CSS ? CSS[k]: never}}>
: never
)
(props: Util.Assign< (Type extends IntrinsicElementsKeys | React.ComponentType<any> ? React.ComponentPropsWithRef<Type> : {}), TransformProps<Props, Media> & {as?: never, css?: CSS } >
): React.ReactElement | null
<C extends CSS, As extends string | React.ComponentType<any> = Type extends string | React.ComponentType<any> ? Type : never >(
props: Util.Assign< ( React.ComponentPropsWithRef<As extends IntrinsicElementsKeys | React.ComponentType<any> ? As : never>), TransformProps<Props, Media> & {
as?: As,
css?: {[k in keyof C]: (k extends keyof CSS ? CSS[k] : never) }
}
>
): React.ReactElement | null

className: string
Expand Down
417 changes: 283 additions & 134 deletions packages/test/index.d.ts
View file

Large diffs are not rendered by default.

33 changes: 21 additions & 12 deletions packages/test/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import * as Stitches from '@stitches/react';
import * as React from 'react';
export const { config, styled } = Stitches.createStitches({
media: {
bp1: '',
bp2: '',
bp3: '',
bp4: '',
bp5: '',
bp6: '',
bp8: '',
bp9: '',
bp10: '',
},
utils: {
/** util to do stuff */
ml: (value) => ({ marginLeft: value }),
},
theme: {
Expand All @@ -11,24 +21,23 @@ export const { config, styled } = Stitches.createStitches({
},
},
});
export const Text = styled('span', {});
export const Text = styled('span', {
background: '$red100',
});
const DEFAULT_TAG = 'h1';
const Heading = React.forwardRef((props, forwardedRef) => {
return (<>
{/* types here will be fast */}
<Text as={DEFAULT_TAG} onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef}/>
<Text onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ backgroundColor: '$red100', backgroundClip: 'border-box' }}/>
<Text onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ backgroundColor: '$red100' }}/>
<Text as="b" onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ ...props.css, backgroundColor: '$red100', padding: 'initial' }}/>
<Text onClick={(e) => { console.log(e.altKey); }} css={{ backgroundClip: 'content-box', "@bp10": { backgroundClip: 'content-box' } }}/>
<Text as={DEFAULT_TAG} onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ borderTopColor: 'AliceBlue', backgroundColor: 'ActiveText', backgroundAttachment: 'inherit', backgroundOrigin: 'border-box', colorAdjust: 'economy' }}/>
<Text onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ 'backgroundClip': 'border-box', 'ml': 'auto', '@bp1': { backgroundAttachment: 'fixed', }, hello: { backgroundClip: 'border-box' } }}/>
<Text onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ backgroundColor: '$red100', backgroundAttachment: 'inherit', backgroundOrigin: 'border-box' }}/>
<Text as="b" onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ ...props.css, 'backgroundColor': '$red100', 'padding': 'initial', '@bp3': { paddingBlock: 'inherit', }, }}/>
<Text as="div" onClick={(e) => { console.log(e.altKey); }} css={{ ...props.css, backgroundColor: '$red100', background: 'red', paddingLeft: 'initial' }}/>
{/*
types here will be correct but autocompletion is going to be painfully slow when you add a new prop.
This is the only case where the autocompletion is slow
*/}
<Text as="div" onClick={(e) => { console.log(e.altKey); }} css={props.css}/>
<Text as={DEFAULT_TAG} {...props} onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef}/>
</>);
});
const App = () => {
// when consuming the component it should be very fast too
return <Heading css={{ backgroundColor: '$red100', padding: 'inherit' }}/>;
return <Heading css={{ backgroundColor: '$red100', padding: 'inherit', colorScheme: 'dark' }}/>;
};
36 changes: 25 additions & 11 deletions packages/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,18 @@ import * as Stitches from '@stitches/react'
import * as React from 'react'

export const { config, styled } = Stitches.createStitches({
media: {
bp1: '',
bp2: '',
bp3: '',
bp4: '',
bp5: '',
bp6: '',
bp8: '',
bp9: '',
bp10: '',
},
utils: {
/** util to do stuff */
ml: (value: Stitches.PropertyValue<'margin'>) => ({ marginLeft: value }),
},
theme: {
Expand All @@ -16,29 +26,33 @@ export const { config, styled } = Stitches.createStitches({
export type StitchesCss = Stitches.CSS<typeof config>

export const Text = styled('span', {
background: '$red100'
background: '$red100',
})


const DEFAULT_TAG = 'h1'

export type HeadingProps = React.ComponentProps<typeof DEFAULT_TAG> & { css?: StitchesCss }

// ref should be span element
type ref = React.ElementRef<typeof Text>

const Heading = React.forwardRef<React.ElementRef<typeof DEFAULT_TAG>, HeadingProps>((props, forwardedRef) => {
return (
<>
{/* types here will be fast */}
<Text as={DEFAULT_TAG} onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} />
<Text onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} css={{backgroundColor: '$red100', backgroundClip: 'border-box', ml: 'auto'}}/>
<Text onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} css={{ backgroundColor: '$red100'}} />
<Text as="b" onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} css={{ ...props.css, backgroundColor: '$red100', padding: 'initial' }} />
<Text as="div" onClick={(e) => {console.log(e.altKey)}} css={{ ...props.css, backgroundColor: '$red100', background: 'red', paddingLeft: 'initial'}} />
<Text as={DEFAULT_TAG} {...props} onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} />
<Text onClick={(e) => { console.log(e.altKey) }} css={{backgroundClip: 'content-box', "@bp10": { backgroundClip: 'content-box' }}} />
<Text as={DEFAULT_TAG} onClick={(e: any) => { console.log(e.altKey) }} ref={forwardedRef} css={{ borderTopColor: 'AliceBlue', backgroundColor: 'ActiveText', backgroundAttachment: 'inherit', backgroundOrigin: 'border-box', colorAdjust: 'economy' }} />
<Text onClick={(e) => { console.log(e.altKey) }} ref={forwardedRef} css={{ 'backgroundClip': 'border-box', 'ml': 'auto', '@bp1': { backgroundAttachment: 'fixed', }, hello: { backgroundClip: 'border-box' } }} />
<Text onClick={(e) => { console.log(e.altKey) }} ref={forwardedRef} css={{ backgroundColor: '$red100', backgroundAttachment: 'inherit', backgroundOrigin: 'border-box' }} />
<Text as="b" onClick={(e: any) => { console.log(e.altKey) }} ref={forwardedRef} css={{ ...props.css, 'backgroundColor': '$red100', 'padding': 'initial', '@bp3': { paddingBlock: 'inherit', }, }} />
<Text as="div" onClick={(e: any) => { console.log(e.altKey) }} css={{ ...props.css, backgroundColor: '$red100', background: 'red', paddingLeft: 'initial'}} />
<Text as="div" onClick={(e: any) => { console.log(e.altKey) }} css={props.css} />
<Text as={DEFAULT_TAG} {...props} onClick={(e: any) => { console.log(e.altKey) }} ref={forwardedRef}
/>
</>
)
})

const App = () => {
// when consuming the component it should be very fast too
return <Heading css={{ backgroundColor: '$red100', padding: 'inherit'}} />
return <Heading css={{ backgroundColor: '$red100', padding: 'inherit', colorScheme: 'dark' }} />
}
11 changes: 7 additions & 4 deletions packages/test/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,21 @@
"types/*.d.ts"
],
"devDependencies": {
"@stitches/react": "^1.0.0-canary.10",
"@stitches/react": "^1.0.0-canary.15",
"@typescript-eslint/eslint-plugin": "^1.6.0",
"@typescript-eslint/parser": "^1.6.0",
"eslint-config-prettier": "^4.1.0",
"eslint-config-react": "^1.1.7",
"eslint-plugin-prettier": "^3.0.1",
"prettier": "^1.16.4",
"typescript": "^4.3.5",
"react": "17.0.2"
"react": "17.0.2",
"typescript": "^4.3.5"
},
"private": true,
"dependencies": {
"@radix-ui/react-polymorphic": "0.0.13"
"@radix-ui/colors": "0.1.7",
"@radix-ui/react-dialog": "0.0.20",
"@radix-ui/react-polymorphic": "0.0.13",
"@types/lodash.merge": "4.6.6"
}
}
Loading

0 comments on commit a539599

Please sign in to comment.