Export JSX namespace from automatic runtime entries

packages/react/jsx-dev-runtime/package.json

@@ -6,6 +6,7 @@
     "./dist/react.cjs.js": "./dist/react.browser.cjs.js",
     "./dist/react.esm.js": "./dist/react.browser.esm.js"
   },
+  "types": "../types/jsx-dev-runtime",
   "preconstruct": {
     "source": "../src/jsx-dev-runtime",
     "umdName": "emotionReactJSXDevRuntime"

packages/react/jsx-runtime/package.json

@@ -6,6 +6,7 @@
     "./dist/react.cjs.js": "./dist/react.browser.cjs.js",
     "./dist/react.esm.js": "./dist/react.browser.esm.js"
   },
+  "types": "../types/jsx-runtime",
   "preconstruct": {
     "source": "../src/jsx-runtime",
     "umdName": "emotionReactJSXRuntime"

packages/react/types/index.d.ts

@@ -14,7 +14,6 @@ import {
 } from '@emotion/serialize'
 import {
   ClassAttributes,
-  ComponentClass,
   Context,
   Provider,
   FC,
@@ -23,6 +22,7 @@ import {
   Ref,
   createElement
 } from 'react'
+import { EmotionJSX } from './jsx-namespace'
 
 export {
   ArrayInterpolation,
@@ -92,41 +92,22 @@ export interface ClassNamesProps {
  */
 export function ClassNames(props: ClassNamesProps): ReactElement
 
-type WithConditionalCSSProp<P> = 'className' extends keyof P
-  ? (P extends { className?: string } ? P & { css?: Interpolation<Theme> } : P)
-  : P
-
-// unpack all here to avoid infinite self-referencing when defining our own JSX namespace
-type ReactJSXElement = JSX.Element
-type ReactJSXElementClass = JSX.ElementClass
-type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty
-type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute
-type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>
-type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
-type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
-type ReactJSXIntrinsicElements = JSX.IntrinsicElements
-
 export const jsx: typeof createElement
 export namespace jsx {
   namespace JSX {
-    interface Element extends ReactJSXElement {}
-    interface ElementClass extends ReactJSXElementClass {}
+    interface Element extends EmotionJSX.Element {}
+    interface ElementClass extends EmotionJSX.ElementClass {}
     interface ElementAttributesProperty
-      extends ReactJSXElementAttributesProperty {}
+      extends EmotionJSX.ElementAttributesProperty {}
     interface ElementChildrenAttribute
-      extends ReactJSXElementChildrenAttribute {}
-
-    type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
-      ReactJSXLibraryManagedAttributes<C, P>
-
-    interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+      extends EmotionJSX.ElementChildrenAttribute {}
+    type LibraryManagedAttributes<C, P> = EmotionJSX.LibraryManagedAttributes<
+      C,
+      P
+    >
+    interface IntrinsicAttributes extends EmotionJSX.IntrinsicAttributes {}
     interface IntrinsicClassAttributes<T>
-      extends ReactJSXIntrinsicClassAttributes<T> {}
-
-    type IntrinsicElements = {
-      [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
-        css?: Interpolation<Theme>
-      }
-    }
+      extends EmotionJSX.IntrinsicClassAttributes<T> {}
+    type IntrinsicElements = EmotionJSX.IntrinsicElements
   }
 }

packages/react/types/jsx-dev-runtime.d.ts

@@ -0,0 +1 @@
+export { EmotionJSX as JSX } from './jsx-namespace'

packages/react/types/jsx-namespace.d.ts

@@ -0,0 +1,38 @@
+import 'react'
+import { Interpolation } from '@emotion/serialize'
+import { Theme } from './index'
+
+type WithConditionalCSSProp<P> = 'className' extends keyof P
+  ? (P extends { className?: string } ? P & { css?: Interpolation<Theme> } : P)
+  : P
+
+// unpack all here to avoid infinite self-referencing when defining our own JSX namespace
+type ReactJSXElement = JSX.Element
+type ReactJSXElementClass = JSX.ElementClass
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements
+
+export namespace EmotionJSX {
+  interface Element extends ReactJSXElement {}
+  interface ElementClass extends ReactJSXElementClass {}
+  interface ElementAttributesProperty
+    extends ReactJSXElementAttributesProperty {}
+  interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
+
+  type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
+    ReactJSXLibraryManagedAttributes<C, P>
+
+  interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+  interface IntrinsicClassAttributes<T>
+    extends ReactJSXIntrinsicClassAttributes<T> {}
+
+  type IntrinsicElements = {
+    [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+      css?: Interpolation<Theme>
+    }
+  }
+}

packages/react/types/jsx-runtime.d.ts

@@ -0,0 +1 @@
+export { EmotionJSX as JSX } from './jsx-namespace'