feat: typed tag helper function on styled function

demo/index.tsx

@@ -11,24 +11,24 @@ const progress = keyframes`
   100% {
     width: 0;
   }
-`;
+`
 
 const section = css`
   background-color: #f6f8fa;
   color: #333;
 `
 
-const StyledSection = styled('div')`
+const StyledSection = styled.div`
   ${section}
   margin: 20px 0;
   padding: 20px;
 `
 
-const Animation = styled('div')`
+const Animation = styled.div`
   height: 20px;
   background-color: #007cd3;
   animation: ${progress} 2s linear infinite;
-`;
+`
 
 function App() {
   return (

src/index.ts

@@ -3,12 +3,17 @@ import { tags } from './tags'
 import { css } from './css'
 import { keyframes } from './keyframes'
 
+type Styled = OmitThisParameter<typeof createStyled>
+
+type BoundStyled = ReturnType<Styled>
+
 // bind it to avoid mutating the original function
 // @ts-ignore
-export const styled = createStyled.bind()
+const styled = createStyled.bind() as Styled &
+  Record<typeof tags[number], BoundStyled>
 
 tags.forEach((tagName: any) => {
   ;(styled as any)[tagName] = styled(tagName)
 })
 
-export { css, keyframes }
+export { styled, css, keyframes }

src/tags.ts

@@ -135,4 +135,4 @@ export const tags = [
   'svg',
   'text',
   'tspan',
-]
+] as const

vite.config.ts

@@ -3,8 +3,7 @@ import solidPlugin from 'vite-plugin-solid'
 
 export default defineConfig({
   root: './demo',
-  // TOOD: Removing `hot` will crash dev environment.
-  plugins: [solidPlugin({hot: false})],
+  plugins: [solidPlugin()],
   build: {
     target: 'esnext',
     polyfillDynamicImport: false,