refactor Keyframe rendering

.editorconfig

@@ -0,0 +1,26 @@
+# Remove the line below if you want to inherit .editorconfig settings from higher directories
+root = true
+
+[*]
+indent_style = space
+end_of_line = crlf
+
+# C# files
+[*.cs]
+indent_size = 4
+tab_width = 4
+max_line_length = 200
+insert_final_newline = true
+charset = utf-8-bom
+
+# XML project files
+[*.{csproj,vbproj,vcxproj,vcxproj.filters,proj,projitems,shproj}]
+indent_size = 2
+
+# XML config files
+[*.{props,targets,ruleset,config,nuspec,resx,vsixmanifest,vsct}]
+indent_size = 2
+
+# JSON files
+[*.json]
+indent_size = 2

generator.ts

@@ -57,6 +57,11 @@ function valueCode(tab: string, t: PropertyType): string {
         .map((x, i) => `${tab}        ${i} => FormatValue(key, _value${i}),`)
         .join('\r\n');
 }
+function objectValueCode(tab: string, t: PropertyType): string {
+    return t.types
+        .map((x, i) => `${tab}        ${i} => _value${i},`)
+        .join('\r\n');
+}
 function hashCode(tab: string, t: PropertyType): string {
     return t.types
         .map((x, i) => `${tab}            ${i} => _value${i}?.GetHashCode(),`)
@@ -222,6 +227,15 @@ ${valueCode(tab, item)}
                 _ => throw new InvalidOperationException("Unexpected index.")
             };
         }
+
+        public object GetValue()
+        {
+            return _index switch
+            {
+${objectValueCode(tab, item)}
+                _ => throw new InvalidOperationException("Unexpected index.")
+            };
+        }
     }
 `
     })
@@ -264,6 +278,15 @@ ${valueCode(tab, item)}
                     _ => throw new InvalidOperationException("Unexpected index.")
                 };
             }
+
+            public object GetValue()
+            {
+                return _index switch
+                {
+${objectValueCode(tab, item)}
+                    _ => throw new InvalidOperationException("Unexpected index.")
+                };
+            }
         }
 `;
 

src/Css/CSSObject.cs

@@ -26,19 +26,29 @@ public override string ToString()
             return SerializeCss(string.Empty);
         }
 
-        public string SerializeCss(string hashId)
+        public string SerializeCss(string hashId, List<(string, string)> effects = null)
         {
-            return Serialize(Compile(ParseStyle(true, hashId)), Stringify);
+            return Serialize(Compile(ParseStyle(true, hashId, effects)), Stringify);
         }
 
-        internal string ParseStyle(bool root, string hashId)
+        internal string ParseStyle(bool root, string hashId, List<(string, string)> effects = null)
         {
             var sb = new StringBuilder();
 
             // normal css properties
             foreach (var property in _properties)
             {
-                sb.Append($"{property.Key}:{property.Value.GetValue(property.Key)};");
+                if (effects != null && property.Key == "animation-name")
+                {
+                    var keyframe = (Keyframe)property.Value.GetValue();
+                    var effect = keyframe.GetEffect(hashId);
+                    sb.Append($"{property.Key}:{effect.Item1};");
+                    effects.Add(effect);
+                }
+                else
+                {
+                    sb.Append($"{property.Key}:{property.Value.GetValue(property.Key)};");
+                }
             }
 
             // sub style sheet
@@ -57,7 +67,7 @@ internal string ParseStyle(bool root, string hashId)
                 {
 	                mergedKey = InjectSelectorHash(mergedKey, hashId);
                 }
-                sb.Append($"{mergedKey}{{{subStyle.Value.ParseStyle(nextRoot, hashId)}}}");
+                sb.Append($"{mergedKey}{{{subStyle.Value.ParseStyle(nextRoot, hashId, effects)}}}");
             }
 
             return sb.ToString();
@@ -142,10 +152,9 @@ private string InjectSelectorHash(string key, string hashId)
                 var htmlElement = match.Success ? match.Value : ""; 
                 fullPath[0] = $"{htmlElement}{hashSelector}{firstPath.Substring(htmlElement.Length)}"; 
                 return string.Join(" ", fullPath);
-            }); 
+            });
 
             return string.Join(",", keys);
         }
-
-	}
+    }
 }

src/Css/CSSProperties.cs

@@ -69,5 +69,17 @@ public string GetValue(string key)
                 _ => throw new InvalidOperationException("Unexpected index.")
             };
         }
+
+        public object GetValue()
+        {
+            return _index switch
+            {
+                0 => _value0,
+                1 => _value1,
+                2 => _value2,
+                3 => _value3,
+                _ => throw new InvalidOperationException("Unexpected index.")
+            };
+        }
     }
-}
+}

src/Css/IProperty.cs

@@ -3,6 +3,7 @@
     public interface IProperty
     {
         string GetValue(string key);
+        object GetValue();
     }
 
     public struct PropertySkip

src/Css/Keyframe.cs

@@ -29,16 +29,23 @@ public CSSObject this[string key]
             set => _styles[key] = value;
         }
 
-        public override string ToString()
+        public (string, string) GetEffect(string hashId = null)
         {
+            var effectName = hashId == null ? _name : $"{hashId}-{_name}";
             var sb = new StringBuilder();
-            sb.Append($"{_name};@keyframes {_name}{{");
+            sb.Append($"@keyframes {effectName}{{");
             foreach (var subStyle in _styles)
             {
                 sb.Append($"{subStyle.Key}{{{subStyle.Value.ParseStyle(true, string.Empty)}}}");
             }
             sb.Append("}");
-            return sb.ToString();
+            return (effectName, sb.ToString());
+        }
+
+        public override string ToString()
+        {
+            var (effectName, effectStyle) = GetEffect();
+            return $"{effectName};{effectStyle}";
         }
     }
 }