Refactor

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',

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

@@ -6,6 +6,16 @@ import type { Comment } from './comments'
 
 let allowedFunctions = ['rgb', 'rgba', 'hsl', 'hsla', 'lch', 'lab', 'oklch', 'oklab']
 
+export function getEquivalentColor(value: string): string {
+  const color = getColorFromValue(value)
+
+  if (!color) return value
+  if (typeof color === 'string') return value
+  if (!inGamut('rgb')(color)) return value
+
+  return formatColor(color)
+}
+
 export function equivalentColorValues({ comments }: { comments: Comment[] }): Plugin {
   return {
     postcssPlugin: 'plugin',
@@ -28,12 +38,11 @@ export function equivalentColorValues({ comments }: { comments: Comment[] }): Pl
           return false
         }
 
-        const color = getColorFromValue(`${node.value}(${values.join(' ')})`)
-        if (!inGamut('rgb')(color)) {
-          return false
-        }
+        let color = `${node.value}(${values.join(' ')})`
+
+        let equivalent = getEquivalentColor(color)
 
-        if (!color || typeof color === 'string') {
+        if (equivalent === color) {
           return false
         }
 
@@ -42,7 +51,7 @@ export function equivalentColorValues({ comments }: { comments: Comment[] }): Pl
             decl.source.start.offset +
             `${decl.prop}${decl.raws.between}`.length +
             node.sourceEndIndex,
-          value: formatColor(color),
+          value: equivalent,
         })
 
         return false

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

@@ -1,14 +1,14 @@
+import { spliceChangesIntoString } from './splice-changes-into-string'
+
 export type Comment = { index: number; value: string }
 
 export function applyComments(str: string, comments: Comment[]): string {
-  let offset = 0
-
-  for (let comment of comments) {
-    let index = comment.index + offset
-    let commentStr = ` /* ${comment.value} */`
-    str = str.slice(0, index) + commentStr + str.slice(index)
-    offset += commentStr.length
-  }
-
-  return str
+  return spliceChangesIntoString(
+    str,
+    comments.map((c) => ({
+      start: c.index,
+      end: c.index,
+      replacement: ` /* ${c.value} */`,
+    })),
+  )
 }

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

@@ -5,7 +5,11 @@ import { isTokenNode } from '@csstools/css-parser-algorithms'
 import type { Comment } from './comments'
 import { applyComments } from './comments'
 
-export function addPixelEquivalentsToValue(value: string, rootFontSize: number): string {
+export function addPixelEquivalentsToValue(
+  value: string,
+  rootFontSize: number,
+  inComment = true,
+): string {
   if (!value.includes('rem')) {
     return value
   }
@@ -20,8 +24,15 @@ export function addPixelEquivalentsToValue(value: string, rootFontSize: number):
       return false
     }
 
-    let commentStr = ` /* ${parseFloat(unit.number) * rootFontSize}px */`
-    value = value.slice(0, node.sourceEndIndex) + commentStr + value.slice(node.sourceEndIndex)
+    if (inComment) {
+      let commentStr = ` /* ${parseFloat(unit.number) * rootFontSize}px */`
+      value = value.slice(0, node.sourceEndIndex) + commentStr + value.slice(node.sourceEndIndex)
+
+      return false
+    }
+
+    let commentStr = `${parseFloat(unit.number) * rootFontSize}px`
+    value = value.slice(0, node.sourceIndex) + commentStr + value.slice(node.sourceEndIndex)
 
     return false
   })

packages/tailwindcss-language-service/src/util/css-vars.test.ts renamed to packages/tailwindcss-language-service/src/util/rewriting/index.test.ts

@@ -1,12 +1,10 @@
 import { expect, test } from 'vitest'
-import { replaceCssVarsWithFallbacks } from './css-vars'
-import { State } from './state'
-import { DesignSystem } from './v4'
+import { replaceCssVarsWithFallbacks } from './index'
+import { State } from '../state'
+import { DesignSystem } from '../v4'
 
 test('replacing CSS variables with their fallbacks (when they have them)', () => {
-  let map = new Map<string, string>([
-      ['--known', 'blue'],
-  ])
+  let map = new Map<string, string>([['--known', 'blue']])
 
   let state: State = {
     enabled: true,

packages/tailwindcss-language-service/src/util/rewriting/index.ts

@@ -0,0 +1,2 @@
+export * from './replacements'
+export * from './var-fallbacks'

packages/tailwindcss-language-service/src/util/css-vars.ts renamed to packages/tailwindcss-language-service/src/util/rewriting/replacements.ts

@@ -1,27 +1,27 @@
-import type { State } from './state'
-
-export function replaceCssVarsWithFallbacks(state: State, str: string): string {
-  return replaceCssVars(str, (name, fallback) => {
-    // Replace with the value from the design system first. The design system
-    // take precedences over other sources as that emulates the behavior of a
-    // browser where the fallback is only used if the variable is defined.
-    if (state.designSystem && name.startsWith('--')) {
-      let value = state.designSystem.resolveThemeValue?.(name) ?? null
-      if (value !== null) return value
-    }
+/**
+ * A var(…) expression which may have an optional fallback value
+ */
+export interface CssVariable {
+  kind: 'css-variable'
+  range: Range
+  name: string
+  fallback: string | null
+}
 
-    if (fallback) {
-      return fallback
-    }
+export interface Range {
+  /** The zero-based offset where this node starts */
+  start: number
 
-    // Don't touch it since there's no suitable replacement
-    return null
-  })
+  /** The zero-based offset where this node ends */
+  end: number
 }
 
-type CssVarReplacer = (name: string, fallback: string | null) => string | null
+export type CssVarReplacer = (node: CssVariable) => string | null
 
-function replaceCssVars(str: string, replace: CssVarReplacer): string {
+/**
+ * Replace all var expressions in a string using the replacer function
+ */
+export function replaceCssVars(str: string, replace: CssVarReplacer): string {
   for (let i = 0; i < str.length; ++i) {
     if (!str.startsWith('var(', i)) continue
 
@@ -47,7 +47,12 @@ function replaceCssVars(str: string, replace: CssVarReplacer): string {
           fallback = str.slice(fallbackStart, j)
         }
 
-        let replacement = replace(varName, fallback)
+        let replacement = replace({
+          kind: 'css-variable',
+          name: varName,
+          fallback,
+          range: { start: i, end: j },
+        })
 
         if (replacement !== null) {
           str = str.slice(0, i) + replacement + str.slice(j + 1)

packages/tailwindcss-language-service/src/util/rewriting/var-fallbacks.ts

@@ -0,0 +1,21 @@
+import type { State } from '../state'
+import { replaceCssVars } from './replacements'
+
+export function replaceCssVarsWithFallbacks(state: State, str: string): string {
+  return replaceCssVars(str, ({ name, fallback }) => {
+    // Replace with the value from the design system first. The design system
+    // take precedences over other sources as that emulates the behavior of a
+    // browser where the fallback is only used if the variable is defined.
+    if (state.designSystem && name.startsWith('--')) {
+      let value = state.designSystem.resolveThemeValue?.(name) ?? null
+      if (value !== null) return value
+    }
+
+    if (fallback) {
+      return fallback
+    }
+
+    // Don't touch it since there's no suitable replacement
+    return null
+  })
+}