diff --git a/packages/tailwindcss-language-server/tests/diagnostics/diagnostics.test.js b/packages/tailwindcss-language-server/tests/diagnostics/diagnostics.test.js index 67d83fc4..48cdd4f7 100644 --- 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: `
testing
`, + 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 index a3be599e..ec6dc166 100644 --- 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 index b2094667..612a7268 100644 --- 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