CssInCSharp 0.1.0-nightly-250508055741

CssInCSharp

A lib for generating Style Sheets with C#.

English | 简体中文

Getting started

dotnet add package CssInCSharp

Usage

• Used within a native <style> tag.

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

<style>
    @_css
</style>

@code
{
    private string _css = string.Empty;

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

• Use the StyleContent and Style components on the page.

<div class="div1">
    Style In Head
</div>

<div class="div2">
    Style In Body
</div>


<StyleContent>
    <Style StyleFn="@StyleInHead" Path="Basic|StyleTag"></Style>
</StyleContent>


<Style StyleFn="@StyleInBody"></Style>

@code {
    private CSSInterpolation StyleInHead()
    {
        return new CSSObject
        {
            [".div1"] = new CSSObject
            {
                Width = "200px",
                Height = "200px",
                Border = "1px solid #DDD",
            }
        };
    }

    private CSSInterpolation StyleInBody()
    {
        return new CSSObject
        {
            [".div2"] = new CSSObject
            {
                Width = "200px",
                Height = "200px",
                Border = "1px solid #DDD",
                BackgroundColor = "#EFEFEF",
            }
        };
    }
}

• Use StyleHelper to inject styles in custom components.

<div class="@_token.HashId @Name">
    @foreach (var item in Items)
    {
        <div class="item">@item</div>
    }
</div>

@code {
    [Parameter] 
    public string[] Items { get; set; }

    [Parameter]
    public int Width { get; set; } = 500;

    protected override void OnInitialized()
    {
        // use style helper to register style
        StyleHelper.Register(new StyleInfo
        {
            HashId = _token.HashId,
            Path = new string[]{ "component", "demo" },
            StyleFn = UseStyle
        });
    }

    private CSSInterpolation UseStyle()
    {
        ...
    }
}

• Inject a CSSObject or CSSString into the head.

@_node

@code {

    private RenderFragment _node;

    protected override void OnInitialized()
    {
        var styles = new
        {
            container = new CSSObject
            {
                BackgroundColor = token.ColorBgLayout,
                BorderRadius = token.BorderRadiusLG,
                MaxWidth = 400,
                Width = "100%",
                Height = 180,
                Display = "flex",
                AlignItems = "center",
                JustifyContent = "center",
                FlexDirection = "column",
                MarginLeft = "auto",
                MarginRight = "auto",
            },

            card = CSS($$""""
                box-shadow: {{token.BoxShadow}};
                padding: {{token.Padding}}px;
                border-radius: {{token.BorderRadius}}px;
                color: {{token.ColorTextTertiary}};
                background: {{token.ColorBgContainer}};
                transition: all 100ms {{token.MotionEaseInBack}};

                margin-bottom: 8px;
                cursor: pointer;

                &:hover {
                  color: {{token.ColorTextSecondary}};
                  box-shadow: {{token.BoxShadowSecondary}};
                }
            """"),
        };
        // The CX and CSS methods are defined in the StyleHelper class.
        // @using static CssInCSharp.StyleHelper
        _node = @<div class="@CX("a-simple-create-style-demo-classname", styles.container)">
                    <div class="@styles.card">createStyles Demo</div>
                    <div>Current theme mode: dark</div>
                </div>;
    }
}

For other examples, you can check out the example code. For more information, please refer to the document.

Css Compiler

The CssInCSharp 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.

Css Converter

For those projects that are already using css or ts styles, you can use the converter provided by CssInCSharp to convert css or ts code into C# code, which improves style control and code reuse.

For details about the style migration of antd-v5, see the Antd v5 Style Migration Document.

Benchmark

BenchmarkDotNet v0.13.12, Windows 11 (10.0.26100.3775)
AMD Ryzen 7 5700G with Radeon Graphics, 1 CPU, 16 logical and 8 physical cores
.NET SDK 9.0.200
  [Host]   : .NET 9.0.2 (9.0.225.6610), X64 RyuJIT AVX2
  .NET 5.0 : .NET 5.0.17 (5.0.1722.21314), X64 RyuJIT AVX2
  .NET 6.0 : .NET 6.0.28 (6.0.2824.12007), X64 RyuJIT AVX2
  .NET 7.0 : .NET 7.0.17 (7.0.1724.11508), X64 RyuJIT AVX2
  .NET 8.0 : .NET 8.0.13 (8.0.1325.6609), X64 RyuJIT AVX2
  .NET 9.0 : .NET 9.0.2 (9.0.225.6610), X64 RyuJIT AVX2

Special Thanks

cssinjs: Component level cssinjs solution used in ant.design.

stylis: A Light–weight CSS Preprocessor.

csstype: TypeScript and Flow definitions for CSS.

tinycolor: A small library for color manipulation and conversion.

TypeScriptAST: .NET port of TypeScript parser.