Any string interpolations in global tags breaks styled-jsx

[madeleineostoja]

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

Bug

What is the current behavior?

Using constants or functions in a <style jsx global> tag results in either no style tag being rendered, or a broken style output.

Eg:

const normalize = // some normalization styles

// Results in nothing being rendered
<style jsx global>{normalize}</style>

// Results in invalid styles wrapped in { } braces being rendered
<style jsx global>{`${normalize}`}</style>

My particular use-case is using the normalize and fontFace utilities from Satchel with styled-jsx

What is the expected behavior?

Template literal interpolations should work in global style tags, or should at least behave consistently.

Environment (include versions)

• OS: macOS
• Browser: Chrome
• styled-jsx (version): NextJS 10

Did this work in previous versions?

Untested

[madeleineostoja]

Update: It seems to work when I wrap the interpolation in the css.global helper, but then that breaks when I try to use a function, for example the normalize() helper from Satchel (which just returns a string)

const reset = css.global`
  ${normalize(...)}
`

Complains about not being able to use dynamic styles in css.global

[greensheep]

Just came across this same issue... wrapping the interpolation in quotes made it work for me:

<style jsx global>{`"${normalize}"`}</style>

// also worked with a function
function normalize(input) {
  // ...
  return input;
}

<style jsx global>{`"${normalize(styles)}"`}</style>

[hpachy]

Got same issue I tried to custom dynamically my style with styled-jsx like the following code :

  return (
    <div className={`wrapper-split ${styles.wrapperSplit}`}>
      {memoSplitScreen}
      <style global jsx>{`
        ${style} .wrapper-split {
          overflow: hidden;
        }
      `}</style>
    </div>
  );

style look like : .wrapper-split div[class^=split-img] .Experts img {padding:10% !important} (type of string)

the style and the tag work fine in the localhost but published on vercel the tag 'style' do not existe anymore in the code....

[markplewis]

Here's what worked for me:

<style jsx global>{`${pageStyles}`}</style>

I still don't understand why the above works but the following doesn't. pageStyles is already a string:

<style jsx global>{pageStyles}</style>