Skip to content

Commit b10dfc0

Browse files
yoli799480165yoli799480165
authored
fix CSSObject array merge error when key is the same.
1 parent e2d756f commit b10dfc0

File tree

5 files changed

+54
-30
lines changed

5 files changed

+54
-30
lines changed

‎examples/Examples.Basic/Pages/Animation.razor

+5-5
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@
3636
AnimationDuration = "3s",
3737
AnimationName = new Keyframe("animation-transform")
3838
{
39-
["from"] = new()
39+
["from"] = new CSSObject()
4040
{
4141
Transform = "translateX(0px)",
4242
Opacity = 1
4343
},
44-
["to"] = new()
44+
["to"] = new CSSObject()
4545
{
4646
Transform = "translateX(100px)",
4747
Opacity = 0.2f
@@ -75,15 +75,15 @@
7575
AnimationDuration = "3s",
7676
AnimationName = new Keyframe("animation-offset")
7777
{
78-
["0%"] = new()
78+
["0%"] = new CSSObject()
7979
{
8080
Background = "red"
8181
},
82-
["72%"] = new()
82+
["72%"] = new CSSObject()
8383
{
8484
Background = "blue"
8585
},
86-
["100%"] = new()
86+
["100%"] = new CSSObject()
8787
{
8888
Background = "green"
8989
}

‎src/Css/CSSObject.cs

+16-19
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
using static CssInCSharp.Compiler.Serializer;
1+
using System;
2+
using static CssInCSharp.Compiler.Serializer;
23
using static CssInCSharp.Compiler.Parser;
34
using static CssInCSharp.Constant;
45
using System.Collections.Generic;
@@ -10,10 +11,10 @@ namespace CssInCSharp
1011
{
1112
public sealed partial class CSSObject
1213
{
13-
private readonly Dictionary<string, CSSObject> _styles = new();
14+
private readonly Dictionary<string, CSSInterpolation> _styles = new();
1415
private readonly Dictionary<string, IProperty> _properties = new();
1516
public Dictionary<string, IProperty> GetProperties() => _properties;
16-
public Dictionary<string, CSSObject> GetStyles() => _styles;
17+
public Dictionary<string, CSSInterpolation> GetStyles() => _styles;
1718

1819
public CSSInterpolation this[string key]
1920
{
@@ -74,15 +75,21 @@ internal string ParseStyle(bool root, bool injectHash, string hashId, List<(stri
7475
mergedKey = "";
7576
nextRoot = true;
7677
}
77-
78-
sb.Append($"{mergedKey}{{{subStyle.Value.ParseStyle(nextRoot, subInjectHash, hashId, effects)}}}");
78+
var values = subStyle.Value.ToCssArray();
79+
var valueStr = new StringBuilder();
80+
foreach (var value in values)
81+
{
82+
valueStr.Append(value.ParseStyle(nextRoot, subInjectHash, hashId, effects));
83+
}
84+
sb.Append($"{mergedKey}{{{valueStr}}}");
7985
}
8086

8187
return sb.ToString();
8288
}
8389

8490
public CSSObject Merge(CSSObject css)
8591
{
92+
if (css == null) return this;
8693
var props = css.GetProperties();
8794
foreach (var prop in props)
8895
{
@@ -96,7 +103,7 @@ public CSSObject Merge(CSSObject css)
96103
if (_styles.TryGetValue(style.Key, out var value))
97104
{
98105
// if exists, merge to sub style sheet.
99-
value.Merge(style.Value);
106+
value.AsT0.Merge(style.Value.AsT0);
100107
}
101108
else
102109
{
@@ -108,15 +115,6 @@ public CSSObject Merge(CSSObject css)
108115
return this;
109116
}
110117

111-
public CSSObject Merge(CSSObject[] objects)
112-
{
113-
foreach (var css in objects)
114-
{
115-
Merge(css);
116-
}
117-
return this;
118-
}
119-
120118
private void SetStyle(string key, CSSInterpolation value)
121119
{
122120
if (key == null) return;
@@ -138,14 +136,13 @@ private void SetStyle(string key, CSSInterpolation value)
138136
/*
139137
* if is CSSObject or CSSObject[]
140138
*/
141-
var cssObject = value.IsT0 ? value.AsT0 : new CSSObject().Merge(value.ToCssArray());
142-
if (cssObject == null) return;
143139
if (key == MERGE_OPERATOR)
144140
{
145-
Merge(cssObject);
141+
if (!value.IsT0) throw new Exception("Invalid merge value type.");
142+
Merge(value.AsT0);
146143
return;
147144
}
148-
_styles[key] = cssObject;
145+
_styles[key] = value;
149146
}
150147

151148
private string InjectSelectorHash(string key, string hashId)

‎src/Css/Keyframe.cs

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ namespace CssInCSharp
66
public sealed class Keyframe
77
{
88
private readonly string _name;
9-
private readonly Dictionary<string, CSSObject> _styles = new();
9+
private readonly Dictionary<string, CSSInterpolation> _styles = new();
1010

1111
private Keyframe()
1212
{
@@ -23,7 +23,7 @@ public Keyframe(string name, CSSObject css)
2323
_styles = css.GetStyles();
2424
}
2525

26-
public CSSObject this[string key]
26+
public CSSInterpolation this[string key]
2727
{
2828
get => _styles[key];
2929
set => _styles[key] = value;
@@ -36,7 +36,7 @@ public CSSObject this[string key]
3636
sb.Append($"@keyframes {effectName}{{");
3737
foreach (var subStyle in _styles)
3838
{
39-
sb.Append($"{subStyle.Key}{{{subStyle.Value.ParseStyle(true, false, string.Empty)}}}");
39+
sb.Append($"{subStyle.Key}{{{subStyle.Value.AsT0.ParseStyle(true, false, string.Empty)}}}");
4040
}
4141
sb.Append("}");
4242
return (effectName, sb.ToString());

‎test/CssInCSharp.Tests/CSSObjectTests.cs

+28-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
using Shouldly;
1+
using Newtonsoft.Json.Linq;
2+
using Shouldly;
23
using Xunit;
34

45
namespace CssInCSharp.Tests
@@ -150,5 +151,31 @@ public void Should_Where_Not_Inject_With_Media()
150151

151152
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;}}");
152153
}
154+
155+
[Fact]
156+
public void Should_Media_Array_Merge_Into_One()
157+
{
158+
var css = new CSSObject
159+
{
160+
["@media (max-width: 575px)"] = new CSSInterpolation[]
161+
{
162+
new CSSObject()
163+
{
164+
[$".ant-form-item .ant-form-item-label"] = new CSSObject()
165+
{
166+
Padding = 0,
167+
}
168+
},
169+
new CSSObject()
170+
{
171+
[$".ant-col-xs-24.ant-form-item-label"] = new CSSObject()
172+
{
173+
Margin = 0,
174+
}
175+
}
176+
}
177+
};
178+
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;}}");
179+
}
153180
}
154181
}

‎test/CssInCSharp.Tests/StyleTests.cs

+2-2
Original file line numberDiff line numberDiff line change
@@ -77,12 +77,12 @@ public void Should_AnimationName_Render_As_A_Separate_Style_Tag()
7777
AnimationDuration = "3s",
7878
AnimationName = new Keyframe("transformAnimation")
7979
{
80-
["from"] = new()
80+
["from"] = new CSSObject()
8181
{
8282
Transform = "translateX(0px)",
8383
Opacity = 1
8484
},
85-
["to"] = new()
85+
["to"] = new CSSObject()
8686
{
8787
Transform = "translateX(100px)",
8888
Opacity = 0.2f

0 commit comments

Comments
 (0)