Include animation properties in tokenize motion migration (#7648)

### WHY are these changes introduced?

Incorporates work from #7611 into current motion migration.

### WHAT is this pull request doing?

Add the `animation`, `animation-duration`, `animation-delay`,
`animation-timing-function` properties to the `styles-tokenize-motion`
migration.

Author: sam-b-rose

.changeset/itchy-rivers-arrive.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Added `animation` properties to tokenize motion migration

polaris-migrator/README.md

@@ -306,7 +306,7 @@ npx @shopify/polaris-migrator styles-tokenize-font <path>
 
 ### `styles-tokenize-motion`
 
-Replace timings (`ms`, `s`) in transition declarations (`transition`, `transition-duration`, `transition-delay`, and `transition-timing-function`) with the corresponding Polaris [motion](https://polaris.shopify.com/tokens/motion) token.
+Replace timings (`ms`, `s`) in transition declarations (`transition`, `transition-duration`, `transition-delay`, and `transition-timing-function`) and animation declarations (`animation`, `animation-duration`, `animation-delay`, and `animation-timing-function`) with the corresponding Polaris [motion](https://polaris.shopify.com/tokens/motion) token.
 
 ```diff
 - transition-duration: 100ms;
@@ -320,6 +320,18 @@ Replace timings (`ms`, `s`) in transition declarations (`transition`, `transitio
 
 - transition: opacity 100ms linear, left 100ms linear;
 + transition: opacity var(--p-duration-100) linear, left var(--p-duration-100) linear;
+
+- animation-duration: 100ms;
++ animation-duration: var(--p-duration-100);
+
+- animation-timing-function: linear;
++ animation-timing-function: var(--p-linear);
+
+- animation: 100ms linear fadeIn;
++ animation: var(--p-duration-100) linear fadeIn;
+
+- animation: 100ms linear slideIn, 100ms linear slideIn;
++ animation: var(--p-duration-100) linear slideIn, var(--p-duration-100) linear slideIn;
 ```
 
 ```sh

polaris-migrator/src/migrations/styles-tokenize-motion/styles-tokenize-motion.ts

@@ -78,10 +78,7 @@ export default createSassMigrator(
       });
     }
 
-    function mutateTransitionDurationValue(
-      node: Node,
-      decl: Declaration,
-    ): void {
+    function mutateDurationValue(node: Node, decl: Declaration): void {
       if (isPolarisVar(node)) {
         return;
       }
@@ -126,10 +123,7 @@ export default createSassMigrator(
       }
     }
 
-    function mutateTransitionFunctionValue(
-      node: Node,
-      decl: Declaration,
-    ): void {
+    function mutateFunctionValue(node: Node, decl: Declaration): void {
       if (isPolarisVar(node)) {
         return;
       }
@@ -181,12 +175,12 @@ export default createSassMigrator(
       }
     }
 
-    function mutateTransitionDelayValue(node: Node, decl: Declaration): void {
+    function mutateDelayValue(node: Node, decl: Declaration): void {
       // For now, we treat delays like durations
-      return mutateTransitionDurationValue(node, decl);
+      return mutateDurationValue(node, decl);
     }
 
-    function mutateTransitionShorthandValue(
+    function mutateShorthandValue(
       decl: Declaration,
       parsedValue: ParsedValue,
     ): void {
@@ -223,16 +217,16 @@ export default createSassMigrator(
             // This node could be either the property to animate, or an easing
             // function. We try mutate the easing function, but if not we assume
             // it's the property to animate and therefore do not leave a comment.
-            mutateTransitionFunctionValue(node, decl);
+            mutateFunctionValue(node, decl);
           }
         });
 
         if (timings[0]) {
-          mutateTransitionDurationValue(timings[0], decl);
+          mutateDurationValue(timings[0], decl);
         }
 
         if (timings[1]) {
-          mutateTransitionDelayValue(timings[1], decl);
+          mutateDelayValue(timings[1], decl);
         }
       });
     }
@@ -242,21 +236,39 @@ export default createSassMigrator(
         const handlers: {[key: string]: () => void} = {
           'transition-duration': () => {
             parsedValue.nodes.forEach((node) => {
-              mutateTransitionDurationValue(node, decl);
+              mutateDurationValue(node, decl);
             });
           },
           'transition-delay': () => {
             parsedValue.nodes.forEach((node) => {
-              mutateTransitionDelayValue(node, decl);
+              mutateDelayValue(node, decl);
             });
           },
           'transition-timing-function': () => {
             parsedValue.nodes.forEach((node) => {
-              mutateTransitionFunctionValue(node, decl);
+              mutateFunctionValue(node, decl);
             });
           },
           transition: () => {
-            mutateTransitionShorthandValue(decl, parsedValue);
+            mutateShorthandValue(decl, parsedValue);
+          },
+          'animation-duration': () => {
+            parsedValue.nodes.forEach((node) => {
+              mutateDurationValue(node, decl);
+            });
+          },
+          'animation-delay': () => {
+            parsedValue.nodes.forEach((node) => {
+              mutateDelayValue(node, decl);
+            });
+          },
+          'animation-timing-function': () => {
+            parsedValue.nodes.forEach((node) => {
+              mutateFunctionValue(node, decl);
+            });
+          },
+          animation: () => {
+            mutateShorthandValue(decl, parsedValue);
           },
         };
 

polaris-migrator/src/migrations/styles-tokenize-motion/tests/styles-tokenize-motion.input.scss

@@ -125,7 +125,14 @@
   transition: opacity 5s linear, left 5s linear;
 }
 
-.edges {
+.animation {
+  animation: 300ms linear fadeIn;
+  animation-duration: 200ms;
+  animation-delay: 0.2s;
+  animation-timing-function: ease;
+}
+
+.edge-cases {
   // Without an easing function
   transition: fill 300ms;
   // Duration comes after easing func

polaris-migrator/src/migrations/styles-tokenize-motion/tests/styles-tokenize-motion.output.scss

@@ -195,7 +195,14 @@
     left var(--p-duration-5000) var(--p-linear);
 }
 
-.edges {
+.animation {
+  animation: var(--p-duration-300) var(--p-linear) fadeIn;
+  animation-duration: var(--p-duration-200);
+  animation-delay: var(--p-duration-200);
+  animation-timing-function: var(--p-ease);
+}
+
+.edge-cases {
   // Without an easing function
   transition: fill var(--p-duration-300);
   // Duration comes after easing func