Re: CSS Variables and GSS

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/4e5624f8-0d4f-4abd-b34f-59b5fd45c686n%40googlegroups.com.