From bbc6a27c0394914f331dd6457f81166448e04d60 Mon Sep 17 00:00:00 2001 From: Cameron Martin Date: Wed, 19 Dec 2018 21:49:05 +0000 Subject: [PATCH 01/61] [@babel/traverse]: Allowed node aliases as keys in visitors. This is made possible by https://github.com/babel/babel/pull/9110. When the next version after v7.2.2 is released, the package.json can be updated and the build will no longer fail. --- types/babel__traverse/babel__traverse-tests.ts | 5 +++++ types/babel__traverse/index.d.ts | 2 ++ 2 files changed, 7 insertions(+) diff --git a/types/babel__traverse/babel__traverse-tests.ts b/types/babel__traverse/babel__traverse-tests.ts index 70f8c5f0b6..98a0338021 100644 --- a/types/babel__traverse/babel__traverse-tests.ts +++ b/types/babel__traverse/babel__traverse-tests.ts @@ -150,3 +150,8 @@ const VisitorStateTest: Visitor = { } } }; + +const VisitorAliasTest: Visitor = { + Function() {}, + Expression() {}, +}; diff --git a/types/babel__traverse/index.d.ts b/types/babel__traverse/index.d.ts index 89e242129b..fe817d5daf 100644 --- a/types/babel__traverse/index.d.ts +++ b/types/babel__traverse/index.d.ts @@ -145,6 +145,8 @@ export class Binding { export type Visitor = VisitNodeObject & { [Type in Node["type"]]?: VisitNode>; +} & { + [K in keyof t.Aliases]?: VisitNode }; export type VisitNode = VisitNodeFunction | VisitNodeObject; From a57f667049a912095a0d11490ee6bcb5a5ed97af Mon Sep 17 00:00:00 2001 From: James Lawrence Date: Tue, 8 Jan 2019 23:18:16 +0000 Subject: [PATCH 02/61] Allow dynamic CSS values based on component props --- types/react-jss/lib/injectSheet.d.ts | 50 +++++++++++++++++----------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/types/react-jss/lib/injectSheet.d.ts b/types/react-jss/lib/injectSheet.d.ts index fd66af5c38..be3bee933b 100644 --- a/types/react-jss/lib/injectSheet.d.ts +++ b/types/react-jss/lib/injectSheet.d.ts @@ -53,26 +53,35 @@ export type PropsOf = C extends new (props: infer P) => React.Component */ export type PropInjector = < C extends React.ComponentType, InjectedProps>> ->( + >( component: C ) => React.ComponentType< Omit>, keyof InjectedProps> & - AdditionalProps ->; + AdditionalProps + >; -export interface CSSProperties extends CSS.Properties { +type cssNumberOrString = CSS.Properties + +// Allow functions that take the properties of the component and return a CSS value +export type CssRule = { + [K in keyof cssNumberOrString]: + | (cssNumberOrString[K]) + | ((props: Props) => cssNumberOrString[K]) +}[keyof CSS.Properties] + +export interface CSSProperties { // Allow pseudo selectors and media queries [k: string]: - | CSS.Properties[keyof CSS.Properties] - | CSSProperties; + | CssRule + | CSSProperties; } -export type Styles = Record< +export type Styles = Record< ClassKey, - CSSProperties ->; -export type StyleCreator = ( + CSSProperties + >; +export type StyleCreator = ( theme: T -) => Styles; +) => Styles; export interface Theming { channel: string; @@ -89,15 +98,16 @@ export interface InjectOptions extends CreateStyleSheetOptions { export type ClassNameMap = Record; export type WithSheet< S extends string | Styles | StyleCreator, - GivenTheme = undefined -> = { + GivenTheme = undefined, + Props = {} + > = { classes: ClassNameMap< S extends string ? S - : S extends StyleCreator - ? C - : S extends Styles ? C : never - >; + : S extends StyleCreator + ? C + : S extends Styles ? C : never + >; } & WithTheme ? T : GivenTheme>; export interface WithTheme { @@ -110,7 +120,7 @@ export interface StyledComponentProps { innerRef?: React.Ref | React.RefObject; } -export default function injectSheet( - stylesOrCreator: Styles | StyleCreator, +export default function injectSheet( + stylesOrCreator: Styles | StyleCreator, options?: InjectOptions -): PropInjector, StyledComponentProps>; +): PropInjector, StyledComponentProps>; From 6f2624fb38349499664984ca14893f72f9c4e461 Mon Sep 17 00:00:00 2001 From: James Lawrence Date: Tue, 8 Jan 2019 23:31:16 +0000 Subject: [PATCH 03/61] Add attribution, fix linter errors --- types/react-jss/index.d.ts | 1 + types/react-jss/lib/injectSheet.d.ts | 10 ++++------ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/types/react-jss/index.d.ts b/types/react-jss/index.d.ts index 7656897a08..c2ee0a008a 100644 --- a/types/react-jss/index.d.ts +++ b/types/react-jss/index.d.ts @@ -1,6 +1,7 @@ // Type definitions for react-jss 8.6 // Project: https://github.com/cssinjs/react-jss#readme // Definitions by: Sebastian Silbermann +// James Lawrence // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 import { createGenerateClassName, JSS, SheetsRegistry } from "jss"; diff --git a/types/react-jss/lib/injectSheet.d.ts b/types/react-jss/lib/injectSheet.d.ts index be3bee933b..5aa3b0925b 100644 --- a/types/react-jss/lib/injectSheet.d.ts +++ b/types/react-jss/lib/injectSheet.d.ts @@ -60,14 +60,12 @@ export type PropInjector = < AdditionalProps >; -type cssNumberOrString = CSS.Properties - // Allow functions that take the properties of the component and return a CSS value export type CssRule = { - [K in keyof cssNumberOrString]: - | (cssNumberOrString[K]) - | ((props: Props) => cssNumberOrString[K]) -}[keyof CSS.Properties] + [K in keyof CSS.Properties]: + | (CSS.Properties[K]) + | ((props: Props) => CSS.Properties[K]) +}[keyof CSS.Properties]; export interface CSSProperties { // Allow pseudo selectors and media queries From 6eb77511162839e409a5dbaeff533006b655a312 Mon Sep 17 00:00:00 2001 From: James Lawrence Date: Thu, 10 Jan 2019 01:05:38 +0000 Subject: [PATCH 04/61] Rename to DynamicCSSRule --- types/react-jss/lib/injectSheet.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/react-jss/lib/injectSheet.d.ts b/types/react-jss/lib/injectSheet.d.ts index 5aa3b0925b..ef6bdb3dbb 100644 --- a/types/react-jss/lib/injectSheet.d.ts +++ b/types/react-jss/lib/injectSheet.d.ts @@ -61,16 +61,16 @@ export type PropInjector = < >; // Allow functions that take the properties of the component and return a CSS value -export type CssRule = { +export type DynamicCSSRule = { [K in keyof CSS.Properties]: - | (CSS.Properties[K]) + | CSS.Properties[K] | ((props: Props) => CSS.Properties[K]) }[keyof CSS.Properties]; export interface CSSProperties { // Allow pseudo selectors and media queries [k: string]: - | CssRule + | DynamicCSSRule | CSSProperties; } export type Styles = Record< From 3180fea53f4827c599e89369d613b33d4e167048 Mon Sep 17 00:00:00 2001 From: James Lawrence Date: Thu, 10 Jan 2019 01:06:44 +0000 Subject: [PATCH 05/61] Update tests - had to disable strict function checking, if anyone knows how to make it work with this, please do! --- types/react-jss/react-jss-tests.tsx | 59 ++++++++++++++++------------- types/react-jss/tsconfig.json | 2 +- 2 files changed, 33 insertions(+), 28 deletions(-) diff --git a/types/react-jss/react-jss-tests.tsx b/types/react-jss/react-jss-tests.tsx index 803170bb99..6e86bed492 100644 --- a/types/react-jss/react-jss-tests.tsx +++ b/types/react-jss/react-jss-tests.tsx @@ -17,42 +17,44 @@ interface MyTheme { /** * helper function to counter typescripts type widening */ -function createStyles(styles: Styles): Styles { +function createStyles(styles: Styles): Styles { return styles; } -const styles = (theme: MyTheme) => - createStyles({ - myButton: { - color: theme.color.primary, - margin: 1, - "& span": { - fontWeight: "revert" - } - }, - myLabel: { - fontStyle: "italic" - } - }); -interface ButtonProps extends WithSheet { +interface ButtonProps { label: string; + active?: boolean; } -const Button: React.SFC = ({ classes, children }) => { +const styles = (theme: MyTheme) => createStyles({ + myButton: { + color: (props: ButtonProps) => props.active ? 'red': theme.color.primary, + margin: 1, + "& span": { + fontWeight: "revert" + } + }, + myLabel: { + fontStyle: "italic" + } +}); +const Button: React.SFC> = ({active, classes, children}) => { return ( - + <> + + ); }; const ManuallyStyles = () => { return (