Skip to content

Commit

Permalink
update react typings
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonathantneal
jonathantneal committed Jul 22, 2021
1 parent 403ddd0 commit f2f4ecd
Show file tree
Hide file tree
Showing 5 changed files with 152 additions and 96 deletions.
20 changes: 8 additions & 12 deletions packages/react/types/create-css.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,19 @@
import type * as CSSUtil from './css-util'
import type * as Default from './default'
import type * as Stitches from './stitches'

export type PropertyValue<K extends keyof CSSUtil.CSSProperties> = { readonly [CSSUtil.$$PropertyValue]: K }

export type ScaleValue<K> = { readonly [CSSUtil.$$ScaleValue]: K }
import type Sheet from './sheet'

/* Interfaces */
/* ========================================================================== */

/** Returns a shaped theme object from the given media object. */
export type InterfaceOfMedia<
type InterfaceOfMedia<
Media extends {}
> = {
[K in keyof Media]: string
}

/** Returns a shaped theme object from the given theme object. */
export type InterfaceOfTheme<
type InterfaceOfTheme<
Theme extends {}
> = (
// shape of left-hand scale names
Expand All @@ -39,7 +35,7 @@ export type InterfaceOfTheme<
)

/** Returns a shaped themeMap object from the given themeMap object and theme object. */
export type InterfaceOfThemeMap<
type InterfaceOfThemeMap<
ThemeMap extends {} = {},
Theme extends {} = {}
> = (
Expand All @@ -61,7 +57,7 @@ export type InterfaceOfThemeMap<
}
)

export type InterfaceOfUtils<
type InterfaceOfUtils<
Utils extends {} = {}
> = (
// shape of right-hand values
Expand All @@ -75,7 +71,7 @@ export type InterfaceOfUtils<
)

/** Returns a function used to create a new Stitches interface. */
export type CreateCss = {
type CreateCss = {
<
Prefix extends string,
Media extends InterfaceOfMedia<Media>,
Expand All @@ -90,7 +86,7 @@ export type CreateCss = {
themeMap?: ThemeMap
utils?: Utils
}
): Stitches.Stitches<
): Sheet<
// post-process prefix
string extends Prefix ? Default.Prefix : Prefix,
// post-process media
Expand All @@ -104,4 +100,4 @@ export type CreateCss = {
>
}

export declare var createCss: CreateCss
export default CreateCss
85 changes: 67 additions & 18 deletions packages/react/types/css-util.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ type TokenByPropertyName<PropertyName, Theme, ThemeMap> = PropertyName extends k
type TokenByScaleName<ScaleName, Theme> = ScaleName extends keyof Theme ? Util.Prefixed<'$', keyof Theme[ScaleName]> : never

/** Returns a Style interface, leveraging the given media and style map. */
export type Style<
export type CSS<
Media = Default.Media,
Theme = {},
ThemeMap = Default.ThemeMap,
Utils = {}
> = (
// nested at-rule css styles
& {
[K in Util.Prefixed<'@', keyof Media>]?: Style<Media, Theme, ThemeMap, Utils>
[K in Util.Prefixed<'@', keyof Media>]?: CSS<Media, Theme, ThemeMap, Utils>
}
// known property styles
& {
Expand Down Expand Up @@ -88,7 +88,7 @@ export type Style<
: K extends keyof { variants: unknown; defaultVariants: unknown; compoundVariants: unknown }
? unknown
: (
| Style<Media, Theme, ThemeMap, Utils>
| CSS<Media, Theme, ThemeMap, Utils>
| CSS.Globals
| Util.Index
| any[]
Expand All @@ -97,6 +97,70 @@ export type Style<
}
)


/** Returns a Style interface, leveraging the given media and style map. */
export type KnownCSS<
Media = Default.Media,
Theme = {},
ThemeMap = Default.ThemeMap,
Utils = {}
> = (
// nested at-rule css styles
& {
[K in Util.Prefixed<'@', keyof Media>]?: KnownCSS<Media, Theme, ThemeMap, Utils>
}
// known property styles
& {
[K in keyof CSSProperties]?: (
| ValueByPropertyName<K>
| TokenByPropertyName<K, Theme, ThemeMap>
| CSS.Globals
| Util.Index
)
}
// known utility styles
& {
[K in keyof Utils]?: (
K extends keyof CSSProperties
? unknown
: (
| (
Utils[K] extends (arg: infer P) => any
? $$PropertyValue extends keyof P
? (
| ValueByPropertyName<P[$$PropertyValue]>
| TokenByPropertyName<P[$$PropertyValue], Theme, ThemeMap>
| CSS.Globals
| Util.Index
)
: $$ScaleValue extends keyof P
? (
| TokenByScaleName<P[$$ScaleValue], Theme>
| Util.Index
)
: never
: never
)
)
)
}
// known theme styles
& {
[K in keyof ThemeMap]?: (
K extends keyof CSSProperties
? unknown
: K extends keyof CSSProperties
? unknown
: K extends keyof Utils
? unknown
: (
| CSS.Globals
| Util.Index
)
)
}
)

/** Unique symbol used to reference a property value. */
export declare const $$PropertyValue: unique symbol

Expand All @@ -112,18 +176,3 @@ export type $$ScaleValue = typeof $$ScaleValue
export declare const $$ThemeValue: unique symbol

export type $$ThemeValue = typeof $$ThemeValue

/** Returns a Style interface from a configuration, leveraging the given media and style map. */
export type CSS<
Config extends {
media?: {}
theme?: {}
themeMap?: {}
utils?: {}
}
> = Style<
Config['media'],
Config['theme'],
Config['themeMap'],
Config['utils']
>
42 changes: 33 additions & 9 deletions packages/react/types/index.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,33 @@
import type { CreateCss, PropertyValue, ScaleValue } from './create-css'
import type { CSS, Style } from './css-util'
import type { Stitches } from './stitches'
import type { ThemeMap as DefaultThemeMap } from './default'
import type CreateCss from './create-css'
import type Sheet from './sheet'

export type { CSS, CreateCss, DefaultThemeMap, PropertyValue, ScaleValue, Stitches, Style }
import type * as CSSUtil from './css-util'
import type * as Default from './default'

export type { CreateCss, Sheet }

export type DefaultThemeMap = Default.ThemeMap

/** Returns a Style interface from a configuration, leveraging the given media and style map. */
export type CSS<
Config extends {
media?: {}
theme?: {}
themeMap?: {}
utils?: {}
}
> = CSSUtil.CSS<
Config['media'],
Config['theme'],
Config['themeMap'],
Config['utils']
>

/** Returns a type that expects a value to be a kind of CSS property value. */
export type PropertyValue<K extends keyof CSSUtil.CSSProperties> = { readonly [CSSUtil.$$PropertyValue]: K }

/** Returns a type that expects a value to be a kind of theme scale value. */
export type ScaleValue<K> = { readonly [CSSUtil.$$ScaleValue]: K }

/** Returns a library used to create styles. */
export declare const createCss: CreateCss
Expand All @@ -12,13 +36,13 @@ export declare const createCss: CreateCss
export declare const defaultThemeMap: DefaultThemeMap

/** Returns a function that applies global styles. */
export declare const global: Stitches['global']
export declare const global: Sheet['global']

/** Returns an object that applies `@keyframes` styles. */
export declare const keyframes: Stitches['keyframes']
export declare const keyframes: Sheet['keyframes']

/** Returns a function that applies styles and variants for a specific class. */
export declare const css: Stitches['css']
export declare const css: Sheet['css']

/** Returns a function that applies styles and variants for a specific class. */
export declare const styled: Stitches['styled']
export declare const styled: Sheet['styled']
75 changes: 30 additions & 45 deletions packages/react/types/stitches.d.ts → packages/react/types/sheet.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ import type * as Default from './default'
import type * as StyledComponent from './styled-component'
import type * as Util from './util'

/** Stitches interface. */
export interface Stitches<
/** Sheet interface. */
export default interface Sheet<
Prefix = Default.Prefix,
Media = Default.Media,
Theme = {},
ThemeMap = Default.ThemeMap,
Utils = {}
Utils = {},
CSS extends { [prelude: string]: unknown } = CSSUtil.CSS<Media, Theme, ThemeMap, Utils>,
KnownCSS extends { [prelude: string]: unknown } = CSSUtil.KnownCSS<Media, Theme, ThemeMap, Utils>
> {
config: {
prefix: Prefix
Expand All @@ -21,14 +23,14 @@ export interface Stitches<
prefix: Prefix
global: {
(style: {
[prelude: string]: CSSUtil.Style<Media, Theme, ThemeMap, Utils>
[prelude: string]: CSS
}): {
(): string
}
},
keyframes: {
(style: {
[offset: string]: CSSUtil.Style<Media, Theme, ThemeMap, Utils>
[offset: string]: CSS
}): {
(): string
name: string
Expand Down Expand Up @@ -98,20 +100,20 @@ export interface Stitches<
: Composers[K] extends Function
? Composers[K]
: Composers[K] extends {
[K2 in keyof Composers[K]]: Composers[K][K2]
[Prelude in keyof Composers[K]]: Composers[K][Prelude]
}
? (
& {
[K2 in keyof Composers[K]]:
K2 extends 'variants'
? {
[name: string]: {
[pair in number | string]: CSSUtil.Style<Media, Theme, ThemeMap, Utils>
[pair in number | string]: CSS
}
}
: unknown
}
& CSSUtil.Style<Media, Theme, ThemeMap, Utils>
& KnownCSS
)
: never
)
Expand Down Expand Up @@ -149,46 +151,41 @@ export interface Stitches<
[K2 in keyof Composers[K]]: Composers[K][K2]
}
? (
& KnownCSS
& {
[K2 in keyof Composers[K]]: (
| (
K2 extends 'variants'
? {
[name: string]: {
[pair in number | string]: CSSUtil.Style<Media, Theme, ThemeMap, Utils>
}
}
: unknown
)
)
}
& {
variants?: unknown
variants?: {
[name: string]: {
[pair in number | string]: CSS
}
}
compoundVariants?: (
& (
'variants' extends keyof Composers[K]
? {
[Name in keyof Composers[K]['variants']]?: Util.Widen<keyof Composers[K]['variants'][Name]>
}
: {
[name: string]: boolean | number | string | undefined
}
[Name in keyof Composers[K]['variants']]?: Util.Widen<keyof Composers[K]['variants'][Name]> | Util.String
} & Util.WideObject
: Util.WideObject
)
& {
css: CSSUtil.Style<Media, Theme, ThemeMap, Utils>
css: CSS
}
)[]
defaultVariants?: (
'variants' extends keyof Composers[K]
? {
[Name in keyof Composers[K]['variants']]?: Util.Widen<keyof Composers[K]['variants'][Name]>
[Name in keyof Composers[K]['variants']]?: Util.Widen<keyof Composers[K]['variants'][Name]> | Util.String
}
: {
[name: string]: boolean | number | string | undefined
}
: Util.WideObject
)
}
& CSSUtil.Style<Media, Theme, ThemeMap, Utils>
& {
[Prelude in keyof Composers[K]]:
Prelude extends keyof KnownCSS | 'compoundVariants' | 'defaultVariants' | 'variants'
? unknown
: Composers[K][Prelude] extends {}
? CSS
: boolean | number | string
}
)
: never
)
Expand All @@ -203,15 +200,3 @@ export interface Stitches<
>
}
}

/* ========================================================================== */

export interface GlobalComponent {
(): string
}

export interface GlobalExpressor {
toString(): ''
}

export interface ThemedExpressor {}
Loading

0 comments on commit f2f4ecd

Please sign in to comment.