wip

Author: thecrypticace

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

@@ -48,26 +48,39 @@ export async function loadDesignSystem(
       return tailwindcss.optimizeCss(css)
     },
 
-    compile(classes: string[]): postcss.Root {
-      let css = design.candidatesToCss(classes).join('\n')
+    compile(classes: string[]): postcss.Root[] {
+      let css = design.candidatesToCss(classes) as (string | null)[]
 
       // Downlevel syntax
       // TODO: Either don't downlevel nesting or make `recordClassDetails` more robust
-      // try {
-      //   css = tailwindcss.optimizeCss(css)
-      // } catch {}
+      // css = css.map((str) => {
+      //   if (!str) return null
+      //   try {
+      //     return tailwindcss.optimizeCss(str)
+      //   } catch {}
+      //   return str
+      // })
 
       // Reformat with Prettier
-      try {
-        css = format(css, {
-          parser: 'css',
-          singleQuote: true,
-          trailingComma: 'all',
-          filepath: 'input.css',
-        }).trim()
-      } catch {}
-
-      return postcss.parse(css)
+      let opts = {
+        parser: 'css',
+        singleQuote: true,
+        trailingComma: 'all',
+        filepath: 'input.css',
+      }
+
+      css = css.map((str) => {
+        if (!str) return null
+        try {
+          return format(str, opts).trim()
+        } catch {}
+        return str
+      })
+
+      return css.map((str) => {
+        if (str === null) return postcss.root()
+        return postcss.parse(str)
+      })
     },
 
     toCss(nodes: postcss.Root | postcss.Node[]): string {

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

@@ -1715,7 +1715,7 @@ export async function resolveCompletionItem(
   if (state.v4) {
     if (item.kind === 9) return item
     if (item.detail && item.documentation) return item
-    let root = state.designSystem.compile([[...variants, className].join(state.separator)])
+    let root = state.designSystem.compile([[...variants, className].join(state.separator)])[0]
     let rules = root.nodes.filter((node) => node.type === 'rule')
     if (rules.length === 0) return item
 

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

@@ -248,13 +248,14 @@ export function visit(
   }
 }
 
-
 function recordClassDetails(state: State, classes: DocumentClassName[]): ClassDetails {
   const groups: Record<string, RuleEntry[]> = {}
 
+  let roots = state.designSystem.compile(classes.map((c) => c.className))
+
   // Get all the properties for each class
-  for (let className of classes) {
-    let root = state.designSystem.compile([className.className])
+  for (let [idx, root] of roots.entries()) {
+    let { className } = classes[idx]
 
     visit([root], (node, path) => {
       if (node.type !== 'rule' && node.type !== 'atrule') return
@@ -269,8 +270,8 @@ function recordClassDetails(state: State, classes: DocumentClassName[]): ClassDe
       if (properties.length === 0) return
 
       // We have to slice off the first `context` item because it's the class name and that's always different
-      groups[className.className] ??= []
-      groups[className.className].push({
+      groups[className] ??= []
+      groups[className].push({
         properties,
         context: path
           .map((node) => {

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

@@ -1,5 +1,5 @@
 import { State } from './util/state'
-import type { Hover,  Position } from 'vscode-languageserver'
+import type { Hover, Position } from 'vscode-languageserver'
 import { stringifyCss, stringifyConfigValue } from './util/stringify'
 import dlv from 'dlv'
 import { isCssContext } from './util/css'
@@ -63,7 +63,7 @@ async function provideClassNameHover(
   if (className === null) return null
 
   if (state.v4) {
-    let root = state.designSystem.compile([className.className])
+    let root = state.designSystem.compile([className.className])[0]
 
     if (root.nodes.length === 0) {
       return null

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

@@ -131,33 +131,38 @@ function getColorFromDecls(
   return null
 }
 
-export function getColor(state: State, className: string): culori.Color | KeywordColor | null {
-  if (state.v4) {
-    let css = state.designSystem.compile([className])
-    let decls: Record<string, string[]> = {}
+function getColorFromRoot(state: State, css: postcss.Root): culori.Color | KeywordColor | null {
+  let decls: Record<string, string[]> = {}
 
-    let rule = postcss.rule({
-      selector: '.x',
-      nodes: [],
-    })
+  let rule = postcss.rule({
+    selector: '.x',
+    nodes: [],
+  })
 
-    css.walkDecls((decl) => {
-      rule.append(decl.clone())
-    })
+  css.walkDecls((decl) => {
+    rule.append(decl.clone())
+  })
 
-    // Optimize the CSS if possible
-    try {
-      let str = state.designSystem.toCss(css)
-      str = state.designSystem.optimizeCss(str)
-      css = postcss.parse(str)
-    } catch {}
+  // Optimize the CSS if possible
+  try {
+    let str = state.designSystem.toCss(css)
+    str = state.designSystem.optimizeCss(str)
+    css = postcss.parse(str)
+  } catch {}
 
-    css.walkDecls((decl) => {
-      decls[decl.prop] ??= []
-      decls[decl.prop].push(decl.value)
-    })
+  css.walkDecls((decl) => {
+    decls[decl.prop] ??= []
+    decls[decl.prop].push(decl.value)
+  })
 
-    return getColorFromDecls(decls)
+  return getColorFromDecls(decls)
+}
+
+export function getColor(state: State, className: string): culori.Color | KeywordColor | null {
+  if (state.v4) {
+    let css = state.designSystem.compile([className])[0]
+
+    return getColorFromRoot(state, css)
   }
 
   if (state.jit) {

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

@@ -30,7 +30,7 @@ export interface DesignSystem {
 }
 
 export interface DesignSystem {
-  compile(classes: string[]): postcss.Root
+  compile(classes: string[]): postcss.Root[]
   toCss(nodes: postcss.Root | postcss.Node[]): string
   optimizeCss(css: string): string
 }