ColorHighlighter icon indicating copy to clipboard operation
ColorHighlighter copied to clipboard

Add support for CSS variables

Open thematho opened this issue 10 years ago • 4 comments

It would be great if CSS variables support is added i don't known if this is possible. E.G.

:root {
  --my-color: #a6c776; // This color code is highlighted properly
}
.element {
  background: var(--my-color); // --my-color variable should be highlighted using the color #a6c776
}

The W3 specification is not stable yet, however the draft hasn't change since 6 May 2014 and We can start using this feature with polyfills like Myth.io

thematho avatar Oct 05 '15 12:10 thematho

I was just gonna open a ticket for this. Adding this would be a great win.

marioestrada avatar Oct 05 '15 22:10 marioestrada

Yepp, still want this. And perhaps .html as another default file format, considering CSS can be inlined in html ;)

Torxed avatar Nov 19 '17 19:11 Torxed

This is seriously hard. Way harder than any preprocessor variables because they're global, which is easy. CSS varables are cascaded, so just parsing is not enough, CH would need a full blown styling engine to understand variables.

Monnoroch avatar Nov 19 '17 19:11 Monnoroch

I wouldn't even be sad if it just did..

color_vars = {}
for row in code:
    var = find_var(row)
    if var and var not in color_vars:
        color_vars[var] = var.color

First row first served, because 90% of any CSS code will put the color variables in :root { }, usually in the top. And if it's not found, no big deal. Just anything is better than nothing atm.

Torxed avatar Nov 19 '17 20:11 Torxed