Will CSS isolation work out of the box in .NET 6?

[xperiandri]

Is your feature request related to a problem? Please describe.

https://www.mikesdotnetting.com/article/355/css-isolation-in-razor-pages Will it work out of the box if targeting .NET 6?

Describe the solution you'd like

Adding CSS file to a Razor page enables CSS isolation

[Piedone]

Hmm, while I guess this will just work with Razor Pages (i.e. decoupled CMS) in the traditional CMS approach I'm not sure if you'd want to use it. The point there is to utilize the static resource management of Orchard, including dependency management and cache busting. Perhaps we could integrate these somehow.

[xperiandri]

But at the end it composes into a single CSS file

[xperiandri]

So, I've tried to do that with plain ASP.NET Core and this is what I discovered https://github.com/dotnet/aspnetcore/issues/37559 @maglini tried to do the same with Orchard Core CMS and Module with Theme but the bundle does not generate at all

[ns8482e]

Exclude all *.razor.css from assets and include in <None>

[ns8482e]

Exclude all *.razor.css from assets and include in <None>

e.g.

<PropertyGroup>
<ModuleDefaultAssetExcludes>$(ModuleDefaultAssetExcludes);**/*.razor.css</ModuleDefaultAssetExcludes>
</PropertyGroup>

<ItemGroup>
  <None Include="**/*.razor.css" />
</ItemGroup>

[xperiandri]

@ns8482e will it switch behavior back to what ASP.NET Core does? No embedding into module

[sebastienros]

@jtkech might be able to understand how it works and what needs to be done so it also adds the bundles as embedded, but he's a busy person.

[ns8482e]

@xperiandri with above changes - it will create bundle that gets added to staticwebassets folder in nuget When you publish the webapp it will be added to wwwroot as content

you can include it in pages as <link href="~/[OCModule].bundle.scp.css" rel="stylesheet">

[jtkech]

@sebastienros Yes, would need to see how things are generated and where (e.g. bundle files), and how there are referenced in dev / prod modes and in a published contex or not.

In the meantime what @ns8482e suggested looks good. Maybe only use the PropertyGroup, e.g. for *.cshtml.css files I think that the following also works as ModuleAssetExcludes are then included in the None items collection.

<PropertyGroup>
  <ModuleAssetExcludes>$(ModuleAssetExcludes);**/*.cshtml.css</ModuleAssetExcludes>
  <ModuleDefaultAssetExcludes>$(ModuleDefaultAssetExcludes);**/*.cshtml.css</ModuleDefaultAssetExcludes>
</PropertyGroup>

[xperiandri]

@ns8482e my question was not about Blazor (.razor) but about CMS Razor Pages (.cshtml) files and their .cshtml.css, .cshtm.js etc. buddies. They work with .NET 6 in plain ASP.NET

[jtkech]

@xperiandri

When I quickly tried it I was using a razor @page and its *.cshtml.css, see my above comment.

The only thing is that we could also make it working by also embedding the bundles in the assembly.

But it was working, I would say in a regular way e.g. by also publishing the bundle files physically.

[ns8482e]

@xperiandri It works as regular bundle for both razor/blazor as long as(*.razor.css/*.cshtml.css) is excluded in modules assets and included in none collection.

you can register bundle in resource manifest too - but you have to refer it's path from WebRoot ( i.e.~/[OCModule].bundle.scp.css) instead of module root.

[xperiandri]

@ns8482e could you post a sample, please. We were not managed to make it work

[ns8482e]

@xperiandri with .NET 5 and OrchardCore - CSS Isolation only woks with *.razor.css. I have not tried OrchardCore with .NET 6 yet - but I guess for razor pages It should work with .NET6 as suggested by @jtkech.

.NET 6 PR #10317

[xperiandri]

We tried with .NET 6 and 1.2-preview-* packages

[ns8482e]

1.2-preview-* is targeting .NET5 - I guess you need use source code in PR #10317

[xperiandri]

Does it matter if the theme project target is 6.0?

[xperiandri]

Does the current 1.2-preview version already target .NET 6 and we can try CSS isolation again?

[xperiandri]

So does it already work in 1.2 release?

[deanmarcussen]

Did you try it? That's a great way to find out

[Piedone]

Closing due to no reply from the author.