CSS selectors with inline comments are not tokenised/highlighted correctly
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, Node
Description
Sometimes when writing documentation, I will place short comments inside or alongside complex CSS selectors, so that I can write a comment explaining the parts of the selector elsewhere in the file.
However, PrismJS seems to 'split' the selector on these comments, and will only tokenise and highlight the final part of the selector. This is unexpected as the CSS is valid.
Perhaps this should be added to the known failures in the interim?
Example
A sample of the code I'm using:
/**
* Supported CAPTCHAs:
* (1) Google reCAPTCHA
* (2) hCaptcha
* (3) Cloudflare Turnstile
* (4) Microsoft CAPTCHA
*/
/* 1 */ #recaptcha-anchor-label,
/* 2 */ body > div#anchor > div.label-container > label-td > label-tc > div#label,
/* 3 */ #cf-stage #challenge-stage .ctp-label,
/* 4 */ #root > .box > .box > p[data-theme="home.instructions"] {
font-size: 0 !important;
line-height: 0 !important;
}
How it renders on the test drive page:
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 reproducing the supplied CSS example on Prism's test drive page and inspect the CSS language grammar responsible for selector tokenisation. The issue is resolved when selectors containing inline comments are tokenised and highlighted correctly without splitting the selector unexpectedly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- devtools
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100