Merge pull request #29 from vue-styled-components/fix/typedef-jsx

fix(core): the type definition of jsx is not well defined(#28)
vue-styled-components · Aug 31, 2024 · 91d21c3 · 91d21c3
2 parents 42d5e2a + e2bc882
commit 91d21c3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/core/src/styled.ts b/packages/core/src/styled.ts
@@ -10,12 +10,12 @@ import {
   reactive,
   ref,
   watch,
+  HTMLAttributes,
 } from 'vue'
 import domElements, { type SupportedHTMLElements } from '@/src/constants/domElements'
 import { type ExpressionType, generateClassName, generateComponentName, insertExpressions, injectStyle, removeStyle } from '@/src/utils'
 import { isStyledComponent, isValidElementType, isVueComponent } from '@/src/helper'
 import type { DefaultTheme } from './providers/theme'
-import { JSX } from 'vue/jsx-runtime'
 
 type Attrs = Record<string, any>
 
@@ -33,7 +33,7 @@ interface StyledComponent<T extends object> {
       | ExpressionType<BaseContext<P & ExtractPropTypes<PropsDefinition<T>>>>
       | ExpressionType<BaseContext<P & ExtractPropTypes<PropsDefinition<T>>>>[]
     )[]
-  ): DefineSetupFnComponent<{ as?: string; props?: P } & ExtractPropTypes<PropsDefinition<T>> & JSX.IntrinsicElements['div']>
+  ): DefineSetupFnComponent<{ as?: string; props?: P } & ExtractPropTypes<PropsDefinition<T>> & HTMLAttributes>
 
   attrs<A extends Attrs = Record<string, any>>(attrs: A): StyledComponent<T>
 }

diff --git a/packages/playground/src/Test.tsx b/packages/playground/src/Test.tsx
@@ -0,0 +1,5 @@
+import { styled } from '@/src/styled'
+
+export const Test1 = styled.div``
+
+export const Test2 = () => <Test1 class={'555'} />