enh(css-like) custom attributes should highlight as `attr`, including the `--`

Hello and thanks for this amazing library! I am using it for my blog to highlight code snippets, and recently I used CSS highlighting on a code example which included CSS variables.

More specifically I have this case:

/* default context vars */
body {
  --color: black;
  --background-color: lightgrey;
}

/* dark theme context vars */
body.dark {
  --color: lightgrey;
  --background-color: black;
}

/* selector with styles using vars */
main {
  color: var(--color);
  background-color: var(--background-color);
  transition: background-color 0.2s ease-in-out;
}

The output looks like this:

Normally, I would expect that the prefixing -- of the variables would have been handled as part of the attribute.

I am thinking of forking this repo to introduce a PR addressing this issue. What do you think?

[joshgoebel]

Since var is already highlighted (as a function like thingy) and pops I’m inclined to say it can remain unhighlighted (as GitHub is doing) rather than highlighting both var and the name.

So what I think needs to happen here:

• Scope of PR is reduced to just fixing the highlighting issue with --custom-property, now highlighting the -- as well… and doing so as attr vs attribute.
• This change needs to be applied to SCSS, Stylus, and Less grammars also as originally mentioned.
  • See tools/css and the css_consistency markup tests
  • Only a single small example need to added.

[allejo]

Declaring a custom property is done using a custom property name that begins with a double hyphen (--)

According to MDN docs, it sounds to me like -- along with the name is the custom property; it’s not that -- is separate from the property name. Based off that, I think --my-variable should be highlighted as a single entity (e.g. “variable”) in a ruleset and inside of a var() call.

Considering that these are “custom properties”, they’re no different from any other CSS property. So I think they should be highlighted with the same class name and have an additional class like variable or custom-property or whatever if themes want to opt-in to changing their colors.