styled-jsx: `:not()` does not seem to be adding prefix

I have the following line:

.root > :global(*):not(header) {
...
}

Which get’s rendered (after the babel transform) to

.root[data-jsx=\"2663302060\"] > *:not(header) {
...
}

I guess I would expect the stuff inside the “NOT” to have prefixes as well, unless I stated that they were global. So, what is being done and I what I would expect are different.

Here is what I would expect:

/* with prefix */
.root > :global(*):not(header)
=> 
.root[data-jsx=\"2663302060\"] > *:not(header[data-jsx=\"2663302060\"])

/* with global */
.root > :global(*):not(:global(header))
=> 
.root[data-jsx=\"2663302060\"] > *:not(header)

Styled-jsx version 0.5.7, as per dependency of next version 2.0.0-beta.32

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 18 (8 by maintainers)

Most upvoted comments

@giuseppeg V3 is out. After the update i guess the only parts that will remain in lib/transform are the source maps bits.

thysultan on May 24, 2017

@thysultan any chance that you can help us out fixing this one?

Here are some test cases that should pass:

p:hover {
  color: red;
}

p::before {
  color: red;
}

:hover {
  color: red;
}

::before {
  color: red;
}

:hover p {
  color: red;
}

:global(a + b :hover ::before a:not(b)) a {
  color: red;
}

a:not( a +b foo:hover :global(marquee) a) > :hover {
  color: red;
}

.root > :global(*):not(header) {
  color: red;
}

giuseppeg on May 19, 2017

Intend to release this weekend, will see how it goes.

thysultan on May 20, 2017

@giuseppeg I have a working version that passes the tests in V3 will update the stylis dependency here when i release it, just working on supporting nesting for the cascade isolation mode. ex.

h1 {
   div {
      color: red;
   }
}

/* expected output */
h1#h4sh div#h4sh {color: red;}

/* current output */
h1#h4sh divh1#h4sh {color: red;}

thysultan on May 20, 2017