fix selector hash inject error

ant-design-blazor · Jul 10, 2024 · b467bd1 · b467bd1
1 parent af40f23
commit b467bd1
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 14 deletions.
diff --git a/src/Css/CSSObject.cs b/src/Css/CSSObject.cs
@@ -1,8 +1,10 @@
-using static CssInCSharp.Compiler.Serializer;
+using static CssInCSharp.Compiler.Serializer;
 using static CssInCSharp.Compiler.Parser;
 using static CssInCSharp.Constant;
 using System.Collections.Generic;
+using System.Linq;
 using System.Text;
+using System.Text.RegularExpressions;
 
 namespace CssInCSharp
 {
@@ -32,31 +34,33 @@ public string SerializeCss(string hashId)
         internal string ParseStyle(bool root, string hashId)
         {
             var sb = new StringBuilder();
-
+
+            // normal css properties
             foreach (var property in _properties)
             {
                 sb.Append($"{property.Key}:{property.Value.GetValue(property.Key)};");
             }
+
+            // sub style sheet
             foreach (var subStyle in _styles)
             {
-                var nextRoot = false;
-                if (subStyle.Key.StartsWith("@"))
+                var mergedKey = subStyle.Key.Trim(); 
+                var nextRoot = false; 
+                if (mergedKey.StartsWith("@"))
                 {
                     // if is media type, skip and insert hashId from subStyle.
                     root = false;
                     nextRoot = true;
                 }
-                sb.Append($"{subStyle.Key}{{{subStyle.Value.ParseStyle(nextRoot, hashId)}}}");
-            }
 
-            if (root && !string.IsNullOrEmpty(hashId))
-            {
-                return $":where(.{hashId}){sb}";
-            }
-            else
-            {
-                return sb.ToString();
+                if (root && !string.IsNullOrEmpty(hashId)) 
+                {
+	                mergedKey = InjectSelectorHash(mergedKey, hashId);
+                }
+                sb.Append($"{mergedKey}{{{subStyle.Value.ParseStyle(nextRoot, hashId)}}}");
             }
+
+            return sb.ToString();
         }
 
         public CSSObject Merge(CSSObject css)
@@ -125,5 +129,23 @@ private void SetStyle(string key, CSSInterpolation value)
             }
             _styles[key] = cssObject;
         }
-    }
+
+        private string InjectSelectorHash(string key, string hashId)
+        {
+            var hashClassName = $".{hashId}"; 
+            var hashSelector = $":where({hashClassName})"; 
+            var keys = key.Split(",").Select(k => 
+            { 
+                var fullPath = Regex.Split(k.Trim(), @"\s+"); 
+                var firstPath = fullPath[0]; 
+                var match = Regex.Match(firstPath, @"^\w+"); 
+                var htmlElement = match.Success ? match.Value : ""; 
+                fullPath[0] = $"{htmlElement}{hashSelector}{firstPath.Substring(htmlElement.Length)}"; 
+                return string.Join(" ", fullPath);
+            }); 
+
+            return string.Join(",", keys);
+        }
+
+	}
 }
diff --git a/test/CssInCSharp.Tests/CSSObjectTests.cs b/test/CssInCSharp.Tests/CSSObjectTests.cs
@@ -99,5 +99,19 @@ public void Should_Property_Skip_Pxwrap()
 			.ShouldBe(".test{left:12px;}");
 		}
 
+		[Fact]
+		public void Should_Where_Inject_To_All_Selectors()
+		{
+			new CSSObject()
+			{
+                [".ant-zoom-big-fast-enter,.ant-zoom-big-fast-appear"] = new CSSObject()
+                {
+                    Transform = "scale(0)",
+                    Opacity = 0,
+                }
+			}
+			.SerializeCss("css-3nv711")
+			.ShouldBe(":where(.css-3nv711).ant-zoom-big-fast-enter,:where(.css-3nv711).ant-zoom-big-fast-appear{transform:scale(0);opacity:0;}");
+		}
 	}
 }