From e2cc6190b8a2155d320f9b7022fd320566c52e38 Mon Sep 17 00:00:00 2001
From: 1aron <i@aron.tw>
Date: Wed, 25 Oct 2023 16:55:04 +0800
Subject: [PATCH 1/2] Improve(ESLint): `settings.functions` ->
 `settings.calleeMatching`

---
 examples/eslint/clsx.tsx                            |  2 +-
 examples/eslint/styled.tsx                          |  4 +---
 packages/eslint-plugin/lib/settings.js              |  4 ++--
 packages/eslint-plugin/lib/utils/ast.js             | 10 ----------
 packages/eslint-plugin/lib/utils/define-visitors.js | 13 +++++++++----
 5 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/examples/eslint/clsx.tsx b/examples/eslint/clsx.tsx
index 621b32dc0..0e91421c0 100644
--- a/examples/eslint/clsx.tsx
+++ b/examples/eslint/clsx.tsx
@@ -2,5 +2,5 @@ import React from 'react'
 import clsx from 'clsx'
 
 export default () => (
-    <h1 className={clsx('text-align:cente')}>Hello World</h1>
+    <h1 className={clsx('display:bloc')}>Hello World</h1>
 )
\ No newline at end of file
diff --git a/examples/eslint/styled.tsx b/examples/eslint/styled.tsx
index 6484ace87..5151861ca 100644
--- a/examples/eslint/styled.tsx
+++ b/examples/eslint/styled.tsx
@@ -3,6 +3,4 @@ import { styled } from '@master/css.react'
 
 const H1 = styled.h1`text-align:cente`
 
-export default () => (
-    <H1>Hello World</H1>
-)
\ No newline at end of file
+export default () => <H1>Hello World</H1>
\ No newline at end of file
diff --git a/packages/eslint-plugin/lib/settings.js b/packages/eslint-plugin/lib/settings.js
index 7be61ef4e..2cbbac22c 100644
--- a/packages/eslint-plugin/lib/settings.js
+++ b/packages/eslint-plugin/lib/settings.js
@@ -1,7 +1,7 @@
 const settings = {
-    functions: ['classnames', 'clsx', 'ctl', 'cva', 'cv', 'classVariant', 'styled(?:\\.\\w+)?'],
-    ignoredKeys: ['compoundVariants', 'defaultVariants'],
+    calleeMatching: '^(classnames|clsx|ctl|cva|cv|classVariant|styled(?:\\.\\w+)?)',
     classMatching: '^class(Name)?$',
+    ignoredKeys: ['compoundVariants', 'defaultVariants'],
     config: 'master.css.*'
 }
 
diff --git a/packages/eslint-plugin/lib/utils/ast.js b/packages/eslint-plugin/lib/utils/ast.js
index 997ad512b..27a37face 100644
--- a/packages/eslint-plugin/lib/utils/ast.js
+++ b/packages/eslint-plugin/lib/utils/ast.js
@@ -1,15 +1,6 @@
 
 const separatorRegEx = /([\t\n\f\r ]+)/
 
-function calleeToString(calleeNode) {
-    if (calleeNode.type === 'Identifier') {
-        return calleeNode.name
-    }
-    if (calleeNode.type === 'MemberExpression') {
-        return `${calleeNode.object.name}.${calleeNode.property.name}`
-    }
-}
-
 function extractRangeFromNode(node) {
     if (node.type === 'TextAttribute' && node.name === 'class') {
         return [node.valueSpan.fullStart.offset, node.valueSpan.end.offset]
@@ -225,7 +216,6 @@ function findLoc(text, lines, startLine, endLine) {
 }
 
 module.exports = {
-    calleeToString,
     extractRangeFromNode,
     extractValueFromNode,
     extractClassnamesFromValue,
diff --git a/packages/eslint-plugin/lib/utils/define-visitors.js b/packages/eslint-plugin/lib/utils/define-visitors.js
index 2b2f8046c..de6ab53a5 100644
--- a/packages/eslint-plugin/lib/utils/define-visitors.js
+++ b/packages/eslint-plugin/lib/utils/define-visitors.js
@@ -1,10 +1,15 @@
-const astUtil = require('./ast')
-
 function defineVisitors({ context, settings }, visitNode) {
 
     const isFnNode = (node) => {
-        const calleeStr = astUtil.calleeToString(node.callee || node.tag)
-        return settings.functions.findIndex((eachFnPattern) => new RegExp('^' + eachFnPattern).test(calleeStr)) !== -1
+        let calleeName = ''
+        const calleeNode = node.callee || node.tag
+        if (calleeNode.type === 'Identifier') {
+            calleeName = calleeNode.name
+        }
+        if (calleeNode.type === 'MemberExpression') {
+            calleeName = `${calleeNode.object.name}.${calleeNode.property.name}`
+        }
+        return new RegExp(settings.calleeMatching).test(calleeName)
     }
 
     const CallExpression = function (node) {

From 3976108bddce28f30f42ae8e9521a4f2cfddc65e Mon Sep 17 00:00:00 2001
From: 1aron <i@aron.tw>
Date: Wed, 25 Oct 2023 16:58:05 +0800
Subject: [PATCH 2/2] Update docs

---
 docs/code-linting/content.mdx |  9 ++++++---
 docs/eslint/content.mdx       | 10 +++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/docs/code-linting/content.mdx b/docs/code-linting/content.mdx
index 24142abb1..4adf60a21 100644
--- a/docs/code-linting/content.mdx
+++ b/docs/code-linting/content.mdx
@@ -37,9 +37,9 @@ import Features, { Feature } from 'shared/components/Features'
     <Feature>
         <IconFunction className="app-icon-primary" />
         <div>
-            **[Supports CSS-in-JS](#supports-css-in-js)**
+            **[Supports JS utilities](#supports-js-utilities)**
 
-            Avoid declaring the identical CSS property repeatedly
+            Check the classes in popular utility arguments
         </div>
     </Feature>
 </Features>
@@ -115,4 +115,7 @@ export default {
 ### Conflicting class checks 🚧
 Soon...
 
-### Supports CSS-in-JS
\ No newline at end of file
+### Supports JS utilities
+<video className="aspect:2/1 r:5 max-w:xs" autoPlay loop muted playsInline>
+    <source src="/videos/supports-js-utilities.webm" type="video/webm" />
+</video>
\ No newline at end of file
diff --git a/docs/eslint/content.mdx b/docs/eslint/content.mdx
index 86ca0178d..8f7a1d34e 100644
--- a/docs/eslint/content.mdx
+++ b/docs/eslint/content.mdx
@@ -1,4 +1,5 @@
 import defaultConfigurationScript from '../../packages/eslint-config/index.js?text'
+import defaultSettings from '../../packages/eslint-plugin/lib/settings.js?text'
 
 ## Usage [sr-only]
 
@@ -43,4 +44,11 @@ Set `disallowTraditionalClass: true` to disallow using traditional classes:
         }]
     }
 }
-```
\ No newline at end of file
+```
+
+---
+
+## Settings
+<Code lang="js">
+    {defaultSettings}
+</Code>
\ No newline at end of file