fix: ensure exported WebComponent adds absolute links to document.css (#21124) (#21128)

When using a development bundle, WebComponentBootstrapHandler adds a <link>
tag to the embedding document that references document.css for all used
themes (application and parents). However, the URL is relative to the embedding
document instead of being an absolute URL to the CSS resource.
Additionally, the <link> tag is added even if the theme does not provide a
document.css file, potentially causing 404 errors at runtime.

This change ensures that the link URL is calculated based on the request and
that it only adds tags for existing CSS files.

Fixes #21120
Fixes #19620

Co-authored-by: Marco Collovati <[email protected]>

Author: vaadin-bot

flow-server/src/main/java/com/vaadin/flow/server/BootstrapHandler.java

@@ -1628,6 +1628,12 @@ protected static Collection<Element> getStylesheetTags(
      * Gives a links for referencing the custom theme stylesheet files
      * (typically styles.css or document.css), which are served in express build
      * mode by static file server directly from frontend/themes folder.
+     * <p>
+     * </p>
+     * This method does not verify that the style sheet exists, so it may end up
+     * at runtime with broken links. Use
+     * {@link #getStylesheetLinks(VaadinContext, String, File)} if you want only
+     * links for existing files to be returned.
      *
      * @param context
      *            the vaadin context
@@ -1637,7 +1643,32 @@ protected static Collection<Element> getStylesheetTags(
      */
     protected static Collection<String> getStylesheetLinks(
             VaadinContext context, String fileName) {
+        return getStylesheetLinks(context, fileName, null);
+    }
+
+    /**
+     * Gives a links for referencing the custom theme stylesheet files
+     * (typically styles.css or document.css), which are served in express build
+     * mode by static file server directly from frontend/themes folder.
+     * <p>
+     * </p>
+     * This method return links only for existing style sheet files.
+     *
+     * @param context
+     *            the vaadin context
+     * @param fileName
+     *            the stylesheet file name to add a reference to
+     * @param frontendDirectory
+     *            the directory where project's frontend files are located.
+     *
+     * @return the collection of links to be added to the page
+     */
+    protected static Collection<String> getStylesheetLinks(
+            VaadinContext context, String fileName, File frontendDirectory) {
         return ThemeUtils.getActiveThemes(context).stream()
+                .filter(theme -> frontendDirectory == null
+                        || ThemeUtils.getThemeFolder(frontendDirectory, theme)
+                                .toPath().resolve(fileName).toFile().exists())
                 .map(theme -> ThemeUtils.getThemeFilePath(theme, fileName))
                 .toList();
     }

flow-server/src/main/java/com/vaadin/flow/server/communication/WebComponentBootstrapHandler.java

@@ -16,6 +16,7 @@
 package com.vaadin.flow.server.communication;
 
 import java.io.BufferedWriter;
+import java.io.File;
 import java.io.IOException;
 import java.io.OutputStreamWriter;
 import java.io.Writer;
@@ -431,11 +432,16 @@ protected void writeBootstrapPage(String contentType,
                     .forEach(element -> ElementUtil.fromJsoup(element)
                             .ifPresent(elementsForShadows::add));
 
+            File frontendDirectory = FrontendUtils
+                    .getProjectFrontendDir(config);
+
             // Add document.css link to the document
-            BootstrapHandler.getStylesheetLinks(context, "document.css")
+            BootstrapHandler
+                    .getStylesheetLinks(context, "document.css",
+                            frontendDirectory)
                     .forEach(link -> UI.getCurrent().getPage().executeJs(
                             BootstrapHandler.SCRIPT_TEMPLATE_FOR_STYLESHEET_LINK_TAG,
-                            link));
+                            modifyPath(serviceUrl, link)));
         }
 
         WebComponentConfigurationRegistry

flow-tests/test-express-build/test-embedding-express-build/src/main/frontend/themes/embedded-theme/theme.json

@@ -1,4 +1,5 @@
 {
+  "parent": "parent-theme",
   "documentCss": ["@fortawesome/fontawesome-free/css/all.css"],
   "assets": {
     "@fortawesome/fontawesome-free": {

flow-tests/test-express-build/test-embedding-express-build/src/main/frontend/themes/parent-theme/styles.css

@@ -0,0 +1,5 @@
+/*
+Parent theme added only to ensure that exported web components do not add
+style sheet link to the document when the theme does not provide a document.css
+file
+*/

flow-tests/test-express-build/test-embedding-express-build/src/test/java/com/vaadin/flow/webcomponent/ApplicationThemeComponentIT.java

@@ -15,6 +15,7 @@
  */
 package com.vaadin.flow.webcomponent;
 
+import java.net.URI;
 import java.util.List;
 
 import org.junit.Assert;
@@ -222,8 +223,12 @@ public void documentCssLinkAddedToHead() {
         final List<WebElement> links = documentHead
                 .findElements(By.tagName("link"));
         Assert.assertEquals(1, links.size());
-        Assert.assertTrue(links.get(0).getAttribute("href")
+        String documentCssURL = links.get(0).getAttribute("href");
+        Assert.assertTrue(documentCssURL
                 .contains("VAADIN/themes/embedded-theme/document.css"));
+        URI documentCssURI = URI.create(documentCssURL);
+        Assert.assertTrue("document.css URL should be absolute, but was "
+                + documentCssURL, documentCssURI.isAbsolute());
     }
 
 }