SWC does not catch nested styled-jsx tags in props

[sjchmiela]

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.")

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.

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

[vpontis]

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>
        </>
      }
    />
  );
}

[kdy1]

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

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.