Some Lumo stylesheets are imported even with `@NoTheme`

oliveryasuna commented 1 year ago

Description of the bug

This issue stems from multiple repositories, so I thought I would report it here.

Even with @NoTheme, some Lumo stylesheets are imported to the page.

The following components seemingly import the wrong module with @JsModule:

Icon – @vaadin/icon/vaadin-icon.js should be @vaadin/icon/src/vaadin-icon.js.
Scroller – @vaadin/scroller/vaadin-scroller.js should be @vaadin/scroller/src/vaadin-scroller.js.
VirtualList – @vaadin/virtual-list/vaadin-virtual-list.js should be @vaadin/virtual-list/src/vaadin-virtual-list.js.

The former modules always import their respective Lumo themes, e.g., https://github.com/vaadin/web-components/blob/24.0/packages/icon/vaadin-icon.js.

The same issue is present in https://github.com/vaadin/flow-components/blob/main/vaadin-flow-components-shared-parent/vaadin-flow-components-base/src/main/resources/META-INF/resources/frontend/tooltip.ts. The import should be from @vaadin/tooltip/src/tooltip.js.

My workaround is to override AbstractUpdateImports on the classpath to modify the lines written to generated-flow-imports.js. Obviously, it is messy to override a library's file on the classpath.

Expected behavior

No Lumo theme stylesheets are included when @NoTheme is present. Therefore, there should be no CSS properties on html starting with --lumo except font icons (e.g., --lumo-icons-align-center.

Minimal reproducible example

Download the starter app.
Replace @Theme with @NoTheme on Application.
Run and open in your browser.
Use DevTools to find Lumo stylesheets and properties.

Versions

Vaadin / Flow version: 24.0.0

Note: This may be an issue for older versions of Vaadin, but I have not checked.

mshabarov commented 1 year ago

@oliveryasuna thank you for this issue! Please try to run your V24.0 application with vaadin.frontend.hotdeploy=true option to enable old dev mode with Vite dev server (while this is being fixed). This issue might be limited to a new dev mode with dev bundle.

oliveryasuna commented 1 year ago

@mshabarov Thanks for the tip. I forgot to mention that I have hotdeploy enabled. No dev bundle.

vaadin-miki commented 1 month ago

something similar happenes in 24.5.0, having one view (that extends VerticalLayout) and one implementation of AppShellConfigurator annotated with @NoTheme results in styles with ids lumo-typography-props, lumo-style-props, lumo-sizing-props, lumo-font-icons, lumo-color-props and lumo-spacing-props being added to head (with files coming from vaadin-lumo-styles)

not sure if that is related, though I would expect @NoTheme to actually not import any theme files

sissbruecker commented 1 month ago

@vaadin-miki Can you please create a new issue with a reproduction?

vaadin / flow