fix: call processStyles when adding custom-style blocks (#11906)

Always when adding custom-style blocks with
module styles we should call the processStyles
to actually add style data.

Fixes #11877

flow-server/src/main/resources/plugins/application-theme-plugin/package.json

@@ -6,7 +6,7 @@
   ],
   "repository": "vaadin/flow",
   "name": "@vaadin/application-theme-plugin",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "main": "application-theme-plugin.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",

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

@@ -192,6 +192,7 @@ function generateThemeFile(themeFolder, themeName, themeProperties, productionMo
     lumoImports.forEach((lumoImport) => {
       lumoCssCode.push(`addStyleInclude("lumo-${lumoImport}", target);\n`);
     });
+    lumoCssCode.push('if(window.ShadyCSS) { window.ShadyCSS.CustomStyleInterface.processStyles(); }');
     lumoCssCode.push(`document['${lumoCssFlag}'] = true;\n`);
     lumoCssCode.push(`}\n`);
   }

flow-tests/pom.xml

@@ -319,6 +319,7 @@
                 <module>test-memory-leaks</module>
                 <module>test-servlet</module>
                 <module>test-themes</module>
+                <module>test-theme-no-polymer</module>
                 <module>servlet-containers</module>
 
                 <!-- web component embedding -->

flow-tests/test-lumo/src/main/java/com/vaadin/flow/theme/lumo/Lumo.java

@@ -31,7 +31,7 @@
  *
  * @since 1.0
  */
-@NpmPackage(value = "@vaadin/vaadin-lumo-styles", version = "1.6.0")
+@NpmPackage(value = "@vaadin/vaadin-lumo-styles", version = "21.0.2")
 @JsModule("@vaadin/vaadin-lumo-styles/color.js")
 @JsModule("@vaadin/vaadin-lumo-styles/typography.js")
 @JsModule("@vaadin/vaadin-lumo-styles/sizing.js")

flow-tests/test-npm-only-features/test-default-theme/src/test/java/com/vaadin/flow/testonlynpmfeatures/defaulttheme/DefaultThemeIT.java

@@ -38,8 +38,9 @@ public void should_have_loaded_lumo_theme_and_associated_dependencies() {
                 .flatMap(customStyle -> customStyle.$("style").all().stream())
                 .collect(Collectors.toList());
 
-        // 8 from Lumo and 1 custom-style from frontend/styles/styles.js
-        Assert.assertEquals("Should have found 9 custom-styles", 9,
+        // Lumo adds 5 style blocks that used to be custom styles so now we have
+        // 3 from Lumo and 1 custom-style from frontend/styles/styles.js
+        Assert.assertEquals("Should have found 9 custom-styles", 4,
                 customStyles.size());
     }
 

flow-tests/test-theme-no-polymer/README.md

@@ -0,0 +1,3 @@
+This module is for testing cases like #11877 where the theme features
+that rely on polymer are not automatically executed as there
+are no polymer Vaadin components.

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

@@ -0,0 +1,4 @@
+html, :host {
+    --lumo-primary-text-color: #008000;
+    color: rgba(0, 0, 0, 1); /* black */
+}

flow-tests/test-theme-no-polymer/frontend/themes/app-theme/theme.json

@@ -0,0 +1 @@
+{"lumoImports":["typography","color","badge","utility"]}

flow-tests/test-theme-no-polymer/pom.xml

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>com.vaadin</groupId>
+        <artifactId>flow-tests</artifactId>
+        <version>8.0-SNAPSHOT</version>
+    </parent>
+    <artifactId>flow-test-theme-no-polymer</artifactId>
+    <name>Flow custom theme test without polymer components</name>
+    <packaging>war</packaging>
+    <properties>
+        <maven.deploy.skip>true</maven.deploy.skip>
+    </properties>
+
+    <dependencies>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-test-common</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-html-components-testbench</artifactId>
+            <version>${project.version}</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-test-lumo</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>com.vaadin</groupId>
+                <artifactId>flow-maven-plugin</artifactId>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>prepare-frontend</goal>
+                            <goal>build-frontend</goal>
+                        </goals>
+                    </execution>
+                </executions>
+                 <configuration>
+                     <productionMode>true</productionMode>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>org.eclipse.jetty</groupId>
+                <artifactId>jetty-maven-plugin</artifactId>
+            </plugin>
+        </plugins>
+    </build>
+
+    <profiles>
+        <profile>
+            <id>local-run</id>
+            <activation>
+                <property>
+                    <name>!test.use.hub</name>
+                </property>
+            </activation>
+            <build>
+                <plugins>
+                    <plugin>
+                        <groupId>com.lazerycode.selenium</groupId>
+                        <artifactId>driver-binary-downloader-maven-plugin</artifactId>
+                        <version>${driver.binary.downloader.maven.plugin.version}</version>
+                        <configuration>
+                            <onlyGetDriversForHostOperatingSystem>true</onlyGetDriversForHostOperatingSystem>
+                            <rootStandaloneServerDirectory>${project.rootdir}/driver</rootStandaloneServerDirectory>
+                            <downloadedZipFileDirectory>${project.rootdir}/driver_zips</downloadedZipFileDirectory>
+                            <customRepositoryMap>${project.rootdir}/drivers.xml</customRepositoryMap>
+                        </configuration>
+                        <executions>
+                            <execution>
+                                <phase>pre-integration-test</phase>
+                                <goals>
+                                    <goal>selenium</goal>
+                                </goals>
+                            </execution>
+                        </executions>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
+    </profiles>
+</project>
+

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2000-2021 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+package com.vaadin.flow.uitest.ui.theme;
+
+import com.vaadin.flow.component.dependency.NpmPackage;
+import com.vaadin.flow.component.page.AppShellConfigurator;
+import com.vaadin.flow.theme.Theme;
+
+@Theme(value = "app-theme")
+@NpmPackage(value = "@vaadin/vaadin-themable-mixin", version = "1.6.1")
+@NpmPackage(value = "@fortawesome/fontawesome-free", version = "5.15.1")
+public class AppShell implements AppShellConfigurator {
+}

flow-tests/test-theme-no-polymer/src/main/java/com/vaadin/flow/uitest/ui/theme/UtilityClassNameView.java

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2000-2021 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+package com.vaadin.flow.uitest.ui.theme;
+
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.router.Route;
+
+@Route("com.vaadin.flow.uitest.ui.theme.UtilityClassNameView")
+public class UtilityClassNameView extends Div {
+
+    public UtilityClassNameView() {
+        Span styleHeader = new Span("Primary color");
+        styleHeader.setClassName("text-primary");
+        styleHeader.setId("primary");
+        add(styleHeader);
+    }
+}

flow-tests/test-theme-no-polymer/src/test/java/com/vaadin/flow/uitest/ui/theme/UtilityClassNameIT.java

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2000-2021 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.uitest.ui.theme;
+
+import org.junit.Assert;
+import org.junit.Test;
+
+import com.vaadin.flow.component.html.testbench.SpanElement;
+import com.vaadin.flow.testutil.ChromeBrowserTest;
+
+public class UtilityClassNameIT extends ChromeBrowserTest {
+
+    @Test
+    public void lumoUtils_customStylesHaveBeenExpanded() {
+        open();
+        checkLogsForErrors();
+
+        SpanElement primary = $(SpanElement.class).id("primary");
+        Assert.assertEquals("rgba(0, 128, 0, 1)", primary.getCssValue("color"));
+    }
+}