cssinjs/jss

Nested selectors are loosing dollar sign

Open

#1,116 opened on Jun 9, 2019

View on GitHub
 (4 comments) (1 reaction) (0 assignees)JavaScript (7,000 stars) (434 forks)batch import
bughelp wanted

Description

Expected behavior: Normal selector nesting

Describe the bug: When nesting a selector with a dollar sign, it disappears

Codesandbox link: https://codesandbox.io/s/react-jss-playground-j9toj

There I've just added:

    "& h1": {
      color: "red"
    }

And changed Comp to Comp$1

And look at the <style>:

.Comp\$1-wrapper-0-1-13 {
  padding: 40px;
  background: #f7df1e;
  text-align: left;
}
.Comp\1-wrapper-0-1-13 h1 {
  color: red;
}

Versions:

  • react-jss: 8.6.1
  • Browser: Safari 12.1.2
  • OS: macOS 10.14.6

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
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.
clear
Prerequisites
None
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The bug occurs when a class name containing a dollar sign (e.g., Comp$1) is used in nested selectors; the dollar sign is dropped in the output CSS. To fix, examine JSS's selector processing logic, likely in files like `src/plugins/functions.js` or `src/plugins/rules function.js`, where class names are transformed. The codesandbox demonstrates the issue with a simple example. Look at how JSS escapes special characters and ensure dollar signs are preserved in nested contexts.