Support CSS variables

[geoffrey-eisenbarth]

Discussion on the discord seemed to support this idea (with support from Carson), using the following syntax:

set --variable to value

[1cg]

looks doable, but a little hacky:

https://stackoverflow.com/questions/41370741/how-do-i-edit-a-css-variable-using-js

[geoffrey-eisenbarth]

I would like to take a stab at a PR for this, but it might be post NYE before I can get to it.

[1cg]

Seems like it should support scoping of some kind:

https://blog.logrocket.com/css-variables-scoping/

[1cg]

maybe

  set --variable of :root to value

to do this we'll likely need to change the lexer to recognize a double dash followed by an alpha as a single token of a new type, and then make it act like a property.

We should also add :root to the hyperscript zoo so that will work as a property reference w/o messing w/ the parser.

[1cg]

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

[iocouto]

Just a quick note to ask that when/if this implemented, please look at scoping quite carefully, as it is definitely important and used by a lot of frameworks and site building tools. So it would be great to have something like:

set my --current-opacity to 0.5

..as well as syntax like:

get #score-card’s --highlight-color
increment --display-size of the closest parent by 2
set the --sel-focus of  <li.selected> in me to ‘#ffff55’

…rather than just setting custom variables at the root only.

[ironystock]

I mean, I hate to suggest something so rudimentary, but given the risk of blowing frameworks up, and that it's not implemented (yet? maybe? hopefully?), why not just prefix (effectively namespace them) all hs-handled variables as a default behavior with an unsafe config option (or just allowing a blank prefix)? Hell, with this method you could de-junk the syntax and remove the -- (although I hear using $ as a variable indicator is pretty cool)

set --userspace to 1
or
set userspace to 1

:root {--hs-userspace: 1;}

I don't disagree that the default master ignoring scoping would create some absolutely enormous rabbit holes, but requiring it to be microlocally scoped feels like it would be easier to do outside of hs.

[iocouto]

@ironystock I see it more as an extension of the *property syntax - i.e., we should be able to use *--custom-prop, because that is how we handle all other CSS properties. And in terms of scoping, that is how CSS custom properties should work, too.

   set my *background-color to ‘red’
   set my *--custom-color to ‘white’

Whatever we’re doing to make one work, should work with the other, right?

[ironystock]

Agreed @iocouto -- now if anything approaching a standard interop pattern was laid down, we'd have a good place to start; this is what I meant by "default master"; everyone's going to want to do completely different things with completely different assumptions and -- aside from us monoliths -- get into Weird™ territory.

Just saw your edit and it tingled a little part of my lizard brain and realized you're on the comment issue thread. If I wasn't in the middle of trying to faithfully emulate a dot matrix display in CSS right now (don't ask, I don't have a good answer) I would dive in and verify if the comment thing is the true problem with things right now. If none of the appropriate folks dive in by tomorrow AM, I'll dive in.