support returning CSS interpolation from styled-theming ThemeValueFn (#36468)

types/styled-theming/index.d.ts

@@ -2,6 +2,7 @@
 // Project: https://github.com/styled-components/styled-theming#readme
 // Definitions by: Arjan Jassal <https://github.com/ArjanJ>
 //                 Hieu Ho <https://github.com/hieuhlc>
+//                 David Daniell <https://github.com/tinynumbers>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.9
 
@@ -10,8 +11,12 @@ import { FlattenInterpolation, ThemeProps, ThemedStyledProps } from "styled-comp
 declare function theme(name: string, values: theme.ThemeMap): theme.ThemeSet;
 
 declare namespace theme {
-    type ThemeValueFn = (props: object) => string;
-    type ThemeValue = string | ThemeValueFn | FlattenInterpolation<ThemeProps<any>> | FlattenInterpolation<ThemedStyledProps<any, any>>;
+    type ThemeValueResult =
+        string
+        | FlattenInterpolation<ThemeProps<any>>
+        | FlattenInterpolation<ThemedStyledProps<any, any>>;
+    type ThemeValueFn = (props: object) => ThemeValueResult;
+    type ThemeValue = ThemeValueFn | ThemeValueResult;
 
     interface ThemeMap {
         [key: string]: ThemeValue;

types/styled-theming/styled-theming-tests.ts

@@ -33,3 +33,30 @@ const cssPropsTheme = theme("mode", {
         background: white;
     `
 });
+
+interface buttonProps {
+    hidden?: boolean;
+}
+
+const button = theme.variants('mode', 'type', {
+    primary: {
+        light: (props: buttonProps) =>
+            css`
+              background: ${props.hidden ? 'transparent' : 'blue'};
+            `,
+        dark: (props: buttonProps) =>
+            css`
+              background: ${props.hidden ? 'transparent' : 'black'};
+            `,
+    },
+    secondary: {
+        light: (props: buttonProps) =>
+            css`
+              background: ${props.hidden ? 'transparent' : 'skyblue'};
+            `,
+        dark: (props: buttonProps) =>
+            css`
+              background: ${props.hidden ? 'transparent' : 'grey'};
+            `,
+    },
+});