Skip to content

Commit 777681a

Browse files
author
Brad Cornes
committed
add docs url helper
1 parent f3f1b3b commit 777681a

File tree

2 files changed

+55
-20
lines changed

2 files changed

+55
-20
lines changed

‎packages/tailwindcss-language-server/src/providers/completionProvider.ts

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { getDocumentSettings } from '../util/getDocumentSettings'
2222
import { isJsContext } from '../util/js'
2323
import { naturalExpand } from '../util/naturalExpand'
2424
import semver from 'semver'
25+
import { docsUrl } from '../util/docsUrl'
2526

2627
function completionsFromClassList(
2728
state: State,
@@ -337,40 +338,50 @@ function provideTailwindDirectiveCompletions(
337338
label: 'base',
338339
documentation: {
339340
kind: MarkupKind.Markdown,
340-
value:
341-
'This injects Tailwind’s base styles and any base styles registered by plugins.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives/#tailwind)',
341+
value: `This injects Tailwind’s base styles and any base styles registered by plugins.\n\n[Tailwind CSS Documentation](${docsUrl(
342+
state.version,
343+
'functions-and-directives/#tailwind'
344+
)})`,
342345
},
343346
}
344347
: {
345348
label: 'preflight',
346349
documentation: {
347350
kind: MarkupKind.Markdown,
348-
value:
349-
'This injects Tailwind’s base styles, which is a combination of Normalize.css and some additional base styles.\n\n[Tailwind CSS Documentation](https://v0.tailwindcss.com/docs/functions-and-directives/#tailwind)',
351+
value: `This injects Tailwind’s base styles, which is a combination of Normalize.css and some additional base styles.\n\n[Tailwind CSS Documentation](${docsUrl(
352+
state.version,
353+
'functions-and-directives/#tailwind'
354+
)})`,
350355
},
351356
},
352357
{
353358
label: 'components',
354359
documentation: {
355360
kind: MarkupKind.Markdown,
356-
value:
357-
'This injects Tailwind’s component classes and any component classes registered by plugins.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives/#tailwind)',
361+
value: `This injects Tailwind’s component classes and any component classes registered by plugins.\n\n[Tailwind CSS Documentation](${docsUrl(
362+
state.version,
363+
'functions-and-directives/#tailwind'
364+
)})`,
358365
},
359366
},
360367
{
361368
label: 'utilities',
362369
documentation: {
363370
kind: MarkupKind.Markdown,
364-
value:
365-
'This injects Tailwind’s utility classes and any utility classes registered by plugins.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives/#tailwind)',
371+
value: `This injects Tailwind’s utility classes and any utility classes registered by plugins.\n\n[Tailwind CSS Documentation](${docsUrl(
372+
state.version,
373+
'functions-and-directives/#tailwind'
374+
)})`,
366375
},
367376
},
368377
{
369378
label: 'screens',
370379
documentation: {
371380
kind: MarkupKind.Markdown,
372-
value:
373-
'Use this directive to control where Tailwind injects the responsive variations of each utility.\n\nIf omitted, Tailwind will append these classes to the very end of your stylesheet by default.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives/#tailwind)',
381+
value: `Use this directive to control where Tailwind injects the responsive variations of each utility.\n\nIf omitted, Tailwind will append these classes to the very end of your stylesheet by default.\n\n[Tailwind CSS Documentation](${docsUrl(
382+
state.version,
383+
'functions-and-directives/#tailwind'
384+
)})`,
374385
},
375386
},
376387
].map((item) => ({
@@ -511,40 +522,50 @@ function provideCssDirectiveCompletions(
511522
label: '@tailwind',
512523
documentation: {
513524
kind: MarkupKind.Markdown,
514-
value:
515-
'Use the `@tailwind` directive to insert Tailwind’s `base`, `components`, `utilities` and `screens` styles into your CSS.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#tailwind)',
525+
value: `Use the \`@tailwind\` directive to insert Tailwind’s \`base\`, \`components\`, \`utilities\` and \`screens\` styles into your CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
526+
state.version,
527+
'functions-and-directives/#tailwind'
528+
)})`,
516529
},
517530
},
518531
{
519532
label: '@variants',
520533
documentation: {
521534
kind: MarkupKind.Markdown,
522-
value:
523-
'You can generate `responsive`, `hover`, `focus`, `active`, and `group-hover` versions of your own utilities by wrapping their definitions in the `@variants` directive.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#variants)',
535+
value: `You can generate \`responsive\`, \`hover\`, \`focus\`, \`active\`, and \`group-hover\` versions of your own utilities by wrapping their definitions in the \`@variants\` directive.\n\n[Tailwind CSS Documentation](${docsUrl(
536+
state.version,
537+
'functions-and-directives/#variants'
538+
)})`,
524539
},
525540
},
526541
{
527542
label: '@responsive',
528543
documentation: {
529544
kind: MarkupKind.Markdown,
530-
value:
531-
'You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#responsive)',
545+
value: `You can generate responsive variants of your own classes by wrapping their definitions in the \`@responsive\` directive.\n\n[Tailwind CSS Documentation](${docsUrl(
546+
state.version,
547+
'functions-and-directives/#responsive'
548+
)})`,
532549
},
533550
},
534551
{
535552
label: '@screen',
536553
documentation: {
537554
kind: MarkupKind.Markdown,
538-
value:
539-
'The `@screen` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#screen)',
555+
value: `The \`@screen\` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
556+
state.version,
557+
'functions-and-directives/#screen'
558+
)})`,
540559
},
541560
},
542561
{
543562
label: '@apply',
544563
documentation: {
545564
kind: MarkupKind.Markdown,
546-
value:
547-
'Use `@apply` to inline any existing utility classes into your own custom CSS.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#apply)',
565+
value: `Use \`@apply\` to inline any existing utility classes into your own custom CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
566+
state.version,
567+
'functions-and-directives/#apply'
568+
)})`,
548569
},
549570
},
550571
]

‎packages/tailwindcss-language-server/src/util/docsUrl.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import semver from 'semver'
2+
3+
export function docsUrl(version: string, paths: string | string[]): string {
4+
let major = 0
5+
let url = 'https://v0.tailwindcss.com/docs/'
6+
if (semver.gte(version, '0.99.0')) {
7+
major = 1
8+
url = 'https://tailwindcss.com/docs/'
9+
}
10+
const path = Array.isArray(paths)
11+
? paths[major] || paths[paths.length - 1]
12+
: paths
13+
return `${url}${path}`
14+
}

0 commit comments

Comments
 (0)