flow
flow copied to clipboard
Manual import not working for Lumo Utility
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);
}
}
![screen1](https://user-images.githubusercontent.com/8811270/167578761-ec3ec1aa-a080-4c81-94dc-7a75e969799a.png)
![screen2](https://user-images.githubusercontent.com/8811270/167578768-10b2d683-4cca-4f38-9a14-18d5f66bb2f7.png)
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
Thanks for reporting. I can reproduce and confirm the issue
Hello, is there any working workaround for this? Thanks
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.
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 :)