fix(rule): no-unnecessary-arbitrary-value

lib/rules/no-unnecessary-arbitrary-value.js

@@ -81,6 +81,32 @@ module.exports = {
     // Helpers
     //----------------------------------------------------------------------
 
+    /**
+     * Flatten nested configuration object into a map of key paths to values
+     * @param {Object} obj The configuration object to flatten
+     * @param {String} prefix The prefix for the current path
+     * @param {Object} result The accumulated result object
+     * @returns {Object} A map where keys are dot-separated paths and values are config values
+     */
+    const flattenConfig = (obj, prefix = '', result = {}) => {
+      if (typeof obj !== 'object' || obj === null) {
+        return result;
+      }
+
+      Object.keys(obj).forEach((key) => {
+        const value = obj[key];
+        const newKey = prefix ? `${prefix}.${key}` : key;
+
+        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+          flattenConfig(value, newKey, result);
+        } else {
+          result[newKey] = value;
+        }
+      });
+
+      return result;
+    };
+
     /**
      * Recursive function crawling into child nodes
      * @param {ASTNode} node The root node of the current parsing
@@ -197,12 +223,16 @@ module.exports = {
           if ([undefined, null].includes(configuration)) {
             return false;
           }
-          const configurationKeys = Object.keys(configuration);
+
+          // Flatten the configuration to handle nested objects (e.g., colors.foreground.positive)
+          const flattenedConfig = flattenConfig(configuration);
+          const configurationKeys = Object.keys(flattenedConfig);
+
           const zeroValueWithOrWithoutUnitsPattern = new RegExp(validZeroRegEx, 'i');
           const isZeroArbitraryValue = zeroValueWithOrWithoutUnitsPattern.test(arbitraryValue);
           const negativeSubstitutes = [];
           const matchingConfigurationKeys = configurationKeys.filter((key) => {
-            const configValue = configuration[key];
+            const configValue = flattenedConfig[key];
             if (isZeroArbitraryValue && zeroValueWithOrWithoutUnitsPattern.test(configValue)) {
               // Both config and tested values are 0 based (with or without units)
               negativeSubstitutes.push(false);
@@ -232,10 +262,15 @@ module.exports = {
                 let patchedBody = backBone.substring(parsed.variants.length);
                 patchedBody = patchedBody.charAt(0) === '-' ? patchedBody.substring(1) : patchedBody;
                 const noneOrMinus = negativeSubstitutes[idx] ? '-' : '';
+
+                // Convert dot-separated paths to dash-separated class names
+                // e.g., 'foreground.positive' becomes 'foreground-positive'
+                const classNameSuffix = key.replace(/\./g, '-');
+
                 if (key === 'DEFAULT') {
                   return parsed.variants + noneOrMinus + patchedBody.substring(0, patchedBody.length - 1);
                 }
-                return parsed.variants + noneOrMinus + patchedBody + key;
+                return parsed.variants + noneOrMinus + patchedBody + classNameSuffix;
               })
             );
           }

tests/lib/rules/no-unnecessary-arbitrary-value.js

@@ -28,6 +28,18 @@ var config = [
   {
     config: {
       theme: {
+        colors: {
+          primary: "#8000ff",
+          foreground: {
+            positive: "#6eff00",
+          },
+          background: {
+            positive: "#6eff00",
+          },
+          action: {
+            primary: "#ff5733",
+          },
+        },
         extend: {
           spacing: {
             spacing: "99px",
@@ -68,6 +80,36 @@ ruleTester.run("arbitrary-values", rule, {
       `,
       options: config,
     },
+    {
+      code: `
+      <pre class="text-foreground-positive">text-foreground-positive</pre>
+      `,
+      options: config,
+    },
+    {
+      code: `
+      <pre class="text-background-positive">text-background-positive</pre>
+      `,
+      options: config,
+    },
+    {
+      code: `
+      <pre class="bg-action-primary">bg-action-primary</pre>
+      `,
+      options: config,
+    },
+    {
+      code: `
+      <pre class="text-primary">text-primary</pre>
+      `,
+      options: config,
+    },
+    {
+      code: `
+      <pre class="text-[#58cc00]">arbitrary hex color</pre>
+      `,
+      options: config,
+    },
     {
       code: `
       <pre class="![clip:rect(0,0,0,0)]">issue #317</pre>
@@ -104,6 +146,33 @@ ruleTester.run("arbitrary-values", rule, {
       options: config,
       errors: generateErrors(["h-[0]"], [["h-0", "h-zerodotzero", "h-none", "h-zeropx"]]),
     },
+    {
+      code: `
+      <pre class="text-[#6eff00]">text with multiple matches</pre>
+      `,
+      options: config,
+      errors: generateErrors(["text-[#6eff00]"], [["text-foreground-positive", "text-background-positive"]]),
+    },
+    {
+      code: `
+      <pre class="bg-[#ff5733]">bg with single match</pre>
+      `,
+      output: `
+      <pre class="bg-action-primary">bg with single match</pre>
+      `,
+      options: config,
+      errors: generateErrors(["bg-[#ff5733]"], [["bg-action-primary"]]),
+    },
+    {
+      code: `
+      <pre class="text-[#8000ff]">simple flat color key</pre>
+      `,
+      output: `
+      <pre class="text-primary">simple flat color key</pre>
+      `,
+      options: config,
+      errors: generateErrors(["text-[#8000ff]"], [["text-primary"]]),
+    },
     {
       code: `
       <pre class="sm:h-[10%]">sm:h-[10%]</pre>