Skip to content

Commit a15f9c2

Browse files
Passthrough the rootFontSize to the canonicalizeCandidates (#1476)
This PR passes the `rootFontSize` to the `canonicalizeCandidates` function. This allows us to add suggestions for `mt-[15px]` → `mt-4`. ## Test plan <img width="867" height="204" alt="image" src="https://github.com/user-attachments/assets/985f3d8b-2f73-4db1-a60d-1f8f46b22a9b" /> --------- Co-authored-by: Jordan Pittman <[email protected]>
1 parent 4e2a8d7 commit a15f9c2

File tree

3 files changed

+21
-4
lines changed

3 files changed

+21
-4
lines changed

packages/tailwindcss-language-server/tests/diagnostics/diagnostics.test.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -433,7 +433,7 @@ defineTest({
433433
'package.json': json`
434434
{
435435
"dependencies": {
436-
"tailwindcss": "0.0.0-insiders.efe084b"
436+
"tailwindcss": "0.0.0-insiders.249bed0"
437437
}
438438
}
439439
`,
@@ -447,14 +447,15 @@ defineTest({
447447
settings: {
448448
tailwindCSS: {
449449
lint: { suggestCanonicalClasses: 'warning' },
450+
rootFontSize: 16,
450451
},
451452
},
452453
}),
453454
}),
454455
handle: async ({ client }) => {
455456
let doc = await client.open({
456457
lang: 'html',
457-
text: '<div class="[@media_print]:flex [color:red]/50">',
458+
text: '<div class="[@media_print]:flex [color:red]/50 mt-[16px]">',
458459
})
459460

460461
let diagnostics = await doc.diagnostics()
@@ -480,6 +481,16 @@ defineTest({
480481
severity: 2,
481482
suggestions: ['text-[red]/50'],
482483
},
484+
{
485+
code: 'suggestCanonicalClasses',
486+
message: 'The class `mt-[16px]` can be written as `mt-4`',
487+
range: {
488+
start: { line: 0, character: 47 },
489+
end: { line: 0, character: 56 },
490+
},
491+
severity: 2,
492+
suggestions: ['mt-4'],
493+
},
483494
])
484495
},
485496
})

packages/tailwindcss-language-service/src/diagnostics/canonical-classes.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ export async function getSuggestCanonicalClassesDiagnostics(
3737
// diagnostics in a given class list.
3838

3939
for (let className of classNames) {
40-
let canonicalized = state.designSystem.canonicalizeCandidates([className.className])[0]
40+
let canonicalized = state.designSystem.canonicalizeCandidates([className.className], {
41+
rem: settings.tailwindCSS.rootFontSize,
42+
})[0]
4143
let isCanonical = canonicalized === className.className
4244

4345
if (isCanonical) continue

packages/tailwindcss-language-service/src/util/v4/design-system.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ export interface ThemeEntry {
2929
name: string
3030
}
3131

32+
export interface CanonicalizeOptions {
33+
rem?: number
34+
}
35+
3236
export interface DesignSystem {
3337
theme: Theme
3438
variants: Map<string, VariantFn>
@@ -45,7 +49,7 @@ export interface DesignSystem {
4549
invalidCandidates?: Set<string>
4650

4751
// Added in v4.1.15
48-
canonicalizeCandidates?(classes: string[]): string[]
52+
canonicalizeCandidates?(classes: string[], options?: CanonicalizeOptions): string[]
4953
}
5054

5155
export interface DesignSystem {

0 commit comments

Comments
 (0)