Error in fragment

[jaydenseric]

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

Bug.

What is the current behavior?

Styled JSX inside a React Fragment container causes a rendering error.

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

Mounting this component:

const Test = () => (
  <>
    <p>Test</p>
    <style jsx>{`
      p {
        color: red;
      }
    `}</style>
  </>
)

Causes this error:

Warning: Received `true` for a non-boolean attribute `jsx`.

What is the expected behavior?

No rendering error.

Environment (include versions)

• OS: macOS
• Browser: Chrome v67.0.3396.99
• styled-jsx (version): v2.2.6
• next (version): v6.1.0

Did this work in previous versions?

There were other bugs with fragments which have since been closed.

[giuseppeg]

styled-jsx is not compatible with Babel7 yet but it would probably as simple as also visiting JSXFragment like we do for JSXElement

[madeleineostoja]

Any update on this?

And is the incompatibility with Babel 7 documented anywhere? Just lost hours trying to debug this before figuring out it was the new Fragment syntax that was causing it.

[jaydenseric]

Can this please be escalated to bug status? It makes no sense that this will work:

import { Fragment } from 'react'

const Logo = () => (
  <Fragment>
    <img src="/static/logo.svg" />
    <style jsx>{`
      img {
        border-radius: 50%;
      }
    `}</style>
  </Fragment>
)

... and this legitimate syntax (supported by stable React and Babel) won't:

const Logo = () => (
  <>
    <img src="/static/logo.svg" />
    <style jsx>{`
      img {
        border-radius: 50%;
      }
    `}</style>
  </>
)

[giuseppeg]

We need to make a patch release before starting to work on v4 and switch to babel 7. I don’t do this for a living so sometimes things can be slower. If any bugfix or feature is crucial for your work I welcome any contribution and I’d be happy to give guidance and help

[Soundvessel]

A heads up (see referenced issue above) that this bug resurfaced when using the styled-jsx-plugin-sass plugin.