respect editor tab size in CSS previews

Author: bradlc

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),
+        }
       })
     })
 

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<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

packages/tailwindcss-intellisense/src/lsp/util/getDocumentSettings.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<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,

packages/tailwindcss-language-service/src/completionProvider.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<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

packages/tailwindcss-language-service/src/hoverProvider.ts

@@ -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
 }

packages/tailwindcss-language-service/src/util/getDocumentSettings.ts

@@ -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

packages/tailwindcss-language-service/src/util/state.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