respect editor tab size in CSS previews
parent
fa875e1d50
commit
e0f8d73a79
|
@ -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),
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
@ -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<string, Settings> = 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<CompletionItem> => {
|
||||
if (!state.enabled) return null
|
||||
return resolveCompletionItem(state, item)
|
||||
}
|
||||
)
|
||||
|
||||
connection.onHover(
|
||||
(params: TextDocumentPositionParams): Hover => {
|
||||
(params: TextDocumentPositionParams): Promise<Hover> => {
|
||||
if (!state.enabled) return null
|
||||
let document = state.editor.documents.get(params.textDocument.uri)
|
||||
if (!document) return null
|
||||
|
|
|
@ -1,19 +0,0 @@
|
|||
import { State, Settings } from './state'
|
||||
import { TextDocument } from 'vscode-languageserver'
|
||||
|
||||
export async function getDocumentSettings(
|
||||
state: State,
|
||||
document: TextDocument
|
||||
): Promise<Settings> {
|
||||
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
|
||||
}
|
|
@ -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<CompletionItem> {
|
||||
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,
|
||||
|
|
|
@ -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<Hover> {
|
||||
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<Hover> {
|
||||
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
|
||||
|
|
|
@ -3,17 +3,23 @@ import type { TextDocument } from 'vscode-languageserver'
|
|||
|
||||
export async function getDocumentSettings(
|
||||
state: State,
|
||||
document: TextDocument
|
||||
document?: TextDocument
|
||||
): Promise<Settings> {
|
||||
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
|
||||
}
|
||||
|
|
|
@ -29,6 +29,7 @@ export type EditorState = {
|
|||
type DiagnosticSeveritySetting = 'ignore' | 'warning' | 'error'
|
||||
|
||||
export type Settings = {
|
||||
tabSize: number
|
||||
emmetCompletions: boolean
|
||||
includeLanguages: Record<string, string>
|
||||
validate: boolean
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue