CssInCSharp 0.1.0-nightly-231202062218

CssInCs

A lib for generating Style Sheets with C#.

For documentation see our docs.

Getting started

dotnet add package CssInCSharp

Usage

<div class="basic">
    <div class="title">Title</div>
    <button class="button">Click</button>
</div>

<Style Id="basic-css">
    @_css
</Style>

@code
{
    private string _css = string.Empty;

    protected override void OnInitialized()
    {
        _css = new CSSObject
        {
            [".basic"] = new()
            {
                Width = "300px",
                Height = "300px",
                Border = "1px solid #DDD",
                ["& .title"] = new()
                {
                    LineHeight = "20px",
                    Color = "red"
                },
                ["& .button"] = new()
                {
                    Width = "100%",
                    Height = "20px",
                    TextAlign = "center",
                    ["&:hover"] = new()
                    {
                        Color = "blue"
                    }
                }
            }
        }.ToString();
    }
}

For other examples, you can check out the example code.

Css Compiler

The cssincs is similar to less or sass. You can simply convert you style file into C# class, so that you can make full use of the C# language features to generate style content.

Benchmark

BenchmarkDotNet=v0.13.5, OS=Windows 11 (10.0.22621.1702/22H2/2022Update/SunValley2)
AMD Ryzen 7 5700G with Radeon Graphics, 1 CPU, 16 logical and 8 physical cores
.NET SDK=7.0.203
  [Host]     : .NET 7.0.5 (7.0.523.17405), X64 RyuJIT AVX2
  DefaultJob : .NET 7.0.5 (7.0.523.17405), X64 RyuJIT AVX2
Method Mean Error StdDev Median Gen0 Gen1 Allocated
CreateCss 39.71 μs 0.789 μs 1.595 μs 38.98 μs 17.6392 1.0376 144.29 KB

Showing the top 20 packages that depend on CssInCSharp.

Packages Downloads
AntDesign
🌈 A set of enterprise-class UI components based on Ant Design and Blazor.
2
AntDesign
🌈 A set of enterprise-class UI components based on Ant Design and Blazor WebAssembly.
4
AntDesign
🌈 A set of enterprise-class UI components based on Ant Design and Blazor WebAssembly.
5
AntDesign
🌈 A set of enterprise-class UI components based on Ant Design and Blazor WebAssembly.
7