Css isolation not working with Razor runtime compilation

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

Although the official MS documentation mentions only CSS isolation support for Blazor, I have found several independent articles (e.g. here), demonstrating that it can be used also in ASP.NET Core MVC/Razor Pages applications.

Is it officially supported? Because I have come across a major stumbling block:

If I enable Razor runtime compilation in my app, when I run it (either from VS 2019 or from the CLI with dotnet run), it opens in the browser with all the isolated css applied correctly.
But when I edit and save any of the source files, which triggers a recompilation, then refresh the browser, the css disappears, and inspecting the page in the browser shows that the reason for this is that the unique attributes that were added to all the elements in the initial build were stripped.

Steps to reproduce the problem:

1. In VS 2019, create a new "ASP.NET Core Web App" project. In the Additional Information dialog, check the Enable Razor runtime compilation checkbox.
2. Add a new empty file to the Pages folder, named "Index.cshtml.css". Place any applicable styles in it, e.g.

p {
  font-size: 30px;
  color: blue;
}

3. Run the app. The above style is applied.
4. Make any change to Index.cshtml (e.g. add some plain text) and save.
5. Refesh the browser. The updated page is displayed without the above css applied.

.
This is the behavior when the app's target framework is .Net 5.0.
When using .Net 6.0 Preview it's even worse - even on the initial display of the page (step 3 above), the elements don't have the unique attributes and the css isn't applied.

---

Original Comments

Feedback Bot on 6/1/2021, 07:05 PM:

We have directed your feedback to the appropriate engineering team for further evaluation. The team will review the feedback and notify you about the next steps.

Feedback Bot on 6/1/2021, 11:06 PM:

Thank you for sharing your feedback! Our teams prioritize action on product issues with broad customer impact. See details at: https://docs.microsoft.com/en-us/visualstudio/ide/report-a-problem?view=vs-2019#faq. In case you need answers to common questions or need assisted support, be sure to use https://visualstudio.microsoft.com/vs/support/. We’ll keep you posted on any updates to this feedback.

---

Original Solutions

(no solutions)

[javiercn]

Thanks for contacting us.

This is not a core scenario we are planning to support with CSS isolation unless we receive more feedback from other customers about it. CSS isolation is a build time process and by definition runtime compilation is not part of it.

@pranavkm we could potentially make this work to a degree if we "burn" the CSS scope into the assembly metadata and "rehydrate" it on the compiler. It would obviously not allow you to change the CSS file, but it would at least make sure the scope we generated at build is "re-applied" during runtime compilation.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[TanayParikh]

Thanks for contacting us. We're closing this issue as there was no community involvement here for quite a while now.

You can learn more about our triage process and how we handle issues by reading our Triage Process writeup.