From fdc56a037b2d7872268a39ff0dade67f28217e59 Mon Sep 17 00:00:00 2001
From: Jun Shindo <46585162+jay-es@users.noreply.github.com>
Date: Wed, 1 Sep 2021 01:38:44 +0900
Subject: [PATCH 1/2] add type for component

---
 src/index.d.ts     | 30 ++++++++++++++++++++++++++++++
 test/test.spec.tsx | 28 +++++++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 478946e..5bf8037 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -54,6 +54,36 @@ export declare function styled<T extends keyof JSX.IntrinsicElements>(
 ) => ((props: P & JSX.IntrinsicElements[T]) => JSX.Element) & {
   className: (props: P & JSX.IntrinsicElements[T]) => string;
 };
+export declare function styled<T extends {}>(
+  component: (props: T) => JSX.Element
+): <P = T>(
+  args_0:
+    | string
+    | TemplateStringsArray
+    | CSSAttribute
+    | ((
+        props: P & {
+          theme?: any;
+          as?: string | number | symbol | undefined;
+          className?: any;
+          children?: any;
+        }
+      ) => string | CSSAttribute),
+  ...args_1: (
+    | string
+    | number
+    | ((
+        props: P & {
+          theme?: any;
+          as?: string | number | symbol | undefined;
+          className?: any;
+          children?: any;
+        }
+      ) => string | number | CSSAttribute | undefined)
+  )[]
+) => ((props: P & T) => JSX.Element) & {
+  className: (props: P & T) => string;
+};
 export declare function createGlobalStyles(
   tag: CSSAttribute | TemplateStringsArray | string,
   ...props: Array<string | number | Function>
diff --git a/test/test.spec.tsx b/test/test.spec.tsx
index ce5a1b0..8931729 100644
--- a/test/test.spec.tsx
+++ b/test/test.spec.tsx
@@ -1,5 +1,5 @@
 /* @jsxImportSource solid-js */
-import { createRoot } from "solid-js";
+import { createRoot, Component } from "solid-js";
 import { styled, ThemeProvider, setup } from "../src/index";
 
 describe("Simple Styled", () => {
@@ -46,6 +46,32 @@ describe("Simple Styled", () => {
     })
   })
 
+  test("Creates component of styled component properly", () => {
+    const SuperDiv = styled("div")`
+      color: red;
+    `;
+
+    const UltraDiv = styled(SuperDiv)`
+      background-color: yellow;
+    `;
+
+    createRoot(() => {
+      const v = <UltraDiv />;
+    });
+  });
+
+  test("Creates component of Component properly", () => {
+    const BaseComponent: Component<{ foo: string }> = props => <div>{props.foo}</div>;
+
+    const StyledComponent = styled(BaseComponent)`
+      color: red;
+    `;
+
+    createRoot(() => {
+      const v = <StyledComponent foo="bar" />;
+    });
+  });
+
   test("Test Theming", () => {
     const Div = styled("div")<{ bold: boolean; border: number; color: string }>`
       color: steelblue;

From c66f69eb42e28486b16b25bc0245484274258013 Mon Sep 17 00:00:00 2001
From: Jun Shindo <46585162+jay-es@users.noreply.github.com>
Date: Thu, 2 Sep 2021 01:32:59 +0900
Subject: [PATCH 2/2] unify return types for styled function

---
 src/index.d.ts | 64 +++++++++++++++-----------------------------------
 1 file changed, 19 insertions(+), 45 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 5bf8037..7e76df9 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -24,66 +24,40 @@ export declare function ThemeProvider<
   }
 >(props: T): JSX.Element;
 export declare function useTheme(): unknown;
-export declare function styled<T extends keyof JSX.IntrinsicElements>(
-  tag: T | ((props: JSX.IntrinsicElements[T]) => JSX.Element)
-): <P>(
+type Tagged<T> = <P>(
   args_0:
     | string
     | TemplateStringsArray
     | CSSAttribute
     | ((
-        props: P & {
-          theme?: any;
-          as?: string | number | symbol | undefined;
-          className?: any;
-          children?: any;
-        }
+        props: P &
+          T & {
+            theme?: any;
+            as?: string | number | symbol | undefined;
+            className?: any;
+            children?: any;
+          }
       ) => string | CSSAttribute),
   ...args_1: (
     | string
     | number
     | ((
-        props: P & {
-          theme?: any;
-          as?: string | number | symbol | undefined;
-          className?: any;
-          children?: any;
-        }
-      ) => string | number | CSSAttribute | undefined)
-  )[]
-) => ((props: P & JSX.IntrinsicElements[T]) => JSX.Element) & {
-  className: (props: P & JSX.IntrinsicElements[T]) => string;
-};
-export declare function styled<T extends {}>(
-  component: (props: T) => JSX.Element
-): <P = T>(
-  args_0:
-    | string
-    | TemplateStringsArray
-    | CSSAttribute
-    | ((
-        props: P & {
-          theme?: any;
-          as?: string | number | symbol | undefined;
-          className?: any;
-          children?: any;
-        }
-      ) => string | CSSAttribute),
-  ...args_1: (
-    | string
-    | number
-    | ((
-        props: P & {
-          theme?: any;
-          as?: string | number | symbol | undefined;
-          className?: any;
-          children?: any;
-        }
+        props: P &
+          T & {
+            theme?: any;
+            as?: string | number | symbol | undefined;
+            className?: any;
+            children?: any;
+          }
       ) => string | number | CSSAttribute | undefined)
   )[]
 ) => ((props: P & T) => JSX.Element) & {
   className: (props: P & T) => string;
 };
+export declare function styled<T extends keyof JSX.IntrinsicElements>(
+  tag: T | ((props: JSX.IntrinsicElements[T]) => JSX.Element)
+): Tagged<JSX.IntrinsicElements[T]>;
+export declare function styled<T>(component: (props: T) => JSX.Element): Tagged<T>;
 export declare function createGlobalStyles(
   tag: CSSAttribute | TemplateStringsArray | string,
   ...props: Array<string | number | Function>