Cannot include literal `&` with the nested plugin
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
__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](https://github.com/cssinjs/jss/blob/master/packages/jss-plugin-nested/src/index.js):
`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).
Contributor guide
Research direction
Start in packages/jss-plugin-nested/src/index.js, especially the parentRegExp handling of ampersands, and reproduce the issue with the nested style shown in the report. Verify that the generated selector preserves a literal ampersand inside the attribute value while still expanding the nesting ampersand.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 30/100