Blazor attribute splatting issues with CssBuilder package

Question

I am using CssBuilder to build the CSS as described in CssBuilder docs. When i add this it in turn breaks my passed click handlers. I either get click handlers or i get CSS, not both.

ComponentUIBase

using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;

namespace BlazorServer.UI
{
    public class UIComponentBase : ComponentBase
    {

        [Parameter]
        public RenderFragment ChildContent { get; set; }

        [Parameter(CaptureUnmatchedValues = true)]
        public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; } = new Dictionary<string, Object>();

    }
}

Custom Button.razor component - When @attributes exists, CSS breaks and onclick works, when @attributes is removed, CSS works and onclick breaks

@inherits UIComponentBase

<button class="@BaseCss" @attributes="AdditionalAttributes">
    @ChildContent
</button>

Custom Button.cs code-behind

using BlazorComponentUtilities;
using Microsoft.AspNetCore.Components;

namespace BlazorServer.UI.Buttons
{
    public partial class Button
    {

        [Parameter]
        public string Color { get; set; } = "btn-primary";

        [Parameter]
        public bool Rounded { get; set; } = false;

        public string BaseCss =>
           new CssBuilder("btn")
            .AddClass(Color)
            .AddClass("rounded-0", when: !Rounded)
            .AddClass("rounded-2", when: Rounded)
            .AddClass("shadow-none")
            .AddClassFromAttributes(AdditionalAttributes)
            .Build();
    }
}

Parent component

    <Card Color="bg-info">
        <CardHeader>Card Header</CardHeader>
        <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardTitle SubTitle>Card Subtitle</CardTitle>
            <CardText>Card text goes here...</CardText>
        </CardBody>
        <CardFooter>
            <Spacer />
            <Button Color="bg-danger">Cancel</Button>
            <Button class="ms-2" Color="bg-primary" @onclick="Test">Ok</Button>
        </CardFooter>
    </Card>

@code {
    private async void Test()
    {

        await JsRuntime.InvokeVoidAsync("alert", "Warning!11"); // Alert
    }
}

Answer 1

So i was unaware that attribute splatting happens from right-to-left.. Code below fixes the issues :)

<button @attributes="AdditionalAttributes" class="@BaseCss">
    @ChildContent
</button>