fix: update stylesheet when a referenced resource changes (#22563)

Fixes #22514

Co-authored-by: Mikhail Shabarov <61410877+mshabarov@users.noreply.github.com>

Author: mcollovati

flow-server/src/main/java/com/vaadin/flow/hotswap/Hotswapper.java

@@ -60,6 +60,7 @@
 import com.vaadin.flow.server.VaadinService;
 import com.vaadin.flow.server.VaadinSession;
 import com.vaadin.flow.server.frontend.FrontendUtils;
+import com.vaadin.flow.shared.ApplicationConstants;
 
 /**
  * Entry point for application classes hot reloads.
@@ -224,7 +225,10 @@ public void onHotswap(URI[] createdResources, URI[] modifiedResources,
                                     if (path.startsWith("/")) {
                                         path = path.substring(1);
                                     }
-                                    liveReload.update(path, null);
+                                    liveReload.update(
+                                            ApplicationConstants.CONTEXT_PROTOCOL_PREFIX
+                                                    + path,
+                                            null);
                                 }
                             }
                         });

flow-server/src/main/java/com/vaadin/flow/internal/BrowserLiveReload.java

@@ -99,9 +99,12 @@ default void refresh(boolean refreshLayouts) {
 
     /**
      * Request an update of the resource with the given path.
-     *
+     * <p>
+     * Path may start with the `context://` prefix, which indicates that the
+     * resource is located in the context root.
+     * 
      * @param path
-     *            the path of the file to update, relative to the servlet path
+     *            the path of the file to update, relative to the servlet path.
      * @param content
      *            the new content of the file
      */

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

@@ -410,6 +410,8 @@ private void addDevTools(Document indexDocument,
         devToolsConf.put("enable", config.isDevModeLiveReloadEnabled());
         devToolsConf.put("url",
                 BootstrapHandlerHelper.getPushURL(session, request));
+        devToolsConf.put("contextRelativePath",
+                service.getContextRootRelativePath(request));
         maybeBackend.ifPresent(
                 backend -> devToolsConf.put("backend", backend.toString()));
         if (liveReloadPort != null) {

flow-server/src/test/java/com/vaadin/flow/hotswap/HotswapperResourcesTest.java

@@ -31,6 +31,7 @@
 import com.vaadin.flow.server.MockVaadinServletService;
 import com.vaadin.flow.server.startup.ApplicationConfiguration;
 import com.vaadin.flow.server.startup.ApplicationConfigurationFactory;
+import com.vaadin.flow.shared.ApplicationConstants;
 import com.vaadin.tests.util.MockDeploymentConfiguration;
 
 public class HotswapperResourcesTest {
@@ -84,7 +85,9 @@ public void cssResourceChange_triggersLiveReloadUpdateWithRelativePath()
 
         // Expect BrowserLiveReload.update to be called with relative URL path
         // "styles/app.css"
-        Mockito.verify(liveReload).update("styles/app.css", null);
+        Mockito.verify(liveReload).update(
+                ApplicationConstants.CONTEXT_PROTOCOL_PREFIX + "styles/app.css",
+                null);
         Mockito.verifyNoMoreInteractions(liveReload);
     }
 

flow-tests/test-live-reload/pom.xml

@@ -58,6 +58,10 @@
           <webApp>
             <!-- use a non-root context -->
             <contextPath>/context</contextPath>
+            <!-- Make sure CSS in target folder are loaded by Jetty -->
+            <resourceBases>
+              <resouceBase>${project.build.outputDirectory}/META-INF/resources</resouceBase>
+            </resourceBases>
           </webApp>
         </configuration>
       </plugin>

flow-tests/test-live-reload/src/main/java/com/vaadin/flow/uitest/ui/AppShell.java

@@ -15,11 +15,13 @@
  */
 package com.vaadin.flow.uitest.ui;
 
+import com.vaadin.flow.component.dependency.StyleSheet;
 import com.vaadin.flow.component.page.AppShellConfigurator;
 import com.vaadin.flow.server.PWA;
 import com.vaadin.flow.theme.Theme;
 
 @PWA(name = "Live Reload View", shortName = "live-reload-view")
 @Theme("mytheme")
+@StyleSheet("context://css/styles.css")
 public class AppShell implements AppShellConfigurator {
 }

flow-tests/test-live-reload/src/main/java/com/vaadin/flow/uitest/ui/StylesheetLiveReloadView.java

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2000-2025 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;
+
+import com.vaadin.flow.component.dependency.StyleSheet;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.NativeButton;
+import com.vaadin.flow.internal.BrowserLiveReloadAccessor;
+import com.vaadin.flow.router.Route;
+import com.vaadin.flow.server.VaadinService;
+import com.vaadin.flow.uitest.servlet.ViewTestLayout;
+
+@Route(value = "com.vaadin.flow.uitest.ui.StylesheetLiveReloadView", layout = ViewTestLayout.class)
+@StyleSheet("context://css/view/view.css")
+public class StylesheetLiveReloadView extends AbstractLiveReloadView {
+
+    public StylesheetLiveReloadView() {
+        add(makeDiv("appshell-style", "css/styles.css"));
+        add(makeDiv("appshell-imported", "css/imported.css"));
+        add(makeDiv("appshell-nested-imported",
+                "css/nested/nested-imported.css"));
+        add(makeDiv("appshell-image", "css/images/gobo.png"));
+        add(makeDiv("view-style", "css/view/view.css"));
+        add(makeDiv("view-imported", "css/view/imported.css"));
+        add(makeDiv("view-nested-imported",
+                "css/view/nested/nested-imported.css"));
+        add(makeDiv("view-image", "css/images/viking.png"));
+        add(makeDiv("non-css-resource", "static/read.me"));
+    }
+
+    private Div makeDiv(String cssClass, String cssFile) {
+        Div div = new Div();
+        div.setId(cssClass);
+        div.setText("Style defined in " + cssFile);
+        div.addClassName(cssClass);
+        // Simulate Flow Hotswapper handling of CSS change
+        NativeButton reloadButton = new NativeButton(
+                "Trigger Stylesheet live reload", ev -> {
+                    BrowserLiveReloadAccessor
+                            .getLiveReloadFromService(
+                                    VaadinService.getCurrent())
+                            .ifPresent(reload -> reload
+                                    .update("context://" + cssFile, null));
+                });
+        reloadButton.setId("reload-" + cssClass);
+        reloadButton.getElement().setAttribute("test-resource-file-path",
+                cssFile);
+        div.add(reloadButton);
+        return div;
+    }
+}

flow-tests/test-live-reload/src/main/resources/META-INF/resources/.marker

@@ -0,0 +1 @@
+Marker file to be searched to get folder path.