Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SWC does not catch nested styled-jsx tags in props #65064

Open
sjchmiela opened this issue Apr 25, 2024 · 2 comments · May be fixed by vercel/turbo#8097
Open

SWC does not catch nested styled-jsx tags in props #65064

sjchmiela opened this issue Apr 25, 2024 · 2 comments · May be fixed by vercel/turbo#8097
Assignees
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. SWC Related to minification/transpilation in Next.js.

Comments

@sjchmiela
Copy link

sjchmiela commented Apr 25, 2024

Link to the code that reproduces this issue

https://github.com/sjchmiela/swc-style-in-prop-bug

To Reproduce

  1. Start the application in development (npm run dev, yarn dev, whichever you prefer).
  2. Open the main page.
  3. See the hydration error.
  4. Also notice warning thrown in console ("Warning: Received true for a non-boolean attribute jsx.")
Zrzut ekranu 2024-04-25 o 22 43 20

Current vs. Expected behavior

I expected a "Nesting detected" error to be thrown. It is thrown if SWC is disabled and Babel is transpiling styles.

Zrzut ekranu 2024-04-25 o 22 42 29

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:52 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 18.19.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: 9.0.1
Relevant Packages:
  next: 14.3.0-canary.23 // Latest available version is detected (14.3.0-canary.23).
  eslint-config-next: N/A
  react: 18.3.0
  react-dom: 18.3.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

SWC

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

It affects all stages, because without the error about nested styles untranspiled CSS ends up being served to clients.

NEXT-3242

@sjchmiela sjchmiela added the bug Issue was opened via the bug report template. label Apr 25, 2024
@github-actions github-actions bot added the SWC Related to minification/transpilation in Next.js. label Apr 25, 2024
@vpontis
Copy link

vpontis commented Apr 25, 2024

Just to have the code on this page as well:

export default function SimplePage() {
  return (
    <ComponentWithChildAsProp
      trigger={
        <>
          <div className={"text animated"}>Text</div>

          <style jsx>{`
            .text {
              color: blue;

              // This should either get transpiled by SWC
              // or should cause a build error about
              // nested styled jsx tags.
              // https://nextjs.org/docs/messages/nested-styled-jsx-tags
              //
              // Instead, it causes a hydration error,
              // because & gets replaced with an &amp;
              // *Remove* to fix the hydration error.
              &:hover {
                color: red;
              }
            }
          `}</style>
        </>
      }
    />
  );
}

@samcx samcx added the linear: next Confirmed issue that is tracked by the Next.js team. label Apr 26, 2024
@kdy1
Copy link
Member

kdy1 commented Apr 29, 2024

swc-project/plugins#292 should fix this issue. I'll close this issue with a PR to update styled-jsx rust crate in next-swc

@kdy1 kdy1 self-assigned this Apr 29, 2024
@kdy1 kdy1 linked a pull request May 7, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. SWC Related to minification/transpilation in Next.js.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants