Manual import not working for Lumo Utility

[gigi]

Description of the bug

Hi! Tried to import Lumo Utilities as described here: https://vaadin.com/docs/latest/ds/foundation/utility-classes/#usage

@JsModule("@vaadin/vaadin-lumo-styles/utility.js")
@CssImport(value="some-stylesheet.css", include="lumo-utility")

It seems that only theme.json approach works. Maybe we have to enable or whitelist something?

Expected behavior

Manual import should import styles to the DOM

Minimal reproducible example

Used this starter https://github.com/vaadin/skeleton-starter-flow-spring

@Route
@JsModule("@vaadin/vaadin-lumo-styles/utility.js")
@CssImport(value="./styles/shared-styles.css", include="lumo-utility")
public class MainView extends VerticalLayout {

    public MainView() {

        Div block1 = new Div();
        block1.setText("Class");
        block1.setWidth("100px");
        block1.setHeight("100px");
        block1.addClassName("bg-success");

        Div block2 = new Div();
        block2.setText("Inline");
        block2.setWidth("100px");
        block2.setHeight("100px");
        block2.getStyle().set("background","var(--lumo-success-color)");

        add(block1, block2);
    }
}

Versions

• Vaadin / Flow version: 22.0.15, 23.0.8, 23.1.0.beta1
• Java version: 17.0.2
• OS version: MacOS 12.3.1
• Browser version (if applicable): Chrome 101.0.4951.54
• Application Server (if applicable): Embedded tomcat
• IDE (if applicable): IntelliJ IDEA 2021.3.3

[mcollovati]

Thanks for reporting. I can reproduce and confirm the issue

[lamemind-ud]

Hello, is there any working workaround for this? Thanks

[kristofmaar]

Hello, is there any working workaround for this? Thanks

Yes, you can create your own theme and add

{
  "lumoImports": ["utility"]
}

to the theme.json file.

[mvysny]

With Material theme, it's not possible to have custom themes, and therefore you're forced to use the @CssImport hack which doesn't work. I mean sure, it can't be expected that LumoUtility works outside of Lumo theme, but still :)