Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TypeScript] getCssVar autocomplete for Material UI #33464

Merged
merged 8 commits into from
Jul 11, 2022
Merged

[TypeScript] getCssVar autocomplete for Material UI #33464

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a39a9d5
add ThemeCssVar autocomplete
siriwatknp Jul 11, 2022
7a49104
shut off automatic exporting
siriwatknp Jul 11, 2022
a5ee0a2
strict types
siriwatknp Jul 11, 2022
28111ca
do the same for Joy
siriwatknp Jul 11, 2022
f0d1fd3
add module augmentation tests
siriwatknp Jul 11, 2022
74f2577
fix missing import
siriwatknp Jul 11, 2022
70a8e1b
fix lint
siriwatknp Jul 11, 2022
dbc7ed0
use omit instead of pick to support module augmentation
siriwatknp Jul 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions packages/mui-material/src/styles/experimental_extendTheme.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,27 @@ export interface ThemeVars {
shape: Theme['shape'];
}

type Split<T, K extends keyof T = keyof T> = K extends string | number
? { [k in K]: Exclude<T[K], undefined> }
: never;

type ConcatDeep<T> = T extends Record<string | number, infer V>
? keyof T extends string | number
? V extends string | number
? keyof T
: keyof V extends string | number
? `${keyof T}-${ConcatDeep<Split<V>>}`
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not at all a Typescript expert, but doesn't seem to work with Typescript 3.x and the docs say that this is Typescript 3.5 compatible.

This isn't the only place, but most are in here. @mui/material 5.9.1, fails latest TS 3.x, fine latest TS 4.x.

node_modules/@mui/material/styles/experimental_extendTheme.d.ts:304:9 - error TS1110: Type expected.

304       ? `${keyof T}-${ConcatDeep<Split<V>>}`
            ~~~

node_modules/@mui/material/styles/experimental_extendTheme.d.ts:304:18 - error TS1005: '}' expected.

304       ? `${keyof T}-${ConcatDeep<Split<V>>}`
                     ~

node_modules/@mui/material/styles/experimental_extendTheme.d.ts:304:19 - error TS1128: Declaration or statement expected.

304       ? `${keyof T}-${ConcatDeep<Split<V>>}`
                      ~

node_modules/@mui/material/styles/experimental_extendTheme.d.ts:304:22 - error TS1005: ';' expected.

304       ? `${keyof T}-${ConcatDeep<Split<V>>}`
                         ~

node_modules/@mui/material/styles/experimental_extendTheme.d.ts:304:43 - error TS1005: '(' expected.

304       ? `${keyof T}-${ConcatDeep<Split<V>>}`
                                              ~

node_modules/@mui/material/styles/experimental_extendTheme.d.ts:398:1 - error TS1160: Unterminated template literal.

398 
    

node_modules/@mui/system/Unstable_Grid/GridProps.d.ts:95:90 - error TS1005: '>' expected.

95 declare type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
                                                                                            ~~~

node_modules/@mui/system/Unstable_Grid/GridProps.d.ts:95:123 - error TS1109: Expression expected.

95 declare type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
                                                                                                                             ~


Found 8 errors.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it break even if you don't use those APIs? If yes, please open an issue.

Copy link

@elyobo elyobo Jul 22, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I'm not using extendTheme but tsc -noEmit was causing the above output with a couple of 3.x versions. It's also not a problem for me in the particular project I ran into with, I can just upgrade the typescript version without pain (and have done so...).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the info.

: never
: never
: never;

type NormalizeVars<T> = ConcatDeep<Split<T>>;

// shut off automatic exporting for the Generics above
export {};

export type ThemeCSSVar = NormalizeVars<ThemeVars>;

/**
* Theme properties generated by extendTheme and CssVarsProvider
*/
Expand All @@ -300,8 +321,8 @@ export interface CssVarsTheme extends ColorSystem {
cssVarPrefix: string;
vars: ThemeVars;
getCssVar: <CustomVar extends string = never>(
field: string | CustomVar,
...vars: Array<string | CustomVar>
field: ThemeCSSVar | CustomVar,
...vars: Array<ThemeCSSVar | CustomVar>
) => string;
getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
}
Expand Down
1 change: 1 addition & 0 deletions packages/mui-material/src/styles/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,4 +126,5 @@ export type {
CssVarsThemeOptions,
CssVarsTheme,
ThemeVars,
ThemeCSSVar,
} from './experimental_extendTheme';