fix: performance of css prop on components

implydata · Aug 10, 2021 · a9df3c5 · a9df3c5
1 parent 32654ce
commit a9df3c5
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 56 deletions.
diff --git a/packages/core/types/stitches.d.ts b/packages/core/types/stitches.d.ts
@@ -84,7 +84,12 @@ export default interface Stitches<
 	}
 	theme: string & {
 		[Scale in keyof Theme]: {
-			[Token in keyof Theme[Scale]]: ThemeUtil.Token<Extract<Token, string | number>, string, Extract<Scale, string>, Prefix>
+			[Token in keyof Theme[Scale]]: ThemeUtil.Token<
+				Extract<Token, string | number>,
+				string,
+				Extract<Scale, string>,
+				Extract<Prefix, string | void>
+			>
 		}
 	}
 	reset: {
@@ -146,8 +151,8 @@ export default interface Stitches<
 								[Prelude in keyof Composers[K]]:
 									Prelude extends keyof KnownCSS | 'compoundVariants' | 'defaultVariants' | 'variants'
 										? unknown
-									: Composers[K][Prelude] extends {}
-										? CSS[Prelude]
+									: Composers[K][Prelude] extends Record<string, unknown>
+										? CSS
 									: boolean | number | string
 							}
 							& CSS
@@ -157,19 +162,20 @@ export default interface Stitches<
 			}
 		): StyledComponent.CssComponent<
 			StyledComponent.StyledComponentType<Composers>,
-			StyledComponent.StyledComponentProps<Composers> & { css?: CSS },
-			Media
+			StyledComponent.StyledComponentProps<Composers>,
+			Media,
+			CSS
 		>
 	},
 }
 
 type ThemeTokens<Values, Prefix> = {
 	[Scale in keyof Values]: {
 		[Token in keyof Values[Scale]]: ThemeUtil.Token<
-			Token,
+			Extract<Token, number | string>,
 			Values[Scale][Token],
-			Scale,
-			Prefix
+			Extract<Scale, string | void>,
+			Extract<Prefix, string | void>
 		>
 	}
 }
diff --git a/packages/core/types/styled-component.d.ts b/packages/core/types/styled-component.d.ts
@@ -1,4 +1,3 @@
-import type * as CSSUtil from './css-util'
 import type * as Default from './default'
 import type * as Util from './util'
 
@@ -7,39 +6,44 @@ export interface CssComponent<
 	Type = 'span',
 	Props = {},
 	Media = Default.Media,
-	TransformedProps = TransformProps<Omit<Props, 'css'>, Media> & { css?: Props['css'] }
+	CSS = {},
+	TransformedProps = TransformProps<Props, Media>
 > {
 	(
 		props?:
 			& TransformedProps
+			& {
+				css?: CSS
+			}
 			& {
 				[name in number | string]: any
 			}
 	): string & {
 		className: string
 		selector: string
-		props: object
+		props: {}
 	}
 
 	className: string
 	selector: string
 
 	[$$StyledComponentType]: Type
-	[$$StyledComponentProps]: Omit<Props, 'css'>
+	[$$StyledComponentProps]: Props
 	[$$StyledComponentMedia]: Media
 }
 
 export type TransformProps<Props, Media> = {
-	[K in keyof Props]:
-		K extends 'css'
-			? Props['css'] extends CSSUtil.CSS
-				? Props['css']
-			: CSSUtil.CSS
-		:
-			| Props[K]
-			| {
+	[K in keyof Props]: (
+		| Props[K]
+		| (
+			& {
 				[KMedia in Util.Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
 			}
+			& {
+				[KMedia in string]: Props[K]
+			}
+		)
+	)
 }
 
 /** Unique symbol used to reference the type of a Styled Component. */

diff --git a/packages/react/types/stitches.d.ts b/packages/react/types/stitches.d.ts
@@ -90,7 +90,12 @@ export default interface Stitches<
 	}
 	theme: string & {
 		[Scale in keyof Theme]: {
-			[Token in keyof Theme[Scale]]: ThemeUtil.Token<Extract<Token, string | number>, string, Extract<Scale, string>, Prefix>
+			[Token in keyof Theme[Scale]]: ThemeUtil.Token<
+				Extract<Token, string | number>,
+				string,
+				Extract<Scale, string | void>,
+				Extract<Prefix, string | void>
+			>
 		}
 	}
 	reset: {
@@ -158,8 +163,8 @@ export default interface Stitches<
 								[Prelude in keyof Composers[K]]:
 									Prelude extends keyof KnownCSS | 'compoundVariants' | 'defaultVariants' | 'variants'
 										? unknown
-									: Composers[K][Prelude] extends {}
-										? CSS[Prelude]
+									: Composers[K][Prelude] extends Record<string, unknown>
+										? CSS
 									: boolean | number | string
 							}
 							& CSS
@@ -169,8 +174,9 @@ export default interface Stitches<
 			}
 		): StyledComponent.CssComponent<
 			StyledComponent.StyledComponentType<Composers>,
-			StyledComponent.StyledComponentProps<Composers> & { css?: CSS },
-			Media
+			StyledComponent.StyledComponentProps<Composers>,
+			Media,
+			CSS
 		>
 	},
 	styled: {
@@ -239,8 +245,8 @@ export default interface Stitches<
 								[Prelude in keyof Composers[K]]:
 									Prelude extends keyof KnownCSS | 'compoundVariants' | 'defaultVariants' | 'variants'
 										? unknown
-									: Composers[K][Prelude] extends {}
-										? CSS[Prelude]
+									: Composers[K][Prelude] extends Record<string, unknown>
+										? CSS
 									: boolean | number | string
 							}
 							& CSS
@@ -250,21 +256,20 @@ export default interface Stitches<
 			}
 		): StyledComponent.StyledComponent<
 			Type,
-			StyledComponent.StyledComponentProps<Composers> & {
-				css?: CSS
-			},
-			Media
+			StyledComponent.StyledComponentProps<Composers>,
+			Media,
+			CSS
 		>
 	}
 }
 
 type ThemeTokens<Values, Prefix> = {
 	[Scale in keyof Values]: {
 		[Token in keyof Values[Scale]]: ThemeUtil.Token<
-			Token,
+			Extract<Token, number | string>,
 			Values[Scale][Token],
-			Scale,
-			Prefix
+			Extract<Scale, string | void>,
+			Extract<Prefix, string | void>
 		>
 	}
 }
diff --git a/packages/react/types/styled-component.d.ts b/packages/react/types/styled-component.d.ts
@@ -7,43 +7,54 @@ export interface StyledComponent<
 	Type = 'span',
 	Props = {},
 	Media = Default.Media,
+	CSS = {},
 	TransformedProps = TransformProps<Props, Media>
 > extends React.ForwardRefExoticComponent<
 	Util.Assign<
 		Type extends React.ElementType
 			? React.ComponentPropsWithRef<Type>
 		: never,
-		TransformedProps & { as?: Type }
+		TransformedProps & { as?: Type } & { css?: CSS }
 	>
 > {
 	<As = Type>(
-		props: As extends ''
-		? { as: keyof JSX.IntrinsicElements }
-		: As extends React.ComponentType<infer P>
-		? Util.Assign<P, TransformedProps & { as: As }>
-		: As extends keyof JSX.IntrinsicElements
-		? Util.Assign<JSX.IntrinsicElements[As], TransformedProps & { as: As }>
-		: never
+		props: (
+			As extends ''
+				? { as: keyof JSX.IntrinsicElements }
+			: As extends React.ComponentType<infer P>
+				? Util.Assign<P, TransformedProps & { as: As }>
+			: As extends keyof JSX.IntrinsicElements
+				? Util.Assign<JSX.IntrinsicElements[As], TransformedProps & { as: As }>
+			: never
+		)
 	): React.ReactElement | null
 
 	className: string
 	selector: string
 
 	[$$StyledComponentType]: Type
-	[$$StyledComponentProps]: Omit<Props, 'css'>
+	[$$StyledComponentProps]: Props
 	[$$StyledComponentMedia]: Media
 }
 
+type InferLate<CSS extends {} = {}, Props extends {} = {}> = {
+	[K in keyof Props]: K extends 'css' ? CSS : unknown
+}
+
 /** Returns a new CSS Component. */
 export interface CssComponent<
 	Type = 'span',
 	Props = {},
 	Media = Default.Media,
+	CSS = {},
 	TransformedProps = TransformProps<Props, Media>
 > {
 	(
 		props?:
 			& TransformedProps
+			& {
+				css?: CSS
+			}
 			& {
 				[name in number | string]: any
 			}
@@ -57,24 +68,20 @@ export interface CssComponent<
 	selector: string
 
 	[$$StyledComponentType]: Type
-	[$$StyledComponentProps]: Omit<Props, 'css'>
+	[$$StyledComponentProps]: Props
 	[$$StyledComponentMedia]: Media
 }
 
 export type TransformProps<Props, Media> = {
 	[K in keyof Props]: (
-		K extends 'css'
-			? Props[K]
-		: (
-			| Props[K]
-			| (
-				& {
-					[KMedia in Util.Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
-				}
-				& {
-					[KMedia in string]: Props[K]
-				}
-			)
+		| Props[K]
+		| (
+			& {
+				[KMedia in Util.Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
+			}
+			& {
+				[KMedia in string]: Props[K]
+			}
 		)
 	)
 }