fix(#1078): TS 4.8 compat

package.json

@@ -35,8 +35,8 @@
     "@types/react": "17.0.33",
     "@types/react-dom": "17.0.9",
     "@types/react-test-renderer": "17.0.1",
-    "@typescript-eslint/eslint-plugin": "4.31.2",
-    "@typescript-eslint/parser": "4.31.2",
+    "@typescript-eslint/eslint-plugin": "5.36.2",
+    "@typescript-eslint/parser": "5.36.2",
     "acorn": "8.5.0",
     "acorn-class-fields": "1.0.0",
     "acorn-import-assertions": "1.7.6",
@@ -51,7 +51,7 @@
     "react": "17.0.2",
     "react-test-renderer": "17.0.2",
     "terser": "5.9.0",
-    "typescript": "4.6.2"
+    "typescript": "4.8.2"
   },
   "browserslist": [
     "last 1 chrome versions",

packages/core/types/css-util.d.ts

@@ -117,3 +117,11 @@ export type $$ScaleValue = typeof $$ScaleValue
 export declare const $$ThemeValue: unique symbol
 
 export type $$ThemeValue = typeof $$ThemeValue
+
+// https://github.com/microsoft/TypeScript/issues/37888#issuecomment-846638356
+export type WithPropertyValue<T> = {
+	readonly [K in $$PropertyValue]: T
+}
+export type WithScaleValue<T> = {
+	readonly [K in $$ScaleValue]: T;
+}

packages/core/types/index.d.ts

@@ -36,7 +36,7 @@ export type ComponentProps<Component> = Component extends ((...args: any[]) => a
 /** Returns a type that expects a value to be a kind of CSS property value. */
 export type PropertyValue<Property extends keyof CSSUtil.CSSProperties, Config = null> = (
 	Config extends null
-		? { readonly [K in CSSUtil.$$PropertyValue]: Property }
+		? CSSUtil.WithPropertyValue<Property>
 	: Config extends { [K: string]: any }
 		? CSSUtil.CSS<
 			Config['media'],
@@ -50,7 +50,7 @@ export type PropertyValue<Property extends keyof CSSUtil.CSSProperties, Config =
 /** Returns a type that expects a value to be a kind of theme scale value. */
 export type ScaleValue<Scale, Config = null> = (
 	Config extends null
-		? { readonly [K in CSSUtil.$$ScaleValue]: Scale }
+		? CSSUtil.WithScaleValue<Scale>
 	: Config extends { [K: string]: any }
 		? Scale extends keyof Config['theme']
 			? `$${string & keyof Config['theme'][Scale]}`

packages/react/types/css-util.d.ts

@@ -117,3 +117,11 @@ export type $$ScaleValue = typeof $$ScaleValue
 export declare const $$ThemeValue: unique symbol
 
 export type $$ThemeValue = typeof $$ThemeValue
+
+// https://github.com/microsoft/TypeScript/issues/37888#issuecomment-846638356
+export type WithPropertyValue<T> = {
+	readonly [K in $$PropertyValue]: T
+}
+export type WithScaleValue<T> = {
+	readonly [K in $$ScaleValue]: T;
+}

packages/react/types/index.d.ts

@@ -36,7 +36,7 @@ export type ComponentProps<Component> = Component extends ((...args: any[]) => a
 /** Returns a type that expects a value to be a kind of CSS property value. */
 export type PropertyValue<Property extends keyof CSSUtil.CSSProperties, Config = null> = (
 	Config extends null
-		? { readonly [K in CSSUtil.$$PropertyValue]: Property }
+		? CSSUtil.WithPropertyValue<Property>
 	: Config extends { [K: string]: any }
 		? CSSUtil.CSS<
 			Config['media'],
@@ -50,7 +50,7 @@ export type PropertyValue<Property extends keyof CSSUtil.CSSProperties, Config =
 /** Returns a type that expects a value to be a kind of theme scale value. */
 export type ScaleValue<Scale, Config = null> = (
 	Config extends null
-		? { readonly [K in CSSUtil.$$ScaleValue]: Scale }
+		? CSSUtil.WithScaleValue<Scale>
 	: Config extends { [K: string]: any }
 		? Scale extends keyof Config['theme']
 			? `$${string & keyof Config['theme'][Scale]}`

packages/test/Issue-813-core.ts

@@ -11,7 +11,7 @@ export const { config, css } = createStitches({
 	utils: {
 		bg: (value: Stitches.PropertyValue<'backgroundColor'>) => ({
 			color: value
-		}), 
+		}),
 		c: (value: Stitches.ScaleValue<'colors'>) => ({
 			color: value
 		}),
@@ -26,7 +26,7 @@ export const colorValue2: Stitches.PropertyValue<'backgroundColor', typeof confi
 // ensure `ScaleValue` accepts a valid token
 export const colorToken: Stitches.ScaleValue<'colors', typeof config> = "$primary"
 
-export const box = css({ 
+export const box = css({
 	// ensure `bg` accepts a valid CSS Color
 	bg: 'RebeccaPurple',
 	// ensure `bg` accepts a valid token

packages/test/built-types/Issue-813-core.d.ts

@@ -10,14 +10,10 @@ export declare const config: {
     themeMap: import("@stitches/core/types/config").DefaultThemeMap;
     utils: {
         bg: (value: Stitches.PropertyValue<'backgroundColor'>) => {
-            color: {
-                readonly [Stitches.$$PropertyValue]: "backgroundColor";
-            };
+            color: import("@stitches/core/types/css-util").WithPropertyValue<"backgroundColor">;
         };
         c: (value: Stitches.ScaleValue<'colors'>) => {
-            color: {
-                readonly [Stitches.$$ScaleValue]: "colors";
-            };
+            color: import("@stitches/core/types/css-util").WithScaleValue<"colors">;
         };
     };
 }, css: <Composers extends (string | import("@stitches/core/types/util").Function | {
@@ -28,14 +24,10 @@ export declare const config: {
     };
 }, import("@stitches/core/types/config").DefaultThemeMap, {
     bg: (value: Stitches.PropertyValue<'backgroundColor'>) => {
-        color: {
-            readonly [Stitches.$$PropertyValue]: "backgroundColor";
-        };
+        color: import("@stitches/core/types/css-util").WithPropertyValue<"backgroundColor">;
     };
     c: (value: Stitches.ScaleValue<'colors'>) => {
-        color: {
-            readonly [Stitches.$$ScaleValue]: "colors";
-        };
+        color: import("@stitches/core/types/css-util").WithScaleValue<"colors">;
     };
 }>>(...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("@stitches/core/types/util").Function ? Composers[K] : import("@stitches/core/types/stitches").RemoveIndex<CSS> & {
     variants?: {
@@ -44,11 +36,11 @@ export declare const config: {
             [x: number]: CSS;
         };
     } | undefined;
-    compoundVariants?: (("variants" extends keyof Composers[K] ? { [Name in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/core/types/util").String | import("@stitches/core/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : import("@stitches/core/types/util").WideObject) & {
+    compoundVariants?: (("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T ? { [Name in keyof T]?: import("@stitches/core/types/util").String | import("@stitches/core/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : never : import("@stitches/core/types/util").WideObject) & {
         css: CSS;
     })[] | undefined;
-    defaultVariants?: ("variants" extends keyof Composers[K] ? { [Name_1 in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/core/types/util").String | import("@stitches/core/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : import("@stitches/core/types/util").WideObject) | undefined;
-} & CSS & { [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; }; }) => import("@stitches/core/types/styled-component").CssComponent<import("@stitches/core/types/styled-component").StyledComponentType<Composers>, import("@stitches/core/types/styled-component").StyledComponentProps<Composers>, {}, CSS>;
+    defaultVariants?: ("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/core/types/util").String | import("@stitches/core/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : never : import("@stitches/core/types/util").WideObject) | undefined;
+} & CSS & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; } : never); }) => import("@stitches/core/types/styled-component").CssComponent<import("@stitches/core/types/styled-component").StyledComponentType<Composers>, import("@stitches/core/types/styled-component").StyledComponentProps<Composers>, {}, CSS>;
 export declare const colorValue1: Stitches.PropertyValue<'backgroundColor', typeof config>;
 export declare const colorValue2: Stitches.PropertyValue<'backgroundColor', typeof config>;
 export declare const colorToken: Stitches.ScaleValue<'colors', typeof config>;
@@ -58,13 +50,9 @@ export declare const box: import("@stitches/core/types/styled-component").CssCom
     };
 }, import("@stitches/core/types/config").DefaultThemeMap, {
     bg: (value: Stitches.PropertyValue<'backgroundColor'>) => {
-        color: {
-            readonly [Stitches.$$PropertyValue]: "backgroundColor";
-        };
+        color: import("@stitches/core/types/css-util").WithPropertyValue<"backgroundColor">;
     };
     c: (value: Stitches.ScaleValue<'colors'>) => {
-        color: {
-            readonly [Stitches.$$ScaleValue]: "colors";
-        };
+        color: import("@stitches/core/types/css-util").WithScaleValue<"colors">;
     };
 }>>;

packages/test/built-types/Issue-813-react.d.ts

@@ -11,14 +11,10 @@ export declare const config: {
     themeMap: import("@stitches/react/types/config").DefaultThemeMap;
     utils: {
         bg: (value: Stitches.PropertyValue<'backgroundColor'>) => {
-            color: {
-                readonly [Stitches.$$PropertyValue]: "backgroundColor";
-            };
+            color: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
         };
         c: (value: Stitches.ScaleValue<'colors'>) => {
-            color: {
-                readonly [Stitches.$$ScaleValue]: "colors";
-            };
+            color: import("@stitches/react/types/css-util").WithScaleValue<"colors">;
         };
     };
 }, styled: <Type extends import("@stitches/react/types/util").Function | keyof JSX.IntrinsicElements | import("react").ComponentType<any>, Composers extends (string | import("@stitches/react/types/util").Function | import("react").ComponentType<any> | {
@@ -29,14 +25,10 @@ export declare const config: {
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: Stitches.PropertyValue<'backgroundColor'>) => {
-        color: {
-            readonly [Stitches.$$PropertyValue]: "backgroundColor";
-        };
+        color: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
     };
     c: (value: Stitches.ScaleValue<'colors'>) => {
-        color: {
-            readonly [Stitches.$$ScaleValue]: "colors";
-        };
+        color: import("@stitches/react/types/css-util").WithScaleValue<"colors">;
     };
 }>>(type: Type, ...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("@stitches/react/types/util").Function | import("react").ComponentType<any> ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS> & {
     variants?: {
@@ -45,24 +37,20 @@ export declare const config: {
             [x: number]: CSS;
         };
     } | undefined;
-    compoundVariants?: (("variants" extends keyof Composers[K] ? { [Name in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : import("@stitches/react/types/util").WideObject) & {
+    compoundVariants?: (("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T ? { [Name in keyof T]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : never : import("@stitches/react/types/util").WideObject) & {
         css: CSS;
     })[] | undefined;
-    defaultVariants?: ("variants" extends keyof Composers[K] ? { [Name_1 in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : import("@stitches/react/types/util").WideObject) | undefined;
-} & CSS & { [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; }; }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    defaultVariants?: ("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : never : import("@stitches/react/types/util").WideObject) | undefined;
+} & CSS & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {}, import("@stitches/react/types/css-util").CSS<{}, {
     colors: {
         primary: string;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: Stitches.PropertyValue<'backgroundColor'>) => {
-        color: {
-            readonly [Stitches.$$PropertyValue]: "backgroundColor";
-        };
+        color: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
     };
     c: (value: Stitches.ScaleValue<'colors'>) => {
-        color: {
-            readonly [Stitches.$$ScaleValue]: "colors";
-        };
+        color: import("@stitches/react/types/css-util").WithScaleValue<"colors">;
     };
 }>>;
 export declare const colorValue1: Stitches.PropertyValue<'backgroundColor', typeof config>;
@@ -74,13 +62,9 @@ export declare const Box: import("@stitches/react/types/styled-component").Style
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: Stitches.PropertyValue<'backgroundColor'>) => {
-        color: {
-            readonly [Stitches.$$PropertyValue]: "backgroundColor";
-        };
+        color: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
     };
     c: (value: Stitches.ScaleValue<'colors'>) => {
-        color: {
-            readonly [Stitches.$$ScaleValue]: "colors";
-        };
+        color: import("@stitches/react/types/css-util").WithScaleValue<"colors">;
     };
 }>>;