Apply Keyframes from variable

[Scorpovi4]

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

Bug or question

What is the current behavior?

If I generates Keyframes by script, write to the variable and use like this

<style jsx global>{`

          ${keyframes}

`}</style>

it doesn't work, but if I use the same as string it works.

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

  const slides = 2
  const slideInterval = (100 / slides);
  const intervalOffset = (100 / slides) * 0.1

  const keyframes = `
    @keyframes slide {
      ${
        new Array(slides).fill(0).map((_, i) => {
          if (i === 0) {
            return i + '%,' + (slideInterval - intervalOffset) + '%' + ' { margin-left:' + '0;}'
          } else {
            return (slideInterval) * i + '%,' + ((i+1) * (slideInterval - intervalOffset)) + '%' + ' { margin-left: -' + i + '00%;}'
          }
        })
      }
    }`.replace('},', '}')

<style jsx global>{`

          ${keyframes}

`}</style>

What is the expected behavior?

Apply styles from variable, or explain what's wrong.

Environment (include versions)

• OS: Windows 10
• Browser: Chrome
• styled-jsx (version): within Next.js v.11.1.2

Did this work in previous versions?

No