feat: Optimize StyleSheet css for production build

Minify and inline imports for css
imported using StyleSheet annotation.

Fixes #22472

Author: caalador

flow-plugins/flow-dev-bundle-plugin/src/main/java/com/vaadin/flow/plugin/maven/BuildDevBundleMojo.java

@@ -69,6 +69,7 @@
 import com.vaadin.flow.theme.Theme;
 import com.vaadin.flow.utils.FlowFileUtils;
 
+import static com.vaadin.flow.server.Constants.META_INF;
 import static com.vaadin.flow.server.Constants.VAADIN_SERVLET_RESOURCES;
 import static com.vaadin.flow.server.Constants.VAADIN_WEBAPP_RESOURCES;
 import static com.vaadin.flow.server.frontend.FrontendUtils.FRONTEND;
@@ -198,6 +199,14 @@ public class BuildDevBundleMojo extends AbstractMojo
     @Parameter(property = FrontendUtils.PARAM_IGNORE_VERSION_CHECKS, defaultValue = "false")
     private boolean frontendIgnoreVersionChecks;
 
+    /**
+     * The folder where the META-INF/resources files are copied. Used for
+     * finding the StyleSheet referenced css files.
+     */
+    @Parameter(defaultValue = "${project.build.outputDirectory}/" + META_INF
+            + "resources/")
+    private File resourcesOutputDirectory;
+
     static final String CLASSFINDER_FIELD_NAME = "classFinder";
 
     private ClassFinder classFinder;
@@ -540,6 +549,11 @@ public boolean isFrontendIgnoreVersionChecks() {
         return frontendIgnoreVersionChecks;
     }
 
+    @Override
+    public File resourcesOutputDirectory() {
+        return resourcesOutputDirectory;
+    }
+
     private static URLClassLoader createIsolatedClassLoader(
             MavenProject project, MojoExecution mojoExecution) {
         List<URL> urls = new ArrayList<>();

flow-plugins/flow-gradle-plugin/src/main/kotlin/com/vaadin/gradle/GradlePluginAdapter.kt

@@ -239,6 +239,9 @@ internal class GradlePluginAdapter private constructor(
     override fun frontendOutputDirectory(): File =
         config.frontendOutputDirectory.get()
 
+    override fun resourcesOutputDirectory(): File =
+        config.resourcesOutputDirectory.get()
+
     override fun frontendResourcesDirectory(): File =
         config.frontendResourcesDirectory.get()
 

flow-plugins/flow-gradle-plugin/src/main/kotlin/com/vaadin/gradle/PrepareFrontendInputProperties.kt

@@ -49,6 +49,13 @@ internal class PrepareFrontendInputProperties(
             .filterExists()
             .absolutePath
 
+    @Input
+    @Optional
+    fun getResourcesOutputDirectory(): Provider<String> =
+        config.resourcesOutputDirectory
+            .filterExists()
+            .absolutePath
+
     @Input
     fun getNpmFolder(): Provider<String> = config.npmFolder.absolutePath
 

flow-plugins/flow-gradle-plugin/src/main/kotlin/com/vaadin/gradle/VaadinFlowPluginExtension.kt

@@ -62,6 +62,14 @@ public abstract class VaadinFlowPluginExtension @Inject constructor(private val
      */
     public abstract val frontendOutputDirectory: Property<File>
 
+    /**
+     * The folder where the META-INF/resources files are copied. Used for
+     * finding the StyleSheet referenced css files.
+     * Defaults to `null` which will use the auto-detected value of
+     * resoucesDir of the main SourceSet, usually `build/resources/main/META-INF/resources/`.
+     */
+    public abstract val resourcesOutputDirectory: Property<File>
+
     /**
      * The folder where `package.json` file is located. Default is project root
      * dir.
@@ -399,6 +407,17 @@ public class PluginEffectiveConfiguration(
                 )
         )
 
+
+    public val resourcesOutputDirectory: Provider<File> =
+        extension.resourcesOutputDirectory.convention(
+            sourceSetName.map {
+                File(
+                    project.getBuildResourcesDir(it),
+                    Constants.META_INF + "resources/"
+                )
+            }
+        )
+
     public val npmFolder: Provider<File> = extension.npmFolder
         .convention(project.projectDir)
 
@@ -650,6 +669,7 @@ public class PluginEffectiveConfiguration(
             "productionMode=${productionMode.get()}, " +
             "applicationIdentifier=${applicationIdentifier.get()}, " +
             "frontendOutputDirectory=${frontendOutputDirectory.get()}, " +
+            "resourcesOutputDirectory=${resourcesOutputDirectory.get()}, " +
             "npmFolder=${npmFolder.get()}, " +
             "frontendDirectory=${frontendDirectory.get()}, " +
             "generateBundle=${generateBundle.get()}, " +

flow-plugins/flow-maven-plugin/src/main/java/com/vaadin/flow/plugin/maven/BuildFrontendMojo.java

@@ -48,6 +48,8 @@
 import com.vaadin.pro.licensechecker.LicenseChecker;
 import com.vaadin.pro.licensechecker.MissingLicenseKeyException;
 
+import static com.vaadin.flow.server.Constants.META_INF;
+
 /**
  * Goal that builds the frontend bundle.
  *
@@ -136,6 +138,14 @@ public class BuildFrontendMojo extends FlowModeAbstractMojo
     @Parameter(property = InitParameters.CLEAN_BUILD_FRONTEND_FILES, defaultValue = "true")
     private boolean cleanFrontendFiles;
 
+    /**
+     * The folder where the META-INF/resources files are copied. Used for
+     * finding the StyleSheet referenced css files.
+     */
+    @Parameter(defaultValue = "${project.build.outputDirectory}/" + META_INF
+            + "resources/")
+    private File resourcesOutputDirectory;
+
     @Override
     protected void executeInternal()
             throws MojoExecutionException, MojoFailureException {
@@ -276,6 +286,11 @@ public boolean compressBundle() {
         return true;
     }
 
+    @Override
+    public File resourcesOutputDirectory() {
+        return resourcesOutputDirectory;
+    }
+
     @Override
     public boolean checkRuntimeDependency(String groupId, String artifactId,
             Consumer<String> missingDependencyMessage) {

flow-plugins/flow-plugin-base/src/main/java/com/vaadin/flow/plugin/base/BuildFrontendUtil.java

@@ -374,7 +374,9 @@ public static void runNodeUpdater(PluginAdapterBuild adapter,
                     .withFrontendIgnoreVersionChecks(
                             adapter.isFrontendIgnoreVersionChecks())
                     .withFrontendDependenciesScanner(frontendDependencies)
-                    .withCommercialBanner(adapter.isCommercialBannerEnabled());
+                    .withCommercialBanner(adapter.isCommercialBannerEnabled())
+                    .withMetaInfResourcesDirectory(
+                            adapter.resourcesOutputDirectory());
             new NodeTasks(options).execute();
         } catch (ExecutionFailedException exception) {
             throw exception;

flow-plugins/flow-plugin-base/src/main/java/com/vaadin/flow/plugin/base/PluginAdapterBuild.java

@@ -118,4 +118,12 @@ public interface PluginAdapterBuild extends PluginAdapterBase {
     boolean checkRuntimeDependency(String groupId, String artifactId,
             Consumer<String> missingDependencyMessageConsumer);
 
+    /**
+     * The resources output directory for META-INF/resources in the classes
+     * output directory.
+     *
+     * @return the META-INF/resources directory, usually
+     *         {output}/classes/META-INF/resources
+     */
+    File resourcesOutputDirectory();
 }

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

@@ -106,11 +106,46 @@ public class CssBundler {
     public static String inlineImports(File themeFolder, File cssFile,
             JsonNode themeJson) throws IOException {
         return inlineImports(themeFolder, cssFile,
-                getThemeAssetsAliases(themeJson));
+                getThemeAssetsAliases(themeJson), null);
+    }
+
+    /**
+     * Recurse over CSS import and inlines all of them into a single CSS block.
+     * <p>
+     *
+     * Unresolvable imports are put on the top of the resulting code, because
+     * {@code @import} statements must come before any other CSS instruction,
+     * otherwise the import is ignored by the browser.
+     * <p>
+     *
+     * This overload supports resolving imports from node_modules in addition to
+     * relative paths.
+     *
+     * @param themeFolder
+     *            location of theme folder on the filesystem. May be null if not
+     *            processing theme files.
+     * @param cssFile
+     *            the CSS file to process.
+     * @param themeJson
+     *            the theme configuration, usually stored in
+     *            {@literal theme.json} file. May be null.
+     * @param nodeModulesFolder
+     *            the node_modules folder for resolving npm package imports. May
+     *            be null if node_modules resolution is not needed.
+     * @return the processed stylesheet content, with inlined imports and
+     *         rewritten URLs.
+     * @throws IOException
+     *             if filesystem resources can not be read.
+     */
+    public static String inlineImports(File themeFolder, File cssFile,
+            JsonNode themeJson, File nodeModulesFolder) throws IOException {
+        return inlineImports(themeFolder, cssFile,
+                getThemeAssetsAliases(themeJson), nodeModulesFolder);
     }
 
     private static String inlineImports(File themeFolder, File cssFile,
-            Set<String> assetAliases) throws IOException {
+            Set<String> assetAliases, File nodeModulesFolder)
+            throws IOException {
 
         String content = Files.readString(cssFile.toPath());
 
@@ -171,12 +206,13 @@ private static String inlineImports(File themeFolder, File cssFile,
             String url = getNonNullGroup(result, 3, 4, 5, 7, 8);
             String sanitizedUrl = sanitizeUrl(url);
             if (sanitizedUrl != null && sanitizedUrl.endsWith(".css")) {
-                File potentialFile = new File(cssFile.getParentFile(),
-                        sanitizedUrl);
-                if (potentialFile.exists()) {
+                File potentialFile = resolveImportPath(sanitizedUrl,
+                        cssFile.getParentFile(), nodeModulesFolder);
+                if (potentialFile != null && potentialFile.exists()) {
                     try {
-                        return Matcher.quoteReplacement(inlineImports(
-                                themeFolder, potentialFile, assetAliases));
+                        return Matcher.quoteReplacement(
+                                inlineImports(themeFolder, potentialFile,
+                                        assetAliases, nodeModulesFolder));
                     } catch (IOException e) {
                         getLogger().warn(
                                 "Unable to inline import: " + result.group());
@@ -264,8 +300,69 @@ private static String sanitizeUrl(String url) {
         return url.trim().split("\\?")[0];
     }
 
+    /**
+     * Resolve import path to a file. First check relative to the CSS file's,
+     * then check node_modules for non-relative path.
+     *
+     * @param importPath
+     *            the import path from the CSS file
+     * @param cssFileDir
+     *            the directory containing the CSS file
+     * @param nodeModulesFolder
+     *            the node_modules folder, may be null
+     * @return the resolved file, or null if not found
+     */
+    private static File resolveImportPath(String importPath, File cssFileDir,
+            File nodeModulesFolder) {
+        // First, try relative to the CSS file's directory
+        File relativeFile = new File(cssFileDir, importPath);
+        if (relativeFile.exists()) {
+            return relativeFile;
+        }
+
+        // If not a relative path (doesn't start with ./ or ../) and
+        // node_modules is available, try resolving from node_modules
+        if (nodeModulesFolder != null && !importPath.startsWith("./")
+                && !importPath.startsWith("../")) {
+            File nodeModulesFile = new File(nodeModulesFolder, importPath);
+            if (nodeModulesFile.exists()) {
+                return nodeModulesFile;
+            }
+        }
+
+        return null;
+    }
+
     private static Logger getLogger() {
         return LoggerFactory.getLogger(CssBundler.class);
     }
 
+    /**
+     * Minify CSS content by removing comments and unnecessary whitespace.
+     * <p>
+     * This method performs basic CSS minification:
+     * <ul>
+     * <li>Remove CSS comments</li>
+     * <li>Collapse multiple whitespace characters</li>
+     * <li>Remove whitespace around special characters like braces and
+     * colons</li>
+     * <li>Remove trailing semicolons before closing braces</li>
+     * </ul>
+     *
+     * @param css
+     *            the CSS content to minify
+     * @return the minified CSS content
+     */
+    public static String minifyCss(String css) {
+        // Remove CSS comments /* ... */
+        css = css.replaceAll("/\\*[^*]*\\*+(?:[^/*][^*]*\\*+)*/", "");
+        // Collapse whitespace
+        css = css.replaceAll("\\s+", " ");
+        // Remove spaces around special characters
+        css = css.replaceAll("\\s*([{};:,>~+])\\s*", "$1");
+        // Remove trailing semicolons before }
+        css = css.replaceAll(";}", "}");
+        return css.trim();
+    }
+
 }

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

@@ -89,6 +89,7 @@ public class NodeTasks implements FallibleCommand {
             TaskGenerateBootstrap.class,
             TaskRunDevBundleBuild.class,
             TaskPrepareProdBundle.class,
+            TaskProcessStylesheetCss.class,
             TaskCleanFrontendFiles.class,
             TaskRemoveOldFrontendGeneratedFiles.class
         ));
@@ -144,6 +145,8 @@ public NodeTasks(Options options) {
                     commands.add(new TaskGenerateCommercialBanner(options));
                     BundleUtils.copyPackageLockFromBundle(options);
                 }
+                // Process @StyleSheet CSS files (minify and inline @imports)
+                commands.add(new TaskProcessStylesheetCss(options));
             } else if (options.isBundleBuild()) {
                 // The dev bundle check needs the frontendDependencies to be
                 // able to

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

@@ -135,6 +135,11 @@ public class Options implements Serializable {
      */
     private File javaResourceFolder;
 
+    /**
+     * META-INF/resources directory.
+     */
+    private File resourcesDirectory;
+
     /**
      * Additional npm packages to run postinstall for.
      */
@@ -1110,4 +1115,25 @@ public boolean copyAssets() {
         }
         return copyAssets;
     }
+
+    /**
+     * Set where the META-INF/resources files are copied by the build.
+     *
+     * @param resourcesDirectory
+     *            META-INF resources directory
+     * @return this builder
+     */
+    public Options withMetaInfResourcesDirectory(File resourcesDirectory) {
+        this.resourcesDirectory = resourcesDirectory;
+        return this;
+    }
+
+    /**
+     * Get the resources directory if defined.
+     *
+     * @return META-INF resources directory
+     */
+    public File getMetaInfResourcesDirectory() {
+        return resourcesDirectory;
+    }
 }