Merging styles does not work

[chanan]

The following does not work correctly:

Css secondPre = Css.CreateNew()
        .AddRule("position", "relative")
        .AddRule("padding", 20)
        .OpenSelector(":before")
            .AddRule("position", "absolute")
            .AddRule("top", 0)
            .AddRule("opacity", 0.6)
            .AddRule("left", "7px")
            .AddRule("font-size", "0.8rem")
        .CloseSelector()
        .AddDynamicRule((css, attributes) =>
        {
            var lang = attributes.GetStringAttribute("language");
            var isHtml = "html" == lang;
            css.OpenSelector(":before")
                .AddRule("content", $"\\\"{lang}\\\"")
            .CloseSelector();
            if (isHtml)
            {
                css.AddRule("background-color", "#0c1e35")
                    .AddRule("color", "white");
            }
        });

When converted to json, :before isn't merged, its overwritten.

[chanan]

A workaround for this in the meantime would be to create this as two different variables:

Css secondPre = Css.CreateNew()
        .AddRule("position", "relative")
        .AddRule("padding", 20)
        .OpenSelector(":before")
            .AddRule("position", "absolute")
            .AddRule("top", 0)
            .AddRule("opacity", 0.6)
            .AddRule("left", "7px")
            .AddRule("font-size", "0.8rem")
        .CloseSelector();

Css secondPre2 = Css.CreateNew()
        .AddDynamicRule((css, attributes) =>
        {
            var lang = attributes.GetStringAttribute("language");
            var isHtml = "html" == lang;
            css.OpenSelector(":before")
                .AddRule("content", $"\\\"{lang}\\\"")
            .CloseSelector();
            if (isHtml)
            {
                css.AddRule("background-color", "#0c1e35")
                    .AddRule("color", "white");
            }
        });