PrismJS / PrismJS/prism

CSS selectors with inline comments are not tokenised/highlighted correctly

Open
#3,676 0 comments 0 reactions 0 assignees View on GitHub

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:

image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.