Cannot include literal `&` with the nested plugin

[brianmhunt]

Expected behavior:
A clear and concise description of what you expected to happen.

A way to escape & so the nested plugin does not auto-convert it to the selector.

Describe the bug:
A clear and concise description of what happend instead of the expected behavior.

The following CSS cannot seem to be produced in JSS (with the nested plugin enabled):

someClass: {
  '&[some-attr="A & B"]': { }
}

It gets turned into:

.someClass[some-attr="A .someClass B"] {}

Codesandbox link:
Please create a codesandbox.io with the issue. Make it as minimal as possible as this will help us find the bug quicker.

Versions (please complete the following information):

• jss: 10 alpha 18
• Browser [e.g. chrome, safari]: Chrome
• OS [e.g. Windows, macOS]: OS X

Feel free to add any additional versions which you may think are relevant to the bug.

The regex in question looks to be here:
const parentRegExp = /&/g

A possible fix might be escaping with && and changing the regex to /(?:^|[^&])&(?:[^&]|$)/g. There may be a more performant option (if that is a concern here).

[kof]

It's quite hard to fix all the cases similar to this without a full parser

[brianmhunt]

@kof I'm not aware of all the needs, but perhaps it might be possible to recognize a unicode escape sequence e.g. %uXXXX that gets converted to \uXXXX (UTF-16).

So

• & could be %u0026, which becomes \u0026, and
• % could be %u0025, which becomes \u0025, etc.

It's possible a more minimalist %xXX for UTF-8 might satisfy most use cases.

It'd be a simple regex called after the nested substitution e.g. (and I apologize if these don't quite work, they're just off the top of my head):

• selector = selector.replace(/%u(\d{4})/g, replacer)
• where replacer is something like (__, hex) => String.fromCharCode(parseInt(hex, 16)).

Which is all to say that this might be an alternative strategy to a full parser, but perhaps solves the issue (subject to any needs I might not be aware of).