Fix #749 (#954)

stitchesjs · Feb 15, 2022 · 9205dfc · 9205dfc
1 parent 560e6a7
commit 9205dfc
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/packages/react/types/styled-component.d.ts b/packages/react/types/styled-component.d.ts
@@ -32,11 +32,12 @@ export interface StyledComponent<
 
 	<
 		C extends CSS,
-		As extends string | React.ComponentType<any> = Type extends string | React.ComponentType<any> ? Type : never
+		As extends string | React.ComponentType<any> = Type extends string | React.ComponentType<any> ? Type : any,
+		InnerProps = Type extends StyledComponent<any, infer IP, any, any> ? IP : {},
 	>(
 		props: Util.Assign<
 			React.ComponentPropsWithRef<As extends IntrinsicElementsKeys | React.ComponentType<any> ? As : never>,
-			TransformProps<Props, Media> & { 
+			TransformProps<Util.Assign<InnerProps, Props>, Media> & { 
 				as?: As,
 				css?: {
 					[K in keyof C]: K extends keyof CSS ? CSS[K] : never

diff --git a/packages/test/issue-749-react.tsx b/packages/test/issue-749-react.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { styled } from './stitches.config'
+
+const Box = styled('div', {
+	variants: {
+		size: {
+			small: {},
+		},
+	},
+})
+
+const Flex = styled(Box, {
+	variants: {
+		variant: {
+			red: {},
+		},
+	},
+})
+
+export default function App() {
+	return (
+		<>
+			<Flex as="a" variant="red" size="small" />
+			<Flex as="a" variant="red" />
+			<Flex as="a" size="small" />
+			<Flex variant="red" size="small" />
+			<Flex variant="red" />
+			<Flex size="small" />
+		</>
+	)
+}
diff --git a/packages/test/package.json b/packages/test/package.json
@@ -10,7 +10,7 @@
     "types/*.d.ts"
   ],
   "devDependencies": {
-    "@stitches/react": "^1.0.0-canary.15",
+    "@stitches/react": "1.2.6",
     "@typescript-eslint/eslint-plugin": "^1.6.0",
     "@typescript-eslint/parser": "^1.6.0",
     "eslint-config-prettier": "^4.1.0",