fix inject hash error with media

ant-design-blazor · Jul 15, 2024 · e2d756f · e2d756f
1 parent bd30f98
commit e2d756f
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 13 deletions.
diff --git a/src/Css/CSSObject.cs b/src/Css/CSSObject.cs
@@ -28,10 +28,10 @@ public override string ToString()
 
         public string SerializeCss(string hashId, List<(string, string)> effects = null)
         {
-            return Serialize(Compile(ParseStyle(true, hashId, effects)), Stringify);
+            return Serialize(Compile(ParseStyle(true, false, hashId, effects)), Stringify);
         }
 
-        internal string ParseStyle(bool root, string hashId, List<(string, string)> effects = null)
+        internal string ParseStyle(bool root, bool injectHash, string hashId, List<(string, string)> effects = null)
         {
             var sb = new StringBuilder();
 
@@ -54,20 +54,28 @@ internal string ParseStyle(bool root, string hashId, List<(string, string)> effe
             // sub style sheet
             foreach (var subStyle in _styles)
             {
-                var mergedKey = subStyle.Key.Trim(); 
-                var nextRoot = false; 
-                if (mergedKey.StartsWith("@"))
+                var subInjectHash = false;
+                var nextRoot = false;
+                var mergedKey = subStyle.Key.Trim();
+
+                if ((root || injectHash) && !string.IsNullOrEmpty(hashId))
+                {
+                    if (mergedKey.StartsWith("@"))
+                    {
+                        subInjectHash = true;
+                    }
+                    else
+                    {
+                        mergedKey = InjectSelectorHash(mergedKey, hashId);
+                    }
+                } 
+                else if (root && string.IsNullOrEmpty(hashId) && (mergedKey == "&" || mergedKey == ""))
                 {
-                    // if is media type, skip and insert hashId from subStyle.
-                    root = false;
+                    mergedKey = "";
                     nextRoot = true;
                 }
 
-                if (root && !string.IsNullOrEmpty(hashId)) 
-                {
-	                mergedKey = InjectSelectorHash(mergedKey, hashId);
-                }
-                sb.Append($"{mergedKey}{{{subStyle.Value.ParseStyle(nextRoot, hashId, effects)}}}");
+                sb.Append($"{mergedKey}{{{subStyle.Value.ParseStyle(nextRoot, subInjectHash, hashId, effects)}}}");
             }
 
             return sb.ToString();

diff --git a/src/Css/Keyframe.cs b/src/Css/Keyframe.cs
@@ -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, string.Empty)}}}");
+                sb.Append($"{subStyle.Key}{{{subStyle.Value.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
@@ -122,5 +122,33 @@ public void Should_Where_Inject_To_All_Selectors()
             };
             css2.SerializeCss("css-3nv711").ShouldBe(":where(.css-3nv711)[class^=\"ant-affix\"]::before,:where(.css-3nv711)[class*=\" ant-affix\"]::before,:where(.css-3nv711)[class^=\"ant-affix\"]::after,:where(.css-3nv711)[class*=\" ant-affix\"]::after{box-sizing:border-box;}");
         }
+
+        [Fact]
+        public void Should_Where_Not_Inject_With_Media()
+        {
+            var css3 = new CSSObject()
+            {
+                [".ant-modal-root"] = new CSSObject()
+                {
+                    ["@media (max-width: 767)"] = new CSSObject()
+                    {
+                        [".ant-modal"] = new CSSObject()
+                        {
+                            MaxWidth = "calc(100vw - 16px)",
+                            Margin = "8 auto",
+                        },
+                        [".ant-modal-centered"] = new CSSObject()
+                        {
+                            [".ant-modal"] = new CSSObject()
+                            {
+                                Flex = 1
+                            }
+                        }
+                    }
+                }
+            };
+
+            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;}}");
+        }
     }
 }