Allow for parametrizing styled calls with Theme type (#1398)

emotion-js · Jun 20, 2019 · 8c732a5 · 8c732a5
1 parent c673e20
commit 8c732a5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/styled-base/types/index.d.ts b/packages/styled-base/types/index.d.ts
@@ -56,21 +56,23 @@ type ReactClassPropKeys = keyof React.ClassAttributes<any>
 export interface CreateStyledComponentBase<
   InnerProps,
   ExtraProps,
-  Theme extends object
+  StyledInstanceTheme extends object
 > {
   <
     StyleProps extends Omit<
       Overwrapped<InnerProps, StyleProps>,
       ReactClassPropKeys
-    > = Omit<InnerProps & ExtraProps, ReactClassPropKeys>
+    > = Omit<InnerProps & ExtraProps, ReactClassPropKeys>,
+    Theme extends object = StyledInstanceTheme
   >(
     ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
   ): StyledComponent<InnerProps, StyleProps, Theme>
   <
     StyleProps extends Omit<
       Overwrapped<InnerProps, StyleProps>,
       ReactClassPropKeys
-    > = Omit<InnerProps & ExtraProps, ReactClassPropKeys>
+    > = Omit<InnerProps & ExtraProps, ReactClassPropKeys>,
+    Theme extends object = StyledInstanceTheme
   >(
     template: TemplateStringsArray,
     ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>

diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx
@@ -8,3 +8,14 @@ styled.body
 styled.div
 // $ExpectType CreateStyledComponentIntrinsic<"svg", {}, any>
 styled.svg
+
+{
+  // $ExpectType CreateStyledComponentIntrinsic<"svg", { bar: string }, { themed: "black" }>
+  styled.div<{ bar: string }, { themed: 'black' }>`
+    color: ${props => {
+      // $ExpectType { themed: "black" }
+      const { theme } = props
+      return theme.themed
+    }};
+  `
+}