replace-sass-transition migration

Author: jesstelford

.changeset/famous-ghosts-march.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Introduce `migrate-motion` migration for migrating `transition`, `transition-duration`, and `transition-delay` usages of duration values.

polaris-migrator/README.md

@@ -235,6 +235,37 @@ Be aware that this may also create additional code changes in your codebase, we
 npx @shopify/polaris-migrator replace-sass-spacing <path>
 ```
 
+### `replace-sass-transition`
+
+Replace timings (`ms`, `s`) and legacy Sass functions (`duration()`,`easing()`) in transition declarations (`transition`, `transition-duration`, `transition-delay`, and `transition-timing-function`) with the corresponding Polaris [motion](https://polaris.shopify.com/tokens/motion) token.
+
+```diff
+- transition-duration: 100ms;
++ transition-duration: var(--p-duration-100);
+
+- transition-duration: legacy-polaris-v8.duration('slow');
++ transition-duration: var(--p-duration-300);
+
+- transition-timing-function: linear;
++ transition-timing-function: var(--p-linear);
+
+- transition-timing-function: legacy-polaris-v8.easing('in');
++ transition-timing-function: var(--p-ease-in);
+
+- transition: opacity 100ms linear;
++ transition: opacity var(--p-duration-100) linear;
+
+- transition: opacity legacy-polaris-v8.duration('slow') linear;
++ transition: opacity var(--p-duration-300) linear;
+
+- transition: opacity 100ms linear, left 100ms linear;
++ transition: opacity var(--p-duration-100) linear, left var(--p-duration-100) linear;
+```
+
+```sh
+npx @shopify/polaris-migrator replace-sass-transition <path>
+```
+
 ## Creating Migrations
 
 Sometimes referred to as "codemods", migrations are JavaScript functions which modify some code from one form to another (eg; to move between breaking versions of `@shopify/polaris`). ASTs (Abstract Syntax Trees) are used to "walk" through the code in discreet, strongly typed steps, called "nodes". All changes made to nodes (and thus the AST) are then written out as the new/"migrated" version of the code.