(CSS) custom property `--_margin-top: 1rem`, `top` gets wrongly highlighted

[miragecraft]

Describe the issue

In CSS, custom property such as --_margin-top: 1rem, top gets wrongly highlighted

It seems to be caused by some kind of interaction between the underscore and hyphen.

Which language seems to have the issue?

CSS, I'm using language="css" and NOT using auto-detect.

Sample Code to Reproduce

.example {
    --_margin-top: 1rem;
}

Expected behavior

--_margin-top should be treated as an atomic unit of text for highlighting purposes.

[joshgoebel]

- is a word boundary (\b), so the rule matches:

      {
        scope: 'attribute',
        match: '\\b(' + css.ATTRIBUTES.join('|') + ')\\b'
      },

One fix here might be to use a multi-matcher. (example: https://highlightjs.readthedocs.io/en/latest/mode-reference.html#beginscope). You'd first match \s (with no scope) and then match the attribute... that's the closest we can currently get to a look-behind, which we don't support yet because Safari is still slow to that party.

Once we could use lookbehind you'd just do a lookbehind for "not space" instead of \b...

A PR would be welcome here if you hav time.

[Harsh3363]

Hi @joshgoebel I would like to solve this issue please assign this to me

[joshgoebel]

We don't usually do assignments, but I don't think anyone is rushing to complete this before you do. Happy to see a PR if you contribute one.

[SamiKamal]

I think this should be closed as it was solved in #3863

[miragecraft]

Looks like it's fixed in the official site's demo.