Setting global css rule as expresion of ternary operator not working

[ignacio-gc]

What is the current behavior?

Trying to set the body background color conditionally in the _app.js file with a ternary operator.

If the entire css rule is used as an expression of the ternary operator the rule has no effect:

<style jsx global>{`
        ${ isDark ? 'body {background: darkslategray};' : 'body {background: antiquewhite};' }
`}</style>

If the ternary operator is used to select only the value of the property inside the rule works

<style jsx global>{`
  body {
    background: ${isDark ? "darkslategray" : "antiquewhite"};
  }
`}</style>

Steps to reproduce

Put this code in _app.js

import '../styles/global.css'
import { AppProps } from 'next/app'
import { useState } from 'react'


export default function App({ Component, pageProps }: AppProps) {
  const [isDark, setIsDark] = useState(false)
  
  return (
    <>
      <Component {...pageProps} />
      <style jsx global>{`
        ${ isDark ? 'body {background: darkslategray};' : 'body {background: antiquewhite};' }
      `}</style>
    </>
  )
}

What is the expected behavior?

The body background should change color

Environment (include versions)

• OS: Archlinux
• Browser: Firefox 80.0.1 64bit
• styled-jsx (version):

Did this work in previous versions?

Didn't try

[devgony]

Is there any progress to figure out?

[pablitogo]

Still seeing the same using Next 13.5.1 and styled-jsx 5.1.2, it was working fine on Next 13.4 though. The generated CSS has some :0 added to it

<style id="__jsx-3826393128">
  :root {
      --color-brand-base: #943189;
      --color-brand-darker: #76276E;
      --color-interaction-base: #943189;
      --color-interaction-dark: #76276E;
      :0;--brand-container-width: 1360px;
      --brand-color-text: #943189;
      :0}
</style>