Merge branch 'master-co:dev/beta' into dev/beta

master-co · Oct 25, 2023 · 8079eb3 · 8079eb3
2 parents 4b8e24f + f916e4b
commit 8079eb3
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 24 deletions.
diff --git 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
+### 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>
diff --git 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:
         }]
     }
 }
-```
+```
+
+---
+
+## Settings
+<Code lang="js">
+    {defaultSettings}
+</Code>
diff --git 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>
 )
diff --git 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>
-)
+export default () => <H1>Hello World</H1>
diff --git 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
@@ -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]
@@ -252,7 +243,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
@@ -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) {