From d9f5d3c717fe70c8c70f2c564f37580c0f0b9242 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 11 Oct 2022 17:15:40 +1100
Subject: [PATCH 01/11] Scaffold replace-sass-motion migration with set of
 sensible tests

---
 .../replace-sass-motion.ts                    | 33 +++++++
 .../tests/replace-sass-duration.input.scss    | 75 ++++++++++++++++
 .../tests/replace-sass-duration.output.scss   | 75 ++++++++++++++++
 .../tests/replace-sass-easing.input.scss      | 86 +++++++++++++++++++
 .../tests/replace-sass-easing.output.scss     |  0
 .../tests/replace-sass-motion.test.ts         | 12 +++
 6 files changed, 281 insertions(+)
 create mode 100644 polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
 create mode 100644 polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
 create mode 100644 polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
 create mode 100644 polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
 create mode 100644 polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
 create mode 100644 polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts

diff --git a/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
new file mode 100644
index 00000000000..b5a1749bd09
--- /dev/null
+++ b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
@@ -0,0 +1,33 @@
+import type {FileInfo} from 'jscodeshift';
+import postcss, {Plugin} from 'postcss';
+import valueParser from 'postcss-value-parser';
+
+const processed = Symbol('processed');
+
+const plugin = (): Plugin => ({
+  postcssPlugin: 'replace-sass-motion',
+  Declaration(decl) {
+    // @ts-expect-error - Skip if processed so we don't process it again
+    if (decl[processed]) return;
+
+    // const prop = decl.prop;
+    const parsedValue = valueParser(decl.value);
+
+    parsedValue.walk((node) => {
+      if (!(node.type === 'function' && node.value === 'hello')) return;
+
+      node.value = 'world';
+    });
+
+    decl.value = parsedValue.toString();
+
+    // @ts-expect-error - Mark the declaration as processed
+    decl[processed] = true;
+  },
+});
+
+export default function replaceSassMotion(fileInfo: FileInfo) {
+  return postcss(plugin()).process(fileInfo.source, {
+    syntax: require('postcss-scss'),
+  }).css;
+}
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
new file mode 100644
index 00000000000..1318ee21657
--- /dev/null
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
@@ -0,0 +1,75 @@
+.duration-simple-string-arg {
+  opacity: 1;
+  transition-duration: legacy-polaris-v8.duration('none');
+  transition-duration: legacy-polaris-v8.duration('fast');
+  transition-duration: legacy-polaris-v8.duration('base');
+  transition-duration: legacy-polaris-v8.duration('slow');
+  transition-duration: legacy-polaris-v8.duration('slower');
+  transition-duration: legacy-polaris-v8.duration('slowest');
+}
+
+.duration-simple-non-string-arg {
+  opacity: 1;
+  transition-duration: legacy-polaris-v8.duration();
+  transition-duration: legacy-polaris-v8.duration(none);
+  transition-duration: legacy-polaris-v8.duration(fast);
+  transition-duration: legacy-polaris-v8.duration(base);
+  transition-duration: legacy-polaris-v8.duration(slow);
+  transition-duration: legacy-polaris-v8.duration(slower);
+  transition-duration: legacy-polaris-v8.duration(slowest);
+}
+
+.duration-compound-string-arg {
+  opacity: 1;
+  transition: opacity legacy-polaris-v8.duration('none') linear;
+  transition: opacity legacy-polaris-v8.duration('fast') linear;
+  transition: opacity legacy-polaris-v8.duration('base') linear;
+  transition: opacity legacy-polaris-v8.duration('slow') linear;
+  transition: opacity legacy-polaris-v8.duration('slower') linear;
+  transition: opacity legacy-polaris-v8.duration('slowest') linear;
+}
+
+.duration-compound-non-string-arg {
+  opacity: 1;
+  transition: opacity legacy-polaris-v8.duration() linear;
+  transition: opacity legacy-polaris-v8.duration(none) linear;
+  transition: opacity legacy-polaris-v8.duration(fast) linear;
+  transition: opacity legacy-polaris-v8.duration(base) linear;
+  transition: opacity legacy-polaris-v8.duration(slow) linear;
+  transition: opacity legacy-polaris-v8.duration(slower) linear;
+  transition: opacity legacy-polaris-v8.duration(slowest) linear;
+}
+
+.duration-multiple-string-arg {
+  opacity: 1;
+  transition: opacity legacy-polaris-v8.duration('none') linear,
+    left legacy-polaris-v8.duration('none') linear;
+  transition: opacity legacy-polaris-v8.duration('fast') linear,
+    left legacy-polaris-v8.duration('fast') linear;
+  transition: opacity legacy-polaris-v8.duration('base') linear,
+    left legacy-polaris-v8.duration('base') linear;
+  transition: opacity legacy-polaris-v8.duration('slow') linear,
+    left legacy-polaris-v8.duration('slow') linear;
+  transition: opacity legacy-polaris-v8.duration('slower') linear,
+    left legacy-polaris-v8.duration('slower') linear;
+  transition: opacity legacy-polaris-v8.duration('slowest') linear,
+    left legacy-polaris-v8.duration('slowest') linear;
+}
+
+.duration-multiple-non-string-arg {
+  opacity: 1;
+  transition: opacity legacy-polaris-v8.duration() linear,
+    left legacy-polaris-v8.duration() linear;
+  transition: opacity legacy-polaris-v8.duration(none) linear,
+    left legacy-polaris-v8.duration(none) linear;
+  transition: opacity legacy-polaris-v8.duration(fast) linear,
+    left legacy-polaris-v8.duration(fast) linear;
+  transition: opacity legacy-polaris-v8.duration(base) linear,
+    left legacy-polaris-v8.duration(base) linear;
+  transition: opacity legacy-polaris-v8.duration(slow) linear,
+    left legacy-polaris-v8.duration(slow) linear;
+  transition: opacity legacy-polaris-v8.duration(slower) linear,
+    left legacy-polaris-v8.duration(slower) linear;
+  transition: opacity legacy-polaris-v8.duration(slowest) linear,
+    left legacy-polaris-v8.duration(slowest) linear;
+}
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
new file mode 100644
index 00000000000..d032fcee5a7
--- /dev/null
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
@@ -0,0 +1,75 @@
+.duration-simple-string-arg {
+  opacity: 1;
+  transition-duration: var(--p-duration-0);
+  transition-duration: var(--p-duration-100);
+  transition-duration: var(--p-duration-200);
+  transition-duration: var(--p-duration-300);
+  transition-duration: var(--p-duration-400);
+  transition-duration: var(--p-duration-500);
+}
+
+.duration-simple-non-string-arg {
+  opacity: 1;
+  transition-duration: var(--p-duration-200);
+  transition-duration: var(--p-duration-0);
+  transition-duration: var(--p-duration-100);
+  transition-duration: var(--p-duration-200);
+  transition-duration: var(--p-duration-300);
+  transition-duration: var(--p-duration-400);
+  transition-duration: var(--p-duration-500);
+}
+
+.duration-compound-string-arg {
+  opacity: 1;
+  transition: opacity var(--p-duration-0) linear;
+  transition: opacity var(--p-duration-100) linear;
+  transition: opacity var(--p-duration-200) linear;
+  transition: opacity var(--p-duration-300) linear;
+  transition: opacity var(--p-duration-400) linear;
+  transition: opacity var(--p-duration-500) linear;
+}
+
+.duration-compound-non-string-arg {
+  opacity: 1;
+  transition: opacity var(--p-duration-200) linear;
+  transition: opacity var(--p-duration-0) linear;
+  transition: opacity var(--p-duration-100) linear;
+  transition: opacity var(--p-duration-200) linear;
+  transition: opacity var(--p-duration-300) linear;
+  transition: opacity var(--p-duration-400) linear;
+  transition: opacity var(--p-duration-500) linear;
+}
+
+.duration-multiple-string-arg {
+  opacity: 1;
+  transition: opacity var(--p-duration-0) linear,
+    left var(--p-duration-0) linear;
+  transition: opacity var(--p-duration-100) linear,
+    left var(--p-duration-100) linear;
+  transition: opacity var(--p-duration-200) linear,
+    left var(--p-duration-200) linear;
+  transition: opacity var(--p-duration-300) linear,
+    left var(--p-duration-300) linear;
+  transition: opacity var(--p-duration-400) linear,
+    left var(--p-duration-400) linear;
+  transition: opacity var(--p-duration-500) linear,
+    left var(--p-duration-500) linear;
+}
+
+.duration-multiple-non-string-arg {
+  opacity: 1;
+  transition: opacity var(--p-duration-200) linear,
+    left var(--p-duration-200) linear;
+  transition: opacity var(--p-duration-0) linear,
+    left var(--p-duration-0) linear;
+  transition: opacity var(--p-duration-100) linear,
+    left var(--p-duration-100) linear;
+  transition: opacity var(--p-duration-200) linear,
+    left var(--p-duration-200) linear;
+  transition: opacity var(--p-duration-300) linear,
+    left var(--p-duration-300) linear;
+  transition: opacity var(--p-duration-400) linear,
+    left var(--p-duration-400) linear;
+  transition: opacity var(--p-duration-500) linear,
+    left var(--p-duration-500) linear;
+}
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
new file mode 100644
index 00000000000..395acb3e67f
--- /dev/null
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
@@ -0,0 +1,86 @@
+.easing-simple-string-arg {
+  opacity: 1;
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing('anticipate');
+  transition-timing-function: var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing('excite');
+  transition-timing-function: var(--p-ease-in);
+  transition-timing-function: var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-simple-non-string-arg {
+  opacity: 1;
+  transition-timing-function: var(--p-ease);
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing(anticipate);
+  transition-timing-function: var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing(excite);
+  transition-timing-function: var(--p-ease-in);
+  transition-timing-function: var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing(overshoot);
+}
+
+.easing-compound-string-arg {
+  opacity: 1;
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('anticipate');
+  transition: opacity 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('excite');
+  transition: opacity 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-compound-non-string-arg {
+  opacity: 1;
+  transition: opacity 300ms var(--p-ease);
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(anticipate);
+  transition: opacity 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(excite);
+  transition: opacity 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(overshoot);
+}
+
+.easing-multiple-string-arg {
+  opacity: 1;
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('anticipate'),
+    left 300ms legacy-polaris-v8.easing('anticipate');
+  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('excite'),
+    left 300ms legacy-polaris-v8.easing('excite');
+  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('overshoot'),
+    left 300ms legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-multiple-non-string-arg {
+  opacity: 1;
+  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(anticipate),
+    left 300ms legacy-polaris-v8.easing(anticipate);
+  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(excite),
+    left 300ms legacy-polaris-v8.easing(excite);
+  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(overshoot),
+    left 300ms legacy-polaris-v8.easing(overshoot);
+}
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
new file mode 100644
index 00000000000..e93a33bf12f
--- /dev/null
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
@@ -0,0 +1,12 @@
+import {check} from '../../../utilities/testUtils';
+
+const migration = 'replace-sass-motion';
+const fixtures = ['replace-sass-duration', 'replace-sass-easing'];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: 'scss',
+  });
+}

From 52200e7afbf82c9bba578b7ab060da863aac44d1 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Wed, 12 Oct 2022 16:33:10 +1100
Subject: [PATCH 02/11] More thorough test cases

---
 .../tests/replace-sass-duration.input.scss    | 122 ++++++++++++++++++
 .../tests/replace-sass-duration.output.scss   | 122 ++++++++++++++++++
 .../tests/replace-sass-easing.input.scss      | 105 +++++++++------
 .../tests/replace-sass-easing.output.scss     | 122 ++++++++++++++++++
 4 files changed, 430 insertions(+), 41 deletions(-)

diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
index 1318ee21657..39a8f9e1c77 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
@@ -19,6 +19,34 @@
   transition-duration: legacy-polaris-v8.duration(slowest);
 }
 
+.duration-simple-constant {
+  opacity: 1;
+  transition-duration: 0;
+  transition-duration: 0ms;
+  transition-duration: 0s;
+  transition-duration: 50ms;
+  transition-duration: 0.05s;
+  transition-duration: 100ms;
+  transition-duration: 0.1s;
+  transition-duration: 150ms;
+  transition-duration: 0.15s;
+  transition-duration: 200ms;
+  transition-duration: 0.2s;
+  transition-duration: 250ms;
+  transition-duration: 0.25s;
+  transition-duration: 300ms;
+  transition-duration: 0.3s;
+  transition-duration: 350ms;
+  transition-duration: 0.35s;
+  transition-duration: 400ms;
+  transition-duration: 0.4s;
+  transition-duration: 450ms;
+  transition-duration: 0.45s;
+  transition-duration: 500ms;
+  transition-duration: 0.5s;
+  transition-duration: 5s;
+}
+
 .duration-compound-string-arg {
   opacity: 1;
   transition: opacity legacy-polaris-v8.duration('none') linear;
@@ -40,6 +68,34 @@
   transition: opacity legacy-polaris-v8.duration(slowest) linear;
 }
 
+.duration-compound-constant {
+  opacity: 1;
+  transition: opacity 0 linear;
+  transition: opacity 0ms linear;
+  transition: opacity 0s linear;
+  transition: opacity 50ms linear;
+  transition: opacity 0.05s linear;
+  transition: opacity 100ms linear;
+  transition: opacity 0.1s linear;
+  transition: opacity 150ms linear;
+  transition: opacity 0.15s linear;
+  transition: opacity 200ms linear;
+  transition: opacity 0.2s linear;
+  transition: opacity 250ms linear;
+  transition: opacity 0.25s linear;
+  transition: opacity 300ms linear;
+  transition: opacity 0.3s linear;
+  transition: opacity 350ms linear;
+  transition: opacity 0.35s linear;
+  transition: opacity 400ms linear;
+  transition: opacity 0.4s linear;
+  transition: opacity 450ms linear;
+  transition: opacity 0.45s linear;
+  transition: opacity 500ms linear;
+  transition: opacity 0.5s linear;
+  transition: opacity 5s linear;
+}
+
 .duration-multiple-string-arg {
   opacity: 1;
   transition: opacity legacy-polaris-v8.duration('none') linear,
@@ -73,3 +129,69 @@
   transition: opacity legacy-polaris-v8.duration(slowest) linear,
     left legacy-polaris-v8.duration(slowest) linear;
 }
+
+/* Don't let prettier pretty-ify this so it matches our output */
+/* prettier-ignore */
+.duration-multiple-constant {
+  opacity: 1;
+  transition: opacity 0 linear,
+    left 0 linear;
+  transition: opacity 0ms linear,
+    left 0ms linear;
+  transition: opacity 0s linear,
+    left 0s linear;
+  transition: opacity 50ms linear,
+    left 50ms linear;
+  transition: opacity 0.05s linear,
+    left 0.05s linear;
+  transition: opacity 100ms linear,
+    left 100ms linear;
+  transition: opacity 0.1s linear,
+    left 0.1s linear;
+  transition: opacity 150ms linear,
+    left 150ms linear;
+  transition: opacity 0.15s linear,
+    left 0.15s linear;
+  transition: opacity 200ms linear,
+    left 200ms linear;
+  transition: opacity 0.2s linear,
+    left 0.2s linear;
+  transition: opacity 250ms linear,
+    left 250ms linear;
+  transition: opacity 0.25s linear,
+    left 0.25s linear;
+  transition: opacity 300ms linear,
+    left 300ms linear;
+  transition: opacity 0.3s linear,
+    left 0.3s linear;
+  transition: opacity 350ms linear,
+    left 350ms linear;
+  transition: opacity 0.35s linear,
+    left 0.35s linear;
+  transition: opacity 400ms linear,
+    left 400ms linear;
+  transition: opacity 0.4s linear,
+    left 0.4s linear;
+  transition: opacity 450ms linear,
+    left 450ms linear;
+  transition: opacity 0.45s linear,
+    left 0.45s linear;
+  transition: opacity 500ms linear,
+    left 500ms linear;
+  transition: opacity 0.5s linear,
+    left 0.5s linear;
+  transition: opacity 5s linear,
+    left 5s linear;
+}
+
+.edges {
+  /* sass calculation */
+  transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms;
+  /* Using duration as the transition-delay shorthand */
+  transition: opacity linear 0.5ms;
+  /* Don't let prettier pretty-ify this so it matches our output */
+  /* prettier-ignore */
+  transition: opacity legacy-polaris-v8.duration(slower) linear legacy-polaris-v8.duration(fast);
+  /* A shorthand that doesn't specify a duration, only transition-delay. Is this a bug? ¯\_(ツ)_/¯ Dunno. But it exists in the wild, so we have to handle it. */
+  transition: opacity linear legacy-polaris-v8.duration(slower);
+}
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
index d032fcee5a7..6e7e23aaf09 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
@@ -19,6 +19,33 @@
   transition-duration: var(--p-duration-500);
 }
 
+.duration-simple-constant {
+  opacity: 1;
+  transition-duration: 0;
+  transition-duration: var(--p-duration-0);
+  transition-duration: var(--p-duration-50);
+  transition-duration: var(--p-duration-50);
+  transition-duration: var(--p-duration-100);
+  transition-duration: var(--p-duration-100);
+  transition-duration: var(--p-duration-150);
+  transition-duration: var(--p-duration-150);
+  transition-duration: var(--p-duration-200);
+  transition-duration: var(--p-duration-200);
+  transition-duration: var(--p-duration-250);
+  transition-duration: var(--p-duration-250);
+  transition-duration: var(--p-duration-300);
+  transition-duration: var(--p-duration-300);
+  transition-duration: var(--p-duration-350);
+  transition-duration: var(--p-duration-350);
+  transition-duration: var(--p-duration-400);
+  transition-duration: var(--p-duration-400);
+  transition-duration: var(--p-duration-450);
+  transition-duration: var(--p-duration-450);
+  transition-duration: var(--p-duration-500);
+  transition-duration: var(--p-duration-500);
+  transition-duration: var(--p-duration-5000);
+}
+
 .duration-compound-string-arg {
   opacity: 1;
   transition: opacity var(--p-duration-0) linear;
@@ -40,6 +67,34 @@
   transition: opacity var(--p-duration-500) linear;
 }
 
+.duration-compound-constant {
+  opacity: 1;
+  transition: opacity var(--p-duration-0) linear;
+  transition: opacity var(--p-duration-0) linear;
+  transition: opacity var(--p-duration-0) linear;
+  transition: opacity var(--p-duration-50) linear;
+  transition: opacity var(--p-duration-50) linear;
+  transition: opacity var(--p-duration-100) linear;
+  transition: opacity var(--p-duration-100) linear;
+  transition: opacity var(--p-duration-150) linear;
+  transition: opacity var(--p-duration-150) linear;
+  transition: opacity var(--p-duration-200) linear;
+  transition: opacity var(--p-duration-200) linear;
+  transition: opacity var(--p-duration-250) linear;
+  transition: opacity var(--p-duration-250) linear;
+  transition: opacity var(--p-duration-300) linear;
+  transition: opacity var(--p-duration-300) linear;
+  transition: opacity var(--p-duration-350) linear;
+  transition: opacity var(--p-duration-350) linear;
+  transition: opacity var(--p-duration-400) linear;
+  transition: opacity var(--p-duration-400) linear;
+  transition: opacity var(--p-duration-450) linear;
+  transition: opacity var(--p-duration-450) linear;
+  transition: opacity var(--p-duration-500) linear;
+  transition: opacity var(--p-duration-500) linear;
+  transition: opacity var(--p-duration-5000) linear;
+}
+
 .duration-multiple-string-arg {
   opacity: 1;
   transition: opacity var(--p-duration-0) linear,
@@ -73,3 +128,70 @@
   transition: opacity var(--p-duration-500) linear,
     left var(--p-duration-500) linear;
 }
+
+/* Don't let prettier pretty-ify this so it matches our output */
+/* prettier-ignore */
+.duration-multiple-constant {
+  opacity: 1;
+  transition: opacity var(--p-duration-0) linear,
+    left var(--p-duration-0) linear;
+  transition: opacity var(--p-duration-0) linear,
+    left var(--p-duration-0) linear;
+  transition: opacity var(--p-duration-0) linear,
+    left var(--p-duration-0) linear;
+  transition: opacity var(--p-duration-50) linear,
+    left var(--p-duration-50) linear;
+  transition: opacity var(--p-duration-50) linear,
+    left var(--p-duration-50) linear;
+  transition: opacity var(--p-duration-100) linear,
+    left var(--p-duration-100) linear;
+  transition: opacity var(--p-duration-100) linear,
+    left var(--p-duration-100) linear;
+  transition: opacity var(--p-duration-150) linear,
+    left var(--p-duration-150) linear;
+  transition: opacity var(--p-duration-150) linear,
+    left var(--p-duration-150) linear;
+  transition: opacity var(--p-duration-200) linear,
+    left var(--p-duration-200) linear;
+  transition: opacity var(--p-duration-200) linear,
+    left var(--p-duration-200) linear;
+  transition: opacity var(--p-duration-250) linear,
+    left var(--p-duration-250) linear;
+  transition: opacity var(--p-duration-250) linear,
+    left var(--p-duration-250) linear;
+  transition: opacity var(--p-duration-300) linear,
+    left var(--p-duration-300) linear;
+  transition: opacity var(--p-duration-300) linear,
+    left var(--p-duration-300) linear;
+  transition: opacity var(--p-duration-350) linear,
+    left var(--p-duration-350) linear;
+  transition: opacity var(--p-duration-350) linear,
+    left var(--p-duration-350) linear;
+  transition: opacity var(--p-duration-400) linear,
+    left var(--p-duration-400) linear;
+  transition: opacity var(--p-duration-400) linear,
+    left var(--p-duration-400) linear;
+  transition: opacity var(--p-duration-450) linear,
+    left var(--p-duration-450) linear;
+  transition: opacity var(--p-duration-450) linear,
+    left var(--p-duration-450) linear;
+  transition: opacity var(--p-duration-500) linear,
+    left var(--p-duration-500) linear;
+  transition: opacity var(--p-duration-500) linear,
+    left var(--p-duration-500) linear;
+  transition: opacity var(--p-duration-5000) linear,
+    left var(--p-duration-5000) linear;
+}
+
+.edges {
+  /* sass calculation */
+  /* polaris-migrator: Unable to automatically migrate this SASS calculation. */
+  transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms;
+  /* Using duration as the transition-delay shorthand */
+  transition: opacity linear var(--p-duration-500);
+  /* Don't let prettier pretty-ify this so it matches our output */
+  /* prettier-ignore */
+  transition: opacity var(--p-duration-400) linear var(--p-duration-100);
+  /* A shorthand that doesn't specify a duration, only transition-delay. Is this a bug? ¯\_(ツ)_/¯ Dunno. But it exists in the wild, so we have to handle it. */
+  transition: opacity linear var(--p-duration-400);
+}
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
index 395acb3e67f..25185f9d756 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
@@ -1,86 +1,109 @@
 .easing-simple-string-arg {
   opacity: 1;
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
   transition-timing-function: legacy-polaris-v8.easing('anticipate');
-  transition-timing-function: var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing('base');
   transition-timing-function: legacy-polaris-v8.easing('excite');
-  transition-timing-function: var(--p-ease-in);
-  transition-timing-function: var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing('in');
+  transition-timing-function: legacy-polaris-v8.easing('out');
   transition-timing-function: legacy-polaris-v8.easing('overshoot');
 }
 
 .easing-simple-non-string-arg {
   opacity: 1;
-  transition-timing-function: var(--p-ease);
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing();
   transition-timing-function: legacy-polaris-v8.easing(anticipate);
-  transition-timing-function: var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing(base);
   transition-timing-function: legacy-polaris-v8.easing(excite);
-  transition-timing-function: var(--p-ease-in);
-  transition-timing-function: var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing(in);
+  transition-timing-function: legacy-polaris-v8.easing(out);
   transition-timing-function: legacy-polaris-v8.easing(overshoot);
 }
 
-.easing-compound-string-arg {
+.easing-simple-builtins {
+  opacity: 1;
+  transition-timing-function: linear;
+  transition-timing-function: ease;
+  transition-timing-function: ease-in;
+  transition-timing-function: ease-out;
+  transition-timing-function: ease-in-out;
+}
+
+.easing-shorthand-string-arg {
   opacity: 1;
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
   transition: opacity 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('base');
   transition: opacity 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('in');
+  transition: opacity 300ms legacy-polaris-v8.easing('out');
   transition: opacity 300ms legacy-polaris-v8.easing('overshoot');
 }
 
-.easing-compound-non-string-arg {
+.easing-shorthand-non-string-arg {
   opacity: 1;
-  transition: opacity 300ms var(--p-ease);
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing();
   transition: opacity 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(base);
   transition: opacity 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(in);
+  transition: opacity 300ms legacy-polaris-v8.easing(out);
   transition: opacity 300ms legacy-polaris-v8.easing(overshoot);
 }
 
+.easing-shorthand-builtins {
+  opacity: 1;
+  transition: opacity 300ms linear;
+  transition: opacity 300ms ease;
+  transition: opacity 300ms ease-in;
+  transition: opacity 300ms ease-out;
+  transition: opacity 300ms ease-in-out;
+}
+
 .easing-multiple-string-arg {
   opacity: 1;
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
   transition: opacity 300ms legacy-polaris-v8.easing('anticipate'),
     left 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('base'),
+    left 300ms legacy-polaris-v8.easing('base');
   transition: opacity 300ms legacy-polaris-v8.easing('excite'),
     left 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('in'),
+    left 300ms legacy-polaris-v8.easing('in');
+  transition: opacity 300ms legacy-polaris-v8.easing('out'),
+    left 300ms legacy-polaris-v8.easing('out');
   transition: opacity 300ms legacy-polaris-v8.easing('overshoot'),
     left 300ms legacy-polaris-v8.easing('overshoot');
 }
 
 .easing-multiple-non-string-arg {
   opacity: 1;
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(),
+    left 300ms legacy-polaris-v8.easing();
   transition: opacity 300ms legacy-polaris-v8.easing(anticipate),
     left 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(base),
+    left 300ms legacy-polaris-v8.easing(base);
   transition: opacity 300ms legacy-polaris-v8.easing(excite),
     left 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(in),
+    left 300ms legacy-polaris-v8.easing(in);
+  transition: opacity 300ms legacy-polaris-v8.easing(out),
+    left 300ms legacy-polaris-v8.easing(out);
   transition: opacity 300ms legacy-polaris-v8.easing(overshoot),
     left 300ms legacy-polaris-v8.easing(overshoot);
 }
+
+.easing-multiple-builtins {
+  opacity: 1;
+  transition: opacity 300ms linear, left 300ms linear;
+  transition: opacity 300ms ease, left 300ms ease;
+  transition: opacity 300ms ease-in, left 300ms ease-in;
+  transition: opacity 300ms ease-out, left 300ms ease-out;
+  transition: opacity 300ms ease-in-out, left 300ms ease-in-out;
+}
+
+.edges {
+  /* Easing function must be supplied to transition shorthand */
+  transition: fill 300ms;
+  /* Custom values should be flagged */
+  transition: transform 150ms cubic-bezier(0, 0, 1, 1);
+}
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
index e69de29bb2d..5f00e710c12 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
@@ -0,0 +1,122 @@
+.easing-simple-string-arg {
+  opacity: 1;
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing('anticipate');
+  transition-timing-function: var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing('excite');
+  transition-timing-function: var(--p-ease-in);
+  transition-timing-function: var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-simple-non-string-arg {
+  opacity: 1;
+  transition-timing-function: var(--p-ease);
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing(anticipate);
+  transition-timing-function: var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing(excite);
+  transition-timing-function: var(--p-ease-in);
+  transition-timing-function: var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing(overshoot);
+}
+
+.easing-simple-builtins {
+  opacity: 1;
+  transition-timing-function: var(--p-linear);
+  transition-timing-function: var(--p-ease);
+  transition-timing-function: var(--p-ease-in);
+  transition-timing-function: var(--p-ease-out);
+  transition-timing-function: var(--p-ease-in-out);
+}
+
+.easing-shorthand-string-arg {
+  opacity: 1;
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('anticipate');
+  transition: opacity 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('excite');
+  transition: opacity 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-shorthand-non-string-arg {
+  opacity: 1;
+  transition: opacity 300ms var(--p-ease);
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(anticipate);
+  transition: opacity 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(excite);
+  transition: opacity 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(overshoot);
+}
+
+.easing-shorthand-builtins {
+  opacity: 1;
+  transition: opacity 300ms var(--p-linear);
+  transition: opacity 300ms var(--p-ease);
+  transition: opacity 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out);
+  transition: opacity 300ms var(--p-ease-in-out);
+}
+
+.easing-multiple-string-arg {
+  opacity: 1;
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('anticipate'),
+    left 300ms legacy-polaris-v8.easing('anticipate');
+  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('excite'),
+    left 300ms legacy-polaris-v8.easing('excite');
+  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('overshoot'),
+    left 300ms legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-multiple-non-string-arg {
+  opacity: 1;
+  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(anticipate),
+    left 300ms legacy-polaris-v8.easing(anticipate);
+  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(excite),
+    left 300ms legacy-polaris-v8.easing(excite);
+  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(overshoot),
+    left 300ms legacy-polaris-v8.easing(overshoot);
+}
+
+.easing-multiple-builtins {
+  opacity: 1;
+  transition: opacity 300ms var(--p-linear), left 300ms var(--p-linear);
+  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
+  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
+  transition: opacity 300ms var(--p-ease-in-out),
+    left 300ms var(--p-ease-in-out);
+}
+
+.edges {
+  /* Easing function must be supplied to transition shorthand */
+  transition: fill 300ms var(--p-ease);
+  /* Custom values should be flagged */
+  /* polaris-migrator: Custom easing functions should be replaced with Polaris --p-ease-* tokens */
+  transition: transform 150ms cubic-bezier(0, 0, 1, 1);
+}

From d5acf7f80c01a0de64c3a1c7716a998bdc698969 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Thu, 13 Oct 2022 16:37:22 +1100
Subject: [PATCH 03/11] Scaffolding motion AST mutator

---
 .../replace-sass-motion.ts                    | 64 +++++++++++++++----
 1 file changed, 50 insertions(+), 14 deletions(-)

diff --git a/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
index b5a1749bd09..d73c2d9535c 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
+++ b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
@@ -1,28 +1,64 @@
 import type {FileInfo} from 'jscodeshift';
-import postcss, {Plugin} from 'postcss';
+import postcss, {Plugin, Declaration, Helpers} from 'postcss';
 import valueParser from 'postcss-value-parser';
 
 const processed = Symbol('processed');
 
-const plugin = (): Plugin => ({
-  postcssPlugin: 'replace-sass-motion',
-  Declaration(decl) {
-    // @ts-expect-error - Skip if processed so we don't process it again
-    if (decl[processed]) return;
+/*
+function mutateTransitionDurationProp(decl): void {}
+function mutateTransitionDelayProp(decl): void {}
+function mutateTransitionProp(decl): void {}
+
+function mutateTransitionDurationValue(decl, node: unknown): void {}
+function mutateTransitionDelayValue(decl, node: unknown): void {}
+*/
+interface ParsedValueDeclaration extends Declaration {
+  [processed]?: boolean;
+  parsedValue: valueParser.ParsedValue;
+}
+
+// postcss doesn't export this, so had to extract it to here
+type DeclarationProcessor = (
+  decl: Declaration,
+  helper: Helpers,
+) => Promise<void> | void;
 
-    // const prop = decl.prop;
-    const parsedValue = valueParser(decl.value);
+// Inject the parsed values into the AST for processing
+function withParsedValue(
+  fn: (decl: ParsedValueDeclaration, helper: Helpers) => void,
+) {
+  return ((decl: ParsedValueDeclaration, helper: Helpers) => {
+    // Skip if processed so we don't process it again
+    if (decl[processed]) return;
 
-    parsedValue.walk((node) => {
-      if (!(node.type === 'function' && node.value === 'hello')) return;
+    decl.parsedValue = valueParser(decl.value);
 
-      node.value = 'world';
-    });
+    const result = fn(decl, helper);
 
-    decl.value = parsedValue.toString();
+    decl.value = decl.parsedValue.toString();
 
-    // @ts-expect-error - Mark the declaration as processed
+    // Mark the declaration as processed
     decl[processed] = true;
+
+    return result;
+  }) as DeclarationProcessor;
+}
+
+const plugin = (): Plugin => ({
+  postcssPlugin: 'replace-sass-motion',
+  Declaration: {
+    'transition-duration': withParsedValue((decl) => {
+      console.log('transition-duration');
+      // decl.parsedValue.walk((node) => {
+      //   console.log(JSON.stringify(node, null, 2));
+      // });
+    }),
+    'transition-delay': withParsedValue((decl) => {
+      console.log('transition-delay');
+    }),
+    transition: withParsedValue((decl) => {
+      console.log('transition');
+    }),
   },
 });
 

From f40484b406cca9ccdc5f1ad24cea3603083c27a1 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Thu, 13 Oct 2022 17:25:09 +1100
Subject: [PATCH 04/11] WIP some structuring to the motion processing

---
 .../replace-sass-motion.ts                    | 82 +++++++++++++------
 1 file changed, 56 insertions(+), 26 deletions(-)

diff --git a/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
index d73c2d9535c..bb53e1d5386 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
+++ b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
@@ -1,20 +1,25 @@
 import type {FileInfo} from 'jscodeshift';
 import postcss, {Plugin, Declaration, Helpers} from 'postcss';
-import valueParser from 'postcss-value-parser';
+import valueParser, {ParsedValue, Node} from 'postcss-value-parser';
+
+import {
+  NamespaceOptions,
+  namespace,
+  isSassFunction,
+} from '../../utilities/sass';
+import {isKeyOf} from '../../utilities/type-guards';
 
 const processed = Symbol('processed');
+const DEFAULT_DURATION = 'base';
 
-/*
-function mutateTransitionDurationProp(decl): void {}
-function mutateTransitionDelayProp(decl): void {}
-function mutateTransitionProp(decl): void {}
+const durationMap = {
+  // TODO
+  none: '--p-duration-0',
+};
 
-function mutateTransitionDurationValue(decl, node: unknown): void {}
-function mutateTransitionDelayValue(decl, node: unknown): void {}
-*/
 interface ParsedValueDeclaration extends Declaration {
   [processed]?: boolean;
-  parsedValue: valueParser.ParsedValue;
+  parsedValue: ParsedValue;
 }
 
 // postcss doesn't export this, so had to extract it to here
@@ -44,23 +49,48 @@ function withParsedValue(
   }) as DeclarationProcessor;
 }
 
-const plugin = (): Plugin => ({
-  postcssPlugin: 'replace-sass-motion',
-  Declaration: {
-    'transition-duration': withParsedValue((decl) => {
-      console.log('transition-duration');
-      // decl.parsedValue.walk((node) => {
-      //   console.log(JSON.stringify(node, null, 2));
-      // });
-    }),
-    'transition-delay': withParsedValue((decl) => {
-      console.log('transition-delay');
-    }),
-    transition: withParsedValue((decl) => {
-      console.log('transition');
-    }),
-  },
-});
+interface PluginOptions extends Options, NamespaceOptions {}
+
+const plugin = (options: PluginOptions = {}): Plugin => {
+  const durationFunc = namespace('duration', options);
+
+  function mutateTransitionDurationValue(
+    node: Node,
+    //decl: ParsedValueDeclaration,
+  ): void {
+    if (isSassFunction(durationFunc, node)) {
+      const duration = node.nodes[0]?.value ?? DEFAULT_DURATION;
+      if (!isKeyOf(durationMap, duration)) {
+        // TODO: Insert a comment that this function invocation has an invalid
+        // parameter
+      }
+    } else if (true /* isConstantValue */) {
+      // TODO
+    } else if (true /* isExpression */) {
+      // TODO
+    }
+  }
+
+  //function mutateTransitionDelayValue(decl, node: unknown): void {}
+
+  return {
+    postcssPlugin: 'replace-sass-motion',
+    Declaration: {
+      'transition-duration': withParsedValue((decl) => {
+        console.log('transition-duration');
+        decl.parsedValue.walk((node) => {
+          mutateTransitionDurationValue(node, decl);
+        });
+      }),
+      'transition-delay': withParsedValue((decl) => {
+        console.log('transition-delay');
+      }),
+      transition: withParsedValue((decl) => {
+        console.log('transition');
+      }),
+    },
+  };
+};
 
 export default function replaceSassMotion(fileInfo: FileInfo) {
   return postcss(plugin()).process(fileInfo.source, {

From fd048ed0b7e6d1ea3c39ec5c92d8c7fd7945b800 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Fri, 14 Oct 2022 17:42:40 +1100
Subject: [PATCH 05/11] Working duration migration for motion

---
 .../replace-sass-motion.ts                    | 268 ++++++++++++++++--
 .../tests/replace-sass-duration.input.scss    |  83 ++----
 .../tests/replace-sass-duration.output.scss   |  12 +-
 .../tests/replace-sass-motion.test.ts         |   7 +-
 4 files changed, 287 insertions(+), 83 deletions(-)

diff --git a/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
index bb53e1d5386..7f6494d6543 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
+++ b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
@@ -1,22 +1,92 @@
-import type {FileInfo} from 'jscodeshift';
+import type {FileInfo, API, Options} from 'jscodeshift';
 import postcss, {Plugin, Declaration, Helpers} from 'postcss';
-import valueParser, {ParsedValue, Node} from 'postcss-value-parser';
+import valueParser, {
+  ParsedValue,
+  Node,
+  FunctionNode,
+} from 'postcss-value-parser';
 
+import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
 import {
   NamespaceOptions,
   namespace,
   isSassFunction,
+  hasNumericOperator,
 } from '../../utilities/sass';
 import {isKeyOf} from '../../utilities/type-guards';
 
 const processed = Symbol('processed');
 const DEFAULT_DURATION = 'base';
 
-const durationMap = {
-  // TODO
+const durationFuncMap = {
   none: '--p-duration-0',
+  fast: '--p-duration-100',
+  base: '--p-duration-200',
+  slow: '--p-duration-300',
+  slower: '--p-duration-400',
+  slowest: '--p-duration-500',
 };
 
+const durationConstantsMap = {
+  '0': '--p-duration-0',
+  '0s': '--p-duration-0',
+  '0ms': '--p-duration-0',
+  '50ms': '--p-duration-50',
+  '0.05s': '--p-duration-50',
+  '100ms': '--p-duration-100',
+  '0.1s': '--p-duration-100',
+  '150ms': '--p-duration-150',
+  '0.15s': '--p-duration-150',
+  '200ms': '--p-duration-200',
+  '0.2s': '--p-duration-200',
+  '250ms': '--p-duration-250',
+  '0.25s': '--p-duration-250',
+  '300ms': '--p-duration-300',
+  '0.3s': '--p-duration-300',
+  '350ms': '--p-duration-350',
+  '0.35s': '--p-duration-350',
+  '400ms': '--p-duration-400',
+  '0.4s': '--p-duration-400',
+  '450ms': '--p-duration-450',
+  '0.45s': '--p-duration-450',
+  '500ms': '--p-duration-500',
+  '0.5s': '--p-duration-500',
+  '5s': '--p-duration-5000',
+};
+
+function normaliseStringifiedNumber(number: string): string {
+  return Number(number).toString();
+}
+
+function isValidConstantTimeUnit(value: string): boolean {
+  const unit = valueParser.unit(value);
+  // 1. <time> is a dimension with 's' or 'ms' as the unit
+  // https://w3c.github.io/csswg-drafts/css-values-3/#time-value
+  return (
+    unit &&
+    (['s', 'ms'].includes(unit.unit) ||
+      (!unit.unit && Number(unit.number) === 0))
+  );
+}
+
+function isPolarisCustomProperty(node: Node): boolean {
+  return (
+    isSassFunction('var', node) &&
+    (node.nodes?.[0]?.value ?? '').startsWith('--p-')
+  );
+}
+
+function replaceNodeWithValue(node: Node, value: string): void {
+  const {sourceIndex} = node;
+  const parsedValue = valueParser(value).nodes[0];
+  Object.assign(node, parsedValue);
+  // The node we're replacing might be mid-way through a higher-level value
+  // string. Eg; 'border: 1px solid', the 'solid' node is 5 characters into the
+  // higher-level value, so we need to correct the index here.
+  node.sourceIndex += sourceIndex;
+  node.sourceEndIndex += sourceIndex;
+}
+
 interface ParsedValueDeclaration extends Declaration {
   [processed]?: boolean;
   parsedValue: ParsedValue;
@@ -54,46 +124,200 @@ interface PluginOptions extends Options, NamespaceOptions {}
 const plugin = (options: PluginOptions = {}): Plugin => {
   const durationFunc = namespace('duration', options);
 
+  function isValidDurationFunction(node: Node): node is FunctionNode {
+    return isSassFunction(durationFunc, node);
+  }
+
   function mutateTransitionDurationValue(
     node: Node,
-    //decl: ParsedValueDeclaration,
-  ): void {
-    if (isSassFunction(durationFunc, node)) {
+    decl: ParsedValueDeclaration,
+  ): boolean {
+    if (isPolarisCustomProperty(node)) {
+      return true;
+    }
+
+    if (isValidDurationFunction(node)) {
       const duration = node.nodes[0]?.value ?? DEFAULT_DURATION;
-      if (!isKeyOf(durationMap, duration)) {
-        // TODO: Insert a comment that this function invocation has an invalid
-        // parameter
+
+      if (isKeyOf(durationFuncMap, duration)) {
+        const durationCustomProperty = durationFuncMap[duration];
+        replaceNodeWithValue(node, `var(${durationCustomProperty})`);
+      } else {
+        decl.before(
+          postcss.comment({
+            text: `${POLARIS_MIGRATOR_COMMENT} Unknown duration key '${duration}'.`,
+          }),
+        );
+      }
+
+      return true;
+    }
+
+    const unit = valueParser.unit(node.value);
+    if (unit) {
+      const constantDuration = `${normaliseStringifiedNumber(unit.number)}${
+        unit.unit
+      }`;
+
+      if (isKeyOf(durationConstantsMap, constantDuration)) {
+        const durationCustomProperty = durationConstantsMap[constantDuration];
+
+        replaceNodeWithValue(node, `var(${durationCustomProperty})`);
+      } else {
+        decl.before(
+          postcss.comment({
+            text: `${POLARIS_MIGRATOR_COMMENT} No matching duration token for '${constantDuration}'.`,
+          }),
+        );
       }
-    } else if (true /* isConstantValue */) {
-      // TODO
-    } else if (true /* isExpression */) {
-      // TODO
+
+      return true;
     }
+
+    return false;
   }
 
-  //function mutateTransitionDelayValue(decl, node: unknown): void {}
+  function mutateTransitionDelayValue(
+    node: Node,
+    decl: ParsedValueDeclaration,
+  ): boolean {
+    // For now, we treat delays like durations
+    return mutateTransitionDurationValue(node, decl);
+  }
+
+  function mutateTransitionShorthandValue(decl: ParsedValueDeclaration): void {
+    const splitValues: Node[][] = [[]];
+
+    // Gathering up references of nodes into groups. Important to note that
+    // we're dealing with mutable structures here, so we are purposefully
+    // NOT making copies.
+    decl.parsedValue.nodes.forEach((node) => {
+      if (node.type === 'div') {
+        splitValues.push([]);
+      } else {
+        splitValues.at(-1)!.push(node);
+      }
+    });
+
+    splitValues.forEach((nodes) => {
+      mutateSingleTransitionShorthandValue(nodes, decl);
+    });
+  }
+
+  function mutateSingleTransitionShorthandValue(
+    nodes: Node[],
+    decl: ParsedValueDeclaration,
+  ): void {
+    // From the spec:
+    //
+    // Note that order is important within the items in this property: the
+    // first value that can be parsed as a time is assigned to the
+    // transition-duration, and the second value that can be parsed as a
+    // time is assigned to transition-delay.
+    // https://w3c.github.io/csswg-drafts/css-transitions-1/#transition-shorthand-property
+    //
+    // That sounds like an array to me! [0] is duration, [1] is delay.
+    const timings: Node[] = [];
+
+    nodes.forEach((node) => {
+      if (
+        isValidConstantTimeUnit(node.value) ||
+        isValidDurationFunction(node)
+      ) {
+        timings.push(node);
+      } else {
+        // TODO: Try process it as an easing function
+      }
+    });
+
+    if (timings[0]) {
+      if (!mutateTransitionDurationValue(timings[0], decl)) {
+        decl.before(
+          postcss.comment({
+            text: POLARIS_MIGRATOR_COMMENT,
+          }),
+        );
+      }
+    }
+
+    if (timings[1]) {
+      if (!mutateTransitionDelayValue(timings[1], decl)) {
+        decl.before(
+          postcss.comment({
+            text: POLARIS_MIGRATOR_COMMENT,
+          }),
+        );
+      }
+    }
+  }
 
   return {
     postcssPlugin: 'replace-sass-motion',
     Declaration: {
       'transition-duration': withParsedValue((decl) => {
-        console.log('transition-duration');
-        decl.parsedValue.walk((node) => {
-          mutateTransitionDurationValue(node, decl);
+        if (hasNumericOperator(decl.parsedValue)) {
+          decl.before(
+            postcss.comment({
+              text: POLARIS_MIGRATOR_COMMENT,
+            }),
+          );
+          return;
+        }
+
+        decl.parsedValue.nodes.forEach((node) => {
+          if (!mutateTransitionDurationValue(node, decl)) {
+            decl.before(
+              postcss.comment({
+                text: POLARIS_MIGRATOR_COMMENT,
+              }),
+            );
+          }
         });
       }),
+
       'transition-delay': withParsedValue((decl) => {
-        console.log('transition-delay');
+        if (hasNumericOperator(decl.parsedValue)) {
+          decl.before(
+            postcss.comment({
+              text: POLARIS_MIGRATOR_COMMENT,
+            }),
+          );
+          return;
+        }
+
+        decl.parsedValue.nodes.forEach((node) => {
+          if (!mutateTransitionDelayValue(node, decl)) {
+            decl.before(
+              postcss.comment({
+                text: POLARIS_MIGRATOR_COMMENT,
+              }),
+            );
+          }
+        });
       }),
+
       transition: withParsedValue((decl) => {
-        console.log('transition');
+        if (hasNumericOperator(decl.parsedValue)) {
+          decl.before(
+            postcss.comment({
+              text: POLARIS_MIGRATOR_COMMENT,
+            }),
+          );
+          return;
+        }
+
+        mutateTransitionShorthandValue(decl);
       }),
     },
   };
 };
 
-export default function replaceSassMotion(fileInfo: FileInfo) {
-  return postcss(plugin()).process(fileInfo.source, {
+export default function replaceSassMotion(
+  fileInfo: FileInfo,
+  _: API,
+  options: Options,
+) {
+  return postcss(plugin(options)).process(fileInfo.source, {
     syntax: require('postcss-scss'),
   }).css;
 }
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
index 39a8f9e1c77..2fac2429e4d 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
@@ -130,68 +130,43 @@
     left legacy-polaris-v8.duration(slowest) linear;
 }
 
-/* Don't let prettier pretty-ify this so it matches our output */
-/* prettier-ignore */
 .duration-multiple-constant {
   opacity: 1;
-  transition: opacity 0 linear,
-    left 0 linear;
-  transition: opacity 0ms linear,
-    left 0ms linear;
-  transition: opacity 0s linear,
-    left 0s linear;
-  transition: opacity 50ms linear,
-    left 50ms linear;
-  transition: opacity 0.05s linear,
-    left 0.05s linear;
-  transition: opacity 100ms linear,
-    left 100ms linear;
-  transition: opacity 0.1s linear,
-    left 0.1s linear;
-  transition: opacity 150ms linear,
-    left 150ms linear;
-  transition: opacity 0.15s linear,
-    left 0.15s linear;
-  transition: opacity 200ms linear,
-    left 200ms linear;
-  transition: opacity 0.2s linear,
-    left 0.2s linear;
-  transition: opacity 250ms linear,
-    left 250ms linear;
-  transition: opacity 0.25s linear,
-    left 0.25s linear;
-  transition: opacity 300ms linear,
-    left 300ms linear;
-  transition: opacity 0.3s linear,
-    left 0.3s linear;
-  transition: opacity 350ms linear,
-    left 350ms linear;
-  transition: opacity 0.35s linear,
-    left 0.35s linear;
-  transition: opacity 400ms linear,
-    left 400ms linear;
-  transition: opacity 0.4s linear,
-    left 0.4s linear;
-  transition: opacity 450ms linear,
-    left 450ms linear;
-  transition: opacity 0.45s linear,
-    left 0.45s linear;
-  transition: opacity 500ms linear,
-    left 500ms linear;
-  transition: opacity 0.5s linear,
-    left 0.5s linear;
-  transition: opacity 5s linear,
-    left 5s linear;
+  transition: opacity 0 linear, left 0 linear;
+  transition: opacity 0ms linear, left 0ms linear;
+  transition: opacity 0s linear, left 0s linear;
+  transition: opacity 50ms linear, left 50ms linear;
+  transition: opacity 0.05s linear, left 0.05s linear;
+  transition: opacity 100ms linear, left 100ms linear;
+  transition: opacity 0.1s linear, left 0.1s linear;
+  transition: opacity 150ms linear, left 150ms linear;
+  transition: opacity 0.15s linear, left 0.15s linear;
+  transition: opacity 200ms linear, left 200ms linear;
+  transition: opacity 0.2s linear, left 0.2s linear;
+  transition: opacity 250ms linear, left 250ms linear;
+  transition: opacity 0.25s linear, left 0.25s linear;
+  transition: opacity 300ms linear, left 300ms linear;
+  transition: opacity 0.3s linear, left 0.3s linear;
+  transition: opacity 350ms linear, left 350ms linear;
+  transition: opacity 0.35s linear, left 0.35s linear;
+  transition: opacity 400ms linear, left 400ms linear;
+  transition: opacity 0.4s linear, left 0.4s linear;
+  transition: opacity 450ms linear, left 450ms linear;
+  transition: opacity 0.45s linear, left 0.45s linear;
+  transition: opacity 500ms linear, left 500ms linear;
+  transition: opacity 0.5s linear, left 0.5s linear;
+  transition: opacity 5s linear, left 5s linear;
 }
 
 .edges {
   /* sass calculation */
   transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms;
   /* Using duration as the transition-delay shorthand */
-  transition: opacity linear 0.5ms;
-  /* Don't let prettier pretty-ify this so it matches our output */
-  /* prettier-ignore */
-  transition: opacity legacy-polaris-v8.duration(slower) linear legacy-polaris-v8.duration(fast);
+  transition: opacity linear 0.5s;
+  transition: opacity legacy-polaris-v8.duration(slower) linear
+    legacy-polaris-v8.duration(fast);
   /* A shorthand that doesn't specify a duration, only transition-delay. Is this a bug? ¯\_(ツ)_/¯ Dunno. But it exists in the wild, so we have to handle it. */
   transition: opacity linear legacy-polaris-v8.duration(slower);
+  /* foobar isn't a valid duration key */
+  transition-duration: legacy-polaris-v8.duration(foobar);
 }
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
index 6e7e23aaf09..770263b5e45 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
@@ -21,7 +21,8 @@
 
 .duration-simple-constant {
   opacity: 1;
-  transition-duration: 0;
+  transition-duration: var(--p-duration-0);
+  transition-duration: var(--p-duration-0);
   transition-duration: var(--p-duration-0);
   transition-duration: var(--p-duration-50);
   transition-duration: var(--p-duration-50);
@@ -129,8 +130,6 @@
     left var(--p-duration-500) linear;
 }
 
-/* Don't let prettier pretty-ify this so it matches our output */
-/* prettier-ignore */
 .duration-multiple-constant {
   opacity: 1;
   transition: opacity var(--p-duration-0) linear,
@@ -185,13 +184,14 @@
 
 .edges {
   /* sass calculation */
-  /* polaris-migrator: Unable to automatically migrate this SASS calculation. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
   transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms;
   /* Using duration as the transition-delay shorthand */
   transition: opacity linear var(--p-duration-500);
-  /* Don't let prettier pretty-ify this so it matches our output */
-  /* prettier-ignore */
   transition: opacity var(--p-duration-400) linear var(--p-duration-100);
   /* A shorthand that doesn't specify a duration, only transition-delay. Is this a bug? ¯\_(ツ)_/¯ Dunno. But it exists in the wild, so we have to handle it. */
   transition: opacity linear var(--p-duration-400);
+  /* foobar isn't a valid duration key */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unknown duration key 'foobar'. */
+  transition-duration: legacy-polaris-v8.duration(foobar);
 }
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
index e93a33bf12f..f1df4c22dcd 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
@@ -1,12 +1,17 @@
 import {check} from '../../../utilities/testUtils';
 
 const migration = 'replace-sass-motion';
-const fixtures = ['replace-sass-duration', 'replace-sass-easing'];
+// const fixtures = ['debug'];
+// const fixtures = ['replace-sass-duration', 'replace-sass-easing'];
+const fixtures = ['replace-sass-duration'];
 
 for (const fixture of fixtures) {
   check(__dirname, {
     fixture,
     migration,
     extension: 'scss',
+    options: {
+      namespace: 'legacy-polaris-v8',
+    },
   });
 }

From 889b9afa5a92aa6d934654e472c62cb5a2867036 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Fri, 14 Oct 2022 17:51:45 +1100
Subject: [PATCH 06/11] Remove easing from this branch

---
 .../tests/replace-sass-easing.input.scss      | 109 ----------------
 .../tests/replace-sass-easing.output.scss     | 122 ------------------
 .../tests/replace-sass-motion.test.ts         |   2 -
 3 files changed, 233 deletions(-)
 delete mode 100644 polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
 delete mode 100644 polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss

diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
deleted file mode 100644
index 25185f9d756..00000000000
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-.easing-simple-string-arg {
-  opacity: 1;
-  transition-timing-function: legacy-polaris-v8.easing('anticipate');
-  transition-timing-function: legacy-polaris-v8.easing('base');
-  transition-timing-function: legacy-polaris-v8.easing('excite');
-  transition-timing-function: legacy-polaris-v8.easing('in');
-  transition-timing-function: legacy-polaris-v8.easing('out');
-  transition-timing-function: legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-simple-non-string-arg {
-  opacity: 1;
-  transition-timing-function: legacy-polaris-v8.easing();
-  transition-timing-function: legacy-polaris-v8.easing(anticipate);
-  transition-timing-function: legacy-polaris-v8.easing(base);
-  transition-timing-function: legacy-polaris-v8.easing(excite);
-  transition-timing-function: legacy-polaris-v8.easing(in);
-  transition-timing-function: legacy-polaris-v8.easing(out);
-  transition-timing-function: legacy-polaris-v8.easing(overshoot);
-}
-
-.easing-simple-builtins {
-  opacity: 1;
-  transition-timing-function: linear;
-  transition-timing-function: ease;
-  transition-timing-function: ease-in;
-  transition-timing-function: ease-out;
-  transition-timing-function: ease-in-out;
-}
-
-.easing-shorthand-string-arg {
-  opacity: 1;
-  transition: opacity 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms legacy-polaris-v8.easing('base');
-  transition: opacity 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms legacy-polaris-v8.easing('in');
-  transition: opacity 300ms legacy-polaris-v8.easing('out');
-  transition: opacity 300ms legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-shorthand-non-string-arg {
-  opacity: 1;
-  transition: opacity 300ms legacy-polaris-v8.easing();
-  transition: opacity 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms legacy-polaris-v8.easing(base);
-  transition: opacity 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms legacy-polaris-v8.easing(in);
-  transition: opacity 300ms legacy-polaris-v8.easing(out);
-  transition: opacity 300ms legacy-polaris-v8.easing(overshoot);
-}
-
-.easing-shorthand-builtins {
-  opacity: 1;
-  transition: opacity 300ms linear;
-  transition: opacity 300ms ease;
-  transition: opacity 300ms ease-in;
-  transition: opacity 300ms ease-out;
-  transition: opacity 300ms ease-in-out;
-}
-
-.easing-multiple-string-arg {
-  opacity: 1;
-  transition: opacity 300ms legacy-polaris-v8.easing('anticipate'),
-    left 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms legacy-polaris-v8.easing('base'),
-    left 300ms legacy-polaris-v8.easing('base');
-  transition: opacity 300ms legacy-polaris-v8.easing('excite'),
-    left 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms legacy-polaris-v8.easing('in'),
-    left 300ms legacy-polaris-v8.easing('in');
-  transition: opacity 300ms legacy-polaris-v8.easing('out'),
-    left 300ms legacy-polaris-v8.easing('out');
-  transition: opacity 300ms legacy-polaris-v8.easing('overshoot'),
-    left 300ms legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-multiple-non-string-arg {
-  opacity: 1;
-  transition: opacity 300ms legacy-polaris-v8.easing(),
-    left 300ms legacy-polaris-v8.easing();
-  transition: opacity 300ms legacy-polaris-v8.easing(anticipate),
-    left 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms legacy-polaris-v8.easing(base),
-    left 300ms legacy-polaris-v8.easing(base);
-  transition: opacity 300ms legacy-polaris-v8.easing(excite),
-    left 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms legacy-polaris-v8.easing(in),
-    left 300ms legacy-polaris-v8.easing(in);
-  transition: opacity 300ms legacy-polaris-v8.easing(out),
-    left 300ms legacy-polaris-v8.easing(out);
-  transition: opacity 300ms legacy-polaris-v8.easing(overshoot),
-    left 300ms legacy-polaris-v8.easing(overshoot);
-}
-
-.easing-multiple-builtins {
-  opacity: 1;
-  transition: opacity 300ms linear, left 300ms linear;
-  transition: opacity 300ms ease, left 300ms ease;
-  transition: opacity 300ms ease-in, left 300ms ease-in;
-  transition: opacity 300ms ease-out, left 300ms ease-out;
-  transition: opacity 300ms ease-in-out, left 300ms ease-in-out;
-}
-
-.edges {
-  /* Easing function must be supplied to transition shorthand */
-  transition: fill 300ms;
-  /* Custom values should be flagged */
-  transition: transform 150ms cubic-bezier(0, 0, 1, 1);
-}
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
deleted file mode 100644
index 5f00e710c12..00000000000
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-.easing-simple-string-arg {
-  opacity: 1;
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition-timing-function: legacy-polaris-v8.easing('anticipate');
-  transition-timing-function: var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition-timing-function: legacy-polaris-v8.easing('excite');
-  transition-timing-function: var(--p-ease-in);
-  transition-timing-function: var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition-timing-function: legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-simple-non-string-arg {
-  opacity: 1;
-  transition-timing-function: var(--p-ease);
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition-timing-function: legacy-polaris-v8.easing(anticipate);
-  transition-timing-function: var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition-timing-function: legacy-polaris-v8.easing(excite);
-  transition-timing-function: var(--p-ease-in);
-  transition-timing-function: var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition-timing-function: legacy-polaris-v8.easing(overshoot);
-}
-
-.easing-simple-builtins {
-  opacity: 1;
-  transition-timing-function: var(--p-linear);
-  transition-timing-function: var(--p-ease);
-  transition-timing-function: var(--p-ease-in);
-  transition-timing-function: var(--p-ease-out);
-  transition-timing-function: var(--p-ease-in-out);
-}
-
-.easing-shorthand-string-arg {
-  opacity: 1;
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-shorthand-non-string-arg {
-  opacity: 1;
-  transition: opacity 300ms var(--p-ease);
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(overshoot);
-}
-
-.easing-shorthand-builtins {
-  opacity: 1;
-  transition: opacity 300ms var(--p-linear);
-  transition: opacity 300ms var(--p-ease);
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  transition: opacity 300ms var(--p-ease-in-out);
-}
-
-.easing-multiple-string-arg {
-  opacity: 1;
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('anticipate'),
-    left 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('excite'),
-    left 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('overshoot'),
-    left 300ms legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-multiple-non-string-arg {
-  opacity: 1;
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(anticipate),
-    left 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(excite),
-    left 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(overshoot),
-    left 300ms legacy-polaris-v8.easing(overshoot);
-}
-
-.easing-multiple-builtins {
-  opacity: 1;
-  transition: opacity 300ms var(--p-linear), left 300ms var(--p-linear);
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  transition: opacity 300ms var(--p-ease-in-out),
-    left 300ms var(--p-ease-in-out);
-}
-
-.edges {
-  /* Easing function must be supplied to transition shorthand */
-  transition: fill 300ms var(--p-ease);
-  /* Custom values should be flagged */
-  /* polaris-migrator: Custom easing functions should be replaced with Polaris --p-ease-* tokens */
-  transition: transform 150ms cubic-bezier(0, 0, 1, 1);
-}
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
index f1df4c22dcd..a3a5941faa4 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
@@ -1,8 +1,6 @@
 import {check} from '../../../utilities/testUtils';
 
 const migration = 'replace-sass-motion';
-// const fixtures = ['debug'];
-// const fixtures = ['replace-sass-duration', 'replace-sass-easing'];
 const fixtures = ['replace-sass-duration'];
 
 for (const fixture of fixtures) {

From dce84a9518bc2e4930f69c15be090f3e6e7f507c Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Fri, 14 Oct 2022 18:10:06 +1100
Subject: [PATCH 07/11] Fix up duplicate edge case tests

---
 .../tests/replace-sass-duration.input.scss                | 8 +++++---
 .../tests/replace-sass-duration.output.scss               | 7 ++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
index 2fac2429e4d..399c66e18c5 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.input.scss
@@ -161,12 +161,14 @@
 .edges {
   /* sass calculation */
   transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms;
-  /* Using duration as the transition-delay shorthand */
+  /* Duration comes after easing func */
   transition: opacity linear 0.5s;
+  /* Duration + Delay */
   transition: opacity legacy-polaris-v8.duration(slower) linear
     legacy-polaris-v8.duration(fast);
-  /* A shorthand that doesn't specify a duration, only transition-delay. Is this a bug? ¯\_(ツ)_/¯ Dunno. But it exists in the wild, so we have to handle it. */
-  transition: opacity linear legacy-polaris-v8.duration(slower);
+  /* Duration + Delay after easing func */
+  transition: opacity linear legacy-polaris-v8.duration(slower)
+    legacy-polaris-v8.duration(fast);
   /* foobar isn't a valid duration key */
   transition-duration: legacy-polaris-v8.duration(foobar);
 }
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
index 770263b5e45..414f493f062 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
@@ -186,11 +186,12 @@
   /* sass calculation */
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
   transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms;
-  /* Using duration as the transition-delay shorthand */
+  /* Duration comes after easing func */
   transition: opacity linear var(--p-duration-500);
+  /* Duration + Delay */
   transition: opacity var(--p-duration-400) linear var(--p-duration-100);
-  /* A shorthand that doesn't specify a duration, only transition-delay. Is this a bug? ¯\_(ツ)_/¯ Dunno. But it exists in the wild, so we have to handle it. */
-  transition: opacity linear var(--p-duration-400);
+  /* Duration + Delay after easing func */
+  transition: opacity linear var(--p-duration-400) var(--p-duration-100);
   /* foobar isn't a valid duration key */
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unknown duration key 'foobar'. */
   transition-duration: legacy-polaris-v8.duration(foobar);

From 58d2317b6332cad8fb3fd3e5626b14f55365b8c8 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Fri, 14 Oct 2022 18:12:23 +1100
Subject: [PATCH 08/11] Add changeset

---
 .changeset/famous-ghosts-march.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/famous-ghosts-march.md

diff --git a/.changeset/famous-ghosts-march.md b/.changeset/famous-ghosts-march.md
new file mode 100644
index 00000000000..af1f61f8605
--- /dev/null
+++ b/.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.

From e9a20bb248caf0c02f57fc088cf6d5365e4d9203 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Mon, 17 Oct 2022 17:51:31 +1100
Subject: [PATCH 09/11] Expose reusable utilities outside motion migration

---
 .../replace-sass-motion.ts                    | 46 ++++---------------
 polaris-migrator/src/utilities/sass.ts        | 27 +++++++++++
 2 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
index 7f6494d6543..cd5dc7fcf63 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
+++ b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
@@ -1,10 +1,6 @@
 import type {FileInfo, API, Options} from 'jscodeshift';
 import postcss, {Plugin, Declaration, Helpers} from 'postcss';
-import valueParser, {
-  ParsedValue,
-  Node,
-  FunctionNode,
-} from 'postcss-value-parser';
+import valueParser, {ParsedValue, Node} from 'postcss-value-parser';
 
 import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
 import {
@@ -12,6 +8,8 @@ import {
   namespace,
   isSassFunction,
   hasNumericOperator,
+  isTransformableDuration,
+  isPolarisVar,
 } from '../../utilities/sass';
 import {isKeyOf} from '../../utilities/type-guards';
 
@@ -58,25 +56,7 @@ function normaliseStringifiedNumber(number: string): string {
   return Number(number).toString();
 }
 
-function isValidConstantTimeUnit(value: string): boolean {
-  const unit = valueParser.unit(value);
-  // 1. <time> is a dimension with 's' or 'ms' as the unit
-  // https://w3c.github.io/csswg-drafts/css-values-3/#time-value
-  return (
-    unit &&
-    (['s', 'ms'].includes(unit.unit) ||
-      (!unit.unit && Number(unit.number) === 0))
-  );
-}
-
-function isPolarisCustomProperty(node: Node): boolean {
-  return (
-    isSassFunction('var', node) &&
-    (node.nodes?.[0]?.value ?? '').startsWith('--p-')
-  );
-}
-
-function replaceNodeWithValue(node: Node, value: string): void {
+function setNodeValue(node: Node, value: string): void {
   const {sourceIndex} = node;
   const parsedValue = valueParser(value).nodes[0];
   Object.assign(node, parsedValue);
@@ -124,24 +104,20 @@ interface PluginOptions extends Options, NamespaceOptions {}
 const plugin = (options: PluginOptions = {}): Plugin => {
   const durationFunc = namespace('duration', options);
 
-  function isValidDurationFunction(node: Node): node is FunctionNode {
-    return isSassFunction(durationFunc, node);
-  }
-
   function mutateTransitionDurationValue(
     node: Node,
     decl: ParsedValueDeclaration,
   ): boolean {
-    if (isPolarisCustomProperty(node)) {
+    if (isPolarisVar(node)) {
       return true;
     }
 
-    if (isValidDurationFunction(node)) {
+    if (isSassFunction(durationFunc, node)) {
       const duration = node.nodes[0]?.value ?? DEFAULT_DURATION;
 
       if (isKeyOf(durationFuncMap, duration)) {
         const durationCustomProperty = durationFuncMap[duration];
-        replaceNodeWithValue(node, `var(${durationCustomProperty})`);
+        setNodeValue(node, `var(${durationCustomProperty})`);
       } else {
         decl.before(
           postcss.comment({
@@ -162,7 +138,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
       if (isKeyOf(durationConstantsMap, constantDuration)) {
         const durationCustomProperty = durationConstantsMap[constantDuration];
 
-        replaceNodeWithValue(node, `var(${durationCustomProperty})`);
+        setNodeValue(node, `var(${durationCustomProperty})`);
       } else {
         decl.before(
           postcss.comment({
@@ -220,10 +196,8 @@ const plugin = (options: PluginOptions = {}): Plugin => {
     const timings: Node[] = [];
 
     nodes.forEach((node) => {
-      if (
-        isValidConstantTimeUnit(node.value) ||
-        isValidDurationFunction(node)
-      ) {
+      const unit = valueParser.unit(node.value);
+      if (isTransformableDuration(unit) || isSassFunction(durationFunc, node)) {
         timings.push(node);
       } else {
         // TODO: Try process it as an easing function
diff --git a/polaris-migrator/src/utilities/sass.ts b/polaris-migrator/src/utilities/sass.ts
index 675e4d6ffc6..513cc54082b 100644
--- a/polaris-migrator/src/utilities/sass.ts
+++ b/polaris-migrator/src/utilities/sass.ts
@@ -226,6 +226,33 @@ export function toTransformablePx(value: string) {
  */
 export const StopWalkingFunctionNodes = false;
 
+/**
+ * All transformable duration units. These values are used to determine
+ * if a decl.value can be mapped to a Polaris custom property.
+ *
+ * Note: <time> is a dimension with 's' or 'ms' as the unit:
+ * https://w3c.github.io/csswg-drafts/css-values-3/#time-value
+ */
+export const transformableDurationUnits = ['s', 'ms'];
+
+export function isTransformableDuration(
+  dimension: false | Dimension,
+): dimension is Dimension {
+  if (!dimension) return false;
+
+  // Zero is the only unitless dimension our duration transforms support
+  if (isUnitlessZero(dimension)) return true;
+
+  return transformableDurationUnits.includes(dimension.unit);
+}
+
+export function isPolarisVar(node: Node): boolean {
+  return (
+    isSassFunction('var', node) &&
+    (node.nodes?.[0]?.value ?? '').startsWith('--p-')
+  );
+}
+
 export function createInlineComment(text: string, options?: {prose?: boolean}) {
   const formatted = prettier
     .format(text, {

From cf6fedfa6aef4b7bdd0e53dbad993669ea6fa6ef Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Fri, 14 Oct 2022 17:52:46 +1100
Subject: [PATCH 10/11] Add easing tests

---
 .../tests/replace-sass-easing.input.scss      | 109 ++++++++++++++++
 .../tests/replace-sass-easing.output.scss     | 122 ++++++++++++++++++
 .../tests/replace-sass-motion.test.ts         |   1 +
 3 files changed, 232 insertions(+)
 create mode 100644 polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
 create mode 100644 polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss

diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
new file mode 100644
index 00000000000..25185f9d756
--- /dev/null
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
@@ -0,0 +1,109 @@
+.easing-simple-string-arg {
+  opacity: 1;
+  transition-timing-function: legacy-polaris-v8.easing('anticipate');
+  transition-timing-function: legacy-polaris-v8.easing('base');
+  transition-timing-function: legacy-polaris-v8.easing('excite');
+  transition-timing-function: legacy-polaris-v8.easing('in');
+  transition-timing-function: legacy-polaris-v8.easing('out');
+  transition-timing-function: legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-simple-non-string-arg {
+  opacity: 1;
+  transition-timing-function: legacy-polaris-v8.easing();
+  transition-timing-function: legacy-polaris-v8.easing(anticipate);
+  transition-timing-function: legacy-polaris-v8.easing(base);
+  transition-timing-function: legacy-polaris-v8.easing(excite);
+  transition-timing-function: legacy-polaris-v8.easing(in);
+  transition-timing-function: legacy-polaris-v8.easing(out);
+  transition-timing-function: legacy-polaris-v8.easing(overshoot);
+}
+
+.easing-simple-builtins {
+  opacity: 1;
+  transition-timing-function: linear;
+  transition-timing-function: ease;
+  transition-timing-function: ease-in;
+  transition-timing-function: ease-out;
+  transition-timing-function: ease-in-out;
+}
+
+.easing-shorthand-string-arg {
+  opacity: 1;
+  transition: opacity 300ms legacy-polaris-v8.easing('anticipate');
+  transition: opacity 300ms legacy-polaris-v8.easing('base');
+  transition: opacity 300ms legacy-polaris-v8.easing('excite');
+  transition: opacity 300ms legacy-polaris-v8.easing('in');
+  transition: opacity 300ms legacy-polaris-v8.easing('out');
+  transition: opacity 300ms legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-shorthand-non-string-arg {
+  opacity: 1;
+  transition: opacity 300ms legacy-polaris-v8.easing();
+  transition: opacity 300ms legacy-polaris-v8.easing(anticipate);
+  transition: opacity 300ms legacy-polaris-v8.easing(base);
+  transition: opacity 300ms legacy-polaris-v8.easing(excite);
+  transition: opacity 300ms legacy-polaris-v8.easing(in);
+  transition: opacity 300ms legacy-polaris-v8.easing(out);
+  transition: opacity 300ms legacy-polaris-v8.easing(overshoot);
+}
+
+.easing-shorthand-builtins {
+  opacity: 1;
+  transition: opacity 300ms linear;
+  transition: opacity 300ms ease;
+  transition: opacity 300ms ease-in;
+  transition: opacity 300ms ease-out;
+  transition: opacity 300ms ease-in-out;
+}
+
+.easing-multiple-string-arg {
+  opacity: 1;
+  transition: opacity 300ms legacy-polaris-v8.easing('anticipate'),
+    left 300ms legacy-polaris-v8.easing('anticipate');
+  transition: opacity 300ms legacy-polaris-v8.easing('base'),
+    left 300ms legacy-polaris-v8.easing('base');
+  transition: opacity 300ms legacy-polaris-v8.easing('excite'),
+    left 300ms legacy-polaris-v8.easing('excite');
+  transition: opacity 300ms legacy-polaris-v8.easing('in'),
+    left 300ms legacy-polaris-v8.easing('in');
+  transition: opacity 300ms legacy-polaris-v8.easing('out'),
+    left 300ms legacy-polaris-v8.easing('out');
+  transition: opacity 300ms legacy-polaris-v8.easing('overshoot'),
+    left 300ms legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-multiple-non-string-arg {
+  opacity: 1;
+  transition: opacity 300ms legacy-polaris-v8.easing(),
+    left 300ms legacy-polaris-v8.easing();
+  transition: opacity 300ms legacy-polaris-v8.easing(anticipate),
+    left 300ms legacy-polaris-v8.easing(anticipate);
+  transition: opacity 300ms legacy-polaris-v8.easing(base),
+    left 300ms legacy-polaris-v8.easing(base);
+  transition: opacity 300ms legacy-polaris-v8.easing(excite),
+    left 300ms legacy-polaris-v8.easing(excite);
+  transition: opacity 300ms legacy-polaris-v8.easing(in),
+    left 300ms legacy-polaris-v8.easing(in);
+  transition: opacity 300ms legacy-polaris-v8.easing(out),
+    left 300ms legacy-polaris-v8.easing(out);
+  transition: opacity 300ms legacy-polaris-v8.easing(overshoot),
+    left 300ms legacy-polaris-v8.easing(overshoot);
+}
+
+.easing-multiple-builtins {
+  opacity: 1;
+  transition: opacity 300ms linear, left 300ms linear;
+  transition: opacity 300ms ease, left 300ms ease;
+  transition: opacity 300ms ease-in, left 300ms ease-in;
+  transition: opacity 300ms ease-out, left 300ms ease-out;
+  transition: opacity 300ms ease-in-out, left 300ms ease-in-out;
+}
+
+.edges {
+  /* Easing function must be supplied to transition shorthand */
+  transition: fill 300ms;
+  /* Custom values should be flagged */
+  transition: transform 150ms cubic-bezier(0, 0, 1, 1);
+}
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
new file mode 100644
index 00000000000..5f00e710c12
--- /dev/null
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
@@ -0,0 +1,122 @@
+.easing-simple-string-arg {
+  opacity: 1;
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing('anticipate');
+  transition-timing-function: var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing('excite');
+  transition-timing-function: var(--p-ease-in);
+  transition-timing-function: var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-simple-non-string-arg {
+  opacity: 1;
+  transition-timing-function: var(--p-ease);
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing(anticipate);
+  transition-timing-function: var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing(excite);
+  transition-timing-function: var(--p-ease-in);
+  transition-timing-function: var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: legacy-polaris-v8.easing(overshoot);
+}
+
+.easing-simple-builtins {
+  opacity: 1;
+  transition-timing-function: var(--p-linear);
+  transition-timing-function: var(--p-ease);
+  transition-timing-function: var(--p-ease-in);
+  transition-timing-function: var(--p-ease-out);
+  transition-timing-function: var(--p-ease-in-out);
+}
+
+.easing-shorthand-string-arg {
+  opacity: 1;
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('anticipate');
+  transition: opacity 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('excite');
+  transition: opacity 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-shorthand-non-string-arg {
+  opacity: 1;
+  transition: opacity 300ms var(--p-ease);
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(anticipate);
+  transition: opacity 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(excite);
+  transition: opacity 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(overshoot);
+}
+
+.easing-shorthand-builtins {
+  opacity: 1;
+  transition: opacity 300ms var(--p-linear);
+  transition: opacity 300ms var(--p-ease);
+  transition: opacity 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out);
+  transition: opacity 300ms var(--p-ease-in-out);
+}
+
+.easing-multiple-string-arg {
+  opacity: 1;
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('anticipate'),
+    left 300ms legacy-polaris-v8.easing('anticipate');
+  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('excite'),
+    left 300ms legacy-polaris-v8.easing('excite');
+  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing('overshoot'),
+    left 300ms legacy-polaris-v8.easing('overshoot');
+}
+
+.easing-multiple-non-string-arg {
+  opacity: 1;
+  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
+  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(anticipate),
+    left 300ms legacy-polaris-v8.easing(anticipate);
+  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
+  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(excite),
+    left 300ms legacy-polaris-v8.easing(excite);
+  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
+  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity 300ms legacy-polaris-v8.easing(overshoot),
+    left 300ms legacy-polaris-v8.easing(overshoot);
+}
+
+.easing-multiple-builtins {
+  opacity: 1;
+  transition: opacity 300ms var(--p-linear), left 300ms var(--p-linear);
+  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
+  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
+  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
+  transition: opacity 300ms var(--p-ease-in-out),
+    left 300ms var(--p-ease-in-out);
+}
+
+.edges {
+  /* Easing function must be supplied to transition shorthand */
+  transition: fill 300ms var(--p-ease);
+  /* Custom values should be flagged */
+  /* polaris-migrator: Custom easing functions should be replaced with Polaris --p-ease-* tokens */
+  transition: transform 150ms cubic-bezier(0, 0, 1, 1);
+}
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
index a3a5941faa4..41011d7484b 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
@@ -1,6 +1,7 @@
 import {check} from '../../../utilities/testUtils';
 
 const migration = 'replace-sass-motion';
+// const fixtures = ['replace-sass-duration', 'replace-sass-easing'];
 const fixtures = ['replace-sass-duration'];
 
 for (const fixture of fixtures) {

From e559f7d6d2d0d06819147dca673bf8cc7be321c0 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 18 Oct 2022 15:41:45 +1100
Subject: [PATCH 11/11] Migrate SASS easing functions

---
 .../replace-sass-motion.ts                    | 121 ++++++++-
 .../tests/replace-sass-duration.output.scss   | 230 +++++++++---------
 .../tests/replace-sass-easing.input.scss      |  32 ++-
 .../tests/replace-sass-easing.output.scss     | 204 +++++++++++-----
 .../tests/replace-sass-motion.test.ts         |   3 +-
 5 files changed, 403 insertions(+), 187 deletions(-)

diff --git a/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
index cd5dc7fcf63..070a3ef4ef1 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
+++ b/polaris-migrator/src/migrations/replace-sass-motion/replace-sass-motion.ts
@@ -1,6 +1,10 @@
 import type {FileInfo, API, Options} from 'jscodeshift';
 import postcss, {Plugin, Declaration, Helpers} from 'postcss';
-import valueParser, {ParsedValue, Node} from 'postcss-value-parser';
+import valueParser, {
+  ParsedValue,
+  Node,
+  FunctionNode,
+} from 'postcss-value-parser';
 
 import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
 import {
@@ -15,6 +19,7 @@ import {isKeyOf} from '../../utilities/type-guards';
 
 const processed = Symbol('processed');
 const DEFAULT_DURATION = 'base';
+const DEFAULT_FUNCTION = 'base';
 
 const durationFuncMap = {
   none: '--p-duration-0',
@@ -52,6 +57,36 @@ const durationConstantsMap = {
   '5s': '--p-duration-5000',
 };
 
+const easingFuncMap = {
+  base: '--p-ease',
+  in: '--p-ease-in',
+  out: '--p-ease-out',
+};
+
+const easingFuncConstantsMap = {
+  linear: '--p-linear',
+  ease: '--p-ease',
+  'ease-in': '--p-ease-in',
+  'ease-out': '--p-ease-out',
+  'ease-in-out': '--p-ease-in-out',
+};
+
+const deprecatedEasingFuncs = ['anticipate', 'excite', 'overshoot'];
+
+// Per the spec for transition easing functions:
+// https://w3c.github.io/csswg-drafts/css-easing/#easing-functions
+const cssEasingBuiltinFuncs = [
+  'linear',
+  'ease',
+  'ease-in',
+  'ease-out',
+  'ease-in-out',
+  'cubic-bezier',
+  'step-start',
+  'step-end',
+  'steps',
+];
+
 function normaliseStringifiedNumber(number: string): string {
   return Number(number).toString();
 }
@@ -99,11 +134,52 @@ function withParsedValue(
   }) as DeclarationProcessor;
 }
 
+function insertUnexpectedEasingFunctionComment(
+  node: Node,
+  decl: ParsedValueDeclaration,
+) {
+  decl.before(
+    postcss.comment({
+      text: `${POLARIS_MIGRATOR_COMMENT} Unexpected easing function '${node.value}'. See https://polaris.shopify.com/tokens/motion for possible values.`,
+    }),
+  );
+}
+
+function migrateLegacySassEasingFunction(
+  node: FunctionNode,
+  decl: ParsedValueDeclaration,
+) {
+  const easingFunc = node.nodes[0]?.value ?? DEFAULT_FUNCTION;
+
+  if (isKeyOf(easingFuncMap, easingFunc)) {
+    const easingCustomProperty = easingFuncMap[easingFunc];
+    setNodeValue(node, `var(${easingCustomProperty})`);
+  } else {
+    const comment = deprecatedEasingFuncs.includes(easingFunc)
+      ? `The ${easingFunc} easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.`
+      : `Unexpected easing function '${easingFunc}'.`;
+    decl.before(
+      postcss.comment({
+        text: `${POLARIS_MIGRATOR_COMMENT} ${comment}`,
+      }),
+    );
+  }
+}
+
 interface PluginOptions extends Options, NamespaceOptions {}
 
 const plugin = (options: PluginOptions = {}): Plugin => {
   const durationFunc = namespace('duration', options);
 
+  const easingFuncHandlers = {
+    [namespace('easing', options)]: migrateLegacySassEasingFunction,
+    // Per the spec, these can all be functions:
+    // https://w3c.github.io/csswg-drafts/css-easing/#easing-functions
+    linear: insertUnexpectedEasingFunctionComment,
+    'cubic-bezier': insertUnexpectedEasingFunctionComment,
+    steps: insertUnexpectedEasingFunctionComment,
+  };
+
   function mutateTransitionDurationValue(
     node: Node,
     decl: ParsedValueDeclaration,
@@ -153,6 +229,32 @@ const plugin = (options: PluginOptions = {}): Plugin => {
     return false;
   }
 
+  function mutateTransitionFunctionValue(
+    node: Node,
+    decl: ParsedValueDeclaration,
+  ): boolean {
+    if (isPolarisVar(node)) {
+      return true;
+    }
+
+    if (node.type === 'function' && isKeyOf(easingFuncHandlers, node.value)) {
+      easingFuncHandlers[node.value](node, decl);
+      return true;
+    }
+
+    if (node.type === 'word') {
+      if (isKeyOf(easingFuncConstantsMap, node.value)) {
+        setNodeValue(node, `var(${easingFuncConstantsMap[node.value]})`);
+        return true;
+      } else if (cssEasingBuiltinFuncs.includes(node.value)) {
+        insertUnexpectedEasingFunctionComment(node, decl);
+        return true;
+      }
+    }
+
+    return false;
+  }
+
   function mutateTransitionDelayValue(
     node: Node,
     decl: ParsedValueDeclaration,
@@ -200,7 +302,10 @@ const plugin = (options: PluginOptions = {}): Plugin => {
       if (isTransformableDuration(unit) || isSassFunction(durationFunc, node)) {
         timings.push(node);
       } else {
-        // TODO: Try process it as an easing function
+        // 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);
       }
     });
 
@@ -270,6 +375,18 @@ const plugin = (options: PluginOptions = {}): Plugin => {
         });
       }),
 
+      'transition-timing-function': withParsedValue((decl) => {
+        decl.parsedValue.nodes.forEach((node) => {
+          if (!mutateTransitionFunctionValue(node, decl)) {
+            decl.before(
+              postcss.comment({
+                text: POLARIS_MIGRATOR_COMMENT,
+              }),
+            );
+          }
+        });
+      }),
+
       transition: withParsedValue((decl) => {
         if (hasNumericOperator(decl.parsedValue)) {
           decl.before(
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
index 414f493f062..9602277b2c0 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-duration.output.scss
@@ -49,137 +49,137 @@
 
 .duration-compound-string-arg {
   opacity: 1;
-  transition: opacity var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear;
+  transition: opacity var(--p-duration-0) var(--p-linear);
+  transition: opacity var(--p-duration-100) var(--p-linear);
+  transition: opacity var(--p-duration-200) var(--p-linear);
+  transition: opacity var(--p-duration-300) var(--p-linear);
+  transition: opacity var(--p-duration-400) var(--p-linear);
+  transition: opacity var(--p-duration-500) var(--p-linear);
 }
 
 .duration-compound-non-string-arg {
   opacity: 1;
-  transition: opacity var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear;
+  transition: opacity var(--p-duration-200) var(--p-linear);
+  transition: opacity var(--p-duration-0) var(--p-linear);
+  transition: opacity var(--p-duration-100) var(--p-linear);
+  transition: opacity var(--p-duration-200) var(--p-linear);
+  transition: opacity var(--p-duration-300) var(--p-linear);
+  transition: opacity var(--p-duration-400) var(--p-linear);
+  transition: opacity var(--p-duration-500) var(--p-linear);
 }
 
 .duration-compound-constant {
   opacity: 1;
-  transition: opacity var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-50) linear;
-  transition: opacity var(--p-duration-50) linear;
-  transition: opacity var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-150) linear;
-  transition: opacity var(--p-duration-150) linear;
-  transition: opacity var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-250) linear;
-  transition: opacity var(--p-duration-250) linear;
-  transition: opacity var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-350) linear;
-  transition: opacity var(--p-duration-350) linear;
-  transition: opacity var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-450) linear;
-  transition: opacity var(--p-duration-450) linear;
-  transition: opacity var(--p-duration-500) linear;
-  transition: opacity var(--p-duration-500) linear;
-  transition: opacity var(--p-duration-5000) linear;
+  transition: opacity var(--p-duration-0) var(--p-linear);
+  transition: opacity var(--p-duration-0) var(--p-linear);
+  transition: opacity var(--p-duration-0) var(--p-linear);
+  transition: opacity var(--p-duration-50) var(--p-linear);
+  transition: opacity var(--p-duration-50) var(--p-linear);
+  transition: opacity var(--p-duration-100) var(--p-linear);
+  transition: opacity var(--p-duration-100) var(--p-linear);
+  transition: opacity var(--p-duration-150) var(--p-linear);
+  transition: opacity var(--p-duration-150) var(--p-linear);
+  transition: opacity var(--p-duration-200) var(--p-linear);
+  transition: opacity var(--p-duration-200) var(--p-linear);
+  transition: opacity var(--p-duration-250) var(--p-linear);
+  transition: opacity var(--p-duration-250) var(--p-linear);
+  transition: opacity var(--p-duration-300) var(--p-linear);
+  transition: opacity var(--p-duration-300) var(--p-linear);
+  transition: opacity var(--p-duration-350) var(--p-linear);
+  transition: opacity var(--p-duration-350) var(--p-linear);
+  transition: opacity var(--p-duration-400) var(--p-linear);
+  transition: opacity var(--p-duration-400) var(--p-linear);
+  transition: opacity var(--p-duration-450) var(--p-linear);
+  transition: opacity var(--p-duration-450) var(--p-linear);
+  transition: opacity var(--p-duration-500) var(--p-linear);
+  transition: opacity var(--p-duration-500) var(--p-linear);
+  transition: opacity var(--p-duration-5000) var(--p-linear);
 }
 
 .duration-multiple-string-arg {
   opacity: 1;
-  transition: opacity var(--p-duration-0) linear,
-    left var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear,
-    left var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear,
-    left var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear,
-    left var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear,
-    left var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear,
-    left var(--p-duration-500) linear;
+  transition: opacity var(--p-duration-0) var(--p-linear),
+    left var(--p-duration-0) var(--p-linear);
+  transition: opacity var(--p-duration-100) var(--p-linear),
+    left var(--p-duration-100) var(--p-linear);
+  transition: opacity var(--p-duration-200) var(--p-linear),
+    left var(--p-duration-200) var(--p-linear);
+  transition: opacity var(--p-duration-300) var(--p-linear),
+    left var(--p-duration-300) var(--p-linear);
+  transition: opacity var(--p-duration-400) var(--p-linear),
+    left var(--p-duration-400) var(--p-linear);
+  transition: opacity var(--p-duration-500) var(--p-linear),
+    left var(--p-duration-500) var(--p-linear);
 }
 
 .duration-multiple-non-string-arg {
   opacity: 1;
-  transition: opacity var(--p-duration-200) linear,
-    left var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-0) linear,
-    left var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear,
-    left var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear,
-    left var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear,
-    left var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear,
-    left var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear,
-    left var(--p-duration-500) linear;
+  transition: opacity var(--p-duration-200) var(--p-linear),
+    left var(--p-duration-200) var(--p-linear);
+  transition: opacity var(--p-duration-0) var(--p-linear),
+    left var(--p-duration-0) var(--p-linear);
+  transition: opacity var(--p-duration-100) var(--p-linear),
+    left var(--p-duration-100) var(--p-linear);
+  transition: opacity var(--p-duration-200) var(--p-linear),
+    left var(--p-duration-200) var(--p-linear);
+  transition: opacity var(--p-duration-300) var(--p-linear),
+    left var(--p-duration-300) var(--p-linear);
+  transition: opacity var(--p-duration-400) var(--p-linear),
+    left var(--p-duration-400) var(--p-linear);
+  transition: opacity var(--p-duration-500) var(--p-linear),
+    left var(--p-duration-500) var(--p-linear);
 }
 
 .duration-multiple-constant {
   opacity: 1;
-  transition: opacity var(--p-duration-0) linear,
-    left var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-0) linear,
-    left var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-0) linear,
-    left var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-50) linear,
-    left var(--p-duration-50) linear;
-  transition: opacity var(--p-duration-50) linear,
-    left var(--p-duration-50) linear;
-  transition: opacity var(--p-duration-100) linear,
-    left var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-100) linear,
-    left var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-150) linear,
-    left var(--p-duration-150) linear;
-  transition: opacity var(--p-duration-150) linear,
-    left var(--p-duration-150) linear;
-  transition: opacity var(--p-duration-200) linear,
-    left var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-200) linear,
-    left var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-250) linear,
-    left var(--p-duration-250) linear;
-  transition: opacity var(--p-duration-250) linear,
-    left var(--p-duration-250) linear;
-  transition: opacity var(--p-duration-300) linear,
-    left var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-300) linear,
-    left var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-350) linear,
-    left var(--p-duration-350) linear;
-  transition: opacity var(--p-duration-350) linear,
-    left var(--p-duration-350) linear;
-  transition: opacity var(--p-duration-400) linear,
-    left var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-400) linear,
-    left var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-450) linear,
-    left var(--p-duration-450) linear;
-  transition: opacity var(--p-duration-450) linear,
-    left var(--p-duration-450) linear;
-  transition: opacity var(--p-duration-500) linear,
-    left var(--p-duration-500) linear;
-  transition: opacity var(--p-duration-500) linear,
-    left var(--p-duration-500) linear;
-  transition: opacity var(--p-duration-5000) linear,
-    left var(--p-duration-5000) linear;
+  transition: opacity var(--p-duration-0) var(--p-linear),
+    left var(--p-duration-0) var(--p-linear);
+  transition: opacity var(--p-duration-0) var(--p-linear),
+    left var(--p-duration-0) var(--p-linear);
+  transition: opacity var(--p-duration-0) var(--p-linear),
+    left var(--p-duration-0) var(--p-linear);
+  transition: opacity var(--p-duration-50) var(--p-linear),
+    left var(--p-duration-50) var(--p-linear);
+  transition: opacity var(--p-duration-50) var(--p-linear),
+    left var(--p-duration-50) var(--p-linear);
+  transition: opacity var(--p-duration-100) var(--p-linear),
+    left var(--p-duration-100) var(--p-linear);
+  transition: opacity var(--p-duration-100) var(--p-linear),
+    left var(--p-duration-100) var(--p-linear);
+  transition: opacity var(--p-duration-150) var(--p-linear),
+    left var(--p-duration-150) var(--p-linear);
+  transition: opacity var(--p-duration-150) var(--p-linear),
+    left var(--p-duration-150) var(--p-linear);
+  transition: opacity var(--p-duration-200) var(--p-linear),
+    left var(--p-duration-200) var(--p-linear);
+  transition: opacity var(--p-duration-200) var(--p-linear),
+    left var(--p-duration-200) var(--p-linear);
+  transition: opacity var(--p-duration-250) var(--p-linear),
+    left var(--p-duration-250) var(--p-linear);
+  transition: opacity var(--p-duration-250) var(--p-linear),
+    left var(--p-duration-250) var(--p-linear);
+  transition: opacity var(--p-duration-300) var(--p-linear),
+    left var(--p-duration-300) var(--p-linear);
+  transition: opacity var(--p-duration-300) var(--p-linear),
+    left var(--p-duration-300) var(--p-linear);
+  transition: opacity var(--p-duration-350) var(--p-linear),
+    left var(--p-duration-350) var(--p-linear);
+  transition: opacity var(--p-duration-350) var(--p-linear),
+    left var(--p-duration-350) var(--p-linear);
+  transition: opacity var(--p-duration-400) var(--p-linear),
+    left var(--p-duration-400) var(--p-linear);
+  transition: opacity var(--p-duration-400) var(--p-linear),
+    left var(--p-duration-400) var(--p-linear);
+  transition: opacity var(--p-duration-450) var(--p-linear),
+    left var(--p-duration-450) var(--p-linear);
+  transition: opacity var(--p-duration-450) var(--p-linear),
+    left var(--p-duration-450) var(--p-linear);
+  transition: opacity var(--p-duration-500) var(--p-linear),
+    left var(--p-duration-500) var(--p-linear);
+  transition: opacity var(--p-duration-500) var(--p-linear),
+    left var(--p-duration-500) var(--p-linear);
+  transition: opacity var(--p-duration-5000) var(--p-linear),
+    left var(--p-duration-5000) var(--p-linear);
 }
 
 .edges {
@@ -187,11 +187,13 @@
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
   transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms;
   /* Duration comes after easing func */
-  transition: opacity linear var(--p-duration-500);
+  transition: opacity var(--p-linear) var(--p-duration-500);
   /* Duration + Delay */
-  transition: opacity var(--p-duration-400) linear var(--p-duration-100);
+  transition: opacity var(--p-duration-400) var(--p-linear)
+    var(--p-duration-100);
   /* Duration + Delay after easing func */
-  transition: opacity linear var(--p-duration-400) var(--p-duration-100);
+  transition: opacity var(--p-linear) var(--p-duration-400)
+    var(--p-duration-100);
   /* foobar isn't a valid duration key */
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unknown duration key 'foobar'. */
   transition-duration: legacy-polaris-v8.duration(foobar);
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
index 25185f9d756..4f45a15ac38 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.input.scss
@@ -22,10 +22,17 @@
 .easing-simple-builtins {
   opacity: 1;
   transition-timing-function: linear;
+  /* See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function */
+  transition-timing-function: linear(1);
   transition-timing-function: ease;
   transition-timing-function: ease-in;
   transition-timing-function: ease-out;
   transition-timing-function: ease-in-out;
+  transition-timing-function: cubic-bezier(0, 0, 1, 1);
+  /* See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function */
+  transition-timing-function: step-start;
+  transition-timing-function: step-end;
+  transition-timing-function: steps(1, jump-end);
 }
 
 .easing-shorthand-string-arg {
@@ -52,10 +59,17 @@
 .easing-shorthand-builtins {
   opacity: 1;
   transition: opacity 300ms linear;
+  /* See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function */
+  transition: opacity 300ms linear(1);
   transition: opacity 300ms ease;
   transition: opacity 300ms ease-in;
   transition: opacity 300ms ease-out;
   transition: opacity 300ms ease-in-out;
+  transition: opacity 300ms cubic-bezier(0, 0, 1, 1);
+  /* See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function */
+  transition: opacity 300ms step-start;
+  transition: opacity 300ms step-end;
+  transition: opacity 300ms steps(1, jump-end);
 }
 
 .easing-multiple-string-arg {
@@ -95,15 +109,27 @@
 .easing-multiple-builtins {
   opacity: 1;
   transition: opacity 300ms linear, left 300ms linear;
+  /* See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function */
+  transition: opacity 300ms linear(1), left 300ms linear(1);
   transition: opacity 300ms ease, left 300ms ease;
   transition: opacity 300ms ease-in, left 300ms ease-in;
   transition: opacity 300ms ease-out, left 300ms ease-out;
   transition: opacity 300ms ease-in-out, left 300ms ease-in-out;
+  transition: opacity 300ms cubic-bezier(0, 0, 1, 1),
+    left 300ms cubic-bezier(0, 0, 1, 1);
+  /* See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function */
+  transition: opacity 300ms step-start, left 300ms step-start;
+  transition: opacity 300ms step-end, left 300ms step-start;
+  transition: opacity 300ms steps(1, jump-end), left 300ms steps(1, jump-end);
 }
 
+$easingFunc: 'ease-in';
+
 .edges {
-  /* Easing function must be supplied to transition shorthand */
+  /* Without an easing function */
   transition: fill 300ms;
-  /* Custom values should be flagged */
-  transition: transform 150ms cubic-bezier(0, 0, 1, 1);
+  /* Unknown values are flagged */
+  transition-timing-function: legacy-polaris-v8.easing(foobar);
+  /* Can only handle hard coded values */
+  transition-timing-function: legacy-polaris-v8.easing($easingFunc);
 }
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
index 5f00e710c12..3fcff8337d7 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-easing.output.scss
@@ -1,122 +1,194 @@
 .easing-simple-string-arg {
   opacity: 1;
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
   transition-timing-function: legacy-polaris-v8.easing('anticipate');
   transition-timing-function: var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
   transition-timing-function: legacy-polaris-v8.easing('excite');
   transition-timing-function: var(--p-ease-in);
   transition-timing-function: var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
   transition-timing-function: legacy-polaris-v8.easing('overshoot');
 }
 
 .easing-simple-non-string-arg {
   opacity: 1;
   transition-timing-function: var(--p-ease);
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
   transition-timing-function: legacy-polaris-v8.easing(anticipate);
   transition-timing-function: var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
   transition-timing-function: legacy-polaris-v8.easing(excite);
   transition-timing-function: var(--p-ease-in);
   transition-timing-function: var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
   transition-timing-function: legacy-polaris-v8.easing(overshoot);
 }
 
 .easing-simple-builtins {
   opacity: 1;
   transition-timing-function: var(--p-linear);
+  /* See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: linear(1);
   transition-timing-function: var(--p-ease);
   transition-timing-function: var(--p-ease-in);
   transition-timing-function: var(--p-ease-out);
   transition-timing-function: var(--p-ease-in-out);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: cubic-bezier(0, 0, 1, 1);
+  /* See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: step-start;
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: step-end;
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition-timing-function: steps(1, jump-end);
 }
 
 .easing-shorthand-string-arg {
   opacity: 1;
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('overshoot');
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300)
+    legacy-polaris-v8.easing('anticipate');
+  transition: opacity var(--p-duration-300) var(--p-ease);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) legacy-polaris-v8.easing('excite');
+  transition: opacity var(--p-duration-300) var(--p-ease-in);
+  transition: opacity var(--p-duration-300) var(--p-ease-out);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300)
+    legacy-polaris-v8.easing('overshoot');
 }
 
 .easing-shorthand-non-string-arg {
   opacity: 1;
-  transition: opacity 300ms var(--p-ease);
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(overshoot);
+  transition: opacity var(--p-duration-300) var(--p-ease);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) legacy-polaris-v8.easing(anticipate);
+  transition: opacity var(--p-duration-300) var(--p-ease);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) legacy-polaris-v8.easing(excite);
+  transition: opacity var(--p-duration-300) var(--p-ease-in);
+  transition: opacity var(--p-duration-300) var(--p-ease-out);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) legacy-polaris-v8.easing(overshoot);
 }
 
 .easing-shorthand-builtins {
   opacity: 1;
-  transition: opacity 300ms var(--p-linear);
-  transition: opacity 300ms var(--p-ease);
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  transition: opacity 300ms var(--p-ease-in-out);
+  transition: opacity var(--p-duration-300) var(--p-linear);
+  /* See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) linear(1);
+  transition: opacity var(--p-duration-300) var(--p-ease);
+  transition: opacity var(--p-duration-300) var(--p-ease-in);
+  transition: opacity var(--p-duration-300) var(--p-ease-out);
+  transition: opacity var(--p-duration-300) var(--p-ease-in-out);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) cubic-bezier(0, 0, 1, 1);
+  /* See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) step-start;
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) step-end;
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) steps(1, jump-end);
 }
 
 .easing-multiple-string-arg {
   opacity: 1;
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('anticipate'),
-    left 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('excite'),
-    left 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing('overshoot'),
-    left 300ms legacy-polaris-v8.easing('overshoot');
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300)
+      legacy-polaris-v8.easing('anticipate'),
+    left var(--p-duration-300) legacy-polaris-v8.easing('anticipate');
+  transition: opacity var(--p-duration-300) var(--p-ease),
+    left var(--p-duration-300) var(--p-ease);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) legacy-polaris-v8.easing('excite'),
+    left var(--p-duration-300) legacy-polaris-v8.easing('excite');
+  transition: opacity var(--p-duration-300) var(--p-ease-in),
+    left var(--p-duration-300) var(--p-ease-in);
+  transition: opacity var(--p-duration-300) var(--p-ease-out),
+    left var(--p-duration-300) var(--p-ease-out);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300)
+      legacy-polaris-v8.easing('overshoot'),
+    left var(--p-duration-300) legacy-polaris-v8.easing('overshoot');
 }
 
 .easing-multiple-non-string-arg {
   opacity: 1;
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  /* polaris-migrator: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(anticipate),
-    left 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  /* polaris-migrator: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(excite),
-    left 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  /* polaris-migrator: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
-  transition: opacity 300ms legacy-polaris-v8.easing(overshoot),
-    left 300ms legacy-polaris-v8.easing(overshoot);
+  transition: opacity var(--p-duration-300) var(--p-ease),
+    left var(--p-duration-300) var(--p-ease);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) legacy-polaris-v8.easing(anticipate),
+    left var(--p-duration-300) legacy-polaris-v8.easing(anticipate);
+  transition: opacity var(--p-duration-300) var(--p-ease),
+    left var(--p-duration-300) var(--p-ease);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) legacy-polaris-v8.easing(excite),
+    left var(--p-duration-300) legacy-polaris-v8.easing(excite);
+  transition: opacity var(--p-duration-300) var(--p-ease-in),
+    left var(--p-duration-300) var(--p-ease-in);
+  transition: opacity var(--p-duration-300) var(--p-ease-out),
+    left var(--p-duration-300) var(--p-ease-out);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) legacy-polaris-v8.easing(overshoot),
+    left var(--p-duration-300) legacy-polaris-v8.easing(overshoot);
 }
 
 .easing-multiple-builtins {
   opacity: 1;
-  transition: opacity 300ms var(--p-linear), left 300ms var(--p-linear);
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  transition: opacity 300ms var(--p-ease-in-out),
-    left 300ms var(--p-ease-in-out);
+  transition: opacity var(--p-duration-300) var(--p-linear),
+    left var(--p-duration-300) var(--p-linear);
+  /* See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) linear(1),
+    left var(--p-duration-300) linear(1);
+  transition: opacity var(--p-duration-300) var(--p-ease),
+    left var(--p-duration-300) var(--p-ease);
+  transition: opacity var(--p-duration-300) var(--p-ease-in),
+    left var(--p-duration-300) var(--p-ease-in);
+  transition: opacity var(--p-duration-300) var(--p-ease-out),
+    left var(--p-duration-300) var(--p-ease-out);
+  transition: opacity var(--p-duration-300) var(--p-ease-in-out),
+    left var(--p-duration-300) var(--p-ease-in-out);
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) cubic-bezier(0, 0, 1, 1),
+    left var(--p-duration-300) cubic-bezier(0, 0, 1, 1);
+  /* See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) step-start,
+    left var(--p-duration-300) step-start;
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) step-end,
+    left var(--p-duration-300) step-start;
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. */
+  transition: opacity var(--p-duration-300) steps(1, jump-end),
+    left var(--p-duration-300) steps(1, jump-end);
 }
 
+$easingFunc: 'ease-in';
+
 .edges {
-  /* Easing function must be supplied to transition shorthand */
-  transition: fill 300ms var(--p-ease);
-  /* Custom values should be flagged */
-  /* polaris-migrator: Custom easing functions should be replaced with Polaris --p-ease-* tokens */
-  transition: transform 150ms cubic-bezier(0, 0, 1, 1);
+  /* Without an easing function */
+  transition: fill var(--p-duration-300);
+  /* Unknown values are flagged */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function 'foobar'. */
+  transition-timing-function: legacy-polaris-v8.easing(foobar);
+  /* Can only handle hard coded values */
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. Unexpected easing function '$easingFunc'. */
+  transition-timing-function: legacy-polaris-v8.easing($easingFunc);
 }
diff --git a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
index 41011d7484b..d15d33085d0 100644
--- a/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
+++ b/polaris-migrator/src/migrations/replace-sass-motion/tests/replace-sass-motion.test.ts
@@ -1,8 +1,7 @@
 import {check} from '../../../utilities/testUtils';
 
 const migration = 'replace-sass-motion';
-// const fixtures = ['replace-sass-duration', 'replace-sass-easing'];
-const fixtures = ['replace-sass-duration'];
+const fixtures = ['replace-sass-duration', 'replace-sass-easing'];
 
 for (const fixture of fixtures) {
   check(__dirname, {