Replace deprecated JSX namespace with direct import

.changeset/slow-fishes-switch.md

@@ -0,0 +1,5 @@
+---
+'styled-components': patch
+---
+
+fix jsx support for react 19

packages/styled-components/src/constructors/styled.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { JSX } from 'react';
 import createStyledComponent from '../models/StyledComponent';
 import { BaseObject, KnownTarget, WebTarget } from '../types';
 import domElements, { SupportedHTMLElements } from '../utils/domElements';
@@ -14,7 +14,7 @@ const baseStyled = <Target extends WebTarget, InjectedProps extends object = Bas
   >(createStyledComponent, tag);
 
 const styled = baseStyled as typeof baseStyled & {
-  [E in SupportedHTMLElements]: StyledInstance<'web', E, React.JSX.IntrinsicElements[E]>;
+  [E in SupportedHTMLElements]: StyledInstance<'web', E, JSX.IntrinsicElements[E]>;
 };
 
 // Shorthands for all valid HTML Elements

packages/styled-components/src/constructors/test/createGlobalStyle.ssr.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @jest-environment node
  */
-import React from 'react';
+import React, { JSX } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import ServerStyleSheet from '../../models/ServerStyleSheet';
 import { stripComments, stripWhitespace } from '../../test/utils';
@@ -12,7 +12,7 @@ describe(`createGlobalStyle`, () => {
 
   function setup() {
     return {
-      renderToString(comp: React.JSX.Element) {
+      renderToString(comp: JSX.Element) {
         return ReactDOMServer.renderToString(comp);
       },
     };

packages/styled-components/src/constructors/test/createGlobalStyle.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import ReactDOM from 'react-dom';
 import { act, Simulate } from 'react-dom/test-utils';
 import ReactTestRenderer from 'react-test-renderer';
@@ -19,7 +19,7 @@ describe(`createGlobalStyle`, () => {
 
     return {
       container,
-      render(comp: React.JSX.Element) {
+      render(comp: JSX.Element) {
         ReactDOM.render(comp, container);
       },
       cleanup() {

packages/styled-components/src/hoc/withTheme.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { ThemeContext } from '../models/ThemeProvider';
 import { AnyComponent, ExecutionProps } from '../types';
 import determineTheme from '../utils/determineTheme';
 import getComponentName from '../utils/getComponentName';
 import hoist from '../utils/hoist';
 
 export default function withTheme<T extends AnyComponent>(Component: T) {
-  const WithTheme = React.forwardRef<T, React.JSX.LibraryManagedAttributes<T, ExecutionProps>>(
+  const WithTheme = React.forwardRef<T, JSX.LibraryManagedAttributes<T, ExecutionProps>>(
     (props, ref) => {
       const theme = React.useContext(ThemeContext);
       const themeProp = determineTheme(props, theme, Component.defaultProps);

packages/styled-components/src/models/ServerStyleSheet.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import type * as streamInternal from 'stream';
 import { Readable } from 'stream';
 import { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';
@@ -35,7 +35,7 @@ export default class ServerStyleSheet {
     return `<style ${htmlAttr}>${css}</style>`;
   };
 
-  collectStyles(children: any): React.JSX.Element {
+  collectStyles(children: any): JSX.Element {
     if (this.sealed) {
       throw styledError(2);
     }

packages/styled-components/src/models/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { JSX, useContext, useMemo } from 'react';
 import styledError from '../utils/error';
 import isFunction from '../utils/isFunction';
 
@@ -86,7 +86,7 @@ export function useTheme(): DefaultTheme {
 /**
  * Provide a theme to an entire react component tree via context
  */
-export default function ThemeProvider(props: Props): React.JSX.Element | null {
+export default function ThemeProvider(props: Props): JSX.Element | null {
   const outerTheme = React.useContext(ThemeContext);
   const themeContext = useMemo(
     () => mergeTheme(props.theme, outerTheme),

packages/styled-components/src/test/props.test.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, JSX } from 'react';
 import TestRenderer from 'react-test-renderer';
 import { getRenderedCSS, resetStyled } from './utils';
 
@@ -127,7 +127,7 @@ describe('props', () => {
     });
 
     it('allows custom prop filtering for components', () => {
-      const InnerComp = (props: React.JSX.IntrinsicElements['div']) => <div {...props} />;
+      const InnerComp = (props: JSX.IntrinsicElements['div']) => <div {...props} />;
       const Comp = styled(InnerComp).withConfig({
         shouldForwardProp: prop => !['filterThis'].includes(prop),
       })<{ filterThis: string; passThru: string }>`
@@ -184,7 +184,7 @@ describe('props', () => {
     });
 
     it('should filter out props when using "as" to a custom component', () => {
-      const AsComp = (props: React.JSX.IntrinsicElements['div']) => <div {...props} />;
+      const AsComp = (props: JSX.IntrinsicElements['div']) => <div {...props} />;
       const Comp = styled('div').withConfig({
         shouldForwardProp: prop => !['filterThis'].includes(prop),
       })<{ filterThis: string; passThru: string }>`
@@ -202,7 +202,7 @@ describe('props', () => {
     });
 
     it('can set computed styles based on props that are being filtered out', () => {
-      const AsComp = (props: React.JSX.IntrinsicElements['div']) => <div {...props} />;
+      const AsComp = (props: JSX.IntrinsicElements['div']) => <div {...props} />;
       const Comp = styled('div').withConfig({
         shouldForwardProp: prop => !['filterThis'].includes(prop),
       })<{ filterThis: string; passThru: string }>`

packages/styled-components/src/test/ssr.test.tsx

@@ -4,7 +4,7 @@
 
 import { resetStyled } from './utils';
 
-import React from 'react';
+import React, { JSX } from 'react';
 import { renderToNodeStream, renderToString } from 'react-dom/server';
 import stylisRTLPlugin from 'stylis-plugin-rtl';
 import createGlobalStyle from '../constructors/createGlobalStyle';
@@ -306,7 +306,7 @@ describe('ssr', () => {
   });
 
   it('should handle errors while streaming', () => {
-    function ExplodingComponent(): React.JSX.Element {
+    function ExplodingComponent(): JSX.Element {
       throw new Error('ahhh');
     }
 

packages/styled-components/src/test/types.tsx

@@ -1,7 +1,7 @@
 /**
  * This file is meant for typing-related tests that don't need to go through Jest.
  */
-import React from 'react';
+import React, { JSX } from 'react';
 import { css, CSSProp, IStyledComponent, StyledObject } from '../index';
 import styled from '../index-standalone';
 import { DataAttributes } from '../types';
@@ -309,7 +309,7 @@ const StyledDiv = styled.div``;
 
 const CustomComponent = (({ ...props }) => {
   return <StyledDiv {...props} />;
-}) as IStyledComponent<'web', React.JSX.IntrinsicElements['div']>;
+}) as IStyledComponent<'web', JSX.IntrinsicElements['div']>;
 
 const StyledCustomComponent = styled(CustomComponent)``;
 

packages/styled-components/src/types.ts

@@ -1,5 +1,5 @@
 import type * as CSS from 'csstype';
-import React from 'react';
+import React, { JSX } from 'react';
 import ComponentStyle from './models/ComponentStyle';
 import { DefaultTheme } from './models/ThemeProvider';
 import createWarnTooManyClasses from './utils/createWarnTooManyClasses';
@@ -217,7 +217,7 @@ export interface PolymorphicComponent<R extends Runtime, BaseProps extends objec
     ForwardedAsTarget extends StyledTarget<R> | void = void,
   >(
     props: PolymorphicComponentProps<R, BaseProps, AsTarget, ForwardedAsTarget>
-  ): React.JSX.Element;
+  ): JSX.Element;
 }
 
 export interface IStyledComponentBase<R extends Runtime, Props extends object = BaseObject>