title: How to solve `Unknown word (CssSyntaxError)` of a variable name in `styled-jsx` (stylelint)
body: <p>I use <em>Next.js</em> with <em>styled-jsx</em> together with <em>stylelint</em> and everything goes well until when I start to use <code>variables</code> in <em>styled-jsx</em> because stylelint throw <code>stylelint(CssSyntaxError)</code> on those variables.</p>
  
  <p>For example</p>
  
  <pre><code>const Button = ({ color }) =&gt; (
    &lt;&gt;
      &lt;button&gt;Hello World!&lt;/button&gt;
  
      &lt;style jsx&gt;{`
        button {
          color: ${color || 'blue'};
                   ^^^^^ Unknown word (CssSyntaxError)
        }
      `}&lt;/style&gt;
    &lt;/&gt;
  )
  </code></pre>
  
  <p>I don't know how to fix it or is it have any plugins that can help.</p>