chanan/BlazorStyled

Look into ways to pre-render styles in SSB

Open

#3 opened on Jul 2, 2019

View on GitHub
 (14 comments) (1 reaction) (0 assignees)C# (19 forks)github user discovery
enhancementhelp wanted

Repository metrics

Stars
 (193 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

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?

Contributor guide

Research direction
Investigate Blazor's pre rendering and how to inject styles during server side rendering before the client side hydration. Consider using a critical CSS approach or injecting styles in the HTML head during the initial render.
Tech stack
csharp
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
C#CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75