wip

Author: thecrypticace

packages/tailwindcss-language-server/tests/completions/completions.test.js

@@ -567,7 +567,9 @@ withFixture('v4/basic', (c) => {
 withFixture('v4/basic', (c) => {
   let completion = buildCompletion(c)
 
-  test('Completions have customizable pixel equivalents (1rem == 10px)', async ({ expect }) => {
+  test.only('Completions have customizable pixel equivalents (1rem == 10px)', async ({
+    expect,
+  }) => {
     await c.updateSettings({
       tailwindCSS: {
         rootFontSize: 10,

packages/tailwindcss-language-service/src/util/add-theme-values.test.ts

@@ -0,0 +1,21 @@
+import { expect, test } from 'vitest'
+import { State, TailwindCssSettings } from './state'
+import { DesignSystem } from './v4'
+import { addThemeValues } from './add-theme-values'
+
+test('Inlicing calc expressions using the design system', () => {
+  let map = new Map<string, string>([['--spacing', '0.25rem']])
+
+  let state: State = {
+    enabled: true,
+    designSystem: {
+      resolveThemeValue: (name) => map.get(name) ?? null,
+    } as DesignSystem,
+  }
+
+  let settings: TailwindCssSettings = {
+    rootFontSize: 10,
+  } as any
+
+  expect(addThemeValues('calc(var(--spacing) * 4)', state, settings)).toBe('1rem')
+})

packages/tailwindcss-language-service/src/util/add-theme-values.ts

@@ -1,62 +1,50 @@
 import type { State, TailwindCssSettings } from './state'
 
-import type { Plugin } from 'postcss'
-import { inlineCalc } from './css-calc'
-import { getEquivalentColor } from './colorEquivalents'
+import { evaluateExpression, replaceCssCalc } from './css-calc'
+import { replaceCssVars } from './css-vars'
 import { addPixelEquivalentsToValue } from './pixelEquivalents'
-import { Comment } from './comments'
-
-export function wip(state: State, comments: Comment[], settings: TailwindCssSettings): Plugin {
-  return {
-    postcssPlugin: 'plugin',
-    Declaration(decl) {
-      let value = inlineCalc(state, decl.value)
-      if (value === decl.value) return
-
-      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}`
-        }
-      }
-
-      comments.push({
-        index: decl.source.end.offset,
-        value: result,
-      })
-    },
-  }
-}
 
-export function addThemeValues(state: State, settings: TailwindCssSettings) {
-  // Add fallbacks to variables with their theme values
+export function addThemeValues(css: string, state: State, settings: TailwindCssSettings) {
+  // TODO: 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 = replaceCssCalc(css, (expr) => {
+    let inlined = replaceCssVars(expr, (name) => {
+      if (!name.startsWith('--')) return null
+
+      let value = state.designSystem.resolveThemeValue?.(name) ?? null
+      if (value !== null) return value
+
+      return null
+    })
+
+    let evaluated = evaluateExpression(inlined)
+
+    // No changes were made so we can just return the original expression
+    if (expr === evaluated) return expr
+
+    let equiv = addPixelEquivalentsToValue(evaluated, settings.rootFontSize, false)
+    if (equiv !== evaluated) {
+      return `calc(${expr}) /* ${evaluated} = ${equiv} */`
+    }
+
+    return `calc(${expr}) /* ${evaluated} */`
+  })
+
   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} */`
-      }
+    let equiv = addPixelEquivalentsToValue(value, settings.rootFontSize, false)
+    if (equiv !== value) {
+      return `var(${name}) /* ${value} = ${equiv} */`
     }
 
-    return `var(${name})${comment}`
+    return `var(${name}) /* ${value} */`
   })
 
   return css

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

@@ -23,4 +23,7 @@ test('Inlicing calc expressions using the design system', () => {
 
   expect(inlineCalc(state, 'calc(var(--spacing) * 4)')).toBe('1rem')
   expect(inlineCalc(state, 'calc(var(--spacing) / 4)')).toBe('0.0625rem')
+  expect(inlineCalc(state, 'calc(var(--spacing) * 1)')).toBe('0.25rem')
+  expect(inlineCalc(state, 'calc(var(--spacing) * -1)')).toBe('-0.25rem')
+  expect(inlineCalc(state, 'calc(1.25 / 0.875)')).toBe('1.4286')
 })

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

@@ -70,11 +70,16 @@ function parseLength(length: string): [number, string] | null {
   return [numberPart, match[2]]
 }
 
+function round(n: number, precision: number): number {
+  return Math.round(n * Math.pow(10, precision)) / Math.pow(10, precision)
+}
+
 export function evaluateExpression(str: string): string | null {
   // We're only interested simple calc expressions of the form
   // A + B, A - B, A * B, A / B
 
-  let parts = str.split(/\s*([+*/-])\s*/)
+  let parts = str.split(/\s+([+*/-])\s+/)
+
   if (parts.length === 1) return null
   if (parts.length !== 3) return null
 
@@ -98,13 +103,13 @@ export function evaluateExpression(str: string): string | null {
 
   switch (parts[1]) {
     case '+':
-      return (a[0] + b[0]).toString() + a[1]
+      return round(a[0] + b[0], 4).toString() + a[1]
     case '*':
-      return (a[0] * b[0]).toString() + a[1]
+      return round(a[0] * b[0], 4).toString() + a[1]
     case '-':
-      return (a[0] - b[0]).toString() + a[1]
+      return round(a[0] - b[0], 4).toString() + a[1]
     case '/':
-      return (a[0] / b[0]).toString() + a[1]
+      return round(a[0] / b[0], 4).toString() + a[1]
   }
 
   return null

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

@@ -0,0 +1,31 @@
+/**
+ * Any item in the CSS string which may be analyzed and optionally replaced
+ */
+export type CssNode = CalcExpression | CssVariable
+
+/**
+ * A calc(…) expression in a CSS value
+ */
+export interface CalcExpression {
+  kind: 'calc-expression'
+  offset: OffsetRange
+  parts: string[]
+}
+
+/**
+ * A var(…) expression which may have an optional fallback value
+ */
+export interface CssVariable {
+  kind: 'css-variable'
+  offset: OffsetRange
+  name: string
+  fallback: string | null
+}
+
+export interface OffsetRange {
+  /** The zero-based offset where this node starts */
+  start: number
+
+  /** The zero-based offset where this node ends */
+  end: number
+}

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

@@ -2,10 +2,11 @@ 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 } from './css-vars'
+import { replaceCssVars, replaceCssVarsWithFallbacks } from './css-vars'
 import { addColorEquivalentToValue, getEquivalentColor } from './colorEquivalents'
-import { inlineCalc, replaceCssCalc } from './css-calc'
+import { evaluateExpression, inlineCalc, replaceCssCalc } from './css-calc'
 import { applyComments, Comment } from './comments'
+import { addThemeValues } from './add-theme-values'
 
 export function bigSign(bigIntValue) {
   // @ts-ignore
@@ -38,49 +39,6 @@ export function generateRules(
   }
 }
 
-export function addThemeValues(root: Root, state: State, settings: TailwindCssSettings) {
-  if (!state.designSystem) return root
-
-  let comments: Comment[] = []
-
-  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
-}
-
 export async function stringifyRoot(state: State, root: Root, uri?: string): Promise<string> {
   let settings = await state.editor.getConfiguration(uri)
   let clone = root.clone()
@@ -89,10 +47,9 @@ export async function stringifyRoot(state: State, root: Root, uri?: string): Pro
     node.remove()
   })
 
-  addThemeValues(clone, state, settings.tailwindCSS)
-
   let css = clone.toString()
 
+  css = addThemeValues(css, state, settings.tailwindCSS)
   css = addEquivalents(css, settings.tailwindCSS)
 
   let identSize = state.v4 ? 2 : 4