Styled-jsx: Error in fragment

Created on 29 Jun 2018 · 5Comments · Source: vercel/styled-jsx

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.

enhancement good first issue help wanted

Source

jaydenseric

👍11

Most helpful comment

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

jaydenseric on 7 Sep 2018

👍6 😄1

All 5 comments

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

giuseppeg on 1 Jul 2018

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.

madeleineostoja on 21 Aug 2018

👍2

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

jaydenseric on 7 Sep 2018

👍6 😄1

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

giuseppeg on 7 Sep 2018

👍2

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