Referencing types="styled-jsx" types is not enough to avoid TS errors

[pawelgoc]

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

According to documentation section Typescript

If you're using TypeScript, then in order to allow <style jsx> tags to be properly understood by it, create a file named "styled-jsx.d.ts" anywhere within your project containing the following, or add this line to the top of any single existing .ts file within your project:

/// <reference types="styled-jsx" />

Is not providing typings for react module argumentation and TS end up with error

TS2322: Type '{ children: string; jsx: true; }' is not assignable to type 'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>'.
  Property 'jsx' does not exist on type 'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>'.

Here is PR that introduce this issue

Current workaround is to use

/// <reference types="styled-jsx/global" />

Which is not documented and also not how libraries should expose typings.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

Fallow all steps from documentation section Getting started

• npm install --save styled-jsx
• {"plugins": ["styled-jsx/babel"]}
• create any component that use <style jsx>...</style>

export default () => (
 <div>
   <p>only this paragraph will get the style :)</p>
   <style jsx>{`
     p {
       color: red;
     }
   `}</style>
 </div>
)

• and reference typings

/// <reference types="styled-jsx" />

What is the expected behavior?

1. [expected] referencing /// <reference types="styled-jsx" /> should be enough to use <style jsx /> or <style jsx global /> without TS errors.
   Maybe you should evaluate once again how d.ts files should be structured

// file styled-jsx.d.ts
declare module 'styled-jsx' {
  export type StyledJsxStyleRegistry = {
    styles(options?: { nonce?: string }): JSX.Element[]
    flush(): void
    add(props: any): void
    remove(props: any): void
  }
  export function useStyleRegistry(): StyledJsxStyleRegistry
  export function StyleRegistry({
    children,
    registry
  }: {
    children: JSX.Element | import('react').ReactNode
    registry?: StyledJsxStyleRegistry
  }): JSX.Element
  export function createStyleRegistry(): StyledJsxStyleRegistry
}

// file index.d.ts
/// <reference types="./styled-jsx" />

import React from 'react'

declare module 'react' {
  interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
    jsx?: boolean
    global?: boolean
  }
}

Finally remove or update global.d.ts file

Or other solution could be to change in package.json typings entry

from

 "typings": "./index.d.ts",

to

"typings": "./global.d.ts",

2. [alternative not recommended] at least documentation should be updated /// <reference types="styled-jsx/global" />

Environment (include versions)

• Version of styled-jsx 5.0.7 (last working version 5.0.2):
• Browser: Not relevant error is during build time
• OS: MacOS 12.3.1

Did this work in previous versions?

Yes, last working version is 5.0.2