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/react@18.2.8
 // 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",