fix!: prevent lumo utility classes to be imported automatically (#23074)

Fixes #22467

---------

Co-authored-by: Mikhail Shabarov <[email protected]>

Author: mcollovati

flow-server/src/main/java/com/vaadin/flow/server/frontend/TaskUpdateThemeImport.java

@@ -19,11 +19,16 @@
 import java.io.IOException;
 import java.nio.file.Paths;
 import java.util.Arrays;
+import java.util.HashMap;
+import java.util.HashSet;
 import java.util.List;
+import java.util.Map;
+import java.util.Set;
 import java.util.stream.Collectors;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import tools.jackson.databind.JsonNode;
 
 import com.vaadin.experimental.FeatureFlags;
 import com.vaadin.flow.theme.ThemeDefinition;
@@ -108,6 +113,7 @@ public void execute() throws ExecutionFailedException {
             throw new ExecutionFailedException(
                     "Unable to write theme import file", e);
         }
+        warnAboutLumoImports();
     }
 
     private void verifyThemeDirectoryExistence()
@@ -204,6 +210,46 @@ private List<String> getAppThemePossiblePaths(String themePath) {
                 themePathInStaticResources, themePathInClassPathResources);
     }
 
+    private void warnAboutLumoImports() {
+        Map<String, JsonNode> themeJsonContents = new HashMap<>();
+        ThemeValidationUtil.collectJarPackagedThemes(options,
+                themeJsonContents);
+        String themeName = theme.getName();
+        try {
+            ThemeUtils.getThemeJson(themeName, options.getFrontendDirectory())
+                    .ifPresent(prjTheme -> ThemeValidationUtil
+                            .collectThemeJsonContentsInFrontend(options,
+                                    themeJsonContents, themeName, prjTheme));
+        } catch (IllegalArgumentException ex) {
+            // ignore errors if the theme folder does not exist.
+            // such a case is handled elsewhere
+        }
+
+        // Inspect used theme
+        Set<String> themesWithLumoImport = new HashSet<>();
+        String inspectedThemeName = themeName;
+        while (inspectedThemeName != null
+                && themeJsonContents.containsKey(inspectedThemeName)) {
+            JsonNode themeJson = themeJsonContents.remove(inspectedThemeName);
+            if (themeJson.has("lumoImports")) {
+                themesWithLumoImport.add(inspectedThemeName);
+            }
+            if (themeJson.has("parent")) {
+                inspectedThemeName = themeJson.get("parent").stringValue();
+            } else {
+                inspectedThemeName = null;
+            }
+        }
+        if (!themesWithLumoImport.isEmpty()) {
+            getLogger().warn(
+                    """
+                            The 'lumoImports' property detected in theme(s) '{}' is no longer supported in Vaadin 25. \
+                            All modules except 'utility' are now loaded automatically when extending Lumo theme. \
+                            To load utility classes, add '@StyleSheet(Lumo.UTILITY_STYLESHEET)' annotation to 'AppShellConfigurator' implementor.""",
+                    themesWithLumoImport);
+        }
+    }
+
     Logger getLogger() {
         return LoggerFactory.getLogger(TaskUpdateThemeImport.class);
     }

flow-server/src/main/java/com/vaadin/flow/server/frontend/ThemeValidationUtil.java

@@ -64,12 +64,7 @@ public static boolean themeConfigurationChanged(Options options,
             FrontendDependenciesScanner frontendDependencies) {
         Map<String, JsonNode> themeJsonContents = new HashMap<>();
 
-        if (options.getJarFiles() != null) {
-            options.getJarFiles().stream().filter(File::exists)
-                    .filter(file -> !file.isDirectory())
-                    .forEach(jarFile -> getPackagedThemeJsonContents(jarFile,
-                            themeJsonContents));
-        }
+        collectJarPackagedThemes(options, themeJsonContents);
 
         Optional<String> maybeThemeName = Optional
                 .ofNullable(frontendDependencies.getThemeDefinition())
@@ -133,6 +128,27 @@ public static boolean themeConfigurationChanged(Options options,
         return false;
     }
 
+    /**
+     * Collects packaged themes defined in JAR files based on the provided
+     * options and stores their JSON contents in the given map.
+     *
+     * @param options
+     *            the configuration options that include the list of JAR files
+     *            to scan for packaged theme definitions
+     * @param themeJsonContents
+     *            a map to store the JSON contents of themes found within the
+     *            JAR files, with the theme name as the key
+     */
+    static void collectJarPackagedThemes(Options options,
+            Map<String, JsonNode> themeJsonContents) {
+        if (options.getJarFiles() != null) {
+            options.getJarFiles().stream().filter(File::exists)
+                    .filter(file -> !file.isDirectory())
+                    .forEach(jarFile -> getPackagedThemeJsonContents(jarFile,
+                            themeJsonContents));
+        }
+    }
+
     /**
      * Checks if theme has legacy Shadow DOM stylesheets in
      * {@literal <theme>/components} folder and if their content has changed.
@@ -231,7 +247,22 @@ private static boolean hasNewAssetsOrImports(JsonNode contentsInStats,
                 && (moreThanOneKey || noParentEntry);
     }
 
-    private static void collectThemeJsonContentsInFrontend(Options options,
+    /**
+     * Recursively collects and stores the JSON contents of a theme and its
+     * parent themes (if applicable) from the frontend directory.
+     *
+     * @param options
+     *            the configuration options that include frontend settings, such
+     *            as the frontend directory path
+     * @param themeJsonContents
+     *            a map to store the JSON contents of themes found in the
+     *            frontend directory, using the theme name as the key
+     * @param themeName
+     *            the name of the theme currently being processed
+     * @param themeJson
+     *            the JSON representation of the theme currently being processed
+     */
+    static void collectThemeJsonContentsInFrontend(Options options,
             Map<String, JsonNode> themeJsonContents, String themeName,
             JsonNode themeJson) {
         Optional<String> parentThemeInFrontend = ThemeUtils

flow-server/src/main/resources/plugins/application-theme-plugin/theme-generator.js

@@ -111,11 +111,6 @@ function writeThemeFiles(themeFolder, themeName, themeProperties, options) {
   let filename = basename(styles);
   let variable = camelCase(filename);
 
-  if (themeProperties.lumoImports) {
-    imports.push(`import lumoUtil from '@vaadin/vaadin-lumo-styles/utility.css?inline';\n`);
-    shadowOnlyCss.push(`removers.push(injectGlobalCss(lumoUtil.toString(), '', target));\n    `);
-  }
-
   /* Theme */
   globalFileContent.push(parentThemeGlobalImport);
   if (useDevServerOrInProductionMode) {
@@ -198,16 +193,6 @@ function writeThemeFiles(themeFolder, themeName, themeProperties, options) {
 
   themeFileContent += imports.join('');
 
-  if (themeProperties.lumoImports) {
-    themeFileContent += `if(!document.getElementById("lumoUtil")) {
-      const styleTag = document.createElement('style');
-      styleTag.type = 'text/css';
-      styleTag.id = 'lumoUtil';
-      styleTag.textContent = lumoUtil.toString();
-      document.head.prepend(styleTag);
-    }`;
-  }
-
   // Don't format as the generated file formatting will get wonky!
   // If targets check that we only register the style parts once, checks exist for global css and component css
   const themeFileApply = `

flow-server/src/main/resources/plugins/application-theme-plugin/theme-handle.js

@@ -19,7 +19,7 @@
  * for application theme plugin.
  */
 import { existsSync, readFileSync } from 'fs';
-import { resolve } from 'path';
+import { resolve, basename } from 'path';
 import { writeThemeFiles } from './theme-generator.js';
 import { writeCssFiles } from './css-theme-generator.js';
 import { copyStaticAssets, copyThemeResources } from './theme-copy.js';
@@ -153,7 +153,7 @@ function handleThemes(themeName, themesFolder, options, logger) {
   if (existsSync(themeFolder)) {
     logger.debug('Found theme ', themeName, ' in folder ', themeFolder);
 
-    const themeProperties = getThemeProperties(themeFolder, options);
+    const themeProperties = getThemeProperties(themeFolder, options, logger);
 
     // If theme has parent handle parent theme immediately.
     if (themeProperties.parent) {
@@ -176,7 +176,7 @@ function handleThemes(themeName, themesFolder, options, logger) {
   return false;
 }
 
-function getThemeProperties(themeFolder, options) {
+function getThemeProperties(themeFolder, options, logger) {
   const themePropertyFile = resolve(themeFolder, 'theme.json');
   let outputFolder;
   if (options.javaResourceFolder) {
@@ -205,6 +205,15 @@ function getThemeProperties(themeFolder, options) {
   }
   let themeJson = JSON.parse(themePropertyFileAsString);
   themeJson.autoInjectComponents = componentFeature;
+
+  if (themeJson.lumoImports) {
+    const themeName = basename(themeFolder);
+    logger.warn(
+      `The 'lumoImports' property detected in theme '${themeName}' is no longer supported in Vaadin 25. ` +
+        "All modules except 'utility' are now loaded automatically when extending Lumo theme. " +
+        "To load utility classes, add '@StyleSheet(Lumo.UTILITY_STYLESHEET)' annotation to 'AppShellConfigurator' implementor."
+    );
+  }
   return themeJson;
 }
 

flow-tests/test-legacy-frontend/frontend/themes/app-theme/styles.css

@@ -1,3 +1,4 @@
+@import '@vaadin/vaadin-lumo-styles/utility.css';
 html,
 :host {
   --lumo-primary-text-color: #008000;

flow-tests/test-theme-no-polymer/src/main/frontend/themes/app-theme/styles.css

@@ -1,3 +1,4 @@
+@import '@vaadin/vaadin-lumo-styles/utility.css';
 html,
 :host {
   --lumo-primary-text-color: #008000;

flow-tests/test-themes/src/main/java/com/vaadin/flow/uitest/ui/theme/AppShell.java

@@ -15,6 +15,7 @@
  */
 package com.vaadin.flow.uitest.ui.theme;
 
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.dependency.StyleSheet;
 import com.vaadin.flow.component.page.AppShellConfigurator;
@@ -28,5 +29,6 @@
         "svgs/regular/**:npm/icons" })
 @LoadDependenciesOnStartup
 @StyleSheet("context://aura/fake-aura.css")
+@CssImport("@vaadin/vaadin-lumo-styles/utility.css")
 public class AppShell implements AppShellConfigurator {
 }