Blazor With WebView2: CSS Hot Reload Does Not Work
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 281
Description
### Describe the bug
Hot reloading scoped css works for Blazor Server and should also work for Blazor within WebView2 with `Microsoft.AspNetCore.Components.WebView.Wpf` package.
Unfortunately, it doesn't.
Curiously, hot reloading DOM changes like editing the text of an h1 element works as expected.
As shown below, `dotnet watch` does somewhat work for css (with manual/hacky workarounds).
VS 2022 Hot Reload does not update the generated bundle css file and therefore does not work at all.
### To Reproduce
1. Follow the instructions in the announcement post for _**WPF**_:
https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-3/#blazorwebview-controls-for-wpf-windows-forms
2. Update NuGet packages to latest .NET 6 versions
3. Add an isolated css file `Counter.razor.css` and a style like
```css
h1 { color: red; }
```
4. Run `dotnet watch --verbose` in the command line in the project-directory
5. Change the color in the css file to `blue`
6. `dotnet watch` outputs updated file but it's **_not_ reflected** in-app
7. Click somewhere in the app and press CTRL+R to reload the page
8. See the updated style reflected in the app
### Workaround 1 (With dotnet watch)
Click somewhere in the app window and press CTRL+R
### Workaround 2 (With dotnet watch)
Force reloading of css with timer in JS in `index.html` (for a project named `WpfApp1`):
```html
Blazor app
var styleFallback = document.querySelector("#flickerPreventerFallback");
var style = document.querySelector("link[id='override']");
setInterval(() => {
var stylesheet = Array.from(document.styleSheets).filter(x => x.ownerNode === style)[0];
var content = Array.from(stylesheet.cssRules).map(rule => rule.cssText).join(' ');
styleFallback.innerHTML = content;
var oldHref = style.href;
style.href = "";
style.href = oldHref;
}, 500)
```
### Further technical details
- VS 2022 Preview 5
- .NET 6 RC2 (RC1 also did not work)
- Include the output of `dotnet --info`:
dotnet --info Output
```
.NET SDK (reflecting any global.json):
Version: 6.0.100-rc.2.21505.57
Commit: ab39070116
Runtime Environment:
OS Name: Windows
OS Version: 10.0.22000
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\6.0.100-rc.2.21505.57\
Host (useful for support):
Version: 6.0.0-rc.2.21480.5
Commit: 6b11d64e7e
.NET SDKs installed:
3.1.412 [C:\Program Files\dotnet\sdk]
5.0.301 [C:\Program Files\dotnet\sdk]
5.0.400 [C:\Program Files\dotnet\sdk]
5.0.402 [C:\Program Files\dotnet\sdk]
6.0.100-rc.2.21505.57 [C:\Program Files\dotnet\sdk]
.NET runtimes installed:
Microsoft.AspNetCore.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 6.0.0-rc.2.21480.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.0-rc.2.21480.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 6.0.0-rc.2.21501.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
```
Contributor guide
Research direction
Reproduce the issue in the WPF WebView2 sample described in the announcement, using an isolated Counter.razor.css file and dotnet watch. Start by inspecting index.html and the blazor.webview.js integration; done means changing scoped CSS updates the running app without pressing CTRL+R or using a reload workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- csharp, css, javascript
- Domain
- desktop, frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100