Brainstorming: How to provide values to CSS properties?

Development
1

Hello!

Context

With @MichaelHamann we had a discussion on a pull request at XWIKI-23080: Make LESS customizations impact CSS properties by Sereza7 · Pull Request #4037 · xwiki/xwiki-platform · GitHub and I think it’d be interesting to make more people in the community aware of it so we can reach a meaningful consensus.

Subject

AFAIK, there are two ways to provide values for CSS variables:

  1. A hard coded default
  2. Retrieve the value from an older system of values (LESS variables or Flamingo colorthemes)

The first option (1.) is currently implemented. (2.) is already implemented for flamingo colorthemes. The point of XWIKI-23080: Make LESS customizations impact CSS properties by Sereza7 · Pull Request #4037 · xwiki/xwiki-platform · GitHub is to implement (2.) for LESS variables (more generic than just the few ones that have a UI in flamingo colorthemes).

We want to implement (2.) in order to make sure that whatever the customizations on LESS variables are, those customizations will also impact the value of CSS variables.

Implementing (2.) also means that in most cases, most of the hard-coded value implemented in (1.) will be overridden.

Is it still important to keep (1.)?

Main CON: Since (1.) is hard coded, it comes with a maintainability challenge. Making sure the CSS defaults hard-coded in (1.) stay the same as their equivalent in LESS is an additional constraint when updating styles on XWiki standard.
Main PRO: (1.) makes sure the CSS variable system stays somewhat functional even if the LESS variable system is down. This is a safety handle and a way to avoid correlating too much our new CSS system with the LESS variables.

Sidenote: The impact on performance of adding 50-100 CSS variable declarations to LESS is negligible.

Opinion

I think the PROS outweight the CONS and we should keep (1.). I detailed my points on the PR, feel free to go and check it out if you want more info about this discussion :slight_smile:

Conclusion

Do you think we should keep hard-coding values for CSS variables that can retrieve a value from their LESS equivalent? Is there any PRO or CON we didn’t think of when debating this subject so far? Is there a third way to provide values for CSS variables that we somehow missed?

Thank you for your interest in this topic!
I’m looking forward to your participation in the brainstorming :slight_smile:

Lucas C.

2

Hi @CharpentierLucas,

I suppose it’s not possible to initialize the (default) Bootstrap LESS variables from the CSS variables you have defined, right? The LESS (server-side) compiler doesn’t know about CSS variables? Or maybe it’s because some values can’t be computed server-side?

Thanks,
Marius

1 Like
3

Yeah, the LESS compiler doesn’t know about the CSS variables. It was made when CSS variables were not yet usable and it’s not even compatible with their syntax without escaping.

For LESS, AFAIK, everything is compiled server-side.

It’s not possible to initialize default LESS variables from the CSS variables per se, but we could reuse the lists we use to initialize CSS variables to initialize the LESS ones. See xwiki-platform/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/variablelist.vm at XWIKI-23029 · Sereza7/xwiki-platform · GitHub This would solve the issue that we’d get two places to update when making a change to default values (all default values from LESS and CSS would come from this list).

Doing this would mean updating all the LESS variable declarations in variables.less (the one from flamingo and the one from bootstrap). It’s a good idea, we have the PROs without the main CON. Thanks!

1 Like