Can I use the CSS Isolation feature of asp.net core 6 with Umbraco 10?
Has anyone managed to get the CSS Isolation feature of .net core 6 (razor) working in Umbraco 10?
I can get a test application to build the css files ok but it's not injecting the scope identifiers into the cshtml files. As a test I created a standard mvc project and added Umbraco 10 to it, so that I could switch between the standard MVC start-up and an Umbraco start-up but I cannot seem to locate what bit of the pipeline injects the scope into razor files.
So this bit is working...
<link href="TestMvc.styles.css" rel="stylesheet">
and generates...
/* _content/TestMvc/Views/Home/Index.cshtml.rz.scp.css */
h1[b-zadwjemmwk] {
color: blue;
}
/* _content/TestMvc/Views/Shared/_Layout.cshtml.rz.scp.css */
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
a.navbar-brand[b-eco2muvx3g] {
white-space: normal;
text-align: center;
word-break: break-all;
}
a[b-eco2muvx3g] {
color: #0077cc;
}
My suspicion is the services method AddControllersWithViews() or a lack thereof in the Umbraco source is breaking a few things in asp.net 6.0.
Hot reload in some cases (Seems to be the case for Views - only a manual browser refresh works after saving changes).
CSS isolation - which requires pre-compilation of views and the isolated CSS on save, i'm assuming through the builder service AddControllersWithViews()
What does work via Hot reload OOTB (with "dotnet watch run" at least) is CSS injection as long as the CSS files have a watch added to the csproj file. If you add one for cshtml files, the changes don't get pushed to the browser at all!
A service override in the Umbraco source seems to have been provided, a method called AddMvcAndRazor() but the problem with this is it also calls AddRazorRuntimeCompilation(), which then turns off Hot reload altogether in .net 6.0, Uggh!
I have since found a "reasonable workaround" which is to use Razor Class Libraries for my partials and view components. This way I can take advantage of Hot reload and CSS isolation as RCL's seem to bypass the Umbraco pipeline. The exception to this is Views, if I add them to the RCL hot reload fails and doesn't trigger a recompile for some bizarre reason, even though it works fine for partials! Also in the back office the files fail to appear in the UI at all.
So in an attempt to create an env. that's rapid (CSS isolation) and DRY (Partials/ViewComponents) I've gotten mostly there!
Can I use the CSS Isolation feature of asp.net core 6 with Umbraco 10?
Has anyone managed to get the CSS Isolation feature of .net core 6 (razor) working in Umbraco 10?
I can get a test application to build the css files ok but it's not injecting the scope identifiers into the cshtml files. As a test I created a standard mvc project and added Umbraco 10 to it, so that I could switch between the standard MVC start-up and an Umbraco start-up but I cannot seem to locate what bit of the pipeline injects the scope into razor files.
So this bit is working...
and generates...
But doesn't add these to the razor files...
Exploration into this so far....
My suspicion is the services method AddControllersWithViews() or a lack thereof in the Umbraco source is breaking a few things in asp.net 6.0.
What does work via Hot reload OOTB (with "dotnet watch run" at least) is CSS injection as long as the CSS files have a watch added to the csproj file. If you add one for cshtml files, the changes don't get pushed to the browser at all!
A service override in the Umbraco source seems to have been provided, a method called AddMvcAndRazor() but the problem with this is it also calls AddRazorRuntimeCompilation(), which then turns off Hot reload altogether in .net 6.0, Uggh!
I have since found a "reasonable workaround" which is to use Razor Class Libraries for my partials and view components. This way I can take advantage of Hot reload and CSS isolation as RCL's seem to bypass the Umbraco pipeline. The exception to this is Views, if I add them to the RCL hot reload fails and doesn't trigger a recompile for some bizarre reason, even though it works fine for partials! Also in the back office the files fail to appear in the UI at all.
So in an attempt to create an env. that's rapid (CSS isolation) and DRY (Partials/ViewComponents) I've gotten mostly there!
is working on a reply...