Improved compatibility with the upcoming @types/react for React 19

.changeset/curly-houses-jump.md

@@ -0,0 +1,6 @@
+---
+'@emotion/styled': patch
+'@emotion/react': patch
+---
+
+Replace global JSX type with React.JSX

package.json

@@ -184,7 +184,7 @@
     "@testing-library/react": "13.0.0-alpha.5",
     "@types/jest": "^29.5.12",
     "@types/node": "^12.20.37",
-    "@types/react": "^18.0.9",
+    "@types/react": "18.2.6",
     "@typescript-eslint/eslint-plugin": "^7.13.0",
     "@typescript-eslint/parser": "^7.13.0",
     "babel-check-duplicated-nodes": "^1.0.0",

packages/react/types/helper.d.ts

@@ -1,12 +1,12 @@
-import * as React from 'react'
+import { ReactJSX } from './jsx-namespace'
 
 /**
  * @desc Utility type for getting props type of React component.
  * It takes `defaultProps` into an account - making props with defaults optional.
  */
 export type PropsOf<
-  C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
-> = JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>
+  C extends keyof ReactJSX.IntrinsicElements | React.JSXElementConstructor<any>
+> = ReactJSX.LibraryManagedAttributes<C, React.ComponentProps<C>>
 
 // We need to use this version of Omit as it's distributive (Will preserve unions)
 export type DistributiveOmit<T, U> = T extends any

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

@@ -2,25 +2,81 @@ import 'react'
 import { Interpolation } from '@emotion/serialize'
 import { Theme } from '@emotion/react'
 
+type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
+  ? true
+  : false
+
 type WithConditionalCSSProp<P> = 'className' extends keyof P
   ? string extends P['className' & keyof P]
     ? { css?: Interpolation<Theme> }
     : {}
   : {}
 
-// 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
-
-// based on the code from @types/[email protected]
-// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
-type ReactJSXElementType = string | React.JSXElementConstructor<any>
+// unpack all here to avoid infinite self-referencing when defining our own JSX namespace for the pre-React 19 case
+type ReactJSXElement = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.Element
+  : /** @ts-ignore */
+    React.JSX.Element
+type ReactJSXElementClass = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.ElementClass
+  : /** @ts-ignore */
+    React.JSX.ElementClass
+type ReactJSXElementAttributesProperty = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.ElementAttributesProperty
+  : /** @ts-ignore */
+    React.JSX.ElementAttributesProperty
+type ReactJSXElementChildrenAttribute = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.ElementChildrenAttribute
+  : /** @ts-ignore */
+    React.JSX.ElementChildrenAttribute
+type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.LibraryManagedAttributes<C, P>
+  : /** @ts-ignore */
+    React.JSX.LibraryManagedAttributes<C, P>
+type ReactJSXIntrinsicAttributes = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.IntrinsicAttributes
+  : /** @ts-ignore */
+    React.JSX.IntrinsicAttributes
+type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.IntrinsicClassAttributes<T>
+  : /** @ts-ignore */
+    React.JSX.IntrinsicClassAttributes<T>
+type ReactJSXIntrinsicElements = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.IntrinsicElements
+  : /** @ts-ignore */
+    React.JSX.IntrinsicElements
+
+type ReactJSXElementType = true extends IsPreReact19
+  ? // based on the code from @types/[email protected]
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
+    string | React.JSXElementConstructor<any>
+  : /** @ts-ignore */
+    React.JSX.ElementType
+
+export namespace ReactJSX {
+  type ElementType = ReactJSXElementType
+  interface Element extends ReactJSXElement {}
+  interface ElementClass extends ReactJSXElementClass {}
+  interface ElementAttributesProperty
+    extends ReactJSXElementAttributesProperty {}
+  interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
+
+  type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<C, P>
+
+  interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+  interface IntrinsicClassAttributes<T>
+    extends ReactJSXIntrinsicClassAttributes<T> {}
+
+  type IntrinsicElements = ReactJSXIntrinsicElements
+}
 
 export namespace EmotionJSX {
   type ElementType = ReactJSXElementType

packages/styled/types/base.d.ts

@@ -4,6 +4,7 @@
 import * as React from 'react'
 import { ComponentSelector, Interpolation } from '@emotion/serialize'
 import { PropsOf, Theme } from '@emotion/react'
+import { ReactJSX } from './jsx-namespace'
 
 export {
   ArrayInterpolation,
@@ -49,9 +50,9 @@ export interface StyledComponent<
   withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
     component: C
   ): StyledComponent<ComponentProps & PropsOf<C>>
-  withComponent<Tag extends keyof JSX.IntrinsicElements>(
+  withComponent<Tag extends keyof ReactJSX.IntrinsicElements>(
     tag: Tag
-  ): StyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]>
+  ): StyledComponent<ComponentProps, ReactJSX.IntrinsicElements[Tag]>
 }
 
 /**
@@ -169,23 +170,26 @@ export interface CreateStyled {
   >
 
   <
-    Tag extends keyof JSX.IntrinsicElements,
-    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] &
-      string = keyof JSX.IntrinsicElements[Tag] & string
+    Tag extends keyof ReactJSX.IntrinsicElements,
+    ForwardedProps extends keyof ReactJSX.IntrinsicElements[Tag] &
+      string = keyof ReactJSX.IntrinsicElements[Tag] & string
   >(
     tag: Tag,
-    options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>
+    options: FilteringStyledOptions<
+      ReactJSX.IntrinsicElements[Tag],
+      ForwardedProps
+    >
   ): CreateStyledComponent<
     { theme?: Theme; as?: React.ElementType },
-    Pick<JSX.IntrinsicElements[Tag], ForwardedProps>
+    Pick<ReactJSX.IntrinsicElements[Tag], ForwardedProps>
   >
 
-  <Tag extends keyof JSX.IntrinsicElements>(
+  <Tag extends keyof ReactJSX.IntrinsicElements>(
     tag: Tag,
-    options?: StyledOptions<JSX.IntrinsicElements[Tag]>
+    options?: StyledOptions<ReactJSX.IntrinsicElements[Tag]>
   ): CreateStyledComponent<
     { theme?: Theme; as?: React.ElementType },
-    JSX.IntrinsicElements[Tag]
+    ReactJSX.IntrinsicElements[Tag]
   >
 }
 

packages/styled/types/index.d.ts

@@ -3,6 +3,7 @@
 
 import { Theme } from '@emotion/react'
 import { CreateStyled as BaseCreateStyled, CreateStyledComponent } from './base'
+import { ReactJSX } from './jsx-namespace'
 
 export {
   ArrayInterpolation,
@@ -17,12 +18,12 @@ export {
 } from './base'
 
 export type StyledTags = {
-  [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<
+  [Tag in keyof ReactJSX.IntrinsicElements]: CreateStyledComponent<
     {
       theme?: Theme
       as?: React.ElementType
     },
-    JSX.IntrinsicElements[Tag]
+    ReactJSX.IntrinsicElements[Tag]
   >
 }
 

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

@@ -0,0 +1,74 @@
+// this is basically a slimmed down copy of https://github.com/emotion-js/emotion/blob/main/packages/react/types/jsx-namespace.d.ts
+// it helps to avoid issues when combining newer `@emotion/styled` and older `@emotion/react` versions
+// in such setup, ReactJSX namespace won't exist in `@emotion/react` and that would lead to errors
+import 'react'
+
+type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
+  ? true
+  : false
+
+// unpack all here to avoid infinite self-referencing when defining our own JSX namespace for the pre-React 19 case
+type ReactJSXElement = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.Element
+  : /** @ts-ignore */
+    React.JSX.Element
+type ReactJSXElementClass = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.ElementClass
+  : /** @ts-ignore */
+    React.JSX.ElementClass
+type ReactJSXElementAttributesProperty = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.ElementAttributesProperty
+  : /** @ts-ignore */
+    React.JSX.ElementAttributesProperty
+type ReactJSXElementChildrenAttribute = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.ElementChildrenAttribute
+  : /** @ts-ignore */
+    React.JSX.ElementChildrenAttribute
+type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.LibraryManagedAttributes<C, P>
+  : /** @ts-ignore */
+    React.JSX.LibraryManagedAttributes<C, P>
+type ReactJSXIntrinsicAttributes = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.IntrinsicAttributes
+  : /** @ts-ignore */
+    React.JSX.IntrinsicAttributes
+type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.IntrinsicClassAttributes<T>
+  : /** @ts-ignore */
+    React.JSX.IntrinsicClassAttributes<T>
+type ReactJSXIntrinsicElements = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.IntrinsicElements
+  : /** @ts-ignore */
+    React.JSX.IntrinsicElements
+
+type ReactJSXElementType = true extends IsPreReact19
+  ? // based on the code from @types/[email protected]
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
+    string | React.JSXElementConstructor<any>
+  : /** @ts-ignore */
+    React.JSX.ElementType
+
+export namespace ReactJSX {
+  type ElementType = ReactJSXElementType
+  interface Element extends ReactJSXElement {}
+  interface ElementClass extends ReactJSXElementClass {}
+  interface ElementAttributesProperty
+    extends ReactJSXElementAttributesProperty {}
+  interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
+
+  type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<C, P>
+
+  interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+  interface IntrinsicClassAttributes<T>
+    extends ReactJSXIntrinsicClassAttributes<T> {}
+
+  type IntrinsicElements = ReactJSXIntrinsicElements
+}

packages/styled/types/tests.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import styled, { StyledOptions, FilteringStyledOptions } from '@emotion/styled'
+import { ReactJSX } from './jsx-namespace'
 
 // This file uses the same Theme declaration from tests-base.tsx
 
@@ -63,7 +64,7 @@ const Container3 = styled.div(({ theme }) => ({
 const Box = styled('div', {
   shouldForwardProp: (
     propName
-  ): propName is Exclude<keyof JSX.IntrinsicElements['div'], 'color'> =>
+  ): propName is Exclude<keyof ReactJSX.IntrinsicElements['div'], 'color'> =>
     propName !== 'color'
 })<{ color: Array<string> }>(props => ({
   color: props.color[0]

site/package.json

@@ -19,7 +19,7 @@
     "@types/js-yaml": "^4.0.5",
     "@types/node": "^12.20.37",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^18.0.9",
+    "@types/react": "18.2.6",
     "@types/remark-prism": "^1.3.3",
     "facepaint": "^1.2.1",
     "gray-matter": "^4.0.3",

yarn.lock

@@ -6333,14 +6333,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.0.9":
-  version: 18.0.14
-  resolution: "@types/react@npm:18.0.14"
+"@types/react@npm:*, @types/react@npm:18.2.6, @types/react@npm:>=16":
+  version: 18.2.6
+  resolution: "@types/react@npm:18.2.6"
   dependencies:
     "@types/prop-types": "*"
     "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: 608eb57a383eedc54c79949673e5e8314f6b0c61542bff58721c8c47a18c23e2832e77c656050c2c2c004b62cf25582136c7c56fe1b6263a285c065fae31dbcf
+  checksum: dea9d232d8df7ac357367a69dcb557711ab3d5501807ffa77cebeee73d49ee94d095f298e36853c63ed47cce097eee4c7eae2aaa8c02fac3f0171ec1b523a819
   languageName: node
   linkType: hard
 
@@ -12648,7 +12648,7 @@ __metadata:
     "@testing-library/react": 13.0.0-alpha.5
     "@types/jest": ^29.5.12
     "@types/node": ^12.20.37
-    "@types/react": ^18.0.9
+    "@types/react": 18.2.6
     "@typescript-eslint/eslint-plugin": ^7.13.0
     "@typescript-eslint/parser": ^7.13.0
     babel-check-duplicated-nodes: ^1.0.0
@@ -12720,7 +12720,7 @@ __metadata:
     "@types/js-yaml": ^4.0.5
     "@types/node": ^12.20.37
     "@types/prismjs": ^1.26.0
-    "@types/react": ^18.0.9
+    "@types/react": 18.2.6
     "@types/remark-prism": ^1.3.3
     facepaint: ^1.2.1
     gray-matter: ^4.0.3