Use getFunctionArgs for color function

Author: sam-b-rose

polaris-migrator/src/migrations/replace-sass-color/replace-sass-color.ts

@@ -7,6 +7,8 @@ import {
   NamespaceOptions,
   namespace,
   isSassFunction,
+  getFunctionArgs,
+  stripQuotes,
   StopWalkingFunctionNodes,
 } from '../../utilities/sass';
 import {isKeyOf} from '../../utilities/type-guards';
@@ -93,9 +95,9 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
         // 2. Replace `color()` with variable
         if (node.value === namespacedColor) {
-          const colorFnArgs = node.nodes.filter((node) => node.type !== 'div');
-          const hue = colorFnArgs[0]?.value ?? '';
-          const value = colorFnArgs[1]?.value ?? 'base';
+          const colorFnArgs = getFunctionArgs(node);
+          const hue = stripQuotes(colorFnArgs[0] ?? '');
+          const value = stripQuotes(colorFnArgs[1] ?? 'base');
           const forBackground = colorFnArgs[2];
 
           // Skip color() with for-background argument

polaris-migrator/src/utilities/sass.ts

@@ -179,6 +179,16 @@ export function getFunctionArgs(node: FunctionNode): string[] {
   return args;
 }
 
+/**
+ * Removes surrounding quotes from a string
+ * @example
+ * const string = '"hello"';
+ * stripQuotes(string); // hello
+ */
+export function stripQuotes(string: string) {
+  return string.replace(/^['"]|['"]$/g, '');
+}
+
 /**
  * All transformable dimension units. These values are used to determine
  * if a decl.value can be converted to pixels and mapped to a Polaris custom property.