Drop dynamicAttrsRegex

Dynamic attribute names have definite rules in Vue and Angular. Testing those rules directly and matching the actual “name” portion against the regex is a better option.

We still match against the static `dynamicAttrs` list for compat reasons

Author: thecrypticace

src/options.ts

@@ -72,7 +72,6 @@ export function createMatcher(options: RequiredOptions, parser: string, defaults
   let dynamicAttrs = new Set<string>(defaults.dynamicAttrs)
   let functions = new Set<string>(defaults.functions)
   let staticAttrsRegex: RegExp[] = [...defaults.staticAttrsRegex]
-  let dynamicAttrsRegex: RegExp[] = [...defaults.dynamicAttrsRegex]
   let functionsRegex: RegExp[] = [...defaults.functionsRegex]
 
   // Create a list of "static" attributes
@@ -104,15 +103,6 @@ export function createMatcher(options: RequiredOptions, parser: string, defaults
     }
   }
 
-  for (let regex of staticAttrsRegex) {
-    if (parser === 'vue') {
-      dynamicAttrsRegex.push(new RegExp(`:${regex.source}`, regex.flags))
-      dynamicAttrsRegex.push(new RegExp(`v-bind:${regex.source}`, regex.flags))
-    } else if (parser === 'angular') {
-      dynamicAttrsRegex.push(new RegExp(`\\[${regex.source}\\]`, regex.flags))
-    }
-  }
-
   // Generate a list of supported functions
   for (let fn of options.tailwindFunctions ?? []) {
     let regex = parseRegex(fn)
@@ -126,11 +116,34 @@ export function createMatcher(options: RequiredOptions, parser: string, defaults
 
   return {
     hasStaticAttr: (name: string) => hasMatch(name, staticAttrs, staticAttrsRegex),
-    hasDynamicAttr: (name: string) => hasMatch(name, dynamicAttrs, dynamicAttrsRegex),
+    hasDynamicAttr: (name: string) => {
+      if (hasMatch(name, dynamicAttrs, [])) return true
+
+      let newName = nameFromDynamicAttr(name, parser)
+      if (!newName) return false
+
+      return hasMatch(newName, staticAttrs, staticAttrsRegex)
+    },
     hasFunction: (name: string) => hasMatch(name, functions, functionsRegex),
   }
 }
 
+function nameFromDynamicAttr(name: string, parser: string) {
+  if (parser === 'vue') {
+    if (name.startsWith(':')) return name.slice(1)
+    if (name.startsWith('v-bind:')) return name.slice(7)
+    if (name.startsWith('v-')) return name
+    return null
+  }
+
+  if (parser === 'angular') {
+    if (name.startsWith('[') && name.endsWith(']')) return name.slice(1, -1)
+    return null
+  }
+
+  return null
+}
+
 /**
  * Check for matches against a static list or possible regex patterns
  */