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

.changeset/curly-houses-jump.md

@@ -0,0 +1,7 @@
+---
+'@emotion/styled': patch
+'@emotion/react': patch
+'emotion-site': 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/eslint-plugin/src/rules/syntax-preference.ts

@@ -78,9 +78,11 @@ const checkExpressionPreferringObject = (
 ) => {
   switch (node.type) {
     case AST_NODE_TYPES.ArrayExpression:
-      node.elements.forEach(element =>
-        checkExpressionPreferringObject(context, element)
-      )
+      node.elements.forEach(element => {
+        if (element) {
+          checkExpressionPreferringObject(context, element)
+        }
+      })
       return
     case AST_NODE_TYPES.TemplateLiteral:
       context.report({
@@ -154,9 +156,11 @@ const checkExpressionPreferringString = (
 ) => {
   switch (node.type) {
     case 'ArrayExpression':
-      node.elements.forEach(element =>
-        checkExpressionPreferringString(context, element)
-      )
+      node.elements.forEach(element => {
+        if (element) {
+          checkExpressionPreferringString(context, element)
+        }
+      })
       return
     case 'ObjectExpression':
       context.report({

packages/react/types/helper.d.ts

@@ -5,8 +5,8 @@ import * as React from 'react'
  * 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 React.JSX.IntrinsicElements | React.JSXElementConstructor<any>
+> = React.JSX.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

@@ -9,14 +9,15 @@ type WithConditionalCSSProp<P> = 'className' extends keyof 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
+type ReactJSXElement = React.JSX.Element
+type ReactJSXElementClass = React.JSX.ElementClass
+type ReactJSXElementAttributesProperty = React.JSX.ElementAttributesProperty
+type ReactJSXElementChildrenAttribute = React.JSX.ElementChildrenAttribute
+type ReactJSXLibraryManagedAttributes<C, P> =
+  React.JSX.LibraryManagedAttributes<C, P>
+type ReactJSXIntrinsicAttributes = React.JSX.IntrinsicAttributes
+type ReactJSXIntrinsicClassAttributes<T> = React.JSX.IntrinsicClassAttributes<T>
+type ReactJSXIntrinsicElements = React.JSX.IntrinsicElements
 
 // based on the code from @types/[email protected]
 // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13

packages/styled/types/base.d.ts

@@ -49,9 +49,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 React.JSX.IntrinsicElements>(
     tag: Tag
-  ): StyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]>
+  ): StyledComponent<ComponentProps, React.JSX.IntrinsicElements[Tag]>
 }
 
 /**
@@ -169,23 +169,26 @@ export interface CreateStyled {
   >
 
   <
-    Tag extends keyof JSX.IntrinsicElements,
-    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] &
-      string = keyof JSX.IntrinsicElements[Tag] & string
+    Tag extends keyof React.JSX.IntrinsicElements,
+    ForwardedProps extends keyof React.JSX.IntrinsicElements[Tag] &
+      string = keyof React.JSX.IntrinsicElements[Tag] & string
   >(
     tag: Tag,
-    options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>
+    options: FilteringStyledOptions<
+      React.JSX.IntrinsicElements[Tag],
+      ForwardedProps
+    >
   ): CreateStyledComponent<
     { theme?: Theme; as?: React.ElementType },
-    Pick<JSX.IntrinsicElements[Tag], ForwardedProps>
+    Pick<React.JSX.IntrinsicElements[Tag], ForwardedProps>
   >
 
-  <Tag extends keyof JSX.IntrinsicElements>(
+  <Tag extends keyof React.JSX.IntrinsicElements>(
     tag: Tag,
-    options?: StyledOptions<JSX.IntrinsicElements[Tag]>
+    options?: StyledOptions<React.JSX.IntrinsicElements[Tag]>
   ): CreateStyledComponent<
     { theme?: Theme; as?: React.ElementType },
-    JSX.IntrinsicElements[Tag]
+    React.JSX.IntrinsicElements[Tag]
   >
 }
 

packages/styled/types/index.d.ts

@@ -17,12 +17,12 @@ export {
 } from './base'
 
 export type StyledTags = {
-  [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<
+  [Tag in keyof React.JSX.IntrinsicElements]: CreateStyledComponent<
     {
       theme?: Theme
       as?: React.ElementType
     },
-    JSX.IntrinsicElements[Tag]
+    React.JSX.IntrinsicElements[Tag]
   >
 }
 

packages/styled/types/tests.tsx

@@ -63,7 +63,7 @@ const Container3 = styled.div(({ theme }) => ({
 const Box = styled('div', {
   shouldForwardProp: (
     propName
-  ): propName is Exclude<keyof JSX.IntrinsicElements['div'], 'color'> =>
+  ): propName is Exclude<keyof React.JSX.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",