From e7513562e8e456189870bd621cb9a12ff1d0410b Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Fri, 16 Jul 2021 10:32:31 -0400 Subject: [PATCH] update core & react typings --- packages/core/types/create-css.d.ts | 20 ++-- packages/core/types/css-util.d.ts | 98 ++++++++++++++----- packages/core/types/index.d.ts | 40 ++++++-- .../core/types/{stitches.d.ts => sheet.d.ts} | 45 +++------ packages/core/types/styled-component.d.ts | 48 ++++++--- packages/core/types/util.d.ts | 20 +++- packages/react/types/sheet.d.ts | 6 +- packages/react/types/util.d.ts | 15 ++- 8 files changed, 196 insertions(+), 96 deletions(-) rename packages/core/types/{stitches.d.ts => sheet.d.ts} (68%) diff --git a/packages/core/types/create-css.d.ts b/packages/core/types/create-css.d.ts index 5bc79a4c..86285660 100644 --- a/packages/core/types/create-css.d.ts +++ b/packages/core/types/create-css.d.ts @@ -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 = { readonly [CSSUtil.$$PropertyValue]: K } - -export type ScaleValue = { 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 @@ -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 {} = {} > = ( @@ -61,7 +57,7 @@ export type InterfaceOfThemeMap< } ) -export type InterfaceOfUtils< +type InterfaceOfUtils< Utils extends {} = {} > = ( // shape of right-hand values @@ -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, @@ -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 @@ -104,4 +100,4 @@ export type CreateCss = { > } -export declare var createCss: CreateCss +export default CreateCss diff --git a/packages/core/types/css-util.d.ts b/packages/core/types/css-util.d.ts index 93cc78f5..b59b169b 100644 --- a/packages/core/types/css-util.d.ts +++ b/packages/core/types/css-util.d.ts @@ -14,7 +14,7 @@ type TokenByPropertyName = PropertyName extends k type TokenByScaleName = 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, @@ -22,7 +22,7 @@ export type Style< > = ( // nested at-rule css styles & { - [K in Util.Prefixed<'@', keyof Media>]?: Style + [K in Util.Prefixed<'@', keyof Media>]?: CSS } // known property styles & { @@ -30,7 +30,7 @@ export type Style< | ValueByPropertyName | TokenByPropertyName | CSS.Globals - | Util.String + | Util.Index ) } // known utility styles @@ -46,12 +46,12 @@ export type Style< | ValueByPropertyName | TokenByPropertyName | CSS.Globals - | Util.String + | Util.Index ) : $$ScaleValue extends keyof P ? ( | TokenByScaleName - | Util.String + | Util.Index ) : never : never @@ -70,7 +70,7 @@ export type Style< ? unknown : ( | CSS.Globals - | Util.String + | Util.Index ) ) } @@ -85,10 +85,77 @@ export type Style< ? unknown : K extends keyof ThemeMap ? unknown + : K extends keyof { variants: unknown; defaultVariants: unknown; compoundVariants: unknown } + ? unknown : ( - | Style + | CSS | 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 + } + // known property styles + & { + [K in keyof CSSProperties]?: ( + | ValueByPropertyName + | TokenByPropertyName + | 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 + | TokenByPropertyName + | CSS.Globals + | Util.Index + ) + : $$ScaleValue extends keyof P + ? ( + | TokenByScaleName + | 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 ) ) } @@ -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'] -> diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts index b7436a38..175899a7 100644 --- a/packages/core/types/index.d.ts +++ b/packages/core/types/index.d.ts @@ -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 = { readonly [CSSUtil.$$PropertyValue]: K } + +/** Returns a type that expects a value to be a kind of theme scale value. */ +export type ScaleValue = { readonly [CSSUtil.$$ScaleValue]: K } /** Returns a library used to create styles. */ export declare const createCss: CreateCss @@ -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'] diff --git a/packages/core/types/stitches.d.ts b/packages/core/types/sheet.d.ts similarity index 68% rename from packages/core/types/stitches.d.ts rename to packages/core/types/sheet.d.ts index 6219661d..149bddae 100644 --- a/packages/core/types/stitches.d.ts +++ b/packages/core/types/sheet.d.ts @@ -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, + KnownCSS extends { [prelude: string]: unknown } = CSSUtil.KnownCSS > { config: { prefix: Prefix @@ -21,14 +23,14 @@ export interface Stitches< prefix: Prefix global: { (style: { - [prelude: string]: CSSUtil.Style + [prelude: string]: CSS }): { (): string } }, keyframes: { (style: { - [offset: string]: CSSUtil.Style + [offset: string]: CSS }): { (): string name: string @@ -81,7 +83,7 @@ export interface Stitches< < Composers extends ( | string - | Function + | Util.Function | { [name: string]: unknown } )[] >( @@ -89,11 +91,7 @@ export interface Stitches< [K in keyof Composers]: ( Composers[K] extends string ? Composers[K] - : Composers[K] extends React.ExoticComponent - ? Composers[K] - : Composers[K] extends React.JSXElementConstructor - ? Composers[K] - : Composers[K] extends Function + : Composers[K] extends Util.Function ? Composers[K] : Composers[K] extends { [K2 in keyof Composers[K]]: Composers[K][K2] @@ -104,12 +102,12 @@ export interface Stitches< K2 extends 'variants' ? { [name: string]: { - [pair in number | string]: CSSUtil.Style + [pair in number | string]: CSS } } : unknown } - & CSSUtil.Style + & KnownCSS ) : never ) @@ -122,24 +120,5 @@ export interface Stitches< ThemeMap, Utils > - } -} - -/* ========================================================================== */ - -type Merge = { - [K in keyof T1 | keyof T2]: ( - | ( - K extends keyof T1 ? T1[K] : never - ) - | ( - K extends keyof T2 ? T2[K] : never - ) - ) + }, } - -type Tokens = ( - K extends keyof Theme - ? Util.Prefixed<'$', keyof Theme[K]> - : never -) diff --git a/packages/core/types/styled-component.d.ts b/packages/core/types/styled-component.d.ts index dce44c49..d9c144e6 100644 --- a/packages/core/types/styled-component.d.ts +++ b/packages/core/types/styled-component.d.ts @@ -1,6 +1,6 @@ +import type * as CSSUtil from './css-util' import type * as Default from './default' import type * as Util from './util' -import type * as CSSUtil from './css-util' /** Returns a new Css Component. */ export interface CssComponent< @@ -9,13 +9,15 @@ export interface CssComponent< Media = Default.Media, Theme = {}, ThemeMap = Default.ThemeMap, - Utils = {} + Utils = {}, + TransformedProps = TransformProps, + CSS = CSSUtil.CSS > { ( props: ( - & Partial + & Partial & { - css?: CSSUtil.Style + css?: CSS } & { [name in number | string]: any @@ -34,6 +36,12 @@ export interface CssComponent< [$$StyledComponentProps]: Props } +type TransformProps = { + [K in keyof Props]: Props[K] | { + [KMedia in Util.Prefixed<'@', 'initial' | keyof Media>]?: Props[K] + } +} + /** Unique symbol used to reference the type of a Styled Component. */ export declare const $$StyledComponentType: unique symbol @@ -46,6 +54,13 @@ export declare const $$StyledComponentProps: unique symbol /** Unique symbol used to reference the props of a Styled Component. */ export type $$StyledComponentProps = typeof $$StyledComponentProps +/** Returns a narrowed JSX element from the given tag name. */ +type IntrinsicElement = TagName extends keyof JSX.IntrinsicElements ? TagName : never + +/** Returns a ForwardRef component. */ +type ForwardRefExoticComponent = React.ForwardRefExoticComponent< + Util.Assign : never, Props & { as?: ElementType, css?: {} }> +> /** Returns the first Styled Component type from the given array of compositions. */ type StyledComponentType = ( @@ -62,15 +77,18 @@ type StyledComponentType = ( /** Returns the cumulative variants from the given array of compositions. */ type StyledComponentProps = ( - T[0] extends { [$$StyledComponentProps]: unknown } - ? T[0][$$StyledComponentProps] - : T[0] extends { variants: { [name: string]: unknown } } - ? { - [K in keyof T[0]['variants']]: Util.Widen - } - : {} -) | ( - T extends [lead: any, ...tail: infer V] - ? StyledComponentProps - : never + & ( + $$StyledComponentProps extends keyof T[0] + ? T[0][$$StyledComponentProps] + : T[0] extends { variants: { [name: string]: unknown } } + ? { + [K in keyof T[0]['variants']]?: Util.Widen + } + : {} + ) + & ( + T extends [lead: any, ...tail: infer V] + ? StyledComponentProps + : {} + ) ) diff --git a/packages/core/types/util.d.ts b/packages/core/types/util.d.ts index af15e9b5..c7071661 100644 --- a/packages/core/types/util.d.ts +++ b/packages/core/types/util.d.ts @@ -8,7 +8,25 @@ export type Prefixed = `${K}${Extract = Omit & T2 /** Returns a widened value from the given value. */ -export type Widen = T extends number ? `${T}` | T : T extends 'true' ? boolean | T : T extends 'false' ? boolean | T : T extends `${number}` ? number | T : T +export type Widen = + T extends number + ? `${T}` | T + : T extends 'true' + ? boolean | T + : T extends 'false' + ? boolean | T + : T extends `${number}` + ? number | T + : T /** Narrowed string. */ export type String = string & Record + +/** Narrowed number or string. */ +export type Index = (number | string) & Record + +/** Narrowed function. */ +export type Function = (...args: any[]) => unknown + +/** Widened object. */ +export type WideObject = { [name in number | string]: boolean | number | string | undefined | object } diff --git a/packages/react/types/sheet.d.ts b/packages/react/types/sheet.d.ts index a101fef2..cd157139 100644 --- a/packages/react/types/sheet.d.ts +++ b/packages/react/types/sheet.d.ts @@ -97,10 +97,10 @@ export default interface Sheet< ? Composers[K] : Composers[K] extends React.JSXElementConstructor ? Composers[K] - : Composers[K] extends Function + : Composers[K] extends Util.Function ? Composers[K] : Composers[K] extends { - [Prelude in keyof Composers[K]]: Composers[K][Prelude] + [K2 in keyof Composers[K]]: Composers[K][K2] } ? ( & { @@ -145,7 +145,7 @@ export default interface Sheet< ? Composers[K] : Composers[K] extends React.JSXElementConstructor ? Composers[K] - : Composers[K] extends Function + : Composers[K] extends Util.Function ? Composers[K] : Composers[K] extends { [K2 in keyof Composers[K]]: Composers[K][K2] diff --git a/packages/react/types/util.d.ts b/packages/react/types/util.d.ts index 8a7ffb2f..c7071661 100644 --- a/packages/react/types/util.d.ts +++ b/packages/react/types/util.d.ts @@ -8,7 +8,16 @@ export type Prefixed = `${K}${Extract = Omit & T2 /** Returns a widened value from the given value. */ -export type Widen = T extends number ? `${T}` | T : T extends 'true' ? boolean | T : T extends 'false' ? boolean | T : T extends `${number}` ? number | T : T +export type Widen = + T extends number + ? `${T}` | T + : T extends 'true' + ? boolean | T + : T extends 'false' + ? boolean | T + : T extends `${number}` + ? number | T + : T /** Narrowed string. */ export type String = string & Record @@ -16,4 +25,8 @@ export type String = string & Record /** Narrowed number or string. */ export type Index = (number | string) & Record +/** Narrowed function. */ export type Function = (...args: any[]) => unknown + +/** Widened object. */ +export type WideObject = { [name in number | string]: boolean | number | string | undefined | object }