Show all potential class conflicts in v4 projects (#1077)

Fixes #1047 --------- Co-authored-by: Robin Malfait <[email protected]>
tailwindlabs · Nov 8, 2024 · 712b5ff · 712b5ff
1 parent e3cd1f2
commit 712b5ff
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 1 deletion.
diff --git a/packages/tailwindcss-language-server/tests/diagnostics/diagnostics.test.js b/packages/tailwindcss-language-server/tests/diagnostics/diagnostics.test.js
@@ -254,3 +254,64 @@ withFixture('v4/with-prefix', (c) => {
     expected: [],
   })
 })
+
+withFixture('v4/basic', (c) => {
+  function testMatch(name, { code, expected, language = 'html' }) {
+    test(name, async () => {
+      let promise = new Promise((resolve) => {
+        c.onNotification('textDocument/publishDiagnostics', ({ diagnostics }) => {
+          resolve(diagnostics)
+        })
+      })
+
+      let doc = await c.openDocument({ text: code, lang: language })
+      let diagnostics = await promise
+
+      expected = JSON.parse(JSON.stringify(expected).replaceAll('{{URI}}', doc.uri))
+
+      expect(diagnostics).toMatchObject(expected)
+    })
+  }
+
+  testMatch('conflicts show even when unknown classes are present', {
+    code: `<div class="foo max-w-4xl max-w-6xl hover:underline">testing</div>`,
+    expected: [
+      {
+        code: 'cssConflict',
+        message: "'max-w-4xl' applies the same CSS properties as 'max-w-6xl'.",
+        className: {
+          className: 'max-w-4xl',
+          classList: {
+            classList: 'foo max-w-4xl max-w-6xl hover:underline',
+          },
+        },
+        otherClassNames: [
+          {
+            className: 'max-w-6xl',
+            classList: {
+              classList: 'foo max-w-4xl max-w-6xl hover:underline',
+            },
+          },
+        ],
+      },
+      {
+        code: 'cssConflict',
+        message: "'max-w-6xl' applies the same CSS properties as 'max-w-4xl'.",
+        className: {
+          className: 'max-w-6xl',
+          classList: {
+            classList: 'foo max-w-4xl max-w-6xl hover:underline',
+          },
+        },
+        otherClassNames: [
+          {
+            className: 'max-w-4xl',
+            classList: {
+              classList: 'foo max-w-4xl max-w-6xl hover:underline',
+            },
+          },
+        ],
+      },
+    ],
+  })
+})
diff --git a/packages/tailwindcss-language-service/src/diagnostics/getCssConflictDiagnostics.ts b/packages/tailwindcss-language-service/src/diagnostics/getCssConflictDiagnostics.ts
@@ -353,7 +353,7 @@ function* findConflicts(
       conflictingClassNames.push(otherClassName)
     }
 
-    if (conflictingClassNames.length === 0) return
+    if (conflictingClassNames.length === 0) continue
 
     yield [className, conflictingClassNames]
   }

diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Properly validate `theme(…)` function paths in v4 ([#1074](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1074))
 - Support loading TypeScript configs and plugins in v4 projects ([#1076](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1076))
 - Show colors for logical border properties ([#1075](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1075))
+- Show all potential class conflicts in v4 projects ([#1077](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1077))
 
 ## 0.12.12