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

packages/tailwindcss-language-service/src/util/estimated-class-size.ts

@@ -6,7 +6,7 @@ import { segment } from './segment'
  * This is meant to be a lower bound, as the actual size of a class can vary
  * depending on the actual CSS properties and values, configured theme, etc…
  */
-export function estimatedClassSize(className: string) {
+export function estimatedClassSize(className: string): number {
   let size = 0
 
   // We estimate the size using the following structure which gives a reasonable

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

@@ -1,7 +1,7 @@
 import type { State } from './state'
 import dlv from 'dlv'
 
-export function flagEnabled(state: State, flag: string) {
+export function flagEnabled(state: State, flag: string): boolean {
   if (state.featureFlags.future.includes(flag)) {
     return state.config.future === 'all' || dlv(state.config, ['future', flag], false)
   }

packages/tailwindcss-language-service/src/util/format-bytes.ts

@@ -1,6 +1,6 @@
 const UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte']
 
-export function formatBytes(n: number) {
+export function formatBytes(n: number): string {
   let i = n == 0 ? 0 : Math.floor(Math.log(n) / Math.log(1000))
   return new Intl.NumberFormat('en', {
     notation: 'compact',

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

@@ -139,7 +139,7 @@ let vueLexer = moo.states(vueStates)
 
 let cache = new Cache<string, LanguageBoundary[] | null>({ max: 25, maxAge: 1000 })
 
-export function clearLanguageBoundariesCache() {
+export function clearLanguageBoundariesCache(): void {
   cache.clear()
 }
 

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

@@ -4,7 +4,7 @@ import { addPixelEquivalentsToValue } from './pixelEquivalents'
 import { addEquivalents } from './equivalents'
 import { addThemeValues, inlineThemeValues } from './rewriting'
 
-export function bigSign(bigIntValue) {
+export function bigSign(bigIntValue: number | bigint): number {
   // @ts-ignore
   return (bigIntValue > 0n) - (bigIntValue < 0n)
 }

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

@@ -1,5 +1,5 @@
 import type { State } from '../util/state'
-import { type Range } from 'vscode-languageserver'
+import type { Range } from 'vscode-languageserver'
 import type { TextDocument } from 'vscode-languageserver-textdocument'
 import { getLanguageBoundaries } from '../util/getLanguageBoundaries'
 import { isCssDoc } from '../util/css'

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

@@ -1,6 +1,6 @@
 import type { EditorState } from './state'
 
-export const htmlLanguages = [
+export const htmlLanguages: string[] = [
   'aspnetcorerazor',
   'astro',
   'astro-markdown',
@@ -36,7 +36,7 @@ export const htmlLanguages = [
   'twig',
 ]
 
-export const cssLanguages = [
+export const cssLanguages: string[] = [
   'css',
   'less',
   'postcss',
@@ -47,7 +47,7 @@ export const cssLanguages = [
   'tailwindcss',
 ]
 
-export const jsLanguages = [
+export const jsLanguages: string[] = [
   'javascript',
   'javascriptreact',
   'reason',
@@ -58,16 +58,21 @@ export const jsLanguages = [
   'glimmer-ts',
 ]
 
-export const specialLanguages = ['vue', 'svelte']
+export const specialLanguages: string[] = ['vue', 'svelte']
 
-export const languages = [...cssLanguages, ...htmlLanguages, ...jsLanguages, ...specialLanguages]
+export const languages: string[] = [
+  ...cssLanguages,
+  ...htmlLanguages,
+  ...jsLanguages,
+  ...specialLanguages,
+]
 
 const semicolonlessLanguages = ['sass', 'sugarss', 'stylus']
 
 export function isSemicolonlessCssLanguage(
   languageId: string,
   userLanguages: EditorState['userLanguages'] = {},
-) {
+): boolean {
   return (
     semicolonlessLanguages.includes(languageId) ||
     semicolonlessLanguages.includes(userLanguages[languageId])

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

@@ -1,5 +1,5 @@
 import moo from 'moo'
-import { lazy } from './lazy'
+import { Lazy, lazy } from './lazy'
 
 const classAttributeStates: () => { [x: string]: moo.Rules } = () => ({
   doubleClassList: {
@@ -66,7 +66,7 @@ const simpleClassAttributeStates: { [x: string]: moo.Rules } = {
   },
 }
 
-export const getClassAttributeLexer = lazy(() => {
+export const getClassAttributeLexer: Lazy<moo.Lexer> = lazy(() => {
   let supportsNegativeLookbehind = true
   try {
     new RegExp('(?<!)')
@@ -90,7 +90,7 @@ export const getClassAttributeLexer = lazy(() => {
   return moo.states(simpleClassAttributeStates)
 })
 
-export const getComputedClassAttributeLexer = lazy(() => {
+export const getComputedClassAttributeLexer: Lazy<moo.Lexer> = lazy(() => {
   let supportsNegativeLookbehind = true
   try {
     new RegExp('(?<!)')