CSS Variables and GSS

[max.d...@corussoft.de]

Hello Folks.

It's tricky so far to find anything regarding this topic. It's alwas about GWT CSS Konstants and such. So I hope I don't open an existing topic.

I wanted to start using CSS Variables (the real deal). Turns out the GSS compile doesn't like the syntax. Did I miss something, or is that just not supported yet. And if so, will it be and when?

[Jens]

GWT itself uses a version of Google Closure Stylesheets library internally to support CSS 3 features. GWT updates this library from time to time to support more CSS 3 features and it looks like CSS variables are not yet available in Google Closure Stylesheets: https://github.com/google/closure-stylesheets/pull/121

For now you have to stick with closure stylesheets variables: https://github.com/google/closure-stylesheets#variables

-- J.

[max.d...@corussoft.de]

Thx for the reply. https://github.com/google/closure-stylesheets/pull/121/commits/7c99519b6726a2bcdb9458d4dc352e8722f50178 

It seems there are at least some contribution in this regard :)

[David Nouls]

Reviving an old thread ... 

I need to use CSS variables to override some styling in bootstrap in one of my screens. 

But it seems that the CSS variable support in closure stylesheets was never finished (and closure stylesheets seems dead)

Should we assume that CssResources and GSS are deprecated and stop using them? Many JS UI components start using CSS variables to allow for customisations.

What are my options? Go for something external to style my GWT application? But then I lose the benefits of the obfuscation and optimisations that are done by GWT.

[Frank]

We just stopped using CssResouce and GSS and are using normal CSS in our new projects.
In the old projects we are using both, or refactoring to CSS.

This due to that it indeed seems dead and causes more problems than it solves.

Op woensdag 6 november 2024 om 14:29:35 UTC+1 schreef David Nouls:

[Jens]

Should we assume that CssResources and GSS are deprecated and stop using them? Many JS UI components start using CSS variables to allow for customisations.

What are my options? Go for something external to style my GWT application? But then I lose the benefits of the obfuscation and optimisations that are done by GWT.

GWT uses a GSS library released in 2015 but the latest one is 1.5 released in 2017. The latest one does have basic support for CSS variables, see: https://github.com/google/closure-stylesheets/commit/27a94e215b9822f23618b218e143ee03ac85b7e2

The library should be upgraded in GWT SDK.

For now, it kind of depends on what exactly you need to do but in UiBinder you might be able to use a wrapper element and add the variable overrides to it, e.g.

<div style="display: contents; --bs-table-color: black;">

  <my:BootstrapComponent/>

</div>

The "display: contents;" rule ensures that the added element does not change the layout by removing it from the box model. However the added element effects the CSS child combinator, so you have to account for the added element: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator

I am not sure if UiBinder supports unknown elements but Svelte for example uses a custom HTML element named <svelte-css-wrapper> to make it more unlikely to accidentally hit a CSS rule targeting "div".

As a last resort you can likely set CSS variables programatically using Element.getStyle().setProperty() as it does not run through any kind of CSS parser or you use a plain CSS file and plain CSS classes.

For global theming of Bootstrap I would just create a plain CSS file and add all the variable overrides, just like you would do in any other page.

-- J.

[Colin Alworth]

We do have at ticket for this, last replied to by Jens as it happens: https://github.com/gwtproject/gwt/issues/9053

https://github.com/css4j/css4j was also recently suggested in gitter as a possible replacement, but no one has done the research yet if it would be able to support compile-time operations like CssResource (and closure-stylesheets) were originally made for.

There's also the issue that our current strategies make it difficult for CSP, unless we exclude runtime values.

[Jens]

I have created a new dedicated issue to upgrade GSS to latest: https://github.com/gwtproject/gwt/issues/10036

[Moshe]

We used CSS variables to create dark/light themes that can be change at runtime by the user. 

First I define a GSS variable: 

@def FONT_COLOR_PRIMARY eval("\"var(--theme-text-primary)\"")

Then I use FONT_COLOR_PRIMARY  in some style in GSS:

.textPrimary {

    color: FONT_COLOR_PRIMARY;

}

The actual value is defined in a CSS file I import into the main HTML page:

:root, :root[theme=light] {

     --theme-text-primary: #333333;

}

:root[theme=dark] {

     --theme-text-primary: #fcfcfc;

}