Update css parser (#22)

* support cascade @layer * Fixed `&` search after consuming parenthesis
ant-design-blazor · May 29, 2024 · 0a19897 · 0a19897
1 parent 7f04038
commit 0a19897
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 6 deletions.
diff --git a/src/Compiler/Enum.cs b/src/Compiler/Enum.cs
@@ -20,6 +20,6 @@ internal static class Enum
         public const string FONT_FACE = "@font-face";
         public const string COUNTER_STYLE = "@counter-style";
         public const string FONT_FEATURE_VALUES = "@font-feature-values";
-
+        public const string LAYER = "@layer";
     }
 }
diff --git a/src/Compiler/Parser.cs b/src/Compiler/Parser.cs
@@ -42,7 +42,7 @@ public static List<Element> Parse(Tokenizer tokenizer, string value, Element roo
                     case 40:
                         if (previous != 108 && CharAt(characters, length - 1) == 58)
                         {
-                            if (IndexOf(characters += Replace(tokenizer.Delimit(character), "&", "&\f"), "&\f") != -1)
+                            if (IndexOf(characters += Replace(tokenizer.Delimit(character), "&", "&\f"), "&\f", Abs(index != 0 ? points[index - 1] : 0)) != -1)
                                 ampersand = -1;
                             break;
                         }
@@ -95,8 +95,8 @@ public static List<Element> Parse(Tokenizer tokenizer, string value, Element roo
                                     else
                                         switch (atrule == 99 && CharAt(characters, 3) == 110 ? 100 : atrule)
                                         {
-                                            // d m s
-                                            case 100 or 109 or 115:
+                                            // d l m s
+                                            case 100 or 108 or 109 or 115:
                                                 var p = new List<Element>();
                                                 if (rule != null)
                                                 {

diff --git a/src/Compiler/Serializer.cs b/src/Compiler/Serializer.cs
@@ -25,6 +25,7 @@ public static string Stringify(Element element, SerializeCallback callback)
         {
             switch (element.Type)
             {
+                case LAYER: if(element.Children.Count != 0) break; goto case IMPORT;
                 case IMPORT: case DECLARATION: return element.Return = !string.IsNullOrEmpty(element.Return) ? element.Return : element.Value;
                 case COMMENT: return "";
                 case KEYFRAMES: return element.Return = element.Value + "{" + Serialize(element.Children, callback) + "}";

diff --git a/src/Compiler/Utility.cs b/src/Compiler/Utility.cs
@@ -11,9 +11,9 @@ public static int CharAt(string value, int index)
             return (int) value[index];
         }
 
-        public static int IndexOf(string value, string search)
+        public static int IndexOf(string value, string search, int position)
         {
-            return value.IndexOf(search);
+            return value.IndexOf(search, position);
         }
 
         public static string Replace(string value, string pattern, string replacement, bool all = false)

diff --git a/test/CssInCSharp.Tests/ParserTests.cs b/test/CssInCSharp.Tests/ParserTests.cs
@@ -142,6 +142,21 @@ public void Ampersand_In_String()
             ).ShouldBe(".user [href=\"https://css-tricks.com?a=1&b=2\"]{color:red;}");
         }
 
+        [Fact]
+        public void Ampersand_In_First_Selector_Within_A_CommaSeparated_List()
+        {
+            stylis(@"
+        div {
+          display: flex;
+
+          &.foo,
+          p:not(:last-child) {
+            background: red;
+          }
+        }
+            ").ShouldBe(".user div{display:flex;}.user div.foo,.user div p:not(:last-child){background:red;}");
+        }
+
         [Fact]
         public void Escaped_Chars_In_Selector_Identifiers()
         {
@@ -769,6 +784,10 @@ public void Context_Character()
                 .ShouldBe(string.Join("",
                     ".user{background:url[img}.png];}",
                     ".user .a{background:url[img}.png];}"));
+            stylis("background: url(i&m&g.png);.a {background: url(i&m&g.png);}")
+                .ShouldBe(string.Join("",
+                    ".user{background:url(i&m&g.png);}",
+                    ".user .a{background:url(i&m&g.png);}"));
         }
 
         [Fact]
@@ -1000,5 +1019,70 @@ public void Nested()
                 ".user.foo.bar{color:orange;}",
                 ".user.foo.bar.barbar{color:orange;}"));
         }
+
+        [Fact]
+        public void Cascade_Layer()
+        {
+            stylis(@"
+        @layer base {
+          border-left:1px solid hotpink;
+        }
+            ").ShouldBe("@layer base{.user{border-left:1px solid hotpink;}}");
+
+            stylis(@"
+        @layer base {
+          @layer layout {
+            border-left:1px solid hotpink;
+          }
+        }
+            ").ShouldBe("@layer base{@layer layout{.user{border-left:1px solid hotpink;}}}");
+
+            stylis(@"
+        @layer framework.layout {
+          border-left:1px solid hotpink;
+        }
+            ").ShouldBe("@layer framework.layout{.user{border-left:1px solid hotpink;}}");
+
+            stylis(@"
+        @import ""theme.css"" layer(utilties);
+            ").ShouldBe("@import \"theme.css\" layer(utilties);");
+
+            stylis(@"
+        @import ""foo"";
+            ").ShouldBe("@import \"foo\";");
+
+            stylis(@"
+        @layer utilities;
+            ").ShouldBe("@layer utilities;");
+
+            stylis(@"
+        @layer theme, layout, utilities;
+            ").ShouldBe("@layer theme,layout,utilities;");
+
+            stylis(@"
+        @media (min-width: 30em) {
+          @layer layout {
+            .title { font-size: x-large; }
+          }
+        }
+
+        @layer theme {
+          @media (prefers-color-scheme: dark) {
+            .title { color: white; }
+          }
+        }
+            ").ShouldBe(string.Join("",
+                "@media (min-width: 30em){@layer layout{.user .title{font-size:x-large;}}}",
+                "@layer theme{@media (prefers-color-scheme: dark){.user .title{color:white;}}}"));
+
+            stylis(@"
+        @layer framework {
+          @keyframes slide-left {
+            from { margin-left: 0; }
+            to { margin-left: -100%; }
+          }
+        }
+            ").ShouldBe("@layer framework{@keyframes slide-left{from{margin-left:0;}to{margin-left:-100%;}}}");
+        }
     }
 }