unexpected behaviour of :global()

[davibe]

I would expect .root :global(p + p) { ... to work but it does not.

const Bug = () =>
  <div className="root">
    <p>red</p>
    <p>green</p>
    <p>blue</p>
  <style jsx>{`

  .root :global(p) {
    color: red;
  }

  /* this does not work */
  .root :global(p + p) {
    color: green;
  }

  /* this works */
  .root :global(p) + :global(p) {
    color: blue;
  }

  `}</style>
  </div>

To make things more clear i am creating a Typography element with css rules that are scoped to the .root element but are applied to all sub-element of sub-component. I do this to style markdown-rendered texts.

[giuseppeg]

should be fixed by #134

[michalwerner]

I have styled-jsx from master branch with #134 but I still can't do anything more than single selector in prefixed :global. For example:

this works

<style jsx>{`
  .menu :global(li) {
    color: red;
  }
`}

this does not work:

<style jsx>{`
  .menu :global(ul li) {
   color: red;
  }
  .menu :global(ul > li) {
   color: red;
  }
  .menu :global(li + li) {
    color: red;
  }
`}

but this also works (no .menu prefix):

<style jsx>{`
  :global(ul li) {
    color: red;
  }
`}

Is this intended behavior?

[thysultan]

This is a bug, fixed upstream(stylis v1.2.2).

[rauchg]

@thysultan should we bump?

[thysultan]

@rauchg I'll send a PR.