chanan / BlazorStyled

CSS in Blazor Components
https://blazorstyled.io
The Unlicense
191 stars 19 forks source link

Styles don't render on the server in a Blazor server application #106

Closed mooski closed 4 years ago

mooski commented 4 years ago

There's no mention that this isn't supported, so I assume this should work, but I could be wrong.

When using Blazor server, styles don't render on the server itself, but rather they get rendered on the client after the framework has loaded.

This is problematic if you're using ServerPrerendered render mode because the app initially appears unstyled until the framework loads after a short while.

Reproduction steps:

  1. Create a new Blazor SERVER app.
  2. Add the BlazorStyled NuGet package.
  3. Add @using BlazorStyled to _Imports.razor.
  4. Add services.AddBlazorStyled(); to Startup.ConfigureServices().
  5. Add the following code to Pages/Index.razor:

    <Styled @bind-Classname="@myClass">
        background: red;
    </Styled>
    
    <p class="@myClass">My paragraph</p>
    
    @code
    {
        private string myClass;
    }
  6. Run the application.
  7. Disable JavaScript in your browser.
  8. Refresh the page.
  9. Note that the red background paragraph style is NOT applied.

Should this scenario work? If not it might be worth mentioning in the docs?

Other than this, BlazorStyled looks like an awesome tool!

mooski commented 4 years ago

I think this is a duplicate of #3 - apologies.

I still think it would be worth mentioning this limitation in the docs though - this is unfortunately a showstopper for me, and I'm sure it would be for some other people too.

chanan commented 4 years ago

Hi,

Glad you like BlazorStyled!

All Blazor application require JavaScript to be running, so this assumed. Although on the future I would love to have the option to pre render the “base” styles, but that is still far away