Update PropertyValue and ScaleValue types to support config (#829)

packages/core/types/index.d.ts

@@ -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]>

packages/react/types/index.d.ts

@@ -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]>

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',
+})

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',
+})