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

[cgood92]

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

[thysultan]

Maybe L57 can also .replace(/&/g, prefix) to allow for & in :global() i.e

// will allow this pattern
.root > :global(*):not(header) {}

// to be written as
.root > :global(*:not(&header)) {}

[giuseppeg]

I think that we shouldn't introduce the & symbol.

Regexp are not good to match parenthesis therefore I think that we should do regular parsing like in my rewrite wip branch.

https://git.io/vyzFg
https://git.io/vyzFr
https://git.io/vyzF6

[thysultan]

@giuseppeg re: parenthesis, I think i found a bulletproof solution https://regex101.com/r/5ssplS/3

:global\(((?:[^()[]]*|\[.*\]|\([^()]*\))*)\)

// explained...
// [^()[]]*everything in ()
// \[.*\] include ) in strings [title=")[]"]
// \([^()]*\) include nesting (:not())

[giuseppeg]

@thysultan we could use a module like this https://github.com/juliangruber/balanced-match

[thysultan]

@giuseppeg I'm using regex

/:global\(((?:[^\(\)\[\]]*|\[.*\]|\([^\(\)]*\))*)\)/g

in stylis, it hasn't failed any of the tests i have put it through.

[giuseppeg]

related #158

[giuseppeg]

@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;
}

[thysultan]

@giuseppeg What's the expected output vs current output?

Edit: If you're just trying to match :global(..) this should work https://regex101.com/r/3Pvs5p/1

[giuseppeg]

p[data-jsx="abc"]:hover {
  color: red;
}

p[data-jsx="abc"]::before {
  color: red;
}

[data-jsx="abc"]:hover {
  color: red;
}

[data-jsx="abc"]::before {
  color: red;
}

[data-jsx="abc"]:hover p[data-jsx="abc"] {
  color: red;
}

a + b :hover ::before a:not(b) a[data-jsx="abc"] {
  color: red;
}

a[data-jsx="abc"]:not( a[data-jsx="abc"] +b[data-jsx="abc"] foo[data-jsx="abc"]:hover marquee a[data-jsx="abc"]) > [data-jsx="abc"]:hover {
  color: red;
}

.root[data-jsx="abc"] > *:not(header[data-jsx="abc"]) {
  color: red;
}

[giuseppeg]

@thysultan also we should fix #158
Would it make sense to use postcss-selector-parser and simplify all the things? Regexp are very unstable

[thysultan]

@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;}

[giuseppeg]

ok sounds good, just for my information what's the ETA?

[thysultan]

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

[thysultan]

@giuseppeg These are the tests i have for covering cascade isolation spec.js#L576-L674..

Where there any other edge cases?

[giuseppeg]

@thysultan oh cool!
I guess any deep nested parentheses so if you can imagine some edge cases that'd be great. I just put those together a bit randomly. But otherwise the known issues are:

• the one from this issue
• https://github.com/zeit/styled-jsx/pull/168#issuecomment-292735128
• https://github.com/zeit/styled-jsx/issues/158 and probably other combinations like :global(.foo #bar > baz)

[thysultan]

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

[giuseppeg]

@thysultan you rock man! thank you a lot for the great work :)

[giuseppeg]

Fixed in #210