hallelujah

package.json

@@ -23,6 +23,7 @@
   "workspaces": [
     "packages/core",
     "packages/react",
+    "packages/test",
     "packages/stringify"
   ],
   "dependencies": {

packages/react/types/index.d.ts

@@ -28,7 +28,7 @@ export type CSS<
 	Config['themeMap'],
 	Config['utils'],
 	false
->
+> & StyledComponent.$MarkerType
 
 /** Returns the properties, attributes, and children expected by a component. */
 export type ComponentProps<Component> = Component extends ((...args: any[]) => any) ? Parameters<Component>[0] : never

packages/react/types/styled-component.d.ts

@@ -1,9 +1,13 @@
 import type * as React from 'react'
 import type * as Util from './util'
 
+export declare const $_STITCHES_CSS: unique symbol
+export type $MarkerType = {[$_STITCHES_CSS]?: never}
+export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;
+
 /** Returns a new Styled Component. */
 export interface StyledComponent<
-	Type = 'span',
+	Type extends string | React.ComponentType<any> = 'span',
 	Props = {},
 	Media = {},
 	CSS = {}
@@ -15,14 +19,25 @@ export interface StyledComponent<
 		TransformProps<Props, Media> & { css?: CSS }
 	>
 > {
+		<M extends undefined, As = Type>(
+		props: (
+			As extends ''
+				? { as: IntrinsicElementsKeys }
+			: As extends React.ComponentType<infer P>
+				? Util.Assign<P, TransformProps<Props, Media> & { as: As, css?: {[$_STITCHES_CSS]?: M} }>
+			: As extends IntrinsicElementsKeys
+				? Util.Assign<JSX.IntrinsicElements[As], TransformProps<Props, Media> & { as: As, css?: {[$_STITCHES_CSS]?: M}}>
+			: never
+		)
+	): React.ReactElement | null
 	<As = Type>(
 		props: (
 			As extends ''
-				? { as: keyof JSX.IntrinsicElements }
+				? { as: IntrinsicElementsKeys }
 			: As extends React.ComponentType<infer P>
 				? Util.Assign<P, TransformProps<Props, Media> & { as: As, css?: CSS }>
-			: As extends keyof JSX.IntrinsicElements
-				? Util.Assign<JSX.IntrinsicElements[As], TransformProps<Props, Media> & { as: As, css?: CSS }>
+			: As extends IntrinsicElementsKeys
+				? Util.Assign<JSX.IntrinsicElements[As], TransformProps<Props, Media> & { as: As, css?: CSS}>
 			: never
 		)
 	): React.ReactElement | null
@@ -98,7 +113,7 @@ export declare const $$StyledComponentMedia: unique symbol
 export type $$StyledComponentMedia = typeof $$StyledComponentMedia
 
 /** Returns a narrowed JSX element from the given tag name. */
-type IntrinsicElement<TagName> = TagName extends keyof JSX.IntrinsicElements ? TagName : never
+type IntrinsicElement<TagName> = TagName extends IntrinsicElementsKeys ? TagName : never
 
 /** Returns a ForwardRef component. */
 type ForwardRefExoticComponent<Type, Props> = React.ForwardRefExoticComponent<

packages/test/.eslintrc

@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "env": {
+    "browser": true,
+    "jasmine": true,
+    "jest": true
+  },
+  "rules": {
+    "prettier/prettier": ["error", { "singleQuote": true }]
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  },
+  "parser": "@typescript-eslint/parser"
+}

packages/test/index.jsx

@@ -0,0 +1,34 @@
+import * as Stitches from '@stitches/react';
+import * as React from 'react';
+export const { config, styled } = Stitches.createStitches({
+    utils: {
+        /** util to do stuff */
+        ml: (value) => ({ marginLeft: value }),
+    },
+    theme: {
+        colors: {
+            red100: '#ff0000',
+        },
+    },
+});
+const Text = styled('span', {});
+const DEFAULT_TAG = 'h1';
+export const Heading = React.forwardRef((props, forwardedRef) => {
+    return (<>
+			{/* types here will be fast */}
+			<Text as={DEFAULT_TAG} onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef}/>
+			<Text onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef}/>
+			<Text onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ backgroundColor: '$red100' }}/>
+			<Text onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ ...props.css, backgroundColor: '$red100' }}/>
+			<Text as="a" href="" onClick={(e) => { console.log(e.altKey); }} ref={forwardedRef} css={{ ...props.css, backgroundColor: '$red100' }}/>
+			{/*
+            types here will be correct but autocompletion is going to be painfully slow when you add a new prop.
+            This is the only case where  the autocompletion is slow
+        */}
+			<Text as={DEFAULT_TAG} {...props} ref={forwardedRef}/>
+		</>);
+});
+const App = () => {
+    // when consuming the component it should be very fast
+    return <Heading />;
+};

packages/test/index.tsx

@@ -0,0 +1,45 @@
+import * as Stitches from '@stitches/react'
+import * as React from 'react'
+
+export const { config, styled } = Stitches.createStitches({
+	utils: {
+		/** util to do stuff */
+		ml: (value: Stitches.PropertyValue<'margin'>) => ({ marginLeft: value }),
+	},
+	theme: {
+		colors: {
+			red100: '#ff0000',
+		},
+	},
+})
+
+export type StitchesCss = Stitches.CSS<typeof config>
+
+const Text = styled('span', {})
+
+const DEFAULT_TAG = 'h1'
+
+type HeadingProps = React.ComponentProps<typeof DEFAULT_TAG> & { css?: StitchesCss }
+
+export const Heading = React.forwardRef<React.ElementRef<typeof DEFAULT_TAG>, HeadingProps>((props, forwardedRef) => {
+	return (
+		<>
+			{/* types here will be fast */}
+			<Text as={DEFAULT_TAG} onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} />
+			<Text onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} />
+			<Text onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} css={{ backgroundColor: '$red100' }} />
+			<Text onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} css={{ ...props.css, backgroundColor: '$red100' }} />
+			<Text as="a" href="" onClick={(e) => {console.log(e.altKey)}} css={{ ...props.css, backgroundColor: '$red100' }} />
+			{/*
+				types here will be correct but autocompletion is going to be painfully slow when you add a new prop.
+				This is the only case where  the autocompletion is slow
+			*/}
+			<Text as={DEFAULT_TAG} {...props} onClick={(e) => {console.log(e.altKey)}} ref={forwardedRef} />
+		</>
+	)
+})
+
+const App = () => {
+	// when consuming the component it should be very fast too
+	return <Heading />
+}

packages/test/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@stitches/test",
+  "version": "1.0.0-canary.7",
+  "type": "module",
+  "files": [
+    "dist/*.cjs",
+    "dist/*.js",
+    "dist/*.map",
+    "dist/*.mjs",
+    "types/*.d.ts"
+  ],
+  "devDependencies": {
+    "@stitches/react": "^1.0.0-canary.10",
+    "@typescript-eslint/eslint-plugin": "^1.6.0",
+    "@typescript-eslint/parser": "^1.6.0",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-prettier": "^3.0.1",
+    "prettier": "^1.16.4",
+    "typescript": "^4.3.5",
+    "react": "17.0.2"
+  },
+  "private": true,
+  "dependencies": {
+    "@radix-ui/react-polymorphic": "0.0.13"
+  }
+}