@vijayhardaha/dev-config 2.4.0 → 2.4.1

package/package.json

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

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/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,7 +121,9 @@ 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.
  *
  * @returns {object} Tailwind-related ESLint rules (may be partial when plugins are missing).
  */
@@ -112,11 +139,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' }),