(css) not all valid attributes are supported (svg related)

[velara3]

Describe the issue The property names in a block of CSS do not appear to get highlighting

Which language seems to have the issue? CSS. The container has language

Are you using highlight or highlightAuto? I am using hljs.hightlight();

var cssValue = hljs.highlight(cssOutput, {language: 'css'}).value;

Sample Code to Reproduce

// does not highlight any of the property names in the id selector block //

#Rectangle_1_p {
    fill: rgba(255,101,101,1);
    stroke: rgba(112,112,112,1);
    stroke-width: 1px;
    stroke-linejoin: miter;
    stroke-linecap: butt;
    stroke-miterlimit: 4;
    shape-rendering: auto;
}
.Rectangle_1_p {
    position: absolute;
    overflow: visible;
    width: 212px;
    height: 119px;
    left: 26px;
    top: 47px;
}

The property names in the class selector are highlighted but the property names in the ID selector are not.

Expected behavior Property names to be highlighted

Screenshot:

[joshgoebel]

Related: #3484

Nothing to do with the selectors, trying putting all the rules inside a simple body rule, the problem is our list of CSS properties simply isn't exhaustive (and some question of whether it should be).

I thought we had an open issue on this (gaps in CSS support), but I can't find it now.

I guess since CSS (all alone) is only 3.8kb (minified) that we technically have room for more here... Should largely be a matter of updating the array of attributes or perhaps creating a new SVG attributes array (if they are so special) and then merging them at runtime... It's looks like that seems to be kind of the problem area...

Would you be willing to work on a PR that adds SVG related attributes?

[velara3]

I can take a look at it. Can you direct me to the file to be modified?

On Tue, Aug 30, 2022 at 4:50 PM Josh Goebel @.***> wrote:

Related: #3484 https://github.com/highlightjs/highlight.js/pull/3484

Nothing to do with the selectors, trying putting all the rules inside a simple body rule, the problem is our list of CSS properties simply isn't exhaustive (and some question of whether it should be).

I thought we had an open issue on this (gaps in CSS support), but I can't find it now.

I guess since CSS (all alone) is only 3.8kb (minified) that we technically have room for more here... It's looks like that seems to be kind of the problem area... Should largely be a matter of updating the array of attributes or perhaps creating a new SVG attributes array (if they are so special) and then merging them at runtime...

Would you be willing to work on a PR that adds SVG related attributes?

— Reply to this email directly, view it on GitHub https://github.com/highlightjs/highlight.js/issues/3606#issuecomment-1232153714, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAIIVX3SAQZBXARBRLOCVP3V3ZXZPANCNFSM6AAAAAAQAVH6MY . You are receiving this because you authored the thread.Message ID: @.***>

[joshgoebel]

Look at css and css-shared. You might want to read our build docs and find our developer tool in /tools/ (requires a browser build)

[Denyweeeed]

...

[MohamedAli00949]

Hi there, I have read the code base and can work on this issue, please assign it to me.

[joshgoebel]

We don't really assign issues, but feel free to submit a PR and we're happy to have a look.

[joshgoebel]

Is this closed by #3893? If not, please let us know.