Merge pull request #34638 from hieuhlc/add-flatten-interpolation-styled-component-into-themevalue

Fix error with css helper from styled-components

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 <https://github.com/ArjanJ>
+//                 Hieu Ho <https://github.com/hieuhlc>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.7
+// TypeScript Version: 2.9
+
+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;
+    type ThemeValue = string | ThemeValueFn | FlattenInterpolation<ThemeProps<any>> | FlattenInterpolation<ThemedStyledProps<any, any>>;
 
     interface ThemeMap {
         [key: string]: ThemeValue;

types/styled-theming/package.json

@@ -0,0 +1,6 @@
+{
+	"private": true,
+	"dependencies": {
+		"csstype": "^2.2.0"
+	}
+}

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,24 @@ 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;
+    `
+});
+
+interface cssProps {
+    visible: boolean;
+}
+const cssPropsTheme = theme("mode", {
+    dark: css`
+        visibility: ${(props: cssProps) => props.visible ? 'visible' : 'hidden'};
+    `,
+    light: css`
+        background: white;
+    `
+});