diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts index 7777aa1b..7f49f89d 100644 --- a/packages/core/types/index.d.ts +++ b/packages/core/types/index.d.ts @@ -33,10 +33,29 @@ 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 = { readonly [CSSUtil.$$PropertyValue]: K } +export type PropertyValue = ( + C extends null + ? { readonly [CSSUtil.$$PropertyValue]: K } + : C extends { [K: string]: any } + ? CSSUtil.CSS< + C['media'], + C['theme'], + C['themeMap'], + C['utils'] + >[K] + : never +) /** Returns a type that expects a value to be a kind of theme scale value. */ -export type ScaleValue = { readonly [CSSUtil.$$ScaleValue]: K } +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]}` + : never + : never +) /** Returns a type that suggests variants from a component as possible prop values. */ export type VariantProps = StyledComponent.TransformProps diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts index eaa2f4ef..34e41c46 100644 --- a/packages/react/types/index.d.ts +++ b/packages/react/types/index.d.ts @@ -33,10 +33,29 @@ 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 = { readonly [CSSUtil.$$PropertyValue]: K } +export type PropertyValue = ( + C extends null + ? { readonly [CSSUtil.$$PropertyValue]: K } + : C extends { [K: string]: any } + ? CSSUtil.CSS< + C['media'], + C['theme'], + C['themeMap'], + C['utils'] + >[K] + : never +) /** Returns a type that expects a value to be a kind of theme scale value. */ -export type ScaleValue = { readonly [CSSUtil.$$ScaleValue]: K } +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]}` + : never + : never +) /** Returns a type that suggests variants from a component as possible prop values. */ export type VariantProps = StyledComponent.TransformProps diff --git a/packages/test/Issue-813-core.ts b/packages/test/Issue-813-core.ts new file mode 100644 index 00000000..2cd5e93a --- /dev/null +++ b/packages/test/Issue-813-core.ts @@ -0,0 +1,36 @@ +// https://github.com/modulz/stitches/issues/813 +import { createStitches } from '@stitches/core' +import * as Stitches from '@stitches/core' + +const { config, css } = createStitches({ + theme: { + colors: { + primary: 'transparent' + } + }, + utils: { + bg: (value: Stitches.PropertyValue<'backgroundColor'>) => ({ + color: value + }), + c: (value: Stitches.ScaleValue<'colors'>) => ({ + color: value + }) + } +}) + +// ensure `PropertyValue` accepts a valid CSS Color +export const colorValue1: Stitches.PropertyValue<'backgroundColor', typeof config> = "RebeccaPurple" +// ensure `PropertyValue` accepts a valid token +export const colorValue2: Stitches.PropertyValue<'backgroundColor', typeof config> = "$primary" + +// ensure `ScaleValue` accepts a valid token +export const colorToken: Stitches.ScaleValue<'colors', typeof config> = '$primary' + +export const box = css({ + // ensure `bg` accepts a valid CSS Color + bg: 'RebeccaPurple', + // ensure `bg` accepts a valid token + '&': { bg: '$primary' }, + // ensure `c` accepts a valid token + c: '$primary', +}) \ No newline at end of file diff --git a/packages/test/Issue-813-react.ts b/packages/test/Issue-813-react.ts new file mode 100644 index 00000000..335155cf --- /dev/null +++ b/packages/test/Issue-813-react.ts @@ -0,0 +1,36 @@ +// https://github.com/modulz/stitches/issues/813 +import { createStitches } from '@stitches/react' +import * as Stitches from '@stitches/react' + +const { config, styled } = createStitches({ + theme: { + colors: { + primary: 'transparent' + } + }, + utils: { + bg: (value: Stitches.PropertyValue<'backgroundColor'>) => ({ + color: value + }), + c: (value: Stitches.ScaleValue<'colors'>) => ({ + color: value + }) + } +}) + +// ensure `PropertyValue` accepts a valid CSS Color +export const colorValue1: Stitches.PropertyValue<'backgroundColor', typeof config> = "RebeccaPurple" +// ensure `PropertyValue` accepts a valid token +export const colorValue2: Stitches.PropertyValue<'backgroundColor', typeof config> = "$primary" + +// ensure `ScaleValue` accepts a valid token +export const colorToken: Stitches.ScaleValue<'colors', typeof config> = '$primary' + +export const Box = styled('div', { + // ensure `bg` accepts a valid CSS Color + bg: 'RebeccaPurple', + // ensure `bg` accepts a valid token + '&': { bg: '$primary' }, + // ensure `c` accepts a valid token + c: '$primary', +}) \ No newline at end of file