Ideas for improvement of dev inner loop with scoped CSS development and dotnet watch run

[rogihee]

One of the more tedious tasks in building any app is of course the endless cycle of tinkering for the correct shade of grey for that input border. Scoped CSS is really, really great! But after extensively using dotnet watch run for building a Blazor WebAssembly app, let's just say we have had ample time to think of some improvements in the development inner loop in this area :-).

1. Make 'dotnet watch run' smarter for the type of file that is changed. For CSS file change, only a few tasks need to run, not the full build pipeline. Furthermore, only the touched scoped css files could be diffed into the generated CSS file, without gobbling / touching the other files.
2. Scoped CSS file is just a file, it doesn't need a full host restart. Just set the correct headers to force reload of that file and trigger refresh, but not a restart of the whole host.
3. A huge, huge time saver would be the possibility to directly edit scoped CSS files the browser DEV tools back to razor.css file using a map file like TypeScript files via the Filesystem in the Sources tab.

See also: #27270

[javiercn]

@rogihee thanks for contacting us.

@pranavkm putting this in your radar

[rogihee]

Another approach is to keep the CSS files unbundled during development and stitch them together with @import statements. See the approach Snowpack takes for example. So only generate 1 overview file with @import statements to all the separate scoped files. The "projectname.scp.css" file would be ideal for that, so you don't even have to switch during development and production.

Also, the file served from disk is the actual razor.css file. That would also make it possible to edit directly from the dev tools (point 3). Not sure how it could work (files are served outside the wwwroot and how to deal with the hash scoping and ::deep)...

[javiercn]

We already stitch the files for bundling using imports for things coming from packages and referenced projects. The only thing we need to do here is to call the bundle target when a scoped css file changes and the Razor compiler when you add a new scoped css file to add the scope attribute to the generated markup.

It might be possible that this is achievable today with dotnet watch using custom commands (passing the target to invoke if it supports multiple targets and adding additional files to watch in MSBuild)

files to watch

dotnet watch msbuild /t:BundleScopedCssFiles

[rogihee]

As per #24574 it should be possible to trigger just a bundle + refresh instead of build + bundle +restart + refresh, right?

Indeed, looks like an improvement is possible here without huge effort. Also, the faster you make the reload with just CSS changes, the less Dev Tools support is needed to quickly do tinkering of styles.

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[Peluko]

For Blazor Server I've set a compiling chain with the steps:

1. Dart Sass to compile the component's SCSS files to scoped CSS files for Blazor
2. Compiling .Net project
3. Webpack to compile my 'scoped' TypeScript, and bundling it with the scoped CSS processed by Blazor, along with some global SCSS

This works perfectly. Also I keep the three 'watchers' running on Dart Sass, dotnet watch run and Webpack build, so whenever I make a change everything recompiles and the browser is refreshed. By now it's fast and productive once everything is set up.

What I miss is a way to generate the scoped CSS files without triggering a full compilation. This way I could use the Webpack HMR feature, which refresh the browser's CSS without reloading the page. This way I could adjust the CSS superfast: whenever I touch a CSS value, it's reflected on the browser almost instantly.

I've tried the different msbuild targets (BundleScopedCssFiles and ResolveScopedCssInputs) but they doesn't generate any file on the filesystem. I'm I missing something?

[rogihee]

@pranavkm was really, really quick and a PR is already out: #27744