https://github.com/wihrl/RazorStyle

A library to allow CSS inside .razor components without duplication
https://github.com/wihrl/RazorStyle

Last synced: 3 months ago
JSON representation

A library to allow CSS inside .razor components without duplication

• Host: GitHub
• URL: https://github.com/wihrl/RazorStyle
• Owner: wihrl
• License: mit
• Created: 2023-10-10T09:33:01.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-04T12:17:48.000Z (8 months ago)
• Last Synced: 2024-04-10T02:47:19.190Z (7 months ago)
• Language: C#
• Size: 207 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazor - RazorStyle - A small utility library to allow in-component styling without duplicate `<style>` tags. Also supports programmatically triggered animations. (Libraries & Extensions / 2D/3D Rendering engines)

README

        
# RazorStyle

A library to allow adding CSS locally inside .razor components without duplication.

![Nuget](https://img.shields.io/nuget/v/wihrl.RazorStyle)

![Nuget](https://img.shields.io/nuget/dt/wihrl.RazorStyle)

### Why?

While using ` ... ` within Blazor components works fine, each instance of the component creates a new

style tag.

This results in unnecessary junk in the DOM as well as potential styling conflicts.

Using CSS isolation (`.razor.css`) fixes these issues, but having styles in a separate file sucks.

### Usage

1. Add `@using RazorStyle` to your `_Imports.cs`. (This is necessary for IDE support)

2. Add the `StyleRoot` component to any singleton component, for example `App.razor`. The root component creates a

   single `` tag to be

   shared between all instances of `<RazorStyle.Style>`.

```csharp

// App.razor

// ...

<StyleRoot />

    

<Router AppAssembly="@typeof(App).Assembly">

    // ...

</Router>

    

@code {

protected override void OnInitialized()

    {

        base.OnInitialized();

#if DEBUG

        // Enable hot reload for debugging only (performance impact)

        StyleRoot.EnableHotReload = true;

#endif

    }

}

// ...

```

3. Use `<Style>` instead of `<style>` in your components.

```csharp

// SomeComponent.razor

<h1 class="title">Foo</h1>

<Style>

.title {

    // ...

}

````

**BEWARE:** This library does not handle CSS isolation! Make sure to use

unique class names / selectors to avoid conflicts between components.

### Triggered animations

Adding a `_triggered_` prefix to `@keyframes` blocks will duplicate it with a different name.

This can be used in combination with `AnimationTrigger` to replay an animation programatically without relying on JS.

```csharp

// SomeAnimatedComponent.razor

@code {

    readonly AnimationTrigger _titleAnimation = new("fly-in");

    void Trigger()

    {

        _titleAnimation.Trigger();

        StateHasChanged();

    }

}

Trigger

Home


    .title {

        // ! do NOT include the animation name ! 

        animation: 1s linear;

        // ...

    }

    @@keyframes _triggered_fly-in {

        // ...

    } 

````