Skip to content

Commit

Permalink
update core & react typings
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonathantneal
jonathantneal committed Jul 22, 2021
1 parent f2f4ecd commit e751356
Show file tree
Hide file tree
Showing 8 changed files with 196 additions and 96 deletions.
20 changes: 8 additions & 12 deletions packages/core/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
98 changes: 75 additions & 23 deletions packages/core/types/css-util.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,23 @@ 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
& {
[K in keyof CSSProperties]?: (
| ValueByPropertyName<K>
| TokenByPropertyName<K, Theme, ThemeMap>
| CSS.Globals
| Util.String
| Util.Index
)
}
// known utility styles
Expand All @@ -46,12 +46,12 @@ export type Style<
| ValueByPropertyName<P[$$PropertyValue]>
| TokenByPropertyName<P[$$PropertyValue], Theme, ThemeMap>
| CSS.Globals
| Util.String
| Util.Index
)
: $$ScaleValue extends keyof P
? (
| TokenByScaleName<P[$$ScaleValue], Theme>
| Util.String
| Util.Index
)
: never
: never
Expand All @@ -70,7 +70,7 @@ export type Style<
? unknown
: (
| CSS.Globals
| Util.String
| Util.Index
)
)
}
Expand All @@ -85,10 +85,77 @@ export type Style<
? unknown
: K extends keyof ThemeMap
? unknown
: K extends keyof { variants: unknown; defaultVariants: unknown; compoundVariants: unknown }
? unknown
: (
| Style<Media, Theme, ThemeMap, Utils>
| CSS<Media, Theme, ThemeMap, Utils>
| CSS.Globals
| Util.String
| Util.Index
| any[]
)
)
}
)


/** 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
)
)
}
Expand All @@ -109,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']
>
40 changes: 32 additions & 8 deletions packages/core/types/index.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,33 @@
import type { PropertyValue, ScaleValue, CreateCss } 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,10 +36,10 @@ 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']
45 changes: 12 additions & 33 deletions packages/core/types/stitches.d.ts → packages/core/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 @@ -81,19 +83,15 @@ export interface Stitches<
<
Composers extends (
| string
| Function
| Util.Function
| { [name: string]: unknown }
)[]
>(
...composers: {
[K in keyof Composers]: (
Composers[K] extends string
? Composers[K]
: Composers[K] extends React.ExoticComponent<any>
? Composers[K]
: Composers[K] extends React.JSXElementConstructor<any>
? Composers[K]
: Composers[K] extends Function
: Composers[K] extends Util.Function
? Composers[K]
: Composers[K] extends {
[K2 in keyof Composers[K]]: Composers[K][K2]
Expand All @@ -104,12 +102,12 @@ export interface Stitches<
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 All @@ -122,24 +120,5 @@ export interface Stitches<
ThemeMap,
Utils
>
}
}

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

type Merge<T1, T2> = {
[K in keyof T1 | keyof T2]: (
| (
K extends keyof T1 ? T1[K] : never
)
| (
K extends keyof T2 ? T2[K] : never
)
)
},
}

type Tokens<Theme, K> = (
K extends keyof Theme
? Util.Prefixed<'$', keyof Theme[K]>
: never
)
Loading

0 comments on commit e751356

Please sign in to comment.