Nested selectors are loosing dollar sign

[nesvet]

Expected behavior: Normal selector nesting

Describe the bug: When nesting a selector with a dollar sign, it disappears

Codesandbox link: https://codesandbox.io/s/react-jss-playground-j9toj

There I've just added:

    "& h1": {
      color: "red"
    }

And changed Comp to Comp$1

And look at the <style>:

.Comp\$1-wrapper-0-1-13 {
  padding: 40px;
  background: #f7df1e;
  text-align: left;
}
.Comp\1-wrapper-0-1-13 h1 {
  color: red;
}

Versions:

• react-jss: 8.6.1
• Browser: Safari 12.1.2
• OS: macOS 10.14.6

[kof]

confirmed

[sofiekedvik]

You can fix the issue temporarily with Comp$1.displayName = 'Comp';

https://codesandbox.io/embed/react-jss-playground-6u8rk

[theramparts]

I'm not sure if this is the same issue, but here is a sandbox of a potentially related one:

https://codesandbox.io/s/react-jss-playground-nk4t7

It is related to the dollar sign causing style loss with any parent class name with a nested rule containing a dollar sign will generate incorrect rules.

I discovered this because I encountered missing styles on one of my components during development. It's hard to reproduce dynamically (thus the hard coded example), but in each occurrence there was a nested rule that would look like the nested rule as shown by @Nesvet . None of the actual class names on the style objects use a dollar sign, and I don't use a custom id generator for our class names by default.

Might happen here: https://github.com/cssinjs/jss/blob/master/packages/jss-plugin-nested/src/index.js#L35

[robations]

I'm still getting this with jss@10.10.0. Generated styles come out like so:

.K\n-root-1159 th, .K\n-root-1159 td {
  ...
}
.K\$n-label-1160 {
  ...
}

This is minified output, so I'm working out how to control this.