Skip to content

Commit

Permalink
Update PropertyValue and ScaleValue types to support config (stit…
Browse files Browse the repository at this point in the history
  • Loading branch information
peduarte authored Oct 5, 2021
1 parent e256d53 commit c30d4f3
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 4 deletions.
23 changes: 21 additions & 2 deletions packages/core/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,29 @@ export type CSS<
export type ComponentProps<Component> = Component extends ((...args: any[]) => any) ? Parameters<Component>[0] : never

/** Returns a type that expects a value to be a kind of CSS property value. */
export type PropertyValue<K extends keyof CSSUtil.CSSProperties> = { readonly [CSSUtil.$$PropertyValue]: K }
export type PropertyValue<K extends keyof CSSUtil.CSSProperties, C = null> = (
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<K> = { readonly [CSSUtil.$$ScaleValue]: K }
export type ScaleValue<K, C = null> = (
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<Component extends {[key: symbol | string]: any}> = StyledComponent.TransformProps<Component[StyledComponent.$$StyledComponentProps], Component[StyledComponent.$$StyledComponentMedia]>
Expand Down
23 changes: 21 additions & 2 deletions packages/react/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,29 @@ export type CSS<
export type ComponentProps<Component> = Component extends ((...args: any[]) => any) ? Parameters<Component>[0] : never

/** Returns a type that expects a value to be a kind of CSS property value. */
export type PropertyValue<K extends keyof CSSUtil.CSSProperties> = { readonly [CSSUtil.$$PropertyValue]: K }
export type PropertyValue<K extends keyof CSSUtil.CSSProperties, C = null> = (
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<K> = { readonly [CSSUtil.$$ScaleValue]: K }
export type ScaleValue<K, C = null> = (
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<Component extends {[key: symbol | string]: any}> = StyledComponent.TransformProps<Component[StyledComponent.$$StyledComponentProps], Component[StyledComponent.$$StyledComponentMedia]>
Expand Down
36 changes: 36 additions & 0 deletions packages/test/Issue-813-core.ts
Original file line number Diff line number Diff line change
@@ -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',
})
36 changes: 36 additions & 0 deletions packages/test/Issue-813-react.ts
Original file line number Diff line number Diff line change
@@ -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',
})

0 comments on commit c30d4f3

Please sign in to comment.