fix CSSObject array merge error when key is the same.

ant-design-blazor · Jul 16, 2024 · b10dfc0 · b10dfc0
1 parent e2d756f
commit b10dfc0
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 30 deletions.
diff --git a/examples/Examples.Basic/Pages/Animation.razor b/examples/Examples.Basic/Pages/Animation.razor
@@ -36,12 +36,12 @@
                     AnimationDuration = "3s",
                     AnimationName = new Keyframe("animation-transform")
                     {
-                        ["from"] = new()
+                        ["from"] = new CSSObject()
                         {
                             Transform = "translateX(0px)",
                             Opacity = 1
                         },
-                        ["to"] = new()
+                        ["to"] = new CSSObject()
                         {
                             Transform = "translateX(100px)",
                             Opacity = 0.2f
@@ -75,15 +75,15 @@
                     AnimationDuration = "3s",
                     AnimationName = new Keyframe("animation-offset")
                     {
-                        ["0%"] = new()
+                        ["0%"] = new CSSObject()
                         {
                             Background = "red"
                         },
-                        ["72%"] = new()
+                        ["72%"] = new CSSObject()
                         {
                             Background = "blue"
                         },
-                        ["100%"] = new()
+                        ["100%"] = new CSSObject()
                         {
                             Background = "green"
                         }

diff --git a/src/Css/CSSObject.cs b/src/Css/CSSObject.cs
@@ -1,4 +1,5 @@
-using static CssInCSharp.Compiler.Serializer;
+using System;
+using static CssInCSharp.Compiler.Serializer;
 using static CssInCSharp.Compiler.Parser;
 using static CssInCSharp.Constant;
 using System.Collections.Generic;
@@ -10,10 +11,10 @@ namespace CssInCSharp
 {
     public sealed partial class CSSObject
     {
-        private readonly Dictionary<string, CSSObject> _styles = new();
+        private readonly Dictionary<string, CSSInterpolation> _styles = new();
         private readonly Dictionary<string, IProperty> _properties = new();
         public Dictionary<string, IProperty> GetProperties() => _properties;
-        public Dictionary<string, CSSObject> GetStyles() => _styles;
+        public Dictionary<string, CSSInterpolation> GetStyles() => _styles;
 
         public CSSInterpolation this[string key]
         {
@@ -74,15 +75,21 @@ internal string ParseStyle(bool root, bool injectHash, string hashId, List<(stri
                     mergedKey = "";
                     nextRoot = true;
                 }
-
-                sb.Append($"{mergedKey}{{{subStyle.Value.ParseStyle(nextRoot, subInjectHash, hashId, effects)}}}");
+                var values = subStyle.Value.ToCssArray();
+                var valueStr = new StringBuilder();
+                foreach (var value in values)
+                {
+                    valueStr.Append(value.ParseStyle(nextRoot, subInjectHash, hashId, effects));
+                }
+                sb.Append($"{mergedKey}{{{valueStr}}}");
             }
 
             return sb.ToString();
         }
 
         public CSSObject Merge(CSSObject css)
         {
+            if (css == null) return this;
             var props = css.GetProperties();
             foreach (var prop in props)
             {
@@ -96,7 +103,7 @@ public CSSObject Merge(CSSObject css)
                 if (_styles.TryGetValue(style.Key, out var value))
                 {
                     // if exists, merge to sub style sheet.
-                    value.Merge(style.Value);
+                    value.AsT0.Merge(style.Value.AsT0);
                 }
                 else
                 {
@@ -108,15 +115,6 @@ public CSSObject Merge(CSSObject css)
             return this;
         }
 
-        public CSSObject Merge(CSSObject[] objects)
-        {
-            foreach (var css in objects)
-            {
-                Merge(css);
-            }
-            return this;
-        }
-
         private void SetStyle(string key, CSSInterpolation value)
         {
             if (key == null) return;
@@ -138,14 +136,13 @@ private void SetStyle(string key, CSSInterpolation value)
             /*
              * if is CSSObject or CSSObject[]
              */
-            var cssObject = value.IsT0 ? value.AsT0 : new CSSObject().Merge(value.ToCssArray());
-            if (cssObject == null) return;
             if (key == MERGE_OPERATOR)
             {
-                Merge(cssObject);
+                if (!value.IsT0) throw new Exception("Invalid merge value type.");
+                Merge(value.AsT0);
                 return;
             }
-            _styles[key] = cssObject;
+            _styles[key] = value;
         }
 
         private string InjectSelectorHash(string key, string hashId)

diff --git a/src/Css/Keyframe.cs b/src/Css/Keyframe.cs
@@ -6,7 +6,7 @@ namespace CssInCSharp
     public sealed class Keyframe
     {
         private readonly string _name;
-        private readonly Dictionary<string, CSSObject> _styles = new();
+        private readonly Dictionary<string, CSSInterpolation> _styles = new();
 
         private Keyframe()
         {
@@ -23,7 +23,7 @@ public Keyframe(string name, CSSObject css)
             _styles = css.GetStyles();
         }
 
-        public CSSObject this[string key]
+        public CSSInterpolation this[string key]
         {
             get => _styles[key];
             set => _styles[key] = value;
@@ -36,7 +36,7 @@ public CSSObject this[string key]
             sb.Append($"@keyframes {effectName}{{");
             foreach (var subStyle in _styles)
             {
-                sb.Append($"{subStyle.Key}{{{subStyle.Value.ParseStyle(true, false, string.Empty)}}}");
+                sb.Append($"{subStyle.Key}{{{subStyle.Value.AsT0.ParseStyle(true, false, string.Empty)}}}");
             }
             sb.Append("}");
             return (effectName, sb.ToString());

diff --git a/test/CssInCSharp.Tests/CSSObjectTests.cs b/test/CssInCSharp.Tests/CSSObjectTests.cs
@@ -1,4 +1,5 @@
-using Shouldly;
+using Newtonsoft.Json.Linq;
+using Shouldly;
 using Xunit;
 
 namespace CssInCSharp.Tests
@@ -150,5 +151,31 @@ public void Should_Where_Not_Inject_With_Media()
 
             css3.SerializeCss("css-3nv711").ShouldBe("@media (max-width: 767){:where(.css-3nv711).ant-modal-root .ant-modal{max-width:calc(100vw - 16px);margin:8 auto;}:where(.css-3nv711).ant-modal-root .ant-modal-centered .ant-modal{flex:1;}}");
         }
+
+        [Fact]
+        public void Should_Media_Array_Merge_Into_One()
+        {
+            var css = new CSSObject
+            {
+                ["@media (max-width: 575px)"] = new CSSInterpolation[]
+                {
+                    new CSSObject()
+                    {
+                        [$".ant-form-item .ant-form-item-label"] = new CSSObject()
+                        {
+                            Padding = 0,
+                        }
+                    },
+                    new CSSObject()
+                    {
+                        [$".ant-col-xs-24.ant-form-item-label"] = new CSSObject()
+                        {
+                            Margin = 0,
+                        }
+                    }
+                }
+            };
+            css.SerializeCss("css-3nv711").ShouldBe("@media (max-width: 575px){:where(.css-3nv711).ant-form-item .ant-form-item-label{padding:0;}:where(.css-3nv711).ant-col-xs-24.ant-form-item-label{margin:0;}}");
+        }
     }
 }
diff --git a/test/CssInCSharp.Tests/StyleTests.cs b/test/CssInCSharp.Tests/StyleTests.cs
@@ -77,12 +77,12 @@ public void Should_AnimationName_Render_As_A_Separate_Style_Tag()
                         AnimationDuration = "3s",
                         AnimationName = new Keyframe("transformAnimation")
                         {
-                            ["from"] = new()
+                            ["from"] = new CSSObject()
                             {
                                 Transform = "translateX(0px)",
                                 Opacity = 1
                             },
-                            ["to"] = new()
+                            ["to"] = new CSSObject()
                             {
                                 Transform = "translateX(100px)",
                                 Opacity = 0.2f