From c30d4f38ab1a81a47b3071f34aa2a434a17222f4 Mon Sep 17 00:00:00 2001 From: Pedro Duarte Date: Tue, 5 Oct 2021 14:07:45 +0200 Subject: [PATCH] Update `PropertyValue` and `ScaleValue` types to support config (#829) --- packages/core/types/index.d.ts | 23 ++++++++++++++++++-- packages/react/types/index.d.ts | 23 ++++++++++++++++++-- packages/test/Issue-813-core.ts | 36 ++++++++++++++++++++++++++++++++ packages/test/Issue-813-react.ts | 36 ++++++++++++++++++++++++++++++++ 4 files changed, 114 insertions(+), 4 deletions(-) create mode 100644 packages/test/Issue-813-core.ts create mode 100644 packages/test/Issue-813-react.ts 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