How to solve `Unknown word (CssSyntaxError)` of a variable name in `styled-jsx` (stylelint)

Question

I use Next.js with styled-jsx together with stylelint and everything goes well until when I start to use variables in styled-jsx because stylelint throw stylelint(CssSyntaxError) on those variables.

For example

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

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

I don't know how to fix it or is it have any plugins that can help.

Immure

Have you tried to rename your variable to something different? customColor e.g. ? – Townsley