grammar: add grid-row, grid-column, grid-gap

Closes #13

grammar.js

@@ -160,6 +160,7 @@ module.exports = grammar({
     _root_attr_key: ($) =>
       choice(
         "direction",
+        $._grid_attr_key,
         // reserved but doesn't affected for root
         alias(
           choice(
@@ -198,7 +199,8 @@ module.exports = grammar({
           // image
           "icon",
           "width",
-          "height"
+          "height",
+          $._grid_attr_key
         )
       ),
 
@@ -235,6 +237,7 @@ module.exports = grammar({
         seq(alias($._style_attr_key, $.attr_key), $._colon, $.attr_value)
       ),
 
+    _grid_attr_key: ($) => choice("grid-gap", "grid-columns", "grid-rows"),
     _style_attr_key: ($) => choice($._common_style_attr_key, "3d"),
 
     _common_style_attr_key: ($) =>

src/grammar.json

@@ -678,6 +678,10 @@
           "type": "STRING",
           "value": "direction"
         },
+        {
+          "type": "SYMBOL",
+          "name": "_grid_attr_key"
+        },
         {
           "type": "ALIAS",
           "content": {
@@ -804,6 +808,10 @@
           {
             "type": "STRING",
             "value": "height"
+          },
+          {
+            "type": "SYMBOL",
+            "name": "_grid_attr_key"
           }
         ]
       }
@@ -970,6 +978,23 @@
         ]
       }
     },
+    "_grid_attr_key": {
+      "type": "CHOICE",
+      "members": [
+        {
+          "type": "STRING",
+          "value": "grid-gap"
+        },
+        {
+          "type": "STRING",
+          "value": "grid-columns"
+        },
+        {
+          "type": "STRING",
+          "value": "grid-rows"
+        }
+      ]
+    },
     "_style_attr_key": {
       "type": "CHOICE",
       "members": [

src/node-types.json

@@ -428,6 +428,18 @@
     "type": "font-size",
     "named": false
   },
+  {
+    "type": "grid-columns",
+    "named": false
+  },
+  {
+    "type": "grid-gap",
+    "named": false
+  },
+  {
+    "type": "grid-rows",
+    "named": false
+  },
   {
     "type": "height",
     "named": false

test/corpus/attributes.txt

@@ -422,7 +422,7 @@ foo -> bar: {
 )
 
 ================================================================================
-Declire style attributes in single-line
+Declare style attributes in single-line
 ================================================================================
 foo.style: {opacity: 0.5; fill: red}
 
@@ -441,3 +441,41 @@ foo.style: {opacity: 0.5; fill: red}
   )
 )
 
+================================================================================
+Declare grid attributes
+================================================================================
+grid-gap: 0
+grid-columns: 1
+
+header
+
+body: "" {
+  grid-gap: 0
+  grid-columns: 2
+
+  content
+  sidebar
+}
+
+footer
+
+--------------------------------------------------------------------------------
+
+(source_file
+  (attribute (attr_key) (attr_value (integer)))
+  (attribute (attr_key) (attr_value (integer)))
+  (shape (shape_key))
+  (container
+    (container_key)
+    (label (string))
+    (block
+      (attribute (attr_key) (attr_value (integer)))
+      (attribute (attr_key) (attr_value (integer)))
+      (shape (shape_key))
+      (shape (shape_key))
+    )
+  )
+  (shape (shape_key))
+)
+
+

test/highlight/grid.d2

@@ -0,0 +1,39 @@
+grid-gap: 0
+# <- property
+#   ^ property
+#      ^ property
+#       ^ punctuation.delimiter
+#         ^ number
+grid-columns: 1
+# <- property
+#           ^ punctuation.delimiter
+#             ^ number
+
+header
+# <- variable
+
+body: "" {
+  # <- constant
+  # ^ punctuation.delimiter
+  #   ^ string
+  #      ^ punctuation.bracket
+  grid-gap: 0
+  # <- property
+  #   ^ property
+  #      ^ property
+  #       ^ punctuation.delimiter
+  #         ^ number
+  grid-columns: 2
+  # <- property
+  #           ^ punctuation.delimiter
+  #             ^ number
+
+  content
+  # <- variable
+  sidebar
+  # <- variable
+}
+# <- punctuation.bracket
+
+footer
+# <- variable