CODEWITHSUNDEEP
vaadinvaadin-flow
Franz
Franz

Reputation: 51

Vaadin upgrade from 14 to 23, where to put @CssImport

I used the Vaadin 14 business starter app which appears to have been discontinued in Vaadin 23. This app put custom CSS under the MainLayout:

@CssImport(value = "./styles/components/charts.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")
@CssImport(value = "./styles/components/floating-action-button.css", themeFor = "vaadin-button")
@CssImport(value = "./styles/components/grid.css", themeFor = "vaadin-grid")
@CssImport("./styles/lumo/border-radius.css")
@CssImport("./styles/lumo/icon-size.css")
@CssImport("./styles/lumo/margin.css")
@CssImport("./styles/lumo/padding.css")
@CssImport("./styles/lumo/shadow.css")
@CssImport("./styles/lumo/spacing.css")
@CssImport("./styles/lumo/typography.css")
@CssImport("./styles/misc/box-shadow-borders.css")
@CssImport(value = "./styles/styles.css", include = "lumo-badge")
@JsModule("@vaadin/vaadin-lumo-styles/badge")

Does this stay here or does it move to AppConfig along with the @PWA and other annotations. I ask because the CSS styling is broken on the menu and doesn't seem to change wither it is on MainLayout or AppConfig.

Any ideas? Is this a styling incompatibility between 14 and 23, or have the requirements on where to place the @CssImport changed?

Has anyone else successfully ported the discontinued business starter app from 14 to 23?

Some help from the Vaadin folk would be appreciated as this business starter app was a explicitly marketed benefit to getting a Pro subscription and now appears to have been dropped.

Upvotes: 1

Views: 697

Answers (2)

user17374553
user17374553

Reputation:

There's a migration manual for @CssImport at https://vaadin.com/docs/latest/upgrading/recommended-changes in chapter "Refactor Styles to a Custom Theme Folder".

But there are two things to consider (despite it is named "Recommended Changes")...:

  1. The "Style Loading Order" may be different than before, have a look at the list in https://vaadin.com/docs/latest/ds/customization/custom-theme/#style-loading-order
  2. Migrating your CSS to Vaadin 23 is not just exchanging an annotation. You have to do a lot more, have a look at https://vaadin.com/docs/latest/upgrading/essential-steps/#update-your-css
  3. Wrongly sized icons: have a look here: Vaadin migration 14 to 23: icons have different size (viewbox wrong?)

Upvotes: 1

Jouni
Jouni

Reputation: 2918

The currently recommended way is to use the custom theme folder (for example, frontend/themes/mytheme), and place your style sheets there. Then use the @Theme("mytheme") annotation to choose that theme.

The ./styles/styles.css file should likely be the main theme style sheet (frontend/themes/mytheme/styles.css). All other @CssImports without a themeFor attribute can be on the same folder, and imported in the main style sheet with the standard CSS @import.

But, since Vaadin 23 now has the Lumo utility classes built-in, you might not need those additional style sheets (for example, margin.css). Though, the CSS class names they define might not be 1:1 with the newer utility classes.

Any @CssImports with the themeFor attribute should be placed in the “special” components folder, where each file name corresponds to a component tag name (for example, frontend/themes/my-theme/components/vaadin-chart.css).

Upvotes: 2

Related Questions