Look into ways to pre-render styles in SSB

[chanan]

Right now, SSB works like this:

<p class="@div">If everything is working right, the background of this paragraph tag should be pink.</p>

@code {
    private string div;

    protected override async Task OnAfterRenderAsync()
    {
       div = await Styled.Css("background-color: pink;");
       StateHasChanged();
    }
}

While this works, it will cause a small flicker on the browser side because the plain html will be rendered first then "enhanced" with the css.

Is there a way the all the styles can be "pre-rendered" and set down with the html?

[BlackFenix2]

Maybe the same way Blazor prerenders the .razor files before sending a repsonse to the client? my best guess would be to interop the styled.css() function to a

i just wanted to say, if we could get a extension for syntax highlighting i would be so happy!

[chanan]

@BlackFenix2 For your second question do you mean in Visual Studio in the "string" you want syntax highlighting?

[BlackFenix2]

@chanan yeah, the same way this extension highlights styled-components and emotion: https://github.com/styled-components/vscode-styled-components

protected override async Task OnAfterRenderAsync()
    {
              //highlight this below vvv
       div = await Styled.Css("background-color: pink;");
       StateHasChanged();
    }

[chanan]

That is a great idea! I should have thought of that myself!

I have no experience making a Visual Studio (or visual code) extension, but I will give it a shot!

Have you been using BlazorStyled? If so, how is it going?

[BlackFenix2]

I just heard about it today, haven't gotten to using it myself but it will absolutely help me move out of React and into Microsoft-curated SPA.

I also have no experience writing extensions, but we could look at vscode-styled-components and just port that logic targeting .razor files. would have to think of a ddifferent trigger than the backtick.

[VR-Architect]

I noticed in the code server example Host file there is this:

@(await Html.RenderComponentAsync<BlazorStyled.ServerSideStyled>())

And in the document says to put this: <style id="styled"></style>

Also in the server example it has different code for the startup file. Is the example your code trying the pre-render styles approach? Which one should we be trying out?

Thanks again for the cool package!

[chanan]

@VR-Architect

@(await Html.RenderComponentAsync<BlazorStyled.ServerSideStyled>()) is needed by Server Side Blazor applications. <style id="styled"></style> is needed by Client Side Blazor applications.

I am back home now and I will update the docs today. I will do it in 2 waves, get everything back working - and then I will add some new stuff and check to see if I am clear about the above in the install. Thank you for you patience. I hope the usage so far has been ok!

[tomlm]

I also wanted better binding with the CSS itself.

I created a companion project called BlazorCss which provides <Rule... component where all of the properties are bindabable and you get intellisense for valid property names and values inside a Styled tag.

https://www.nuget.org/packages/BlazorCss https://github.com/tomlm/BlazorCss

Normally I wouldn't cross post like this, but since this library was inspired by this post I figure I should let you know about it.

[chanan]

That's awesome! Next update to the docs I will add a link to your project.

[esso23]

This issue is actually pretty important. I had to switch from isolated classes (bind-classname) to global styles, because the components first got rendered without styles and then got rerendered. This not only looks unprofessional, but it also degrades perfromance since there is a lot of rerendering on the client side in the browser. This is mostly visible when rendering longer lists of components and sometimes it takes several seconds. Note: I'm using ServerSide blazor.

[chanan]

V3 series is a bit faster and also tries to figure out if the style didn't change. Also, there are a few tricks you can use to reduce the first flicker (such as wrapping a div with a style visibility: none till all the styles finished rendering).

Regarding actually pre rendering CSS - I honestly have no idea how to do this at this time. I am also not sure how React libraries do this such as GatsbyJS. However, I do plan to review the Gatsby source code and see if I can figure out how they did in React. But that will take time and may not prove useful.

[esso23]

OK thanks, I'll try that. Also, I'm not sure if you're aware, but there's this issue in Blazor repo https://github.com/dotnet/aspnetcore/issues/10170 and this tag https://github.com/dotnet/aspnetcore/labels/feature-blazor-css-isolation They plan to release it in preview7 of Blazor. Should be worth monitoring.

Also not sure if helpful but you can look into Skclusive's library and how he handles styles there. https://github.com/skclusive/Skclusive.Core.Component/blob/master/src/Component/Styled.cs https://github.com/skclusive/Skclusive.Material.Component

[chanan]

I will take a look, thanks for the links!

Also, I forgot to mention, be sure to run development: false in production.

[chanan]

@esso23 By the way, this can also be done manually. I will admit I haven't tried it (yet) myself, but I see no reason why it shouldnt work.

If you start up your app, and you visit each page in your site that would likely generate CSS (i.e. any component that uses <Styled />) and then go in DevTools and grab the resulting <style> tag, you should be able to save that in and put in the head of your site.

As long as all the attributes are there on the <style> BlazorStyled should find it an use it, meaning that if you have any missing styles it will add them dynamically.

That process is tedious and I would love to automate it with some tool that can be called in the build or publish process, hence this github issue, but in the meantime it can be done manually. I will try it out in the next week or so and see how it goes.