Doesn't work with global

[klm127]

Say I style a component

const MyButton = ()=> {
  return <button class="common-button">
     Hello
     <style jsx global>{`
        .common-button {
          background-color: slateblue;
        }
      `}</style>
    </button>
}

And I use it

<div>
  <MyButton />
  <MyButton />
</div>

I would expect that the shared style would be extrapolated into a single <style> element on the dom, but instead it is repeated over and over again inside of every button

<button class="common-button">Hello<style>.common-button{ background-color=slateblue; }</style></button>
<button class="common-button">Hello<style>.common-button{ background-color=slateblue; }</style></button>

I think the solution is to use a css outside of the component, but there doesn't seem to be a way to do that with solid-styled-jsx.

Eg, for regular styled-jsx you would go:

import css from `styled-jsx/css`
const MyButton = ()=> {
  return <button class="common-button">
     Hello
     <style jsx>{butstyle}</style>
    </button>
}
const butstyle = css`
        .common-button {
          background-color: slateblue;
        }
`