Friendlier TypeScript errors. #1002
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,28 @@ | ||
| import { | ||
| CSSObject, | ||
| ThemeUIStyleObject, | ||
| ThemeDerivedStyles, | ||
| Theme, | ||
| ThemeUICSSObject, | ||
| } from './types' | ||
|
|
||
| export * from './types' | ||
|
|
||
| export function get( | ||
| obj: object, | ||
| key: string | number | undefined, | ||
| def?: unknown, | ||
| p?: number, | ||
| undef?: unknown | ||
| ): any { | ||
| const path = key && typeof key === 'string' ? key.split('.') : [key] | ||
| for (p = 0; p < path.length; p++) { | ||
| obj = obj ? (obj as any)[path[p]!] : undef | ||
| } | ||
| return obj === undef ? def : obj | ||
| } | ||
|
|
||
| export const defaultBreakpoints = [40, 52, 64].map((n) => n + 'em') | ||
|
|
||
| const defaultTheme = { | ||
| space: [0, 4, 8, 16, 32, 64, 128, 256, 512], | ||
|
|
@@ -215,20 +221,23 @@ const transforms = [ | |
| {} | ||
| ) | ||
|
|
||
| const responsive = ( | ||
| styles: Exclude<ThemeUIStyleObject, ThemeDerivedStyles> | ||
| ) => (theme?: Theme) => { | ||
| const next: Exclude<ThemeUIStyleObject, ThemeDerivedStyles> = {} | ||
| const breakpoints = | ||
| (theme && (theme.breakpoints as string[])) || defaultBreakpoints | ||
| const mediaQueries = [ | ||
| null, | ||
| ...breakpoints.map((n) => `@media screen and (min-width: ${n})`), | ||
| ] | ||
|
|
||
| for (const k in styles) { | ||
| const key = k as keyof typeof styles | ||
|
There was a problem hiding this comment. A type of key in X isn't always assignable to keys of type of X, even if we forget about the prototype. This part of TypeScript is a bit inconvenient, but it does help with some bugs. Explanation by Anders Hejlsberg: |
||
| let value = styles[key] | ||
| if (typeof value === 'function') { | ||
| value = value(theme || {}) | ||
| } | ||
|
|
||
| if (value == null) continue | ||
| if (!Array.isArray(value)) { | ||
|
|
@@ -243,7 +252,7 @@ const responsive = (styles: Exclude<ThemeUIStyleObject, UseThemeFunction>) => ( | |
| } | ||
| next[media] = next[media] || {} | ||
| if (value[i] == null) continue | ||
| ;(next[media] as Record<string, any>)[key] = value[i] | ||
| } | ||
| } | ||
|
|
||
|
|
@@ -259,22 +268,23 @@ export const css = (args: ThemeUIStyleObject = {}) => ( | |
| ...defaultTheme, | ||
| ...('theme' in props ? props.theme : props), | ||
| } | ||
| let result: CSSObject = {} | ||
| const obj = typeof args === 'function' ? args(theme) : args | ||
| const styles = responsive(obj)(theme) | ||
|
|
||
| for (const key in styles) { | ||
| const x = styles[key as keyof typeof styles] | ||
| const val = typeof x === 'function' ? x(theme) : x | ||
|
|
||
| if (key === 'variant') { | ||
| const variant = css(get(theme, val as string))(theme) | ||
| result = { ...result, ...variant } | ||
| continue | ||
| } | ||
|
|
||
| if (val && typeof val === 'object') { | ||
| // TODO: val can also be an array here. Is this a bug? Can it be reproduced? | ||
| result[key] = css(val as ThemeUICSSObject)(theme) | ||
| continue | ||
| } | ||
|
|
||
|
|
@@ -284,8 +294,8 @@ export const css = (args: ThemeUIStyleObject = {}) => ( | |
| const transform: any = get(transforms, prop, get) | ||
| const value = transform(scale, val, val) | ||
|
|
||
| if (prop in multiples) { | ||
|
There was a problem hiding this comment. This line is a nice example of how sometimes common JS doesn't translate to strict TypeScript 😞 I'd guess the reasoning is: Since we don't know if |
||
| const dirs = multiples[prop as keyof typeof multiples] | ||
|
|
||
| for (let i = 0; i < dirs.length; i++) { | ||
| result[dirs[i]] = value | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
See facebook/react#18102
It might help with #1000. I didn't test it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should probably consider using star import for React everywhere.