BLAZOR: Integrate CSS (including preprocessors) into .razor files

[rosyatrandom]

Is there an existing issue for this?

• [X] I have searched the existing issues

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

I would like .razor files to be able to contain and handle CSS in a similar manner to .vue or .svelte files. This includes preprocessor support, scoped CSS and CSS modules.

At present, .razor files can either have

1. a backing 'Code Behind' .razor.cs file, or
2. the code integrated directly inside it

However, even if you choose the latter, you are still required to have a separate file for CSS. It should be possible to integrate CSS into the .razor file

Describe the solution you'd like

<div> Arbitrary .razor template</div>

@code {
    // arbitrary C# component code
}

<style scoped lang="scss">
  // CSS goes here; can go anywhere in file, not just bottom
</style>

Additional context

https://vuejs.org/api/sfc-css-features.html CSS blocks in Vue SFCs https://vue-loader.vuejs.org/guide/pre-processors.html#sass CSS preprocessors in Vue SFCs

[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.

[LuohuaRain]

A very impressive feature! looking forward to this!

[KennethHoff]

If we go as far as to add support for preprocessors* I think support for TypeScript should be added as well.

<script lang="ts">
    let name: string | undefined;
</script>

*Which would be really cool, but I don't know how that'd work. Would AspNetCore now also include the compiler for SCSS, PostCSS, etc? Seems like this should be a lot more generic than that, and allow for any preprocessor in any part of the chain, like for example parsing and giving warnings on invalid HTMX or TailwindCSS. All of which naturally leads to requiring prettier and ESLint (as I'm assuming writing equivalent Roslyn analyzers is practically/literally impossible). At which point we practically have the entirety of the JavaScript ecosystem inside of our C# ecosystem.

[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.

[b1tzer0]

Maybe it is just me, but I am not really a fan of having everything in a single file. First thing I do is move the @code{} to a code behind. Separation of Concerns is what I was brought up on and now we are just lumping everything into a single file. Again, just one developer's opinion.

If you do implement this, don't make it a default template; make it an opt-in instead of an opt-out.

[KennethHoff]

One man's Locality of Behavior is another man's Single Responsibility Principle.

[Seanxwy]

Interesting features. We can implement an @style{} just like an @code{}

[linkurzweg]

Coming from a Vue.js background, I would love this feature! CSS preprocessor support as well as typescript would be great!

[gulbanana]

This would be a major quality of life improvement for small components.