highlightjs / highlightjs/highlight.js

(CSS) preserve-3d gets highlighted incorrectly

Open Beginner friendly
#4,531 1 comment 0 reactions 0 assignees View on GitHub
bug help welcome language
Dominant language
JavaScript
Stars
25k
Forks
3.8k
Avg merge
11h 35m
Merged PRs (30d)
3

Description

**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**
```css
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.

Contributor guide

Open the contributing guide

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.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.