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.

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 does not distribute media keys into ComputedStyleProp in TS 5.x #89

Open
tkofh opened this issue Apr 25, 2023 · 0 comments
Open

Comments

@tkofh
Copy link

tkofh commented Apr 25, 2023

This is a bit of a weird one, the way Pinceau handles media keys in tokens.config.ts is broken in Typescript 5 and above.

In version 4, Typescript would distribute the keys from PinceauTheme['media'] into the PinceauMediaQueries union:

type PinceauMediaQueries = 'dark' | 'light' | 'initial' | (keyof PinceauTheme['media'] extends string ? keyof PinceauTheme['media'] : never);
//     ^? type PinceauMediaQueries = 'dark' | 'light' | 'initial' | 'tablet' | 'desktop' | etc...

In version 5, Typescript no longer distributes these, resulting in this type:

type PinceauMediaQueries = 'dark' | 'light' | 'initial' | (keyof PinceauTheme['media'] extends string ? keyof PinceauTheme['media'] : never);
//     ^? type PinceauMediaQueries = 'dark' | 'light' | 'initial' | ('tablet' | 'desktop' | etc...)

They are then no longer included as valid keys for a responsive token.

A simple fix would be to use keyof PinceauTheme['media'] & string as opposed to the current conditional. That appears to work in both 4.x and 5.x.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant