Refactor

Author: thecrypticace

packages/tailwindcss-language-server/src/language/cssServer.ts

@@ -336,11 +336,7 @@ function replace(delta = 0) {
 }
 
 function createVirtualCssDocument(textDocument: TextDocument): TextDocument {
-  return TextDocument.create(
-    textDocument.uri,
-    textDocument.languageId,
-    textDocument.version,
-    textDocument
+  let content = textDocument
       .getText()
       .replace(/@screen(\s+[^{]+){/g, replace(-2))
       .replace(/@variants(\s+[^{]+){/g, replace())
@@ -350,7 +346,13 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument {
         /@media(\s+screen\s*\([^)]+\))/g,
         (_match, screen) => `@media (${MEDIA_MARKER})${' '.repeat(screen.length - 4)}`,
       )
-      .replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_'),
+      .replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_')
+
+  return TextDocument.create(
+    textDocument.uri,
+    textDocument.languageId,
+    textDocument.version,
+    content,
   )
 }
 

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

@@ -39,6 +39,7 @@ import {
 import { customClassesIn } from './util/classes'
 import { IS_SCRIPT_SOURCE, IS_TEMPLATE_SOURCE } from './metadata/extensions'
 import * as postcss from 'postcss'
+import { findFileDirective } from './completions/file-paths'
 
 let isUtil = (className) =>
   Array.isArray(className.__info)
@@ -1613,27 +1614,28 @@ async function provideFileDirectiveCompletions(
     return null
   }
 
-  let pattern = state.v4
-    ? /@(?<directive>config|plugin|source)\s*(?<partial>'[^']*|"[^"]*)$/
-    : /@(?<directive>config)\s*(?<partial>'[^']*|"[^"]*)$/
-
   let text = document.getText({ start: { line: position.line, character: 0 }, end: position })
-  let match = text.match(pattern)
-  if (!match) {
-    return null
+
+  let fd = await findFileDirective(state, text)
+  if (!fd) return null
+
+  let { partial, suggest } = fd
+
+  function isAllowedFile(name: string) {
+    if (suggest === 'script') return IS_SCRIPT_SOURCE.test(name)
+
+    if (suggest === 'source') return IS_TEMPLATE_SOURCE.test(name)
+
+    return false
   }
-  let directive = match.groups.directive
-  let partial = match.groups.partial.slice(1) // remove quote
+
   let valueBeforeLastSlash = partial.substring(0, partial.lastIndexOf('/'))
   let valueAfterLastSlash = partial.substring(partial.lastIndexOf('/') + 1)
 
   let entries = await state.editor.readDirectory(document, valueBeforeLastSlash || '.')
 
-  let isAllowedFile = directive === 'source' ? IS_TEMPLATE_SOURCE : IS_SCRIPT_SOURCE
-
-  // Only show directories and JavaScript/TypeScript files
   entries = entries.filter(([name, type]) => {
-    return type.isDirectory || isAllowedFile.test(name)
+    return type.isDirectory || isAllowedFile(name)
   })
 
   return withDefaults(

packages/tailwindcss-language-service/src/completions/file-paths.ts

@@ -0,0 +1,40 @@
+import type { State } from '../util/state'
+
+// @config, @plugin, @source
+const PATTERN_CUSTOM_V4 = /@(?<directive>config|plugin|source)\s*(?<partial>'[^']*|"[^"]*)$/
+const PATTERN_CUSTOM_V3 = /@(?<directive>config)\s*(?<partial>'[^']*|"[^"]*)$/
+
+export type FileDirective = {
+  directive: string
+  partial: string
+  suggest: 'script' | 'source'
+}
+
+export async function findFileDirective(state: State, text: string): Promise<FileDirective | null> {
+  if (state.v4) {
+    let match = text.match(PATTERN_CUSTOM_V4)
+
+    if (!match) return null
+
+    let directive = match.groups.directive
+    let partial = match.groups.partial.slice(1) // remove leading quote
+
+    // Most suggestions are for JS files so we'll default to that
+    let suggest: FileDirective['suggest'] = 'script'
+
+    // If we're looking at @source then it's for a template file
+    if (directive === 'source') {
+      suggest = 'source'
+    }
+
+    return { directive, partial, suggest }
+  }
+
+  let match = text.match(PATTERN_CUSTOM_V3)
+  if (!match) return null
+
+  let directive = match.groups.directive
+  let partial = match.groups.partial.slice(1) // remove leading quote
+
+  return { directive, partial, suggest: 'script' }
+}

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

@@ -37,51 +37,23 @@ export function getInvalidTailwindDirectiveDiagnostics(
     regex = /(?:\s|^)@tailwind\s+(?<value>[^;]+)/g
   }
 
-  let hasVariantsDirective = state.jit && semver.gte(state.version, '2.1.99')
-
   ranges.forEach((range) => {
     let text = getTextWithoutComments(document, 'css', range)
     let matches = findAll(regex, text)
 
-    let valid = [
-      'utilities',
-      'components',
-      'screens',
-      semver.gte(state.version, '1.0.0-beta.1') ? 'base' : 'preflight',
-      hasVariantsDirective && 'variants',
-    ].filter(Boolean)
+    matches.forEach((match) => {
+      let layerName = match.groups.value
 
-    let suggestable = valid
+      let result = validateLayerName(state, layerName)
+      if (!result) return
 
-    if (hasVariantsDirective) {
-      // Don't suggest `screens`, because it's deprecated
-      suggestable = suggestable.filter((value) => value !== 'screens')
-    }
-
-    matches.forEach((match) => {
-      if (valid.includes(match.groups.value)) {
-        return null
-      }
-
-      let message = `'${match.groups.value}' is not a valid value.`
-      let suggestions: string[] = []
-
-      if (match.groups.value === 'preflight') {
-        suggestions.push('base')
-        message += ` Did you mean 'base'?`
-      } else {
-        let suggestion = closest(match.groups.value, suggestable)
-        if (suggestion) {
-          suggestions.push(suggestion)
-          message += ` Did you mean '${suggestion}'?`
-        }
-      }
+      let { message, suggestions } = result
 
       diagnostics.push({
         code: DiagnosticKind.InvalidTailwindDirective,
         range: absoluteRange(
           {
-            start: indexToPosition(text, match.index + match[0].length - match.groups.value.length),
+            start: indexToPosition(text, match.index + match[0].length - layerName.length),
             end: indexToPosition(text, match.index + match[0].length),
           },
           range,
@@ -98,3 +70,52 @@ export function getInvalidTailwindDirectiveDiagnostics(
 
   return diagnostics
 }
+
+function validateLayerName(
+  state: State,
+  layerName: string,
+): { message: string; suggestions: string[] } | null {
+  let valid = ['utilities', 'components', 'screens']
+
+  if (semver.gte(state.version, '1.0.0-beta.1')) {
+    valid.push('base')
+  } else {
+    valid.push('preflight')
+  }
+
+  let hasVariantsDirective = state.jit && semver.gte(state.version, '2.1.99')
+
+  if (hasVariantsDirective) {
+    valid.push('variants')
+  }
+
+  if (valid.includes(layerName)) {
+    return null
+  }
+
+  let suggestable = valid
+
+  if (hasVariantsDirective) {
+    // Don't suggest `screens`, because it's deprecated
+    suggestable = suggestable.filter((value) => value !== 'screens')
+  }
+
+  let message = `'${layerName}' is not a valid value.`
+  let suggestions: string[] = []
+
+  if (layerName === 'preflight') {
+    suggestions.push('base')
+    message += ` Did you mean 'base'?`
+  } else {
+    let suggestion = closest(layerName, suggestable)
+    if (suggestion) {
+      suggestions.push(suggestion)
+      message += ` Did you mean '${suggestion}'?`
+    }
+  }
+
+  return {
+    message,
+    suggestions,
+  }
+}

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

@@ -1,4 +1,16 @@
 export function replaceCssVarsWithFallbacks(str: string): string {
+  return replaceCssVars(str, (name, fallback) => {
+    // If we have a fallback then we should use that value directly
+    if (fallback) return fallback
+
+    // Don't replace the variable otherwise
+    return null
+  })
+}
+
+type CssVarReplacer = (name: string, fallback: string | null) => string | null
+
+function replaceCssVars(str: string, replace: CssVarReplacer): string {
   for (let i = 0; i < str.length; ++i) {
     if (!str.startsWith('var(', i)) continue
 
@@ -13,17 +25,25 @@ export function replaceCssVarsWithFallbacks(str: string): string {
       } else if (str[j] === ',' && depth === 0 && fallbackStart === null) {
         fallbackStart = j + 1
       } else if (str[j] === ')' && depth === 0) {
-        if (fallbackStart === null) {
-          i = j + 1
+        let varName = str.slice(i + 4, j)
+        let fallback = fallbackStart === null ? null : str.slice(fallbackStart, j)
+        let replacement = replace(varName, fallback)
+
+        if (replacement !== null) {
+          str = str.slice(0, i) + replacement + str.slice(j + 1)
+
+          // We don't want to skip past anything here because `replacement`
+          // might contain more var(…) calls in which case `i` will already
+          // be pointing at the right spot to start looking for them
           break
         }
 
-        let fallbackEnd = j
-        str = str.slice(0, i) + str.slice(fallbackStart, fallbackEnd) + str.slice(j + 1)
+        // Skip past the closing parenthesis and onto the next `var(`
+        i = j + 1
         break
       }
     }
   }
 
   return str
-}
+}

packages/tailwindcss-language-service/src/util/v4/design-system.ts

@@ -3,7 +3,7 @@ import type { Rule } from './ast'
 import type { NamedVariant } from './candidate'
 
 export interface Theme {
-  // Prefix didn't exist on
+  // Prefix didn't exist for earlier Tailwind versions
   prefix?: string
   entries(): [string, any][]
 }