@vijayhardaha/dev-config 2.4.0 → 2.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vijayhardaha/dev-config",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "Reusable development configurations for Next.js + TypeScript projects",
   "scripts": {
     "lint": "eslint .",

package/src/eslint/__tests__/next.test.js

@@ -29,12 +29,27 @@ describe('eslint/next.js', () => {
     expect(configObject.files).toContain('custom/**/*.tsx');
   });
 
-  // Test that Tailwind plugins are registered on the main config by default.
-  it('should register Tailwind plugins by default', async () => {
+  // Test that Tailwind plugins and rules are omitted by default.
+  it('should omit Tailwind plugins and rules by default', async () => {
     const module = await import('../next.js');
     const result = module.createConfig();
     const configObject = result.at(-1);
 
+    // Verify that no Tailwind plugins are centrally registered.
+    expect(configObject.plugins['better-tailwindcss']).toBeUndefined();
+    expect(configObject.plugins.tailwindcss).toBeUndefined();
+
+    // Verify that no Tailwind rules are present in the config.
+    expect(Object.keys(configObject.rules).filter((rule) => rule.startsWith('better-tailwindcss/'))).toHaveLength(0);
+    expect(Object.keys(configObject.rules).filter((rule) => rule.startsWith('tailwindcss/'))).toHaveLength(0);
+  });
+
+  // Test that Tailwind plugins, rules, and settings register when opted in.
+  it('should register Tailwind plugins when tailwind option is true', async () => {
+    const module = await import('../next.js');
+    const result = module.createConfig({ tailwind: true });
+    const configObject = result.at(-1);
+
     // Verify that the better-tailwindcss plugin is centrally registered.
     expect(configObject.plugins['better-tailwindcss']).toBeDefined();
 
@@ -48,25 +63,6 @@ describe('eslint/next.js', () => {
     expect(configObject.rules['tailwindcss/no-unnecessary-arbitrary-value']).toBe('warn');
   });
 
-  // Test that Tailwind plugins, rules, and settings are omitted when disabled.
-  it('should omit Tailwind plugins and rules when tailwind option is false', async () => {
-    const module = await import('../next.js');
-    const result = module.createConfig({ tailwind: false });
-    const configObject = result.at(-1);
-
-    // Verify that no Tailwind plugins are centrally registered.
-    expect(configObject.plugins['better-tailwindcss']).toBeUndefined();
-    expect(configObject.plugins.tailwindcss).toBeUndefined();
-
-    // Verify that no Tailwind rules are present in the config.
-    expect(Object.keys(configObject.rules).filter((rule) => rule.startsWith('better-tailwindcss/'))).toHaveLength(0);
-    expect(Object.keys(configObject.rules).filter((rule) => rule.startsWith('tailwindcss/'))).toHaveLength(0);
-
-    // Verify that no Tailwind settings are present in the config.
-    expect(configObject.settings.tailwindcss).toBeUndefined();
-    expect(configObject.settings['better-tailwindcss']).toBeUndefined();
-  });
-
   // Test that user settings override the generated Tailwind settings.
   it('should let user settings override Tailwind settings', async () => {
     const module = await import('../next.js');

package/src/eslint/__tests__/react.test.js

@@ -29,12 +29,27 @@ describe('eslint/react.js', () => {
     expect(configObject.files).toContain('custom/**/*.tsx');
   });
 
-  // Test that Tailwind plugins are registered on the main config by default.
-  it('should register Tailwind plugins by default', async () => {
+  // Test that Tailwind plugins and rules are omitted by default.
+  it('should omit Tailwind plugins and rules by default', async () => {
     const module = await import('../react.js');
     const result = module.createConfig();
     const configObject = result.at(-1);
 
+    // Verify that no Tailwind plugins are centrally registered.
+    expect(configObject.plugins['better-tailwindcss']).toBeUndefined();
+    expect(configObject.plugins.tailwindcss).toBeUndefined();
+
+    // Verify that no Tailwind rules are present in the config.
+    expect(Object.keys(configObject.rules).filter((rule) => rule.startsWith('better-tailwindcss/'))).toHaveLength(0);
+    expect(Object.keys(configObject.rules).filter((rule) => rule.startsWith('tailwindcss/'))).toHaveLength(0);
+  });
+
+  // Test that Tailwind plugins, rules, and settings register when opted in.
+  it('should register Tailwind plugins when tailwind option is true', async () => {
+    const module = await import('../react.js');
+    const result = module.createConfig({ tailwind: true });
+    const configObject = result.at(-1);
+
     // Verify that the better-tailwindcss plugin is centrally registered.
     expect(configObject.plugins['better-tailwindcss']).toBeDefined();
 
@@ -47,23 +62,4 @@ describe('eslint/react.js', () => {
     // Verify that the arbitrary value replacement rule is enabled.
     expect(configObject.rules['tailwindcss/no-unnecessary-arbitrary-value']).toBe('warn');
   });
-
-  // Test that Tailwind plugins, rules, and settings are omitted when disabled.
-  it('should omit Tailwind plugins and rules when tailwind option is false', async () => {
-    const module = await import('../react.js');
-    const result = module.createConfig({ tailwind: false });
-    const configObject = result.at(-1);
-
-    // Verify that no Tailwind plugins are centrally registered.
-    expect(configObject.plugins['better-tailwindcss']).toBeUndefined();
-    expect(configObject.plugins.tailwindcss).toBeUndefined();
-
-    // Verify that no Tailwind rules are present in the config.
-    expect(Object.keys(configObject.rules).filter((rule) => rule.startsWith('better-tailwindcss/'))).toHaveLength(0);
-    expect(Object.keys(configObject.rules).filter((rule) => rule.startsWith('tailwindcss/'))).toHaveLength(0);
-
-    // Verify that no Tailwind settings are present in the config.
-    expect(configObject.settings.tailwindcss).toBeUndefined();
-    expect(configObject.settings['better-tailwindcss']).toBeUndefined();
-  });
 });

package/src/eslint/__tests__/tailwind.test.js

@@ -63,7 +63,7 @@ describe('eslint tailwind autofix', () => {
       '',
     ].join('\n');
 
-    const result = await lintAndFix(projectDir, nextModule, code);
+    const result = await lintAndFix(projectDir, nextModule, code, { tailwind: true });
 
     expect(result.output).toContain('aspect-3/4');
     expect(result.output).toContain('max-w-70');
@@ -81,7 +81,10 @@ describe('eslint tailwind autofix', () => {
       '',
     ].join('\n');
 
-    const result = await lintAndFix(projectDir, nextModule, code, { rules: { 'import-x/order': 'off' } });
+    const result = await lintAndFix(projectDir, nextModule, code, {
+      tailwind: true,
+      rules: { 'import-x/order': 'off' },
+    });
 
     expect(result.output).toContain('data-[side=bottom]:translate-y-10');
     expect(result.output).toContain('dark:hover:-translate-x-10');
@@ -94,7 +97,7 @@ describe('eslint tailwind autofix', () => {
       + 'transition-all hover:-translate-y-1 hover:shadow-lg dark:border-slate-800 dark:bg-slate-900';
     const code = ['const Card = () => (', `  <div className="${longClasses}">Card</div>`, ');', ''].join('\n');
 
-    const result = await lintAndFix(projectDir, nextModule, code);
+    const result = await lintAndFix(projectDir, nextModule, code, { tailwind: true });
 
     expect(result.output).toMatch(/className="\n\s+flex/);
   }, 60_000);

package/src/eslint/lib/__tests__/rules.prettier-interop.test.js

@@ -0,0 +1,76 @@
+import { describe, expect, it, vi } from 'vitest';
+
+// Shared handle to stub prettier.resolveConfig before modules evaluate.
+const mockResolveConfig = vi.hoisted(() => vi.fn());
+
+// Intercept prettier so entry-point detection can be simulated without
+// touching real consumer configs on disk.
+vi.mock('prettier', async (importOriginal) => {
+  const actual = await importOriginal();
+  return { ...actual, resolveConfig: mockResolveConfig };
+});
+
+describe('eslint/lib/rules.js with prettier-plugin-tailwindcss', () => {
+  it('drops ordering and wrapping rules when prettier-plugin-tailwindcss is active', async () => {
+    // Simulate a consumer Prettier config that enables the Tailwind plugin.
+    mockResolveConfig.mockResolvedValue({ plugins: ['prettier-plugin-tailwindcss'] });
+
+    const rules = await import('../rules.js');
+    const result = rules.tailwindRules();
+
+    // Verify formatter-owned concerns are left to Prettier.
+    expect(result['better-tailwindcss/enforce-consistent-class-order']).toBeUndefined();
+    expect(result['better-tailwindcss/enforce-consistent-line-wrapping']).toBeUndefined();
+
+    // Verify lint-only concerns stay enabled.
+    expect(result['better-tailwindcss/enforce-canonical-classes']).toBe('warn');
+    expect(result['better-tailwindcss/no-unnecessary-whitespace']).toBe('warn');
+    expect(result['tailwindcss/no-unnecessary-arbitrary-value']).toBe('warn');
+  });
+
+  it('keeps ordering and wrapping rules without the prettier plugin', async () => {
+    // Simulate a consumer Prettier config without the Tailwind plugin.
+    mockResolveConfig.mockResolvedValue({});
+
+    vi.resetModules();
+    const rules = await import('../rules.js');
+    const result = rules.tailwindRules();
+
+    // Verify all four better-tailwindcss rules remain enabled.
+    expect(result['better-tailwindcss/enforce-consistent-class-order']).toBe('warn');
+    expect(result['better-tailwindcss/enforce-consistent-line-wrapping']).toEqual(['warn', { printWidth: 120 }]);
+    expect(result['better-tailwindcss/enforce-canonical-classes']).toBe('warn');
+    expect(result['better-tailwindcss/no-unnecessary-whitespace']).toBe('warn');
+  });
+
+  it('falls back to full rules when prettier config resolution fails', async () => {
+    // Simulate prettier being unusable during config evaluation.
+    mockResolveConfig.mockRejectedValue(new Error('simulated resolution failure'));
+
+    vi.resetModules();
+    const rules = await import('../rules.js');
+    const result = rules.tailwindRules();
+
+    // Verify ordering and wrapping rules stay enabled on failure.
+    expect(result['better-tailwindcss/enforce-consistent-class-order']).toBe('warn');
+    expect(result['better-tailwindcss/enforce-consistent-line-wrapping']).toEqual(['warn', { printWidth: 120 }]);
+  });
+
+  it('logs an interop notice under DEBUG when the prettier plugin is active', async () => {
+    // Enable debug logging and simulate the active Tailwind Prettier plugin.
+    process.env.DEBUG = 'eslint';
+    mockResolveConfig.mockResolvedValue({ plugins: ['prettier-plugin-tailwindcss'] });
+    vi.resetModules();
+    const debugCalls = [];
+    const debugSpy = vi.spyOn(console, 'debug').mockImplementation((...args) => debugCalls.push(args.join(' ')));
+    debugSpy.mockClear();
+
+    // Re-import so top-level detection runs again under this env.
+    await import('../rules.js');
+
+    // Verify that the interop decision is logged.
+    expect(debugCalls.some((message) => message.includes('left to Prettier'))).toBe(true);
+
+    delete process.env.DEBUG;
+  });
+});

package/src/eslint/lib/build-config.js

@@ -127,7 +127,7 @@ const buildConfigObject = ({
  * @param {object} [config.parserOptions] - Parser options.
  * @param {object} [config.settings] - Settings object.
  * @param {object} [config.rules] - Additional rules.
- * @param {object} [config.options] - User-provided options. Tailwind rules are enabled by default and can be disabled with `tailwind: false`.
+ * @param {object} [config.options] - User-provided options. Tailwind rules are disabled by default and can be enabled with `tailwind: true`.
  * @param {boolean} [config.typescript] - Enable TypeScript support.
  *
  * @returns {import('eslint').Linter.Config[]} ESLint configuration array.
@@ -144,7 +144,7 @@ export const buildConfig = ({
   options = {},
   typescript = false,
 }) => {
-  const opts = { prettier: true, importOrder: true, jsdoc: true, tailwind: true, ...options };
+  const opts = { prettier: true, importOrder: true, jsdoc: true, tailwind: false, ...options };
 
   const conditionalPluginList = getEnabledPlugins(conditionalPlugins, opts);
 

package/src/eslint/lib/rules.js

@@ -40,6 +40,31 @@ try {
   }
 }
 
+/**
+ * Indicates whether the consumer Prettier config enables the Tailwind
+ * Prettier plugin. When present, class ordering and line wrapping belong to
+ * the formatter, and enforcing them here too would cause circular fixes.
+ *
+ * @type {boolean}
+ */
+let prettierTailwindPluginDetected = false;
+try {
+  const prettierModule = await import('prettier');
+  const resolvedPrettierConfig = await prettierModule.resolveConfig(path.join(process.cwd(), 'package.json'));
+  prettierTailwindPluginDetected = Boolean(
+    Array.isArray(resolvedPrettierConfig?.plugins)
+    && resolvedPrettierConfig.plugins.includes('prettier-plugin-tailwindcss')
+  );
+  if (prettierTailwindPluginDetected && (process.env.DEBUG?.includes('eslint') || process.env.DEBUG === '*')) {
+    console.debug(
+      '[ESLint Config] Detected "prettier-plugin-tailwindcss" in the consumer Prettier config. '
+        + 'Class ordering and line wrapping rules are left to Prettier.'
+    );
+  }
+} catch {
+  // Detection is best-effort; without a resolvable config, lint rules stay active.
+}
+
 /**
  * Candidate paths probed (relative to the consumer project root) for the main
  * Tailwind CSS v4 entry stylesheet used for theme resolution.
@@ -96,12 +121,16 @@ export const tailwindSettings = () => {
 /**
  * Creates Tailwind class rules covering canonical class names, whitespace,
  * ordering, line wrapping, and arbitrary value scale replacement. Rules rely
- * on plugins registered separately via `getTailwindCentralPlugins`.
+ * on plugins registered separately via `getTailwindCentralPlugins`. When the
+ * consumer enables `prettier-plugin-tailwindcss`, ordering and wrapping are
+ * omitted so the formatter owns those concerns without circular fixes.
+ *
+ * @param {boolean} [tailwind] - Enable Tailwind CSS class rules.
  *
  * @returns {object} Tailwind-related ESLint rules (may be partial when plugins are missing).
  */
-export const tailwindRules = () => {
-  if (!betterTailwindcssPlugin) {
+export const tailwindRules = (tailwind = true) => {
+  if (!tailwind || !betterTailwindcssPlugin) {
     return {};
   }
 
@@ -112,11 +141,15 @@ export const tailwindRules = () => {
     // Collapse redundant whitespace inside class strings.
     'better-tailwindcss/no-unnecessary-whitespace': 'warn',
 
-    // Enforce consistent class ordering inside class strings.
-    'better-tailwindcss/enforce-consistent-class-order': 'warn',
+    // Enforce consistent class ordering inside class strings. Skipped when
+    // prettier-plugin-tailwindcss already sorts classes during formatting.
+    ...(prettierTailwindPluginDetected ? {} : { 'better-tailwindcss/enforce-consistent-class-order': 'warn' }),
 
-    // Wrap long class strings into readable multi-line groups.
-    'better-tailwindcss/enforce-consistent-line-wrapping': ['warn', { printWidth: PRETTIER.BASE.printWidth }],
+    // Wrap long class strings into readable multi-line groups. Skipped when
+    // prettier-plugin-tailwindcss already wraps classes during formatting.
+    ...(prettierTailwindPluginDetected
+      ? {}
+      : { 'better-tailwindcss/enforce-consistent-line-wrapping': ['warn', { printWidth: PRETTIER.BASE.printWidth }] }),
 
     // Replace arbitrary values with matching theme scale utilities (e.g. `p-[16px]` to `p-4`).
     ...(tailwindCssEslintPlugin && { 'tailwindcss/no-unnecessary-arbitrary-value': 'warn' }),
@@ -273,7 +306,7 @@ const importOrderRules = (importOrder = true) =>
  * @returns {object} ESLint rules object.
  */
 export const commonRules = (options = {}) => {
-  const { typescript = true, importOrder = true, prettier = true, jsdoc = true, tailwind = true } = options;
+  const { typescript = true, importOrder = true, prettier = true, jsdoc = true, tailwind = false } = options;
 
   return {
     // ---- TypeScript Rules ----
@@ -289,6 +322,6 @@ export const commonRules = (options = {}) => {
     ...jsdocRules(jsdoc),
 
     // ---- Tailwind Integration ----
-    ...(tailwind && tailwindRules()),
+    ...tailwindRules(tailwind),
   };
 };

package/src/eslint/next.js

@@ -39,7 +39,7 @@ const prepareNextConfig = (configs) => configs.filter((c) => c.name !== 'next/ty
  * @param {boolean} [options.a11y] - Enable accessibility rules.
  * @param {boolean} [options.importOrder] - Enable import order rules.
  * @param {boolean} [options.jsdoc] - Enable JSDoc rules for public/exported APIs.
- * @param {boolean} [options.tailwind] - Enable Tailwind CSS class rules (default: true).
+ * @param {boolean} [options.tailwind] - Enable Tailwind CSS class rules (default: false).
  * @param {string[]} [options.ignores] - Additional ignore patterns.
  * @param {object} [options.rules] - Additional or overridden rules.
  * @param {object} [options.settings] - Additional settings.
@@ -52,7 +52,7 @@ const prepareNextConfig = (configs) => configs.filter((c) => c.name !== 'next/ty
  * @returns {import('eslint').Linter.Config[]} ESLint configuration array.
  */
 export const createConfig = (options = {}) => {
-  const { prettier = true, react = true, a11y = true, importOrder = true, jsdoc = true, tailwind = true } = options;
+  const { prettier = true, react = true, a11y = true, importOrder = true, jsdoc = true, tailwind = false } = options;
 
   return buildConfig({
     files: [...files.withTs, ...(options.files || [])],

package/src/eslint/react.js

@@ -26,7 +26,7 @@ import { buildConfig, files, getTailwindCentralPlugins } from './lib/index.js';
  * @param {boolean} [options.a11y] - Enable accessibility rules.
  * @param {boolean} [options.importOrder] - Enable import order rules.
  * @param {boolean} [options.jsdoc] - Enable JSDoc rules for public/exported APIs.
- * @param {boolean} [options.tailwind] - Enable Tailwind CSS class rules (default: true).
+ * @param {boolean} [options.tailwind] - Enable Tailwind CSS class rules (default: false).
  * @param {string[]} [options.ignores] - Additional ignore patterns.
  * @param {object} [options.rules] - Additional or overridden rules.
  * @param {object} [options.settings] - Additional settings.
@@ -39,7 +39,7 @@ import { buildConfig, files, getTailwindCentralPlugins } from './lib/index.js';
  * @returns {import('eslint').Linter.Config[]} ESLint configuration array.
  */
 export const createConfig = (options = {}) => {
-  const { prettier = true, a11y = true, importOrder = true, jsdoc = true, tailwind = true } = options;
+  const { prettier = true, a11y = true, importOrder = true, jsdoc = true, tailwind = false } = options;
 
   return buildConfig({
     files: [...files.withTs, ...(options.files || [])],