eslint-config-agent 2.0.0 → 2.0.1

package/configs/overrides.js

@@ -86,15 +86,6 @@ export const overridesConfig = (
     },
   },
 
-  // className requirement for JSX files
-  {
-    files: ['**/*.{tsx,jsx}'],
-    ignores: ['**/*.stories.{js,jsx,ts,tsx}'],
-    rules: {
-      'custom/jsx-classname-required': 'error',
-    },
-  },
-
   // Function and file length rules - strict error thresholds
   {
     files: ['**/*.{ts,tsx,js,jsx}'],

package/index.js

@@ -1,5 +1,6 @@
 import js from '@eslint/js'
 import earlyReturn from 'eslint-plugin-early-return'
+import jsxClassname from 'eslint-plugin-jsx-classname'
 import reactHooks from 'eslint-plugin-react-hooks'
 import { defineConfig } from 'eslint/config'
 import tseslint from 'typescript-eslint'
@@ -141,7 +142,14 @@ const config = defineConfig([
   // Examples files configuration
   ...examplesConfig,
 
-  // Final overrides (index files, switch case, className, length rules)
+  // className requirement for JSX files (strict: errors + rejects Tailwind-only classNames)
+  {
+    ...jsxClassname.configs.strict,
+    files: ['**/*.{tsx,jsx}'],
+    ignores: ['**/*.stories.{js,jsx,ts,tsx}'],
+  },
+
+  // Final overrides (index files, switch case, length rules)
   ...overridesConfig(sharedRestrictedSyntax, tsOnlyRestrictedSyntax),
 ])
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-agent",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "ESLint configuration package with TypeScript support",
   "main": "index.js",
   "type": "module",
@@ -110,6 +110,7 @@
     "eslint-plugin-early-return": "^1.0.0",
     "eslint-plugin-error": "^1.3.0",
     "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-classname": "^1.0.1",
     "eslint-plugin-n": "^17.21.3",
     "eslint-plugin-no-optional-chaining": "^1.0.0",
     "eslint-plugin-preact": "^0.1.0",

package/plugins/index.js

@@ -18,7 +18,6 @@ import defaultPlugin from 'eslint-plugin-default'
 import noOptionalChainingPlugin from 'eslint-plugin-no-optional-chaining'
 import dddPlugin from 'eslint-plugin-ddd'
 import preactPlugin from 'eslint-plugin-preact'
-import allRules from '../rules/index.js'
 import { noDefaultClassExportRule } from '../rules/no-default-class-export/index.js'
 
 // Centralized plugin configuration
@@ -39,7 +38,6 @@ export const plugins = {
   custom: {
     rules: {
       'no-default-class-export': noDefaultClassExportRule,
-      'jsx-classname-required': allRules.jsxClassNameRequiredRule,
     },
   },
 }

package/rules/index.js

@@ -22,7 +22,6 @@ import { noTypeAssertionsConfig } from './no-type-assertions/index.js'
 import { noExportSpecifiersConfig } from './no-empty-exports/index.js'
 import { noClassPropertyDefaultsConfig } from './no-class-property-defaults/index.js'
 import { noDefaultClassExportRules } from './no-default-class-export/index.js'
-import { jsxClassNameRequiredRule } from './jsx-classname-required/index.js'
 import { noNullishCoalescingConfig } from './nullish-coalescing/index.js'
 import { switchStatementsReturnTypeConfigs } from './switch-statements-return-type/index.js'
 import { switchCaseFunctionsReturnTypeConfigs } from './switch-case-functions-return-type/index.js'
@@ -49,7 +48,6 @@ const allRules = {
   noExportSpecifiersConfig,
   noClassPropertyDefaultsConfig,
   noDefaultClassExportRules,
-  jsxClassNameRequiredRule,
   noNullishCoalescingConfig,
   switchStatementsReturnTypeConfigs,
   switchCaseFunctionsReturnTypeConfigs,
@@ -79,7 +77,6 @@ export {
   noExportSpecifiersConfig,
   noClassPropertyDefaultsConfig,
   noDefaultClassExportRules,
-  jsxClassNameRequiredRule,
   noNullishCoalescingConfig,
   switchStatementsReturnTypeConfigs,
   switchCaseFunctionsReturnTypeConfigs,

package/rules/jsx-classname-required/index.js

@@ -1,95 +0,0 @@
-/**
- * ESLint rule to require className attribute on HTML elements in JSX
- *
- * This rule enforces that all HTML elements in JSX must have a non-empty className attribute.
- * It excludes React components (starting with capital letters), fragments, and title elements.
- *
- * Examples:
- * - ❌ <div>Content</div>
- * - ❌ <div className="">Content</div>
- * - ✅ <div className="container">Content</div>
- * - ✅ <MyComponent>Content</MyComponent> (ignored - React component)
- * - ✅ <Fragment>Content</Fragment> (ignored - fragment)
- * - ✅ <React.Fragment>Content</React.Fragment> (ignored - React fragment)
- * - ✅ <React.StrictMode>Content</React.StrictMode> (ignored - React component)
- * - ✅ <title>Page Title</title> (ignored - title element)
- */
-
-const jsxClassNameRequiredRule = {
-  meta: {
-    type: 'layout',
-    docs: {
-      description:
-        'Require non-empty className attribute on HTML elements in JSX',
-      category: 'Stylistic Issues',
-      recommended: false,
-    },
-    fixable: null,
-    schema: [],
-    messages: {
-      missingClassName: 'HTML elements must have a className attribute.',
-      emptyClassName:
-        'HTML elements must have a non-empty className attribute.',
-    },
-  },
-
-  create(context) {
-    return {
-      JSXOpeningElement(node) {
-        // Skip if this is a React component (starts with capital letter)
-        if (
-          node.name.type === 'JSXIdentifier' &&
-          /^[A-Z]/.test(node.name.name)
-        ) {
-          return
-        }
-
-        // Skip if this is Fragment
-        if (
-          node.name.type === 'JSXIdentifier' &&
-          node.name.name === 'Fragment'
-        ) {
-          return
-        }
-
-        // Skip if this is React.Something (like React.Fragment, React.StrictMode, etc.)
-        if (
-          node.name.type === 'JSXMemberExpression' &&
-          node.name.object.name === 'React' &&
-          /^[A-Z]/.test(node.name.property.name)
-        ) {
-          return
-        }
-
-        // Skip if this is a title element (used in document head)
-        if (node.name.type === 'JSXIdentifier' && node.name.name === 'title') {
-          return
-        }
-
-        // Find className attribute
-        const classNameAttr = node.attributes.find(
-          attr => attr.type === 'JSXAttribute' && attr.name.name === 'className'
-        )
-
-        if (!classNameAttr) {
-          context.report({
-            node,
-            messageId: 'missingClassName',
-          })
-          return
-        }
-
-        // Check if className is an empty string
-        const value = classNameAttr.value
-        if (value && value.type === 'Literal' && value.value === '') {
-          context.report({
-            node,
-            messageId: 'emptyClassName',
-          })
-        }
-      },
-    }
-  },
-}
-
-export { jsxClassNameRequiredRule }