Nested selectors can contain issues

[davesnx]

Nested selectors should be treated with an empty space at the beginning if they don't start with an &.

.$(aaa) .$(bbb) {
  ..
}
// output .aaa .bbb (That's correct 🟢) 

.$(aaa) {
  .$(bbb) {
    ..
  };
}
// output .aaa.bbb (That's wrong 🔴), the output should be same as above (.aaa .bbb)

Currently it transform to CssJs.selector(".aaa", [CssJs.selector(".bbb", [CssJs.color(CssJs.red)])]) so it generates an object to emotion like: { ".aaa": {".bbb" : { "color": "red" }} }

The second selector should have a whitespace at the start

---

More test cases:

.one_level { &.without_space { color: blue } };

.one_level { & .with_space { color: blue } };

.one_level { &.$(with_interpolation) { color: blue } };

.one_level { & .$(space_with_interpolation) { color: blue } };

.two_levels { & .first_level { & .second_level { color: blue } } };

...

.without_ampersand { .one_level { color: blue } }; // expects an space here

.$(interpolation_at_the_start) { & .one_level { color: blue } };

#using_ids { & .one_level { color: blue } };

[using_attrs] { & .one_level { color: blue } };

[davesnx]

There has been an exploration https://github.com/davesnx/styled-ppx/pull/404 about having a Resolver phase which is the way to go in order to handle the transformation on media-queries and selectors. Similar work has been done at native runtime: packages/emotion/native/Css.ml

[lubegasimon]

Similar work has been done at native runtime: packages/emotion/native/Css.ml

~Does it fix the issue (out of curiosity)?~

My Bad, didn't notice this was an issue. Thought it was a PR comment.

[davesnx]

It fixes the same issue but when you aren't using the ppx and running on native