cssinjs/jss

Cannot include literal `&` with the nested plugin

Open

#1 135 ouverte le 17 juin 2019

Voir sur GitHub
 (2 commentaires) (0 réactions) (0 assignés)JavaScript (434 forks)batch import
bughelp wanted

Métriques du dépôt

Stars
 (7 000 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

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: 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).

Guide contributeur