CSS In Your Razor Component is Broken

The current preview of Razor Components (0.8.0-preview-19104-04) broke the ability to ship content files from a component library. The ASP.NET team will fix it, but in the meantime, what can you do?

You've heard of CSS in JS? 

Let's try CSS in Components.

It's not what it sounds like.

CSS In Components

Instead of shipping a CSS file, just create a CSS component

Here's my Razor Component's CSS

BlazorScrollBarCSS.cshtml

Notice it is a Razor View, not a CSS file.

Now, in my BlazorScrollBar component, I can reference the classes from the CSS component and ship the CSS as part of the library again.

All the consuming project needs to do is place the CSS component somewhere in it's pages, for example, in App.cshtml.

This seems like a reasonable short term solution for supplying CSS with your components, until the problem is resolved.

Additional Benefit

Because the CSS is now encapsulated as a component, we can allow the consuming project more control over whether the CSS is required.

I have a parameter on my BlazorScrollBar component 

...and an if statement in the Component markup

So, the consumer has the choice, they can manually include the CSS by placing the CSS component somewhere in their app, they can have the ScrollBar component include the CSS in it's own markup, or they can choose not to use my CSS.

Uploading Larger Files In Razor Components

Just a short note on enabling larger transfers in Razor Components.

By default, the SignalR buffer is set at about 18KB in a new Razor Components application.

This limits how much data you can transfer between Browser and Server as you will see errors such as this if you overflow this buffer:

System.InvalidOperationException: Advancing examined to the end would cause pipe to deadlock because FlushAsync is waiting.

The current solution is to add some SignalR options to your Razor Components Configure method in Startup.cs (Server Project)

I am not advocating always changing these values, and I'm not saying set them to zero - but I have certainly been able to upload 13MB images this way. YMMV.

Choose a buffer size that works for you seems to be the current advice.

Sample Project

I have created a sample project on Github https://github.com/SQL-MisterMagoo/RCFileUpload

This project simply demonstrates how to upload multiple image files to the server and displays a gallery of images.

Extra Reading

After working on this for a while, I found this old post https://www.radzen.com/blog/read-image-base64-blazor-signalr/ by Vladimir Enchev, which takes a similar, approach - but slightly different in that their code only handles single file uploads at a time, while my sample shows a method for handling multiple files. But I would recommend reading Vladimir's post - the more information you get, the better your understanding.