From b10dfc00e0e67f170adefbc4fdbc682345a1d0b5 Mon Sep 17 00:00:00 2001 From: Yoli <799480165@qq.com> Date: Tue, 16 Jul 2024 15:11:58 +0800 Subject: [PATCH] fix CSSObject array merge error when key is the same. --- examples/Examples.Basic/Pages/Animation.razor | 10 +++--- src/Css/CSSObject.cs | 35 +++++++++---------- src/Css/Keyframe.cs | 6 ++-- test/CssInCSharp.Tests/CSSObjectTests.cs | 29 ++++++++++++++- test/CssInCSharp.Tests/StyleTests.cs | 4 +-- 5 files changed, 54 insertions(+), 30 deletions(-) diff --git a/examples/Examples.Basic/Pages/Animation.razor b/examples/Examples.Basic/Pages/Animation.razor index 20dfb83..f33cd9d 100644 --- 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 index 27b846d..120c467 100644 --- 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 _styles = new(); + private readonly Dictionary _styles = new(); private readonly Dictionary _properties = new(); public Dictionary GetProperties() => _properties; - public Dictionary GetStyles() => _styles; + public Dictionary GetStyles() => _styles; public CSSInterpolation this[string key] { @@ -74,8 +75,13 @@ 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(); @@ -83,6 +89,7 @@ internal string ParseStyle(bool root, bool injectHash, string hashId, List<(stri 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 index 5882f93..9b35367 100644 --- 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 _styles = new(); + private readonly Dictionary _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 index ac5bb73..08c3d10 100644 --- 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 index 77ec637..de16f84 100644 --- 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