diff --git a/package-lock.json b/package-lock.json index dd4a0bda..e74c7cf0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8060,7 +8060,7 @@ }, "packages/tailwindcss-language-server": { "name": "@tailwindcss/language-server", - "version": "0.0.16", + "version": "0.0.16-andre", "license": "MIT", "bin": { "tailwindcss-language-server": "bin/tailwindcss-language-server" diff --git a/packages/tailwindcss-language-server/package.json b/packages/tailwindcss-language-server/package.json index 5ede64e3..649531ac 100644 --- a/packages/tailwindcss-language-server/package.json +++ b/packages/tailwindcss-language-server/package.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", diff --git a/packages/tailwindcss-language-service/src/util/colorEquivalents.ts b/packages/tailwindcss-language-service/src/util/colorEquivalents.ts index 2cf0ba60..6904bd64 100644 --- a/packages/tailwindcss-language-service/src/util/colorEquivalents.ts +++ b/packages/tailwindcss-language-service/src/util/colorEquivalents.ts @@ -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 } diff --git a/packages/tailwindcss-language-service/src/util/equivalents.ts b/packages/tailwindcss-language-service/src/util/equivalents.ts index f462225c..ac6823e9 100644 --- a/packages/tailwindcss-language-service/src/util/equivalents.ts +++ b/packages/tailwindcss-language-service/src/util/equivalents.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 diff --git a/packages/tailwindcss-language-service/src/util/jit.ts b/packages/tailwindcss-language-service/src/util/jit.ts index 450cc01a..466c29be 100644 --- a/packages/tailwindcss-language-service/src/util/jit.ts +++ b/packages/tailwindcss-language-service/src/util/jit.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 diff --git a/packages/vscode-tailwindcss/README.md b/packages/vscode-tailwindcss/README.md index 61c9d1b1..0b845366 100644 --- a/packages/vscode-tailwindcss/README.md +++ b/packages/vscode-tailwindcss/README.md @@ -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) +``` + Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.