cssinjs / cssinjs/jss

Cannot include literal `&` with the nested plugin

Open
#1,135 2 comments 0 reactions 0 assignees View on GitHub
bug help wanted
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.