(CSS) preserve-3d gets highlighted incorrectly

Open Beginner friendly
#4,531 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
css
Domain
tooling

Research direction

Start with the CSS language definition and reproduce the issue using the supplied transform-style: preserve-3d snippet with highlight. Compare the generated highlighting with the expected result, then verify that preserve-3d remains uniformly colored while cases such as f00-b4r are unchanged.

Written by the indexing model from the issue text.

Description

bug help welcome language

Describe the issue
The transform-style: preserve-3d keyword gets highlighted incorrectly, turning the number 3 into a different color, presumably due to the -3 part.

Which language seems to have the issue?
css

Are you using highlight or highlightAuto?
highlight

Sample Code to Reproduce

div {
  transform-style: preserve-3d;
}

which hljs highlights into:

Image

Expected behavior
Same as GitHub's highlighting - the preserve-3d part should be the same color.

Additional context
This doesn't repro for values such as f00-b4r, where the number is not directly following a hyphen.

Dominant language
JavaScript
Stars
25k
Forks
3.8k
Avg merge
11h 35m
Merged PRs (30d)
3

Contributor guide

Open the contributing guide

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.

More from highlightjs/highlight.js

All issues in highlightjs/highlight.js

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.