Exclude @keyframes params from being parsed as a Less variable (#10773)

* Exclude @keyframes params from being parsed as a Less variable

* Update changelog_unreleased/css/10773.md

Co-authored-by: fisker Cheung <lionkay@gmail.com>

* Update changelog_unreleased/css/10773.md

Co-authored-by: fisker Cheung <lionkay@gmail.com>

* Add "keyframes" to cspell.json

Co-authored-by: fisker Cheung <lionkay@gmail.com>

changelog_unreleased/css/10773.md

@@ -0,0 +1,34 @@
+#### Exclude `@keyframes` params from being parsed as a Less variable (#10773 by @tmazeika)
+
+<!-- prettier-ignore -->
+```css
+/* Input */
+@keyframes :global(spin) {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Prettier stable */
+@keyframes: global(spin){
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+};
+
+/* Prettier main */
+@keyframes :global(spin) {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+```

cspell.json

@@ -198,6 +198,7 @@
         "kddeisz",
         "kddnewton",
         "Kearney",
+        "keyframes",
         "keyof",
         "Khatri",
         "l’objectif",

src/language-css/parser-postcss.js

@@ -477,7 +477,7 @@ function parseNestedCSS(node, options) {
 
         // `@color :blue;`
         if (
-          !["page", "nest"].includes(node.name) &&
+          !["page", "nest", "keyframes"].includes(node.name) &&
           node.params &&
           node.params[0] === ":"
         ) {

tests/format/css/modules/__snapshots__/jsfmt.spec.js.snap

@@ -53,6 +53,15 @@ printWidth: 80
   exportedKey: exportedValue;
 }
 
+@keyframes :global(spin) {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 =====================================output=====================================
 @value colors: './colors.css';
 @value first, second, third from colors;
@@ -101,5 +110,14 @@ printWidth: 80
   exportedKey: exportedValue;
 }
 
+@keyframes :global(spin) {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 ================================================================================
 `;

tests/format/css/modules/modules.css

@@ -44,3 +44,12 @@
 :export {
   exportedKey: exportedValue;
 }
+
+@keyframes :global(spin) {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}