Add TWC support

Author: apazzolini

package-lock.json

@@ -2,7 +2,7 @@
   "name": "@tailwindcss/language-server",
   "description": "Tailwind CSS Language Server",
   "license": "MIT",
-  "version": "0.0.16",
+  "version": "0.0.16-andre",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss-intellisense.git",

packages/tailwindcss-language-server/package.json

@@ -1,12 +1,14 @@
+import type { State } from './state'
 import type { Plugin } from 'postcss'
 import parseValue from 'postcss-value-parser'
 import { inGamut } from 'culori'
 import { formatColor, getColorFromValue } from './color'
 import type { Comment } from './comments'
 
+const TW_REGEX = /--twc-(\w+)-(\d+)/
 let allowedFunctions = ['rgb', 'rgba', 'hsl', 'hsla', 'lch', 'lab', 'oklch', 'oklab']
 
-export function equivalentColorValues({ comments }: { comments: Comment[] }): Plugin {
+export function equivalentColorValues(state: State, { comments }: { comments: Comment[] }): Plugin {
   return {
     postcssPlugin: 'plugin',
     Declaration(decl) {
@@ -23,12 +25,35 @@ export function equivalentColorValues({ comments }: { comments: Comment[] }): Pl
           return false
         }
 
+        const twcNode = node.nodes.filter(
+          (n) => n.type === 'function' && n.nodes.length && n.nodes[0].value.startsWith('--twc-'),
+        )
+        if (twcNode) {
+          const res = decl.value.match(TW_REGEX)
+          if (res) {
+            const [, color, value] = res
+            const light = state.config.theme.colors[color][value]
+            const dark = state.config.theme.darkColors[color][value]
+
+            comments.push({
+              index:
+                decl.source.start.offset +
+                `${decl.prop}${decl.raws.between}`.length +
+                node.sourceEndIndex,
+              value: `${light} ${dark}`,
+            })
+
+            return false
+          }
+        }
+
         const values = node.nodes.filter((n) => n.type === 'word').map((n) => n.value)
         if (values.length < 3) {
           return false
         }
 
         const color = getColorFromValue(`${node.value}(${values.join(' ')})`)
+
         if (!inGamut('rgb')(color)) {
           return false
         }

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

@@ -1,10 +1,10 @@
-import type { TailwindCssSettings } from './state'
+import type { TailwindCssSettings, State } from './state'
 import { equivalentPixelValues } from './pixelEquivalents'
 import { equivalentColorValues } from './colorEquivalents'
 import postcss, { type AcceptedPlugin } from 'postcss'
 import { applyComments, type Comment } from './comments'
 
-export function addEquivalents(css: string, settings: TailwindCssSettings): string {
+export function addEquivalents(css: string, settings: TailwindCssSettings, state: State): string {
   let comments: Comment[] = []
 
   let plugins: AcceptedPlugin[] = []
@@ -18,7 +18,7 @@ export function addEquivalents(css: string, settings: TailwindCssSettings): stri
     )
   }
 
-  plugins.push(equivalentColorValues({ comments }))
+  plugins.push(equivalentColorValues(state, { comments }))
 
   try {
     postcss(plugins).process(css, { from: undefined }).css

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

@@ -44,7 +44,7 @@ export async function stringifyRoot(state: State, root: Root, uri?: string): Pro
 
   let css = clone.toString()
 
-  css = addEquivalents(css, settings.tailwindCSS)
+  css = addEquivalents(css, settings.tailwindCSS, state)
 
   let identSize = state.v4 ? 2 : 4
   let identPattern = state.v4 ? /^(?:  )+/gm : /^(?:    )+/gm

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

@@ -1,3 +1,14 @@
+## Andre note to self
+
+```
+git clone https://github.com/apazzolini/tailwindcss-intellisense.git
+cd tailwindcss-intellisense
+npm i
+cd packages/tailwindcss-language-server
+npm run build
+npm i -g $(pwd)
+```
+
 <img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/vscode-tailwindcss/.github/banner.png" alt="" />
 
 Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.