update typing / improve support for theme tokens

implydata · Jul 22, 2021 · 69b4b06 · 69b4b06
1 parent d1dd63c
commit 69b4b06
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 56 deletions.
diff --git a/packages/core/types/css-util.d.ts b/packages/core/types/css-util.d.ts
@@ -1,5 +1,6 @@
 import type * as CSS from './css'
 import type * as Default from './default'
+import type * as ThemeUtil from './theme'
 import type * as Util from './util'
 
 /** CSS style declaration object. */
@@ -13,8 +14,6 @@ type TokenByPropertyName<PropertyName, Theme, ThemeMap> = PropertyName extends k
 
 type TokenByScaleName<ScaleName, Theme> = ScaleName extends keyof Theme ? Util.Prefixed<'$', keyof Theme[ScaleName]> : never
 
-type SupportedAnimationName<K> = K extends 'animation' | 'animationName' ? {} : never
-
 /** Returns a Style interface, leveraging the given media and style map. */
 export type CSS<
 	Media = Default.Media,
@@ -33,7 +32,7 @@ export type CSS<
 			| TokenByPropertyName<K, Theme, ThemeMap>
 			| CSS.Globals
 			| Util.Index
-			| SupportedAnimationName<K>
+			| ThemeUtil.TokenInterface
 		)
 	}
 	// known utility styles
@@ -119,7 +118,7 @@ export type KnownCSS<
 			| TokenByPropertyName<K, Theme, ThemeMap>
 			| CSS.Globals
 			| Util.Index
-			| SupportedAnimationName<K>
+			| ThemeUtil.TokenInterface
 		)
 	}
 	// known utility styles

diff --git a/packages/core/types/sheet.d.ts b/packages/core/types/sheet.d.ts
@@ -1,11 +1,12 @@
 import type * as CSSUtil from './css-util'
 import type * as Default from './default'
 import type * as StyledComponent from './styled-component'
+import type * as ThemeUtil from './theme'
 import type * as Util from './util'
 
 /** Sheet interface. */
 export default interface Sheet<
-	Prefix = Default.Prefix,
+	Prefix extends string = Default.Prefix,
 	Media = Default.Media,
 	Theme = {},
 	ThemeMap = Default.ThemeMap,
@@ -72,6 +73,10 @@ export default interface Sheet<
 			className: string
 			selector: string
 		}
+	} & {
+		[Scale in keyof Theme]: {
+			[Token in keyof Theme[Scale]]: ThemeUtil.Token<Extract<Token, string | number>, string, Extract<Scale, string>, Prefix>
+		}
 	}
 	reset: {
 		(): void

diff --git a/packages/core/types/theme.d.ts b/packages/core/types/theme.d.ts
@@ -1,4 +1,6 @@
-export declare class Token<
+export interface TokenInterface {}
+
+export interface Token<
 	/** Token name. */
 	NameType extends number | string = string,
 
@@ -10,7 +12,7 @@ export declare class Token<
 
 	/** Token prefix. */
 	PrefixType extends string | void = void,
-> {
+> extends TokenInterface {
 	new (name: NameType, value: ValueType, scale?: ScaleType, prefix?: PrefixType): this
 
 	/** Name of the token. */
@@ -33,24 +35,4 @@ export declare class Token<
 
 	/** Returns a serialized CSS var() representing the token. */
 	toString(): this['computedValue']
-} // prettier-ignore
-
-export type Tokens<Type extends object = {}, PrefixType extends string = ''> = __TokensLiteral<__TokensCreated<Type, PrefixType>>
-
-type __TokensCreated<Type extends object, PrefixType extends string> = {
-	[KScaleType in keyof Type]: (
-		Type[KScaleType] extends object
-			? {
-				[KTokenType in keyof Type[KScaleType]]: (
-					Type[KScaleType][KTokenType] extends string
-						? Token<string & KTokenType, string & Type[KScaleType][KTokenType], string & KScaleType, PrefixType>
-					: never
-				)
-			}
-		: {}
-	)
-} // prettier-ignore
-
-type __TokensLiteral<T> = T extends {} ? {
-	[K in keyof T]: T[K]
-} : never // prettier-ignore
+}
diff --git a/packages/react/types/css-util.d.ts b/packages/react/types/css-util.d.ts
@@ -1,5 +1,6 @@
 import type * as CSS from './css'
 import type * as Default from './default'
+import type * as ThemeUtil from './theme'
 import type * as Util from './util'
 
 /** CSS style declaration object. */
@@ -13,8 +14,6 @@ type TokenByPropertyName<PropertyName, Theme, ThemeMap> = PropertyName extends k
 
 type TokenByScaleName<ScaleName, Theme> = ScaleName extends keyof Theme ? Util.Prefixed<'$', keyof Theme[ScaleName]> : never
 
-type SupportedAnimationName<K> = K extends 'animation' | 'animationName' ? {} : never
-
 /** Returns a Style interface, leveraging the given media and style map. */
 export type CSS<
 	Media = Default.Media,
@@ -33,7 +32,7 @@ export type CSS<
 			| TokenByPropertyName<K, Theme, ThemeMap>
 			| CSS.Globals
 			| Util.Index
-			| SupportedAnimationName<K>
+			| ThemeUtil.TokenInterface
 		)
 	}
 	// known utility styles
@@ -119,7 +118,7 @@ export type KnownCSS<
 			| TokenByPropertyName<K, Theme, ThemeMap>
 			| CSS.Globals
 			| Util.Index
-			| SupportedAnimationName<K>
+			| ThemeUtil.TokenInterface
 		)
 	}
 	// known utility styles

diff --git a/packages/react/types/sheet.d.ts b/packages/react/types/sheet.d.ts
@@ -1,11 +1,12 @@
 import type * as CSSUtil from './css-util'
 import type * as Default from './default'
 import type * as StyledComponent from './styled-component'
+import type * as ThemeUtil from './theme'
 import type * as Util from './util'
 
 /** Sheet interface. */
 export default interface Sheet<
-	Prefix = Default.Prefix,
+	Prefix extends string = Default.Prefix,
 	Media = Default.Media,
 	Theme = {},
 	ThemeMap = Default.ThemeMap,
@@ -72,6 +73,10 @@ export default interface Sheet<
 			className: string
 			selector: string
 		}
+	} & {
+		[Scale in keyof Theme]: {
+			[Token in keyof Theme[Scale]]: ThemeUtil.Token<Extract<Token, string | number>, string, Extract<Scale, string>, Prefix>
+		}
 	}
 	reset: {
 		(): void

diff --git a/packages/react/types/theme.d.ts b/packages/react/types/theme.d.ts
@@ -1,4 +1,6 @@
-export declare class Token<
+export interface TokenInterface {}
+
+export interface Token<
 	/** Token name. */
 	NameType extends number | string = string,
 
@@ -10,7 +12,7 @@ export declare class Token<
 
 	/** Token prefix. */
 	PrefixType extends string | void = void,
-> {
+> extends TokenInterface {
 	new (name: NameType, value: ValueType, scale?: ScaleType, prefix?: PrefixType): this
 
 	/** Name of the token. */
@@ -33,24 +35,4 @@ export declare class Token<
 
 	/** Returns a serialized CSS var() representing the token. */
 	toString(): this['computedValue']
-} // prettier-ignore
-
-export type Tokens<Type extends object = {}, PrefixType extends string = ''> = __TokensLiteral<__TokensCreated<Type, PrefixType>>
-
-type __TokensCreated<Type extends object, PrefixType extends string> = {
-	[KScaleType in keyof Type]: (
-		Type[KScaleType] extends object
-			? {
-				[KTokenType in keyof Type[KScaleType]]: (
-					Type[KScaleType][KTokenType] extends string
-						? Token<string & KTokenType, string & Type[KScaleType][KTokenType], string & KScaleType, PrefixType>
-					: never
-				)
-			}
-		: {}
-	)
-} // prettier-ignore
-
-type __TokensLiteral<T> = T extends {} ? {
-	[K in keyof T]: T[K]
-} : never // prettier-ignore
+}