Как решить `Неизвестное слово (CssSyntaxError)` имени переменной в `styled-jsx` (stylelint)

Question

Я использую Next.js с styled-jsx вместе с stylelint , и все идет хорошо, пока я не начну использовать variables в styled-jsx , потому что stylelint бросает stylelint(CssSyntaxError) в эти переменные.

Например,

const Button = ({ color }) => (
  <>
    <button>Hello World!</button>

    <style jsx>{`
      button {
        color: ${color || 'blue'};
                 ^^^^^ Unknown word (CssSyntaxError)
      }
    `}</style>
  </>
)

Я не знаю, как это исправить, или у него есть какие-либо плагины, которые могутпомощь.