Missing CSS for LumoUtility Classes

Flow
1

Hi everyone,

I’m trying to use the LumoUtility class . I’m running into an issue where the utility class names are correctly added to the element, but the corresponding CSS rules are not applied.

I’m trying the example provided in docs

Span errorMsg = new Span("Error");
errorMsg.addClassNames(
  LumoUtility.TextColor.ERROR,
  LumoUtility.Padding.SMALL,
  LumoUtility.Background.BASE,
  LumoUtility.BoxShadow.XSMALL,
  LumoUtility.BorderRadius.LARGE
);

inspecting this element shows

<span class="text-error p-s bg-base shadow-xs rounded-l">Error</span>

However, the CSS for these class names is not available.

theme.json had utility included by default.

{
  "lumoImports" : [ "typography", "color", "spacing", "badge", "utility" ]
}

Is there something I am missing ?

2

You’re probably missing including the utility classes, as they’re not loaded by default: Utility classes in Vaadin Lumo for responsive design

3

as I mentioned before it is included.

I downloaded a starter, the css is included there.

Did spot these differences between my project and the starter.

SS_OLD

SS_STARTER

4

D’oh, sorry, how I did miss that you already mentioned it? :sweat:

Anyhoo, I don’t recall if the utility classes are included in the precompiled frontend bundle, so you might need to switch on hotdeploy to ensure it gets included: How to configure development mode in Vaadin

5

I tried setting vaadin.frontend.hotdeploy=true. Since we are using dynamically configured theme folder (instead of the @Theme annotation), we get the following error:


GET [https://localhost:9093/themes/app-theme/styles.css](https://localhost:9093/themes/app-theme/styles.css)
NS\_ERROR\_CORRUPTED\_CONTENT

The resource from “[https://localhost:9093/themes/app-theme/styles.css”](https://localhost:9093/themes/app-theme/styles.css”) was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).

We’re assigning the theme dynamically like this, not with the @Theme annotation in the main class:

@Value("${app.theme.folder}")
private String themeFolderName;

@Override
public void configurePage(AppShellSettings settings) {
    settings.addLink("stylesheet", "themes/" + themeFolderName + "/styles.css");
    LOGGER.info("Using theme: {}", themeFolderName);
}

Using @Theme fixes the utility CSS issue.
Also, removing the dynamic theme folder setting allows vaadin.frontend.hotdeploy to work fine.

So it seems the our dynamic theme setup and hot deploy combination leads to the MIME type error.

Thanks!

6

Ah, yes, the utility include in theme.json would have no effect if the theme folder is not applied with @Theme, as theme.json is not even read in that case.

Coincidentally, that problem will go away in V25, as theme.json is deprecated and the utility classes will instead be loaded as a normal css @import.

1 Like