From 952081e0a39803e3bc14e40d7e5af59ce0a3d1b9 Mon Sep 17 00:00:00 2001 From: Hieu Ho Date: Wed, 10 Apr 2019 23:20:49 +0700 Subject: [PATCH 1/4] Add FlattenInterpolation from styled-components to enable css helper in theme function --- types/styled-theming/index.d.ts | 7 +++++-- types/styled-theming/package.json | 6 ++++++ types/styled-theming/styled-theming-tests.ts | 10 ++++++++++ 3 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 types/styled-theming/package.json diff --git a/types/styled-theming/index.d.ts b/types/styled-theming/index.d.ts index fab32a7617..bd740ac89f 100644 --- a/types/styled-theming/index.d.ts +++ b/types/styled-theming/index.d.ts @@ -1,14 +1,17 @@ // Type definitions for styled-theming 2.2 // Project: https://github.com/styled-components/styled-theming#readme // Definitions by: Arjan Jassal +// Hieu Ho // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.7 +// TypeScript Version: 3.4 + +import { FlattenInterpolation, ThemeProps } from "styled-components"; declare function theme(name: string, values: theme.ThemeMap): theme.ThemeSet; declare namespace theme { type ThemeValueFn = (props: object) => string; - type ThemeValue = string | ThemeValueFn; + type ThemeValue = string | ThemeValueFn | FlattenInterpolation>; interface ThemeMap { [key: string]: ThemeValue; diff --git a/types/styled-theming/package.json b/types/styled-theming/package.json new file mode 100644 index 0000000000..e7ada84b03 --- /dev/null +++ b/types/styled-theming/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "csstype": "^2.2.0" + } +} diff --git a/types/styled-theming/styled-theming-tests.ts b/types/styled-theming/styled-theming-tests.ts index 2d9e947009..853b73dd95 100644 --- a/types/styled-theming/styled-theming-tests.ts +++ b/types/styled-theming/styled-theming-tests.ts @@ -1,4 +1,5 @@ import theme from "styled-theming"; +import { css } from "styled-components"; const textColor = theme("mode", { dark: "white", @@ -11,3 +12,12 @@ const backgroundColor = theme.variants("mode", "variant", { success: { light: "green", dark: "darkgreen" }, warning: { light: "orange", dark: "darkorange" } }); + +const cssTheme = theme("mode", { + dark: css` + background: gray; + `, + light: css` + background: white; + ` +}); From 288bb000f5cc39815beda92703b8172d7a269dd4 Mon Sep 17 00:00:00 2001 From: Hieu Ho Date: Thu, 11 Apr 2019 10:25:43 +0700 Subject: [PATCH 2/4] Fix issue with ThemedStyledProps --- types/styled-theming/index.d.ts | 4 ++-- types/styled-theming/package.json | 8 ++++---- types/styled-theming/styled-theming-tests.ts | 4 ++++ 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/types/styled-theming/index.d.ts b/types/styled-theming/index.d.ts index bd740ac89f..3dd2372416 100644 --- a/types/styled-theming/index.d.ts +++ b/types/styled-theming/index.d.ts @@ -5,13 +5,13 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 3.4 -import { FlattenInterpolation, ThemeProps } from "styled-components"; +import { FlattenInterpolation, ThemeProps, ThemedStyledProps } from "styled-components"; declare function theme(name: string, values: theme.ThemeMap): theme.ThemeSet; declare namespace theme { type ThemeValueFn = (props: object) => string; - type ThemeValue = string | ThemeValueFn | FlattenInterpolation>; + type ThemeValue = string | ThemeValueFn | FlattenInterpolation> | FlattenInterpolation>; interface ThemeMap { [key: string]: ThemeValue; diff --git a/types/styled-theming/package.json b/types/styled-theming/package.json index e7ada84b03..72419b912c 100644 --- a/types/styled-theming/package.json +++ b/types/styled-theming/package.json @@ -1,6 +1,6 @@ { - "private": true, - "dependencies": { - "csstype": "^2.2.0" - } + "private": true, + "dependencies": { + "csstype": "^2.2.0" + } } diff --git a/types/styled-theming/styled-theming-tests.ts b/types/styled-theming/styled-theming-tests.ts index 853b73dd95..d0802ffe68 100644 --- a/types/styled-theming/styled-theming-tests.ts +++ b/types/styled-theming/styled-theming-tests.ts @@ -13,9 +13,13 @@ const backgroundColor = theme.variants("mode", "variant", { warning: { light: "orange", dark: "darkorange" } }); +interface cssProps { + visible: boolean; +} const cssTheme = theme("mode", { dark: css` background: gray; + visibility: ${(props: cssProps) => props.visible ? 'visible' : 'hidden'}; `, light: css` background: white; From 2e585bb423ff85ecef200a49105c4816b2341ecc Mon Sep 17 00:00:00 2001 From: Hieu Ho Date: Thu, 11 Apr 2019 10:28:14 +0700 Subject: [PATCH 3/4] Restore test for ThemeProps --- types/styled-theming/styled-theming-tests.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/types/styled-theming/styled-theming-tests.ts b/types/styled-theming/styled-theming-tests.ts index d0802ffe68..bfcf6767d4 100644 --- a/types/styled-theming/styled-theming-tests.ts +++ b/types/styled-theming/styled-theming-tests.ts @@ -13,12 +13,20 @@ const backgroundColor = theme.variants("mode", "variant", { warning: { light: "orange", dark: "darkorange" } }); -interface cssProps { - visible: boolean; -} const cssTheme = theme("mode", { dark: css` background: gray; + `, + light: css` + background: white; + ` +}); + +interface cssProps { + visible: boolean; +} +const cssPropsTheme = theme("mode", { + dark: css` visibility: ${(props: cssProps) => props.visible ? 'visible' : 'hidden'}; `, light: css` From f61eee66504efe12bc505243381a2894c396e293 Mon Sep 17 00:00:00 2001 From: Hieu Ho Date: Fri, 12 Apr 2019 10:33:37 +0700 Subject: [PATCH 4/4] Change TS version to match styled-components TS version --- types/styled-theming/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/styled-theming/index.d.ts b/types/styled-theming/index.d.ts index 3dd2372416..0faa964c12 100644 --- a/types/styled-theming/index.d.ts +++ b/types/styled-theming/index.d.ts @@ -3,7 +3,7 @@ // Definitions by: Arjan Jassal // Hieu Ho // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 3.4 +// TypeScript Version: 2.9 import { FlattenInterpolation, ThemeProps, ThemedStyledProps } from "styled-components";