Parameterized pseudo-classes break selector highlighting in SCSS
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13k
- Forks
- 1.4k
- Avg merge
- 15h 36m
- Merged PRs (30d)
- 3
Description
Information:
- Prism version: 1.29.0
- Plugins: none
- Environment: Browser
Description
SCSS selectors that include parenthesized pseudo-classes are not highlighted as selectors.
Note that CSS does not have this issue.
Example
Triggers the bug:
foo :foo() bar {
}
Does not trigger the bug:
foo :foo bar {
}
Workaround
This appears to fix it in my setup (simply removing () from [^@;{}()\s], but not sure whether it breaks something else (@golmote any idea why that avoids parens?):
Prism.languages.scss.selector.pattern = /(?=\S)[^@;{}()]?(?:[^@;{}\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/;
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the Prism.languages.scss.selector.pattern entry point and reproduce the two SCSS examples in a browser. Adjust the SCSS selector handling so parenthesized pseudo-classes are highlighted as selectors while plain pseudo-classes continue to work, then verify both examples against the reported behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, scss
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100