Support for css variables in RCSS

[Illation]

Hi, what would it take to support CSS Variables?

They where mentioned in #22 a few years ago, but I don't believe there ever was any follow up.

I'm working on writing a tool framework for my engine on top of RmlUi, so there will be lots of different UI elements that should ideally have a consistent appearance, and I imagine all the different colours will get confusing and hard to keep track of very quickly.

At a minimum just the ability to make variables for colours in a global context would be sufficient for me, although long term it would be fantastic if they supported lengths and played well with media queries or could otherwise be controlled from c++ as well to support theming.

I'm happy to look into this myself if I'm pointed in the right direction and the scope of change isn't too huge

[mikke89]

Hey, and thanks for the suggestion.

There was actually a serious effort into implementing this here: #388. I am still very much interested in it if we can solve the performance issues. I think it's a very good start already, and if you feel like having a go at improving it, then I would very much encourage that :) Let me know if I can assist in any way.

[Dakror]

Good luck.

[JailbreakPapa]

@mikke89 Curious, what mainly was the blocker for @Dakror PR for properties in-terms of performance? Was it just purely evaluating the css that was taking a while? I plan to take a look at this for a private fork.

[Dakror]

I guess the additional indirections and recomputation of styles based on variable changes. You could always just checkout the code in the PR and benchmark it yourself.

[mikke89]

Right, there are some numbers here: #388 (comment), and here: #388 (comment).

[JailbreakPapa]

I guess the additional indirections and recomputation of styles based on variable changes. You could always just checkout the code in the PR and benchmark it yourself.

@Dakror did your css-variables branch handle hex based colors? im "attempting" to take a go at the feature, but colors seem very broken.

For example this CSS would attempt to convert the variable to the color, but end up failing and resort to all black:

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}

body { background-color: var(--blue); }

[Dakror]

I guess the additional indirections and recomputation of styles based on variable changes. You could always just checkout the code in the PR and benchmark it yourself.

@Dakror did your css-variables branch handle hex based colors? im "attempting" to take a go at the feature, but colors seem very broken.

For example this CSS would attempt to convert the variable to the color, but end up failing and resort to all black:

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}

body { background-color: var(--blue); }

I don't remember, but you could just simply checkout the PR branch and try it out yourself. I ended up writing my own preprocessor to not rely on these modifications to the RmlUi Core.