fix: no-arbitrary-value rule is too broad

README.md

@@ -41,6 +41,7 @@ You can can the same information on your favorite command line software as well.
 
 ## Latest changelog
 
+- fix: [`no-arbitrary-value` rule is too broad](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/318)
 - fix: [support `tag.div` and `tag(Component)`](https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/302) (by [nihalgonsalves](https://github.com/nihalgonsalves) 🙏)
 - feat: [**support flat config and ESLint 9**](https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/330) (by [kazupon](https://github.com/kazupon) 🙏)
 - feat: new rule [**`no-unnecessary-arbitrary-value`**](docs/rules/no-unnecessary-arbitrary-value.md) 🎉

lib/rules/no-arbitrary-value.js

@@ -133,7 +133,7 @@ module.exports = {
       const forbidden = [];
       classNames.forEach((cls, idx) => {
         const parsed = groupUtil.parseClassname(cls, [], mergedConfig, idx);
-        if (/\[.*\]/i.test(parsed.name)) {
+        if (/\[.*\]/i.test(parsed.body)) {
           forbidden.push(parsed.name);
         }
       });

lib/util/ast.js

@@ -36,6 +36,14 @@ function isClassAttribute(node, classRegex) {
     case 'TextAttribute':
       name = node.name;
       break;
+    case 'JSXAttribute':
+      if (node.name.type === 'JSXNamespacedName') {
+        const ns = node.name.namespace.name || '';
+        name = (ns.length ? ns + ':' : '') + node.name.name.name;
+      } else {
+        name = node.name.name;
+      }
+      break;
     default:
       name = node.name.name;
   }
@@ -185,7 +193,7 @@ function extractRangeFromNode(node) {
     return [node.valueSpan.fullStart.offset, node.valueSpan.end.offset];
   }
   if (node.value === undefined) {
-    return [0,0];
+    return [0, 0];
   }
   switch (node.value.type) {
     case 'JSXExpressionContainer':

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

@@ -63,6 +63,9 @@ ruleTester.run("no-arbitrary-value", rule, {
       code: `<div class="w-[10px]">Skip class attribute</div>`,
       options: skipClassAttributeOptions,
     },
+    {
+      code: `<div class="data-[state=open]:pb-8">Issue #318</div>`,
+    },
   ],
 
   invalid: [