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

Author: Andarist

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>>>

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
+    }};
+  `
+}