wip

Author: thecrypticace

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

@@ -8,7 +8,7 @@ import * as jit from './jit'
 import * as culori from 'culori'
 import namedColors from 'color-name'
 import postcss from 'postcss'
-import { replaceCssVarsWithFallbacks } from './css-vars'
+import { replaceCssVarsWithFallbacks } from './rewriting'
 
 const COLOR_PROPS = [
   'accent-color',
@@ -100,9 +100,11 @@ function getColorFromDecls(
 
   const propsToCheck = areAllCustom ? props : nonCustomProps
 
-  const colors = propsToCheck.flatMap((prop) => ensureArray(decls[prop]).flatMap((str) => {
-    return getColorsInString(state, str)
-  }))
+  const colors = propsToCheck.flatMap((prop) =>
+    ensureArray(decls[prop]).flatMap((str) => {
+      return getColorsInString(state, str)
+    }),
+  )
 
   // check that all of the values are valid colors
   // if (colors.some((color) => color instanceof TinyColor && !color.isValid)) {

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

@@ -28,60 +28,3 @@ export function addEquivalents(css: string, settings: TailwindCssSettings): stri
 
   return applyComments(css, comments)
 }
-
-import type { Plugin } from 'postcss'
-import { inlineCalc } from './css-calc'
-
-export function wip(state: State, comments: Comment[], settings: TailwindCssSettings): Plugin {
-  return {
-    postcssPlugin: 'plugin',
-    Declaration(decl) {
-      let result = inlineCalc(state, decl.value)
-      if (result === decl.value) return
-
-      comments.push({
-        index: decl.source.end.offset,
-        value: result,
-      })
-    },
-  }
-}
-
-export function addThemeValues(state: State, settings: TailwindCssSettings) {
-  root.walkDecls((decl) => {
-    let result = inlineCalc(state, decl.value)
-    if (result === decl.value) return
-
-    comments.push({
-      index: decl.source.end.offset,
-      value: result,
-    })
-  })
-
-  // Add fallbacks to variables with their theme values
-  // Ideally these would just be commentss like
-  // `var(--foo) /* 3rem = 48px */` or
-  // `calc(var(--spacing) * 5) /* 1.25rem = 20px */`
-  css = replaceCssVars(css, (name) => {
-    if (!name.startsWith('--')) return null
-
-    let value = state.designSystem.resolveThemeValue?.(name) ?? null
-    if (value === null) return null
-
-    let comment = ''
-
-    let color = getEquivalentColor(value)
-    if (color !== value) {
-      comment = ` /* ${value} = ${color} */`
-    } else {
-      let pixels = addPixelEquivalentsToValue(value, settings.rootFontSize, false)
-      if (pixels !== value) {
-        comment = ` /* ${value} = ${pixels} */`
-      }
-    }
-
-    return `var(${name})${comment}`
-  })
-
-  return css
-}

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

@@ -2,11 +2,7 @@ import type { State, TailwindCssSettings } from './state'
 import type { Container, Document, Root, Rule, Node, AtRule } from 'postcss'
 import { addPixelEquivalentsToValue } from './pixelEquivalents'
 import { addEquivalents } from './equivalents'
-import { replaceCssVars, replaceCssVarsWithFallbacks } from './css-vars'
-import { addColorEquivalentToValue, getEquivalentColor } from './colorEquivalents'
-import { evaluateExpression, inlineCalc, replaceCssCalc } from './css-calc'
-import { applyComments, Comment } from './comments'
-import { addThemeValues } from './add-theme-values'
+import { addThemeValues } from './rewriting'
 
 export function bigSign(bigIntValue) {
   // @ts-ignore

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

@@ -1,6 +1,6 @@
 import { expect, test } from 'vitest'
-import { State, TailwindCssSettings } from './state'
-import { DesignSystem } from './v4'
+import { State, TailwindCssSettings } from '../state'
+import { DesignSystem } from '../v4'
 import { addThemeValues } from './add-theme-values'
 
 test('Inlicing calc expressions using the design system', () => {

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

@@ -1,8 +1,8 @@
-import type { State, TailwindCssSettings } from './state'
+import type { State, TailwindCssSettings } from '../state'
 
-import { evaluateExpression, replaceCssCalc } from './css-calc'
-import { replaceCssVars } from './css-vars'
-import { addPixelEquivalentsToValue } from './pixelEquivalents'
+import { evaluateExpression } from './calc'
+import { replaceCssVars, replaceCssCalc } from './replacements'
+import { addPixelEquivalentsToValue } from '../pixelEquivalents'
 
 export function addThemeValues(css: string, state: State, settings: TailwindCssSettings) {
   // TODO: Add fallbacks to variables with their theme values
@@ -11,7 +11,7 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS
   // `calc(var(--spacing) * 5) /* 1.25rem = 20px */`
 
   css = replaceCssCalc(css, (expr) => {
-    let inlined = replaceCssVars(expr, (name) => {
+    let inlined = replaceCssVars(expr.value, ({ name }) => {
       if (!name.startsWith('--')) return null
 
       let value = state.designSystem.resolveThemeValue?.(name) ?? null
@@ -23,7 +23,7 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS
     let evaluated = evaluateExpression(inlined)
 
     // No changes were made so we can just return the original expression
-    if (expr === evaluated) return expr
+    if (expr.value === evaluated) return expr.value
 
     let equiv = addPixelEquivalentsToValue(evaluated, settings.rootFontSize, false)
     if (equiv !== evaluated) {
@@ -33,7 +33,7 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS
     return `calc(${expr}) /* ${evaluated} */`
   })
 
-  css = replaceCssVars(css, (name) => {
+  css = replaceCssVars(css, ({ name }) => {
     if (!name.startsWith('--')) return null
 
     let value = state.designSystem.resolveThemeValue?.(name) ?? null