fix: Use file watcher and inline stylesheets for hot reload #22851

mshabarov · 2025-11-27T17:07:29Z

Reworks hot-reload for CSS files referenced from AtStyleSheet in a similar way as for theme folder hot-reload.

Uses file watcher for stylesheet changes to replace hotswapper
File watcher listens for css files change in META-INF/resources/, removes this feature from hot-swapper
StyleSheet bundler implementation
Implemented server-side bundling utility for @Stylesheet URLs locating CSS in common source roots and bundling with CssBundler.inlineImports. Added PublicStyleSheetBundler class with methods to create, bundle, and normalize URLs.
Add active stylesheets tracker
Implements ActiveStyleSheetTracker to track active stylesheet URLs per AppShell and components. The hotswapper populates initial stylesheets to this tracker and also keeps active stylesheets in sync after hot reload. Tracker is used by file watcher to know what style/link tags to update.
Bundle CSS when watching
Implements live bundling and push of public CSS changes in dev-bundle mode using PublicResourcesLiveUpdater and ActiveStyleSheetTracker. It ensures CSS edits trigger server-side re-bundling and live updates to the browser.
Create/update style tags
Enhances the client-side live-reload handler to apply inline bundled CSS immediately. Updated the onUpdate function to create or update style tags and remove duplicate link tags.

@Stylesheet

…older - Uses file watcher for stylesheet changes to replace hotswapper File watcher listens for css files change in META-INF/resources/, remove this feature from hot-swapper - StyleSheet bundler implementation. Implemented server-side bundling utility for @Stylesheet URLs locating CSS in common source roots and bundling with CssBundler.inlineImports. Added PublicStyleSheetBundler class with methods to create, bundle, and normalize URLs. - Add active stylesheets tracker. Implemented ActiveStyleSheetTracker to track active stylesheet URLs per session and globally. Wired tracker updates in StyleSheetHotswapper for AppShell URLs and per-UI stylesheet changes. - Bundle CSS when watching Implements live bundling and push of public CSS changes in dev-bundle mode using PublicResourcesLiveUpdater and ActiveStyleSheetTracker. It ensures CSS edits trigger server-side re-bundling and live updates to the browser. - Create/update style tags Enhances the client-side live-reload handler to apply inline bundled CSS immediately. Updated the onUpdate function to create or update style tags and disable duplicate link tags. - Initial sync for newly added/removed @Stylesheet Implements immediate server push of inlined bundled CSS for added @Stylesheet URLs and signaling removal with empty content. The client updates or removes corresponding style tags accordingly.

mshabarov · 2025-11-27T17:19:34Z

Tested hot-reload manually for:

Adding/removing annotations on AppShell
Adding/removing annotations on Component
Add/remove/modify CSS files in the root and sub-folders of META-INF/resources/
Add/remove static resources used in CSS
With Spring-Boot Dev Tool (always full reload), HA and JRebel
WAR project with src/main/webapp/.

github-actions · 2025-11-27T17:32:58Z

Test Results

1 303 files + 3 1 303 suites +3 1h 15m 42s ⏱️ +45s
9 117 tests +15 9 050 ✅ +16 67 💤 - 1 0 ❌ ±0
9 574 runs +16 9 499 ✅ +17 75 💤 - 1 0 ❌ ±0

Results for commit 9425e0a. ± Comparison against base commit 1af987a.

This pull request removes 2 and adds 17 tests. Note that renamed tests count towards both.

com.vaadin.flow.component.internal.StyleSheetHotswapperTest ‑ cssResourceChange_knownPublicPaths_triggersLiveReloadUpdateWithRelativePath
com.vaadin.flow.component.internal.StyleSheetHotswapperTest ‑ onClassChange_appShellInitialStateUpdated

com.vaadin.base.devserver.PublicResourcesLiveUpdaterTest ‑ cssChange_ignoresVaadinThemeUrls_noLiveReloadUpdates
com.vaadin.base.devserver.PublicResourcesLiveUpdaterTest ‑ cssChange_triggersBundlingAndUpdate_forActiveUrl
com.vaadin.base.devserver.PublicResourcesLiveUpdaterTest ‑ cssChange_triggersUpdates_forMultipleActiveUrls
com.vaadin.base.devserver.PublicResourcesLiveUpdaterTest ‑ cssTempFiles_areIgnored_noLiveReloadInteractions
com.vaadin.base.devserver.PublicStyleSheetBundlerTest ‑ bundleInline_topLevel_rewritesToAbsoluteWithContextPath
com.vaadin.base.devserver.PublicStyleSheetBundlerTest ‑ bundle_inlinesImportedCss_returnsMergedContent
com.vaadin.base.devserver.PublicStyleSheetBundlerTest ‑ bundle_preservesUrls_inTopLevelCss
com.vaadin.base.devserver.PublicStyleSheetBundlerTest ‑ bundle_supportsContextProtocol
com.vaadin.base.devserver.PublicStyleSheetBundlerTest ‑ bundle_withImport_inlinesAndRebasesDoubleNestedUrls
com.vaadin.base.devserver.PublicStyleSheetBundlerTest ‑ bundle_withImport_inlinesAndRebasesNestedUrls
…

♻️ This comment has been updated with latest results.

mcollovati · 2025-12-01T09:51:49Z

vaadin-dev-server/src/main/java/com/vaadin/base/devserver/PublicResourcesLiveUpdater.java

+                return;
+            }
+            if (!file.getName().endsWith(".css")) {
+                liveReload.reload();


This can cause page unwanted reloads if the IDE uses temp files when saving changes to a file (e.g. styles.css~). Furthermore, the after page reload it might happen that you see the old version of the CSS because of servlet container resource cache.

added the ignore for files with tilde.

The reload happens also if you, for example, drop a new file in the resource folder. This is a bit annoying, but as discussed, it can be an acceptable behavior since adding resources might not be so frequent.

Reloading doesn't guarantee that the resource is immediately visible as IDE needs time to copy it to output dir. I have no strong opinion, we can remove it right away or remove later on request.

I would remove it now. IMO it could be more annoying to have unexpected reloads rather than having to reload manually in few cases

mcollovati · 2025-12-01T10:01:49Z

vaadin-dev-server/src/main/java/com/vaadin/base/devserver/PublicStyleSheetBundler.java

+            File entry = new File(root, normalized);
+            if (entry.exists() && entry.isFile()) {
+                try {
+                    String bundled = CssBundler.inlineImportsForPublicResources(


It looks like there's a bug in resolving URL in nested imports.
Given the following structure and a background-image: url(../../images/viking.png); rule in src/main/resources/META-INF/resources/css/view/nested/nested-imported.css, after the watcher updates the CSS, it results in background-image: url(../images/viking.png); and the images is not shown anymore.

The view is annotated with @StyleSheet("context://css/view/view.css").
view.css imports imported.css that in turn has an import for nested/nested-imported.css

src/main/resources ├── application.properties ├── hotswap-agent.properties └── META-INF └── resources ├── css │ ├── images │ │ └── viking.png │ └── view │ ├── imported.css │ ├── nested │ │ └── nested-imported.css │ └── view.css └── styles.css

The issues seems to be in the url resolution when a custom servlet mapping is set.
The url is rewritten by CssBundler as url('css/images/viking.png'), but then the request url becomes http://localhost:8888/context/view/css/images/viking.png which server can't server with 404.

Without the servlet mapping this does work.

Looks like the problem was in the CssBundler that didn't take the context-path into account for resolved urls.
Pushed the fix for it and also tested with Spring-based app with context-path and url-mapping. Works better now.

Tested with the latest changes and the images are referenced correctly.

It seems there is still something broken with URL resolution.
If the application has a context path /app and I change url(css/images/viking.png) to url(http://localhost:8080/app/css/images/viking.png) the result is url('/app/http:/localhost:8080/app/css/images/viking.png')

It's because of an incorrect regex in CssBundler; see https://github.com/vaadin/flow/pull/22851/files#r2584495007

Pattern has been changed, so should work now.

…le-watcher-and-inline

mcollovati · 2025-12-03T06:21:48Z

flow-server/src/main/java/com/vaadin/flow/component/internal/StyleSheetHotswapper.java

+            ui.addAfterNavigationListener(navigationEvent -> {
+                UI newUi = navigationEvent.getLocationChangeEvent().getUI();
+                Set<String> allUrls = new LinkedHashSet<>();
+                lookupUrlsForComponents(newUi, allUrls, vaadinService);
+                allUrls.forEach(tracker::trackAddForComponent);
+            });


This could probably be replaced by installing a DependencyFilter on VaadinService initialization event.
DependencyFilters are invoked at every UIDL request, so it should be possible to update the tracker also when a component is added to the page, not only after a navigation to a view.
But this could also be done in a separate PR, as an additional improvement.

Let's do it in a new PR as changes to this PR are already quite big and hard to review.

mcollovati

A first round of review. I'm now going to test the runtime effects of the changes

flow-server/src/main/java/com/vaadin/flow/component/internal/StyleSheetHotswapper.java

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

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

flow-server/src/test/java/com/vaadin/flow/component/internal/StyleSheetHotswapperTest.java

flow-server/src/test/java/com/vaadin/flow/internal/ActiveStyleSheetTrackerTest.java

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

…le-watcher-and-inline

mcollovati · 2025-12-03T11:02:55Z

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

                    + MAYBE_LAYER_OR_MEDIA_QUERY + WHITE_SPACE + ";");

-    private static Pattern urlPattern = Pattern.compile(URL);
+    private static final Pattern protocolPatternForUrls = Pattern


nit: use uppercase for constants

There are also other statics that can be turned to uppercase

…le-watcher-and-inline

vaadin-dev-server/src/test/java/com/vaadin/base/devserver/PublicStyleSheetBundlerTest.java

mshabarov

Fixed formatting

vaadin-dev-server/src/test/java/com/vaadin/base/devserver/PublicStyleSheetBundlerTest.java

sonarqubecloud · 2025-12-03T13:11:15Z

Quality Gate passed

Issues
306 New issues
1 Accepted issue

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

vaadin-bot · 2025-12-04T14:05:21Z

This ticket/PR has been released with Vaadin 25.0.0-beta9.

mshabarov added 4 commits November 27, 2025 14:51

refactoring after self-review

6b0c647

refactor and add init stylesheets for components

462745c

fix tests

18238fd

mshabarov marked this pull request as draft November 27, 2025 17:07

remove unused stylesheet-updater.ts

8af44b9

vaadin deleted a comment from github-actions bot Nov 27, 2025

vaadin-bot added the +0.1.0 label Nov 27, 2025

fix formatting

0a8485a

mshabarov added 4 commits November 28, 2025 11:16

Remove the need for session tracking

914e693

fix paths for links and adapt e2e test

4907763

fix path to test file

3027ad9

skip rewrite urls for static resources

af93f07

vaadin-bot added +1.0.0 and removed +0.1.0 labels Nov 28, 2025

mshabarov added 3 commits November 28, 2025 16:44

fix urls rewrite

17c6b88

refactoring and test fix

936f515

Merge remote-tracking branch 'origin/main' into file-watcher-and-inline

7c169f3

mshabarov marked this pull request as ready for review November 28, 2025 15:52

mshabarov requested a review from mcollovati November 28, 2025 15:52

simplifications

ecf8867

mcollovati reviewed Dec 1, 2025

View reviewed changes

mshabarov and others added 5 commits December 1, 2025 15:42

ignore temp files and remove tag if null content

c9ac14d

Merge branch 'main' into file-watcher-and-inline

9e0d3b2

remove links in components, add test for delete

a76b23a

Merge remote-tracking branch 'origin/file-watcher-and-inline' into fi…

9d34ea5

…le-watcher-and-inline

use resource root as a base dir, modify tests

94cb624

mshabarov requested a review from caalador December 2, 2025 09:01

mshabarov force-pushed the file-watcher-and-inline branch from 52d6b54 to 94cb624 Compare December 2, 2025 11:01

mshabarov and others added 3 commits December 2, 2025 15:05

rebase url onto context path

a9a5ee5

add test for image reload

2e7d0aa

Merge branch 'main' into file-watcher-and-inline

ae116d5

mcollovati reviewed Dec 3, 2025

View reviewed changes

mcollovati requested changes Dec 3, 2025

View reviewed changes

mshabarov added 3 commits December 3, 2025 12:34

cleanup, formatting, exist check, assertions

f804a8a

Merge remote-tracking branch 'origin/file-watcher-and-inline' into fi…

1a06837

…le-watcher-and-inline

refactor inlineImports

ea9d0a5

mcollovati reviewed Dec 3, 2025

View reviewed changes

ignore theme urls and bring back reinitialization block

18cecd6

mshabarov force-pushed the file-watcher-and-inline branch from 184cbe7 to 18cecd6 Compare December 3, 2025 11:13

mshabarov and others added 6 commits December 3, 2025 13:14

Merge branch 'main' into file-watcher-and-inline

05a0ec8

upper case

22b34e0

Merge remote-tracking branch 'origin/file-watcher-and-inline' into fi…

8b9a520

…le-watcher-and-inline

remove import

104c8ca

remove reload for images

905cdaa

add stub images to test

3ab9810

caalador reviewed Dec 3, 2025

View reviewed changes

vaadin-dev-server/src/test/java/com/vaadin/base/devserver/PublicStyleSheetBundlerTest.java Outdated Show resolved Hide resolved

fix formatting

9425e0a

mshabarov commented Dec 3, 2025

View reviewed changes

vaadin-dev-server/src/test/java/com/vaadin/base/devserver/PublicStyleSheetBundlerTest.java Outdated Show resolved Hide resolved

mshabarov requested a review from mcollovati December 3, 2025 13:20

mcollovati approved these changes Dec 3, 2025

View reviewed changes

mshabarov merged commit b7d580f into main Dec 3, 2025
34 checks passed

mshabarov deleted the file-watcher-and-inline branch December 3, 2025 14:01

mcollovati mentioned this pull request Dec 3, 2025

Stylesheets hot reload for annotated components added at runtime #22867

Open

vaadin-bot added the Released with Vaadin 25.0.0-beta9 label Dec 4, 2025

fix: Use file watcher and inline stylesheets for hot reload #22851

fix: Use file watcher and inline stylesheets for hot reload #22851

Conversation

mshabarov commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mshabarov commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcollovati Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcollovati Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcollovati left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mshabarov left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sonarqubecloud bot commented Dec 3, 2025

Quality Gate passed

Uh oh!

Uh oh!

vaadin-bot commented Dec 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

mshabarov commented Nov 27, 2025 •

edited

Loading

mshabarov commented Nov 27, 2025 •

edited

Loading

github-actions bot commented Nov 27, 2025 •

edited

Loading

mcollovati Dec 1, 2025 •

edited

Loading

mcollovati Dec 3, 2025 •

edited

Loading