cssinjs/jss

Cannot include literal `&` with the nested plugin

Open

#1,135 opened on Jun 17, 2019

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (7,000 stars) (434 forks)batch import
bughelp wanted

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

Contributor guide

Tech stack
javascriptcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
understanding of JSS nested pluginbasic regex knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Focus on the file packages/jss plugin nested/src/index.js. The bug is that the regex /&/g replaces all occurrences of &, including those inside attribute selectors. The proposed fix is to change the regex to /(?:^|[^&])&(?:[^&]|$)/g to allow escaping with &&. Investigate existing tests for the nested plugin and ensure that the fix does not break escaping in other contexts. Check if there are any recent comments or PRs that address this issue.