From e0f8d73a79dcf222f339d79a34eb4fc6c4435783 Mon Sep 17 00:00:00 2001 From: Brad Cornes Date: Thu, 26 Nov 2020 20:07:39 +0000 Subject: [PATCH] respect editor tab size in CSS previews --- .../tailwindcss-intellisense/src/extension.ts | 6 +++++- .../src/lsp/server.ts | 9 +++------ .../src/lsp/util/getDocumentSettings.ts | 19 ------------------- .../src/completionProvider.ts | 7 ++++--- .../src/hoverProvider.ts | 16 ++++++++++------ .../src/util/getDocumentSettings.ts | 18 ++++++++++++------ .../src/util/state.ts | 1 + .../src/util/stringify.ts | 15 ++++++++++----- 8 files changed, 45 insertions(+), 46 deletions(-) delete mode 100644 packages/tailwindcss-intellisense/src/lsp/util/getDocumentSettings.ts diff --git a/packages/tailwindcss-intellisense/src/extension.ts b/packages/tailwindcss-intellisense/src/extension.ts index fe982e9..a7a061d 100755 --- a/packages/tailwindcss-intellisense/src/extension.ts +++ b/packages/tailwindcss-intellisense/src/extension.ts @@ -155,7 +155,11 @@ export function activate(context: ExtensionContext) { registerConfigErrorHandler(emitter) registerColorDecorator(client, context, emitter) onMessage(client, 'getConfiguration', async (scope) => { - return Workspace.getConfiguration('tailwindCSS', scope) + return { + tabSize: + Workspace.getConfiguration('editor', scope).get('tabSize') || 2, + ...Workspace.getConfiguration('tailwindCSS', scope), + } }) }) diff --git a/packages/tailwindcss-intellisense/src/lsp/server.ts b/packages/tailwindcss-intellisense/src/lsp/server.ts index 331f7fb..9b3da84 100644 --- a/packages/tailwindcss-intellisense/src/lsp/server.ts +++ b/packages/tailwindcss-intellisense/src/lsp/server.ts @@ -28,7 +28,6 @@ import { doCodeActions, } from 'tailwindcss-language-service' import { URI } from 'vscode-uri' -import { getDocumentSettings } from './util/getDocumentSettings' import { provideDiagnostics, updateAllDiagnostics, @@ -44,6 +43,7 @@ let documents = new TextDocuments(TextDocument) let workspaceFolder: string | null const defaultSettings: Settings = { + tabSize: 2, emmetCompletions: false, includeLanguages: {}, validate: true, @@ -59,9 +59,6 @@ const defaultSettings: Settings = { let globalSettings: Settings = defaultSettings let documentSettings: Map = new Map() -documents.onDidOpen((event) => { - getDocumentSettings(state, event.document) -}) documents.onDidClose((event) => { documentSettings.delete(event.document.uri) }) @@ -206,14 +203,14 @@ connection.onCompletion( ) connection.onCompletionResolve( - (item: CompletionItem): CompletionItem => { + (item: CompletionItem): Promise => { if (!state.enabled) return null return resolveCompletionItem(state, item) } ) connection.onHover( - (params: TextDocumentPositionParams): Hover => { + (params: TextDocumentPositionParams): Promise => { if (!state.enabled) return null let document = state.editor.documents.get(params.textDocument.uri) if (!document) return null diff --git a/packages/tailwindcss-intellisense/src/lsp/util/getDocumentSettings.ts b/packages/tailwindcss-intellisense/src/lsp/util/getDocumentSettings.ts deleted file mode 100644 index 2f127de..0000000 --- a/packages/tailwindcss-intellisense/src/lsp/util/getDocumentSettings.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { State, Settings } from './state' -import { TextDocument } from 'vscode-languageserver' - -export async function getDocumentSettings( - state: State, - document: TextDocument -): Promise { - if (!state.editor.capabilities.configuration) { - return Promise.resolve(state.editor.globalSettings) - } - let result = state.editor.documentSettings.get(document.uri) - if (!result) { - result = await state.emitter.emit('getConfiguration', { - languageId: document.languageId, - }) - state.editor.documentSettings.set(document.uri, result) - } - return result -} diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts index 693e452..324a00b 100644 --- a/packages/tailwindcss-language-service/src/completionProvider.ts +++ b/packages/tailwindcss-language-service/src/completionProvider.ts @@ -720,10 +720,10 @@ export async function doComplete( return provideEmmetCompletions(state, document, position) } -export function resolveCompletionItem( +export async function resolveCompletionItem( state: State, item: CompletionItem -): CompletionItem { +): Promise { if (['helper', 'directive', 'variant', '@tailwind'].includes(item.data)) { return item } @@ -747,7 +747,8 @@ export function resolveCompletionItem( } else { item.detail = getCssDetail(state, className) if (!item.documentation) { - const css = stringifyCss(item.data.join(':'), className) + const { tabSize } = await getDocumentSettings(state) + const css = stringifyCss(item.data.join(':'), className, tabSize) if (css) { item.documentation = { kind: 'markdown' as typeof MarkupKind.Markdown, diff --git a/packages/tailwindcss-language-service/src/hoverProvider.ts b/packages/tailwindcss-language-service/src/hoverProvider.ts index 6322c40..3171e02 100644 --- a/packages/tailwindcss-language-service/src/hoverProvider.ts +++ b/packages/tailwindcss-language-service/src/hoverProvider.ts @@ -6,14 +6,15 @@ import { isCssContext } from './util/css' import { findClassNameAtPosition } from './util/find' import { validateApply } from './util/validateApply' import { getClassNameParts } from './util/getClassNameAtPosition' +import { getDocumentSettings } from './util/getDocumentSettings' -export function doHover( +export async function doHover( state: State, document: TextDocument, position: Position -): Hover { +): Promise { return ( - provideClassNameHover(state, document, position) || + (await provideClassNameHover(state, document, position)) || provideCssHelperHover(state, document, position) ) } @@ -71,11 +72,11 @@ function provideCssHelperHover( } } -function provideClassNameHover( +async function provideClassNameHover( state: State, document: TextDocument, position: Position -): Hover { +): Promise { let className = findClassNameAtPosition(state, document, position) if (className === null) return null @@ -89,9 +90,12 @@ function provideClassNameHover( } } + const { tabSize } = await getDocumentSettings(state, document) + const css = stringifyCss( className.className, - dlv(state.classNames.classNames, [...parts, '__info']) + dlv(state.classNames.classNames, [...parts, '__info']), + tabSize ) if (!css) return null diff --git a/packages/tailwindcss-language-service/src/util/getDocumentSettings.ts b/packages/tailwindcss-language-service/src/util/getDocumentSettings.ts index f728a7a..715069f 100644 --- a/packages/tailwindcss-language-service/src/util/getDocumentSettings.ts +++ b/packages/tailwindcss-language-service/src/util/getDocumentSettings.ts @@ -3,17 +3,23 @@ import type { TextDocument } from 'vscode-languageserver' export async function getDocumentSettings( state: State, - document: TextDocument + document?: TextDocument ): Promise { if (!state.editor.capabilities.configuration) { return Promise.resolve(state.editor.globalSettings) } - let result = state.editor.documentSettings.get(document.uri) + const uri = document ? document.uri : undefined + let result = state.editor.documentSettings.get(uri) if (!result) { - result = await state.emitter.emit('getConfiguration', { - languageId: document.languageId, - }) - state.editor.documentSettings.set(document.uri, result) + result = await state.emitter.emit( + 'getConfiguration', + document + ? { + languageId: document.languageId, + } + : undefined + ) + state.editor.documentSettings.set(uri, result) } return result } diff --git a/packages/tailwindcss-language-service/src/util/state.ts b/packages/tailwindcss-language-service/src/util/state.ts index 1fb493e..242d793 100644 --- a/packages/tailwindcss-language-service/src/util/state.ts +++ b/packages/tailwindcss-language-service/src/util/state.ts @@ -29,6 +29,7 @@ export type EditorState = { type DiagnosticSeveritySetting = 'ignore' | 'warning' | 'error' export type Settings = { + tabSize: number emmetCompletions: boolean includeLanguages: Record validate: boolean diff --git a/packages/tailwindcss-language-service/src/util/stringify.ts b/packages/tailwindcss-language-service/src/util/stringify.ts index c5eb14b..a72fa32 100644 --- a/packages/tailwindcss-language-service/src/util/stringify.ts +++ b/packages/tailwindcss-language-service/src/util/stringify.ts @@ -15,7 +15,11 @@ export function stringifyConfigValue(x: any): string { return null } -export function stringifyCss(className: string, obj: any): string { +export function stringifyCss( + className: string, + obj: any, + tabSize: number = 2 +): string { if (obj.__rule !== true && !Array.isArray(obj)) return null if (Array.isArray(obj)) { @@ -25,19 +29,20 @@ export function stringifyCss(className: string, obj: any): string { } let css = `` + const indent = ' '.repeat(tabSize) const context = dlv(obj, '__context', []) const props = Object.keys(removeMeta(obj)) if (props.length === 0) return null for (let i = 0; i < context.length; i++) { - css += `${'\t'.repeat(i)}${context[i]} {\n` + css += `${indent.repeat(i)}${context[i]} {\n` } - const indentStr = '\t'.repeat(context.length) + const indentStr = indent.repeat(context.length) const decls = props.reduce((acc, curr, i) => { const propStr = ensureArray(obj[curr]) - .map((val) => `${indentStr + '\t'}${curr}: ${val};`) + .map((val) => `${indentStr + indent}${curr}: ${val};`) .join('\n') return `${acc}${i === 0 ? '' : '\n'}${propStr}` }, '') @@ -47,7 +52,7 @@ export function stringifyCss(className: string, obj: any): string { )} {\n${decls}\n${indentStr}}` for (let i = context.length - 1; i >= 0; i--) { - css += `${'\t'.repeat(i)}\n}` + css += `${indent.repeat(i)}\n}` } return css