Update comments for issues

Author: jacobcassidy

.dev-assets/syntax-issues/at-import.css

@@ -1,4 +1,10 @@
+/**
+ * AT IMPORT
+ */
+
+/* new syntax rules for @import have no syntax highlighting */
 @import url("green.css") layer supports(selector(&)) (min-width: calc(10px));
 
 /* layer as a function */
-@import url("green.css") layer(bar) supports(selector(&)) (min-width: calc(10px));
+@import url("green.css") layer(bar) supports(selector(&))
+  (min-width: calc(10px));

.dev-assets/syntax-issues/at-layer.css

@@ -2,6 +2,7 @@
  * AT LAYER
  */
 
+/* layer name has no syntax highlighting */
 .foo {
   @layer base {
     block-size: 100%;

.dev-assets/syntax-issues/at-media-propertie.css

@@ -3,4 +3,5 @@
  */
 
 /* Missing token for `prefers-reduced-motion: reduce` */
-@media (prefers-reduced-motion: reduce) {}
+@media (prefers-reduced-motion: reduce) {
+}

.dev-assets/syntax-issues/grid-placement-slash.css

@@ -2,6 +2,7 @@
  * GRID PLACEMENT SLASH
  */
 
+/* Property value slash doesn't have its own syntax highlighting */
 .example {
   grid-row: 1 / 3;
   grid-column: 1/-1;

.dev-assets/syntax-issues/of-not.css

@@ -1,14 +1,19 @@
-.item > div:nth-child(1 of :not(.hidden))  {
+/**
+ * OF :NOT
+ */
+
+/* `of` and trailing grammar has no syntax highlighting */
+.item > div:nth-child(1 of :not(.hidden)) {
   padding-left: var(--item_margin);
 }
-
 .item > div:nth-last-child(1 of :not(.hidden)) {
   padding-right: var(--item_margin);
 }
 
+/* Same as above, but using CSS Nesting formatting */
 .item {
   & > div {
-    &:nth-child(1 of :not(.hidden))  {
+    &:nth-child(1 of :not(.hidden)) {
       padding-left: var(--item_margin);
     }
     &:nth-last-child(1 of :not(.hidden)) {