Enable isolated declarations for @tailwindcss/language-service (#1348)

Just some code cleanup (also a bugfix revealed by doing this)

Author: thecrypticace

packages/tailwindcss-language-server/src/testing/index.ts

@@ -3,7 +3,7 @@ import * as os from 'node:os'
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import * as proc from 'node:child_process'
-import dedent from 'dedent'
+import dedent, { type Dedent } from 'dedent'
 
 export interface TestUtils<TestInput extends Record<string, any>> {
   /** The "cwd" for this test */
@@ -160,8 +160,8 @@ async function installDependenciesIn(dir: string) {
   })
 }
 
-export const css = dedent
-export const scss = dedent
-export const html = dedent
-export const js = dedent
-export const json = dedent
+export const css: Dedent = dedent
+export const scss: Dedent = dedent
+export const html: Dedent = dedent
+export const js: Dedent = dedent
+export const json: Dedent = dedent

packages/tailwindcss-language-service/src/codeActions/provideInvalidApplyCodeActions.ts

@@ -212,7 +212,7 @@ function classNameToAst(
     obj = rule
   }
 
-  return cssObjToAst(obj, state.modules.postcss)
+  return cssObjToAst(obj, state.modules.postcss.module)
 }
 
 function appendPseudosToSelector(selector: string, pseudos: string[]): string | null {

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

@@ -2230,7 +2230,7 @@ export async function doComplete(
   document: TextDocument,
   position: Position,
   context?: CompletionContext,
-) {
+): Promise<CompletionList | null> {
   if (state === null) return { items: [], isIncomplete: false }
 
   const result =

packages/tailwindcss-language-service/src/diagnostics/getCssConflictDiagnostics.ts

@@ -239,7 +239,7 @@ export function visit(
   nodes: postcss.AnyNode[],
   cb: (node: postcss.AnyNode, path: postcss.AnyNode[]) => void,
   path: postcss.AnyNode[] = [],
-) {
+): void {
   for (let child of nodes) {
     path = [...path, child]
     cb(child, path)

packages/tailwindcss-language-service/src/metadata/extensions.ts

@@ -72,5 +72,5 @@ let templateExtensions = [
   'rs',
 ]
 
-export const IS_SCRIPT_SOURCE = new RegExp(`\\.(${scriptExtensions.join('|')})$`)
-export const IS_TEMPLATE_SOURCE = new RegExp(`\\.(${templateExtensions.join('|')})$`)
+export const IS_SCRIPT_SOURCE: RegExp = new RegExp(`\\.(${scriptExtensions.join('|')})$`)
+export const IS_TEMPLATE_SOURCE: RegExp = new RegExp(`\\.(${templateExtensions.join('|')})$`)

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

@@ -1,6 +1,6 @@
 import type { Range } from 'vscode-languageserver'
 
-export function absoluteRange(range: Range, reference?: Range) {
+export function absoluteRange(range: Range, reference?: Range): Range {
   return {
     start: {
       line: (reference?.start.line || 0) + range.start.line,

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

@@ -1,4 +1,4 @@
-export function braceLevel(text: string) {
+export function braceLevel(text: string): number {
   let count = 0
 
   for (let i = text.length - 1; i >= 0; i--) {
@@ -10,7 +10,7 @@ export function braceLevel(text: string) {
   return count
 }
 
-export function parenLevel(text: string) {
+export function parenLevel(text: string): number {
   let count = 0
 
   for (let i = text.length - 1; i >= 0; i--) {

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

@@ -1,4 +1,4 @@
-import type { Plugin } from 'postcss'
+import type { Plugin, PluginCreator } from 'postcss'
 import parseValue from 'postcss-value-parser'
 import { inGamut } from 'culori'
 import { formatColor, getColorFromValue } from './color'
@@ -16,51 +16,55 @@ export function getEquivalentColor(value: string): string {
   return formatColor(color)
 }
 
-export function equivalentColorValues({ comments }: { comments: Comment[] }): Plugin {
-  return {
-    postcssPlugin: 'plugin',
-    Declaration(decl) {
-      if (!allowedFunctions.some((fn) => decl.value.includes(fn))) {
-        return
-      }
-
-      parseValue(decl.value).walk((node) => {
-        if (node.type !== 'function') {
-          return true
+export const equivalentColorValues: PluginCreator<any> = Object.assign(
+  ({ comments }: { comments: Comment[] }): Plugin => {
+    return {
+      postcssPlugin: 'plugin',
+      Declaration(decl) {
+        if (!allowedFunctions.some((fn) => decl.value.includes(fn))) {
+          return
         }
 
-        if (node.value === 'var') {
-          return true
-        }
+        parseValue(decl.value).walk((node) => {
+          if (node.type !== 'function') {
+            return true
+          }
 
-        if (!allowedFunctions.includes(node.value)) {
-          return false
-        }
+          if (node.value === 'var') {
+            return true
+          }
 
-        const values = node.nodes.filter((n) => n.type === 'word').map((n) => n.value)
-        if (values.length < 3) {
-          return false
-        }
+          if (!allowedFunctions.includes(node.value)) {
+            return false
+          }
 
-        let color = `${node.value}(${values.join(' ')})`
+          const values = node.nodes.filter((n) => n.type === 'word').map((n) => n.value)
+          if (values.length < 3) {
+            return false
+          }
 
-        let equivalent = getEquivalentColor(color)
+          let color = `${node.value}(${values.join(' ')})`
 
-        if (equivalent === color) {
-          return false
-        }
+          let equivalent = getEquivalentColor(color)
 
-        comments.push({
-          index:
-            decl.source.start.offset +
-            `${decl.prop}${decl.raws.between}`.length +
-            node.sourceEndIndex,
-          value: equivalent,
-        })
+          if (equivalent === color) {
+            return false
+          }
 
-        return false
-      })
-    },
-  }
-}
-equivalentColorValues.postcss = true
+          comments.push({
+            index:
+              decl.source.start.offset +
+              `${decl.prop}${decl.raws.between}`.length +
+              node.sourceEndIndex,
+            value: equivalent,
+          })
+
+          return false
+        })
+      },
+    }
+  },
+  {
+    postcss: true as const,
+  },
+)

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

@@ -6,15 +6,15 @@ import type { State } from './state'
 import { cssLanguages } from './languages'
 import { getLanguageBoundaries } from './getLanguageBoundaries'
 
-function getCssLanguages(state: State) {
+function getCssLanguages(state: State): string[] {
   const userCssLanguages = Object.keys(state.editor.userLanguages).filter((lang) =>
     cssLanguages.includes(state.editor.userLanguages[lang]),
   )
 
   return [...cssLanguages, ...userCssLanguages]
 }
 
-export function isCssLanguage(state: State, lang: string) {
+export function isCssLanguage(state: State, lang: string): boolean {
   return getCssLanguages(state).indexOf(lang) !== -1
 }
 

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

@@ -120,7 +120,9 @@ function parse(obj, parent, postcss) {
   }
 }
 
-export function cssObjToAst(obj, postcss) {
+import type { Postcss, Root } from 'postcss'
+
+export function cssObjToAst(obj: any, postcss: Postcss): Root {
   var root = postcss.root()
   parse(obj, root, postcss)
   return root