From 777681aaa7567d50f038fbcc06f1f90da14f77c2 Mon Sep 17 00:00:00 2001 From: Brad Cornes Date: Tue, 28 Apr 2020 21:42:43 +0100 Subject: [PATCH] add docs url helper --- .../src/providers/completionProvider.ts | 61 +++++++++++++------ .../src/util/docsUrl.ts | 14 +++++ 2 files changed, 55 insertions(+), 20 deletions(-) create mode 100644 packages/tailwindcss-language-server/src/util/docsUrl.ts diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts index e44d139..8a57f21 100644 --- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts +++ b/packages/tailwindcss-language-server/src/providers/completionProvider.ts @@ -22,6 +22,7 @@ import { getDocumentSettings } from '../util/getDocumentSettings' import { isJsContext } from '../util/js' import { naturalExpand } from '../util/naturalExpand' import semver from 'semver' +import { docsUrl } from '../util/docsUrl' function completionsFromClassList( state: State, @@ -337,40 +338,50 @@ function provideTailwindDirectiveCompletions( label: 'base', documentation: { kind: MarkupKind.Markdown, - value: - '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)', + value: `This injects Tailwind’s base styles and any base styles registered by plugins.\n\n[Tailwind CSS Documentation](${docsUrl( + state.version, + 'functions-and-directives/#tailwind' + )})`, }, } : { label: 'preflight', documentation: { kind: MarkupKind.Markdown, - value: - '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)', + 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( + state.version, + 'functions-and-directives/#tailwind' + )})`, }, }, { label: 'components', documentation: { kind: MarkupKind.Markdown, - value: - '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)', + value: `This injects Tailwind’s component classes and any component classes registered by plugins.\n\n[Tailwind CSS Documentation](${docsUrl( + state.version, + 'functions-and-directives/#tailwind' + )})`, }, }, { label: 'utilities', documentation: { kind: MarkupKind.Markdown, - value: - '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)', + value: `This injects Tailwind’s utility classes and any utility classes registered by plugins.\n\n[Tailwind CSS Documentation](${docsUrl( + state.version, + 'functions-and-directives/#tailwind' + )})`, }, }, { label: 'screens', documentation: { kind: MarkupKind.Markdown, - 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](https://tailwindcss.com/docs/functions-and-directives/#tailwind)', + 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( + state.version, + 'functions-and-directives/#tailwind' + )})`, }, }, ].map((item) => ({ @@ -511,40 +522,50 @@ function provideCssDirectiveCompletions( label: '@tailwind', documentation: { kind: MarkupKind.Markdown, - value: - '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)', + value: `Use the \`@tailwind\` directive to insert Tailwind’s \`base\`, \`components\`, \`utilities\` and \`screens\` styles into your CSS.\n\n[Tailwind CSS Documentation](${docsUrl( + state.version, + 'functions-and-directives/#tailwind' + )})`, }, }, { label: '@variants', documentation: { kind: MarkupKind.Markdown, - 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](https://tailwindcss.com/docs/functions-and-directives#variants)', + 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( + state.version, + 'functions-and-directives/#variants' + )})`, }, }, { label: '@responsive', documentation: { kind: MarkupKind.Markdown, - value: - '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)', + value: `You can generate responsive variants of your own classes by wrapping their definitions in the \`@responsive\` directive.\n\n[Tailwind CSS Documentation](${docsUrl( + state.version, + 'functions-and-directives/#responsive' + )})`, }, }, { label: '@screen', documentation: { kind: MarkupKind.Markdown, - 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](https://tailwindcss.com/docs/functions-and-directives#screen)', + 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( + state.version, + 'functions-and-directives/#screen' + )})`, }, }, { label: '@apply', documentation: { kind: MarkupKind.Markdown, - value: - '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)', + value: `Use \`@apply\` to inline any existing utility classes into your own custom CSS.\n\n[Tailwind CSS Documentation](${docsUrl( + state.version, + 'functions-and-directives/#apply' + )})`, }, }, ] diff --git a/packages/tailwindcss-language-server/src/util/docsUrl.ts b/packages/tailwindcss-language-server/src/util/docsUrl.ts new file mode 100644 index 0000000..c8b25a1 --- /dev/null +++ b/packages/tailwindcss-language-server/src/util/docsUrl.ts @@ -0,0 +1,14 @@ +import semver from 'semver' + +export function docsUrl(version: string, paths: string | string[]): string { + let major = 0 + let url = 'https://v0.tailwindcss.com/docs/' + if (semver.gte(version, '0.99.0')) { + major = 1 + url = 'https://tailwindcss.com/docs/' + } + const path = Array.isArray(paths) + ? paths[major] || paths[paths.length - 1] + : paths + return `${url}${path}` +}