we've used Vaadin 14.5 and the @CssImport for custom CSS worked fine.
Now we wanted to update but since 14.6 the @CssImport doesn't load the custom CSS anymore.
We have the following Maven structure:
- app-1, -2... : the apps that have common code and style
- shared : all the code and style we share between our apps
|
+- src/main/java/our/package/AbstractUI.java
|
- src/main/resources/META-INF/resources/frontend/
|
+- css
|
+-styles.css
|
- vaadin-vertical-layout.css
In the shared artifact we have several custom CSS files for Vaadin components, where we address the CSS that has to be adjusted in the shadow DOMs:
vaadin-vertical-layout.css
/* Page */
:host(.Page) {
left: 64px;
padding-top: 2em;
position: absolute;
transition: all 0.5s ease;
width: calc(100% - 64px);
}
And then we load all these custom CSS in the class AbstractUI, that is the super class for all the other UI classes:
@StyleSheet("./css/styles.css")
...
@CssImport(value = "./css/vaadin-vertical-layout.css", themeFor = "vaadin-vertical-layout")
@Theme(value = Material.class, variant = Material.LIGHT)
public abstract class AbstractUI extends VerticalLayout {
The apps then don't have to bother with all the annotations and can simply extend AbstractUI and the CSS is loaded and added to the existing shadow DOM CSS.
That worked fine with Vaadin 14 up to 14.5.5, but after 14.6.0 the custom CSS is no longer loaded. The vaadin-maven-plugin does check for the existence of the CSS files when building the frontend (and quits with an error if they aren't there), but in the application
the CSS just isn't loaded.
To clarify: the @StyleSheet annotation still works, so that CSS is loaded.
Is this a bug in Vaadin or do we miss some critical information?
The critical information missing was a Vaadin webcomponent named "TinyMCE for Flow" that was the reason for this behavior. Don't know why it broke so much. The solution was to update it to the newest version (3.1.1).