Sharp.CSS.Generators 0.1.10-alpha

This is a prerelease version of Sharp.CSS.Generators.
dotnet add package Sharp.CSS.Generators --version 0.1.10-alpha                
NuGet\Install-Package Sharp.CSS.Generators -Version 0.1.10-alpha                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Sharp.CSS.Generators" Version="0.1.10-alpha" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Sharp.CSS.Generators --version 0.1.10-alpha                
#r "nuget: Sharp.CSS.Generators, 0.1.10-alpha"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Sharp.CSS.Generators as a Cake Addin
#addin nuget:?package=Sharp.CSS.Generators&version=0.1.10-alpha&prerelease

// Install Sharp.CSS.Generators as a Cake Tool
#tool nuget:?package=Sharp.CSS.Generators&version=0.1.10-alpha&prerelease                

Sharp.CSS

Write strongly typed CSS in C#.

deployment

NuGet Badge NuGet Badge NuGet Badge

Usage

Blazor

  1. Install Sharp.CSS.Blazor and Sharp.CSS.Generators packages
  2. Add the following namespaces to the _Import.razor file.
@using Sharp.CSS.Interfaces
@using Sharp.CSS.CssStyleSets
@using Sharp.CSS.Blazor
@using Sharp.CSS.Types
@using Sharp.CSS.Types.Generated // if using generators to generate output types
  1. Add <SharpCssStyles /> component to the App.razor file.
  2. In the Program.cs register SharpCSS with DI by adding builder.Services.AddSharpCss();
Generating component styles

Sharp.CSS is able to generate multiple CSS classes for your component at once:

Styles = Css.GetClassNames<CounterStyles>(new
{
    Header = new StyleSet
    {
        FontSize = "40px"
    },
    Counter = new StyleSet
    {
        Padding = 10,
        FontWeight = "bold",
        Border = new Border(3, BorderSideStyle.Dotted, Color.Green)
    },
    Button = new StyleSet
    {
        BackgroundColor = Color.DeepSkyBlue
    }
});

By default Sharp.CSS will generate output class automatically if you have installed Sharp.CSS.Generators. Type the name of the class in the generic parameter of GetClassNames and it will be generated. In the example above, generated CounterStyles class will look like:

public class CounterStyles
{
    public string Header { get; private set; }
    public string Counter { get; private set; }
    public string Button { get; private set; }
}

Make sure to include using Sharp.CSS.Types.Generated everywhere you plan to use generated types.

Alternatively, if you don't want Sharp.CSS to generate output class, specify an existing class. Make sure that each StyleSet property on the input object, have a corresponding string property on the output class.

Here is an example of how to use output class in the markup:

<h1 class="@Styles.Header">Counter</h1>
<p class="@Styles.Counter">Current count: @currentCount</p>
<button class="btn btn-primary @Styles.Button" @onclick="IncrementCount">Click me</button>
Injecting styles into components

The most convenient way to use styles is to inject them via dependency injection. To do that, first the style needs to be registered with the DI. This is done in the Program.cs where container is configured. AddSharpCss takes an optional parameter that allows to provide styles configuration.

builder.Services.AddSharpCss(cfg =>
{
    cfg.RegisterStyles<InjectedCounterStyles>(new
    {
        Header = new StyleSet
        {
            FontSize = "80px"
        },
        Counter = new StyleSet
        {
            Padding = 40,
            FontWeight = "bold",
            Border = new Border(3, BorderSideStyle.Groove, Color.Navy)
        },
        Button = new StyleSet
        {
            BackgroundColor = Color.YellowGreen
        }
    });
});

Now InjectedCounterStyles can be injected into component via @inject attribute.

@inject InjectedCounterStyles iStyles

<h1 class="@iStyles.Header">Counter</h1>
<p class="@iStyles.Counter">Current count: @currentCount</p>
<button class="btn btn-primary @iStyles.Button" @onclick="IncrementCount">Click me</button>

Styles configuration can be extracted into modules to simplify registration code. Module is a class that implements IStylesModule for example:

public class CounterStylesModule : IStylesModule
{
    public void Configure(SharpCssConfigurator configurator)
    {
        configurator.RegisterStyles<ModuleCounterStyles>(new
        {
            Header = new StyleSet
            {
                FontSize = "55px"
            },
            Counter = new StyleSet
            {
                Padding = 20,
                FontWeight = "bold",
                Border = new Border(3, BorderSideStyle.Dashed, Color.Pink)
            },
            Button = new StyleSet
            {
                BackgroundColor = Color.Magenta
            }
        });
    }
}

To register a module, call:

builder.Services.AddSharpCss(cfg =>
{
    cfg.RegisterStylesModule(new CounterStylesModule());
});
Generating single CSS class

ICssStyleService type exposes GetClassName capable of generating a single CSS class.

@inject ICssStyleService Css

<h1 class="@Css.GetClassName(new() { FontSize = "80px" })">Counter</h1>

Refer to samples for more details.

There are no supported framework assets in this package.

Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.1.10-alpha 227 5/7/2021