Re: CSS Variables and GSS

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

Colin Alworth schrieb am Donnerstag, 7. November 2024 um 23:02:14 UTC+1:

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.

On Thursday, November 7, 2024 at 3:51:42 PM UTC-6 Jens wrote:

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.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/5de43693-c675-4f9b-8da7-07e99bc150bdn%40googlegroups.com.