Add keyframes statements

corpus/statements.txt

@@ -43,6 +43,25 @@ Namespace statements
   (namespace_statement (namespace_name) (call_expression (function_name) (arguments (plain_value))))
   (namespace_statement (namespace_name) (string_value)))
 
+==============================
+Keyframes statements
+==============================
+
+@keyframes important1 {
+  from { margin-top: 50px; }
+  50%  { margin-top: 150px !important; } /* ignored */
+  to   { margin-top: 100px; }
+}
+
+---
+
+(stylesheet
+  (keyframes_statement (keyframes_name) (keyframe_block_list
+    (keyframe_block (from) (block (declaration (property_name) (integer_value (unit)))))
+    (keyframe_block (integer_value (unit)) (block (declaration (property_name) (integer_value (unit)) (important))))
+    (comment)
+    (keyframe_block (to) (block (declaration (property_name) (integer_value (unit))))))))
+
 ==============================
 Media statements
 ==============================

grammar.js

@@ -24,6 +24,7 @@ module.exports = grammar({
       $.media_statement,
       $.charset_statement,
       $.namespace_statement,
+      $.keyframes_statement,
       $.at_rule
     ),
 
@@ -55,6 +56,26 @@ module.exports = grammar({
       ';'
     ),
 
+    keyframes_statement: $ => seq(
+      '@keyframes',
+      alias($.identifier, $.keyframes_name),
+      $.keyframe_block_list,
+    ),
+
+    keyframe_block_list: $ => seq(
+      '{',
+      repeat($.keyframe_block),
+      '}'
+    ),
+
+    keyframe_block: $ => seq(
+      choice($.from, $.to, $.integer_value),
+      $.block
+    ),
+
+    from: $ => 'from',
+    to: $ => 'to',
+
     at_rule: $ => seq(
       $.at_keyword,
       commaSep($._query),

src/grammar.json

@@ -31,6 +31,10 @@
           "type": "SYMBOL",
           "name": "namespace_statement"
         },
+        {
+          "type": "SYMBOL",
+          "name": "keyframes_statement"
+        },
         {
           "type": "SYMBOL",
           "name": "at_rule"
@@ -185,6 +189,82 @@
         }
       ]
     },
+    "keyframes_statement": {
+      "type": "SEQ",
+      "members": [
+        {
+          "type": "STRING",
+          "value": "@keyframes"
+        },
+        {
+          "type": "ALIAS",
+          "content": {
+            "type": "SYMBOL",
+            "name": "identifier"
+          },
+          "named": true,
+          "value": "keyframes_name"
+        },
+        {
+          "type": "SYMBOL",
+          "name": "keyframe_block_list"
+        }
+      ]
+    },
+    "keyframe_block_list": {
+      "type": "SEQ",
+      "members": [
+        {
+          "type": "STRING",
+          "value": "{"
+        },
+        {
+          "type": "REPEAT",
+          "content": {
+            "type": "SYMBOL",
+            "name": "keyframe_block"
+          }
+        },
+        {
+          "type": "STRING",
+          "value": "}"
+        }
+      ]
+    },
+    "keyframe_block": {
+      "type": "SEQ",
+      "members": [
+        {
+          "type": "CHOICE",
+          "members": [
+            {
+              "type": "SYMBOL",
+              "name": "from"
+            },
+            {
+              "type": "SYMBOL",
+              "name": "to"
+            },
+            {
+              "type": "SYMBOL",
+              "name": "integer_value"
+            }
+          ]
+        },
+        {
+          "type": "SYMBOL",
+          "name": "block"
+        }
+      ]
+    },
+    "from": {
+      "type": "STRING",
+      "value": "from"
+    },
+    "to": {
+      "type": "STRING",
+      "value": "to"
+    },
     "at_rule": {
       "type": "SEQ",
       "members": [