diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts index 34e41c46..f97372f1 100644 --- a/packages/react/types/index.d.ts +++ b/packages/react/types/index.d.ts @@ -9,7 +9,6 @@ export type CSSProperties = CSSUtil.CSSProperties export type DefaultThemeMap = Config.DefaultThemeMap /** Returns a Style interface from a configuration, leveraging the given media and style map. */ - export type CSS< Config extends { media?: {} @@ -33,26 +32,26 @@ export type CSS< export type ComponentProps = Component extends ((...args: any[]) => any) ? Parameters[0] : never /** Returns a type that expects a value to be a kind of CSS property value. */ -export type PropertyValue = ( - C extends null - ? { readonly [CSSUtil.$$PropertyValue]: K } - : C extends { [K: string]: any } +export type PropertyValue = ( + Config extends null + ? { readonly [K in CSSUtil.$$PropertyValue]: Property } + : Config extends { [K: string]: any } ? CSSUtil.CSS< - C['media'], - C['theme'], - C['themeMap'], - C['utils'] - >[K] + Config['media'], + Config['theme'], + Config['themeMap'], + Config['utils'] + >[Property] : never ) /** Returns a type that expects a value to be a kind of theme scale value. */ -export type ScaleValue = ( - C extends null - ? { readonly [CSSUtil.$$ScaleValue]: K } - : C extends { [K: string]: any } - ? K extends keyof C['theme'] - ? `$${string & keyof C['theme'][K]}` +export type ScaleValue = ( + Config extends null + ? { readonly [K in CSSUtil.$$ScaleValue]: Scale } + : Config extends { [K: string]: any } + ? Scale extends keyof Config['theme'] + ? `$${string & keyof Config['theme'][Scale]}` : never : never ) diff --git a/packages/test/Issue-813-react.ts b/packages/test/Issue-813-react.ts index 335155cf..6cb722a6 100644 --- a/packages/test/Issue-813-react.ts +++ b/packages/test/Issue-813-react.ts @@ -2,7 +2,7 @@ import { createStitches } from '@stitches/react' import * as Stitches from '@stitches/react' -const { config, styled } = createStitches({ +export const { config, styled } = createStitches({ theme: { colors: { primary: 'transparent'