fix(react): support React 17 JSX typing

.changeset/react17-jsx-typing.md

@@ -0,0 +1,5 @@
+---
+'@linaria/react': patch
+---
+
+Fix TypeScript typings for React 17 projects using the automatic JSX runtime (`jsx: react-jsx`), so `styled.*` intrinsic components don’t incorrectly require `children`.

packages/react/__dtslint-react17__/index.d.ts

@@ -0,0 +1 @@
+// dtslint expects an `index.d.ts` in the test folder.

packages/react/__dtslint-react17__/react17.tsx

@@ -0,0 +1,8 @@
+import { styled } from '..';
+
+const Button = styled.button``;
+
+// Should not require `children` for intrinsic elements on React 17 projects.
+Button({});
+<Button />;
+<Button>ok</Button>;

packages/react/__dtslint-react17__/stubs/jsx-runtime.d.ts

@@ -0,0 +1,17 @@
+declare module 'react/jsx-runtime' {
+  const Fragment: unknown;
+  function jsx(type: unknown, props: unknown, key?: unknown): unknown;
+  function jsxs(type: unknown, props: unknown, key?: unknown): unknown;
+}
+
+declare module 'react/jsx-dev-runtime' {
+  const Fragment: unknown;
+  function jsxDEV(
+    type: unknown,
+    props: unknown,
+    key: unknown,
+    isStaticChildren: boolean,
+    source: unknown,
+    self: unknown
+  ): unknown;
+}

packages/react/__dtslint-react17__/stubs/react17.d.ts

@@ -0,0 +1,27 @@
+// Minimal React 17-like type surface for dtslint.
+// It intentionally does NOT export a module-level `JSX` namespace.
+
+declare namespace React {
+  type ElementType = unknown;
+
+  interface CSSProperties {
+    [key: string]: unknown;
+  }
+
+  interface FunctionComponent<P = Record<string, unknown>> {
+    (props: P & { children?: unknown }): unknown;
+  }
+
+  function createElement(...args: unknown[]): unknown;
+}
+
+export = React;
+export as namespace React;
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      button: Record<string, unknown>;
+    }
+  }
+}

packages/react/__dtslint-react17__/tsconfig.eslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.json"
+}

packages/react/__dtslint-react17__/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["es6"],
+    "target": "ES2015",
+    "jsx": "react-jsx",
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "types": [],
+    "noEmit": true,
+    "baseUrl": "./",
+    "paths": {
+      "react": ["./stubs/react17.d.ts"],
+      "react/jsx-runtime": ["./stubs/jsx-runtime.d.ts"],
+      "react/jsx-dev-runtime": ["./stubs/jsx-runtime.d.ts"]
+    }
+  }
+}

packages/react/package.json

@@ -53,7 +53,7 @@
     "build:declarations": "tsc --emitDeclarationOnly --outDir types",
     "build:dist": "tsup --format cjs,esm",
     "test": "jest --config ../../jest.config.js --rootDir .",
-    "test:dts": "dtslint --localTs ../../node_modules/typescript/lib __dtslint__",
+    "test:dts": "dtslint --localTs ../../node_modules/typescript/lib __dtslint__ && dtslint --localTs ../../node_modules/typescript/lib __dtslint-react17__",
     "typecheck": "tsc --noEmit --composite false",
     "watch": "pnpm build:dist --watch & pnpm build:declarations --watch"
   },

packages/react/src/styled.ts

@@ -107,25 +107,25 @@ interface IProps {
   style?: Record<string, string>;
 }
 
-// React <19
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {}
   }
 }
 
-// React >=19
-declare module 'react' {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {}
-  }
-}
-
 let idx = 0;
 
-type IntrinsicElements = React.JSX.IntrinsicElements & JSX.IntrinsicElements;
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+type ReactIntrinsicElements = typeof import('react') extends {
+  JSX: { IntrinsicElements: infer T };
+}
+  ? T
+  : never;
+
+type IntrinsicElements = [ReactIntrinsicElements] extends [never]
+  ? JSX.IntrinsicElements
+  : ReactIntrinsicElements;
 
 // Components with props are not allowed
 function styled(

packages/react/tsconfig.json

@@ -7,5 +7,6 @@
       "node"
     ],
   },
+  "include": ["src"],
   "references": [{ "path": "../core" }]
 }