Skip to content

Add test coverage for styled-jsx jsx prop on <style> elements via module augmentation#3307

Draft
Copilot wants to merge 2 commits intomainfrom
copilot/fix-jsx-prop-on-style-tag
Draft

Add test coverage for styled-jsx jsx prop on <style> elements via module augmentation#3307
Copilot wants to merge 2 commits intomainfrom
copilot/fix-jsx-prop-on-style-tag

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 31, 2026

Users reported <style jsx> (styled-jsx pattern, common in Next.js) producing TS2322: Property 'jsx' does not exist on type 'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>' in typescript-go while the standard TypeScript extension showed no error.

Investigation findings:

  • Both TypeScript and typescript-go behave identically: the error appears only when styled-jsx types are absent, and disappears when they are present
  • The user's discrepancy is a project configuration difference — Next.js auto-includes styled-jsx types via next-env.d.ts/// <reference types="next" />styled-jsx/global.d.ts, and the typescript-go extension may resolve the project in a different context
  • The module augmentation pattern (declare module 'react' { interface StyleHTMLAttributes<T> { jsx?: boolean } }) works correctly in typescript-go across all loading mechanisms: import, /// <reference types>, types[] in tsconfig, and transitive chains

Changes:

  • Adds testdata/tests/cases/compiler/jsxStylePropStyledJsx.tsx — a regression test using react16.d.ts + declare module 'react' augmentation (the exact styled-jsx pattern) verifying that <style jsx>, <style global>, and <style jsx global> compile without error, while truly unknown attributes still correctly fail
  • Adds baseline files (symbols, types) for the new test
declare module 'react' {
    interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
        jsx?: boolean;
        global?: boolean;
    }
}

const a = <style jsx>{`h1 { color: red; }`}</style>;      // no error
const b = <style global>{`h1 { color: red; }`}</style>;   // no error
// @ts-expect-error
const d = <style unknown>{`h1 { color: red; }`}</style>;  // correctly errors

Copilot AI changed the title [WIP] Fix jsx prop on style tag not recognized Add test coverage for styled-jsx jsx prop on <style> elements via module augmentation Apr 1, 2026
Copilot AI requested a review from RyanCavanaugh April 1, 2026 00:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

jsx Prop on <style> Tag Not Recognized

2 participants