Update numeric operator detection to check all node types (#7487)

Co-Authored-By: Aaron Casanova
<32409546+aaronccasanova@users.noreply.github.com>

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

Updating numeric operator logic to detect `/` on all node types (as
opposed to just word nodes).

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>

Author: lgriffee

.changeset/itchy-foxes-boil.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': patch
+---
+
+Update numeric operator detection to check all node types

polaris-migrator/src/migrations/replace-border-declarations/replace-border-declarations.ts

@@ -79,12 +79,13 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
       function handleBorderProps() {
         parsedValue.walk((node) => {
+          if (isNumericOperator(node)) {
+            hasNumericOperator = true;
+            return;
+          }
+
           if (node.type === 'word') {
             if (globalValues.has(node.value)) return;
-            if (isNumericOperator(node)) {
-              hasNumericOperator = true;
-              return;
-            }
 
             const dimension = valueParser.unit(node.value);
 
@@ -187,12 +188,13 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
       function handleBorderRadiusProps() {
         parsedValue.walk((node) => {
+          if (isNumericOperator(node)) {
+            hasNumericOperator = true;
+            return;
+          }
+
           if (node.type === 'word') {
             if (globalValues.has(node.value)) return;
-            if (isNumericOperator(node)) {
-              hasNumericOperator = true;
-              return;
-            }
 
             const dimension = valueParser.unit(node.value);
 

polaris-migrator/src/migrations/replace-border-declarations/tests/replace-border-declarations.input.scss

@@ -98,6 +98,7 @@
 
   /* Comment */
   border-radius: 1px;
+  border-radius: 20px / 50%;
 
   /* --- REM FUNCTION --- */
 

polaris-migrator/src/migrations/replace-border-declarations/tests/replace-border-declarations.output.scss

@@ -124,6 +124,9 @@
   // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
   // border-radius: 1px;
   border-radius: 1px;
+  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
+  // border-radius: var(--p-border-radius-5) / 50%;
+  border-radius: 20px / 50%;
 
   /* --- REM FUNCTION --- */
 

polaris-migrator/src/migrations/replace-border-declarations/tests/with-namespace.input.scss

@@ -102,6 +102,7 @@
 
   /* Comment */
   border-radius: 1px;
+  border-radius: 20px / 50%;
 
   /* --- REM FUNCTION --- */
 

polaris-migrator/src/migrations/replace-border-declarations/tests/with-namespace.output.scss

@@ -128,6 +128,9 @@
   // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
   // border-radius: 1px;
   border-radius: 1px;
+  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
+  // border-radius: var(--p-border-radius-5) / 50%;
+  border-radius: 20px / 50%;
 
   /* --- REM FUNCTION --- */
 

polaris-migrator/src/migrations/replace-spacing-lengths/replace-spacing-lengths.ts

@@ -70,12 +70,13 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
       function handleSpaceProps() {
         parsedValue.walk((node) => {
+          if (isNumericOperator(node)) {
+            hasNumericOperator = true;
+            return;
+          }
+
           if (node.type === 'word') {
             if (globalValues.has(node.value)) return;
-            if (isNumericOperator(node)) {
-              hasNumericOperator = true;
-              return;
-            }
 
             const dimension = valueParser.unit(node.value);
 

polaris-migrator/src/migrations/replace-typography-declarations/replace-typography-declarations.ts

@@ -84,13 +84,12 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
       function handleFontFamily() {
         parsedValue.walk((node) => {
-          if (node.type === 'word') {
-            if (isNumericOperator(node)) {
-              hasNumericOperator = true;
-              // eslint-disable-next-line no-useless-return
-              return;
-            }
-          } else if (node.type === 'function') {
+          if (isNumericOperator(node)) {
+            hasNumericOperator = true;
+            return;
+          }
+
+          if (node.type === 'function') {
             if (isSassFunction(namespacedFontFamily, node)) {
               targets.push({replaced: false});
 
@@ -126,14 +125,14 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
       function handleFontSize() {
         parsedValue.walk((node) => {
+          if (isNumericOperator(node)) {
+            hasNumericOperator = true;
+            return;
+          }
+
           if (node.type === 'word') {
             if (globalValues.has(node.value)) return;
 
-            if (isNumericOperator(node)) {
-              hasNumericOperator = true;
-              return;
-            }
-
             const dimension = valueParser.unit(node.value);
 
             if (!isTransformableLength(dimension)) return;
@@ -225,14 +224,14 @@ const plugin = (options: PluginOptions = {}): Plugin => {
         parsedValue.walk((node) => {
           if (node.type === 'function') return StopWalkingFunctionNodes;
 
+          if (isNumericOperator(node)) {
+            hasNumericOperator = true;
+            return;
+          }
+
           if (node.type === 'word') {
             if (globalValues.has(node.value)) return;
 
-            if (isNumericOperator(node)) {
-              hasNumericOperator = true;
-              return;
-            }
-
             targets.push({replaced: false});
 
             const fontWeight = node.value;
@@ -248,14 +247,14 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
       function handleFontLineHeight() {
         parsedValue.walk((node) => {
+          if (isNumericOperator(node)) {
+            hasNumericOperator = true;
+            return;
+          }
+
           if (node.type === 'word') {
             if (globalValues.has(node.value)) return;
 
-            if (isNumericOperator(node)) {
-              hasNumericOperator = true;
-              return;
-            }
-
             targets.push({replaced: false});
 
             const lineHeighInPx = toTransformablePx(node.value);