Skip to content

Commit

Permalink
fix(#1078): TS 4.8 compat (#1082)
Browse files Browse the repository at this point in the history 
* fix(#1078): TS 4.8 compat

* Revert @types/react* version changes
  • Loading branch information
@jgoz
jgoz authored Oct 3, 2022
1 parent deefb08 commit ca1278b
Show file tree
Hide file tree
Showing 12 changed files with 334 additions and 917 deletions.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
8 changes: 8 additions & 0 deletions packages/core/types/css-util.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
4 changes: 2 additions & 2 deletions packages/core/types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand All @@ -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]}`
Expand Down
8 changes: 8 additions & 0 deletions packages/react/types/css-util.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
4 changes: 2 additions & 2 deletions packages/react/types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand All @@ -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]}`
Expand Down
4 changes: 2 additions & 2 deletions packages/test/Issue-813-core.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const { config, css } = createStitches({
utils: {
bg: (value: Stitches.PropertyValue<'backgroundColor'>) => ({
color: value
}),
}),
c: (value: Stitches.ScaleValue<'colors'>) => ({
color: value
}),
Expand All @@ -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
Expand Down
30 changes: 9 additions & 21 deletions packages/test/built-types/Issue-813-core.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | {
Expand All @@ -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?: {
Expand All @@ -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>;
Expand All @@ -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">;
};
}>>;
38 changes: 11 additions & 27 deletions packages/test/built-types/Issue-813-react.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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> | {
Expand All @@ -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?: {
Expand All @@ -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>;
Expand All @@ -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">;
};
}>>;
Loading

0 comments on commit ca1278b

Please sign in to comment.