From 615fd7f630e7ecb6ed1be3756182f70ea0fb8d48 Mon Sep 17 00:00:00 2001 From: Brad Cornes Date: Tue, 1 Dec 2020 19:05:58 +0000 Subject: [PATCH] add experimental showPixelValues setting --- .../tailwindcss-intellisense/package.json | 3 +++ .../src/lsp/server.ts | 1 + .../src/completionProvider.ts | 27 ++++++++++++++----- .../src/hoverProvider.ts | 7 +++-- .../src/util/remToPx.ts | 8 ++++++ .../src/util/state.ts | 1 + .../src/util/stringify.ts | 15 ++++++++--- 7 files changed, 50 insertions(+), 12 deletions(-) create mode 100644 packages/tailwindcss-language-service/src/util/remToPx.ts diff --git a/packages/tailwindcss-intellisense/package.json b/packages/tailwindcss-intellisense/package.json index 47f21dd..033ea53 100755 --- a/packages/tailwindcss-intellisense/package.json +++ b/packages/tailwindcss-intellisense/package.json @@ -162,6 +162,9 @@ "tailwindCSS.experimental.classRegex": { "type": "array", "scope": "language-overridable" + }, + "tailwindCSS.experimental.showPixelValues": { + "type": "boolean" } } } diff --git a/packages/tailwindcss-intellisense/src/lsp/server.ts b/packages/tailwindcss-intellisense/src/lsp/server.ts index 043115d..f99bbea 100644 --- a/packages/tailwindcss-intellisense/src/lsp/server.ts +++ b/packages/tailwindcss-intellisense/src/lsp/server.ts @@ -48,6 +48,7 @@ const defaultSettings: Settings = { includeLanguages: {}, experimental: { classRegex: [], + showPixelValues: false, }, validate: true, lint: { diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts index 0cdff63..1a7165b 100644 --- a/packages/tailwindcss-language-service/src/completionProvider.ts +++ b/packages/tailwindcss-language-service/src/completionProvider.ts @@ -32,6 +32,7 @@ import { import { validateApply } from './util/validateApply' import { flagEnabled } from './util/flagEnabled' import MultiRegexp from 'multi-regexp2' +import { remToPx } from './util/remToPx' export function completionsFromClassList( state: State, @@ -876,10 +877,13 @@ export async function resolveCompletionItem( item.data[item.data.length - 1] ].join(', ') } else { - item.detail = getCssDetail(state, className) + item.detail = await getCssDetail(state, className) if (!item.documentation) { - const { tabSize } = await getDocumentSettings(state) - const css = stringifyCss(item.data.join(':'), className, tabSize) + const settings = await getDocumentSettings(state) + const css = stringifyCss(item.data.join(':'), className, { + tabSize: dlv(settings, 'tabSize'), + showPixelValues: dlv(settings, 'experimental.showPixelValues'), + }) if (css) { item.documentation = { kind: 'markdown' as typeof MarkupKind.Markdown, @@ -907,7 +911,10 @@ function isContextItem(state: State, keys: string[]): boolean { return isObject(item.__info) && !item.__info.__rule } -function stringifyDecls(obj: any): string { +function stringifyDecls( + obj: any, + { showPixelValues = false }: Partial<{ showPixelValues: boolean }> = {} +): string { let props = Object.keys(obj) let nonCustomProps = props.filter((prop) => !prop.startsWith('--')) @@ -918,18 +925,24 @@ function stringifyDecls(obj: any): string { return props .map((prop) => ensureArray(obj[prop]) - .map((value) => `${prop}: ${value};`) + .map((value) => { + const px = showPixelValues ? remToPx(value) : undefined + return `${prop}: ${value}${px ? ` /*${px}*/` : ''};` + }) .join(' ') ) .join(' ') } -function getCssDetail(state: State, className: any): string { +async function getCssDetail(state: State, className: any): Promise { if (Array.isArray(className)) { return `${className.length} rules` } if (className.__rule === true) { - return stringifyDecls(removeMeta(className)) + const settings = await getDocumentSettings(state) + return stringifyDecls(removeMeta(className), { + showPixelValues: dlv(settings, 'experimental.showPixelValues', false), + }) } return null } diff --git a/packages/tailwindcss-language-service/src/hoverProvider.ts b/packages/tailwindcss-language-service/src/hoverProvider.ts index 3171e02..03f1150 100644 --- a/packages/tailwindcss-language-service/src/hoverProvider.ts +++ b/packages/tailwindcss-language-service/src/hoverProvider.ts @@ -90,12 +90,15 @@ async function provideClassNameHover( } } - const { tabSize } = await getDocumentSettings(state, document) + const settings = await getDocumentSettings(state, document) const css = stringifyCss( className.className, dlv(state.classNames.classNames, [...parts, '__info']), - tabSize + { + tabSize: dlv(settings, 'tabSize'), + showPixelValues: dlv(settings, 'experimental.showPixelValues'), + } ) if (!css) return null diff --git a/packages/tailwindcss-language-service/src/util/remToPx.ts b/packages/tailwindcss-language-service/src/util/remToPx.ts new file mode 100644 index 0000000..b9f1898 --- /dev/null +++ b/packages/tailwindcss-language-service/src/util/remToPx.ts @@ -0,0 +1,8 @@ +export function remToPx( + value: string, + rootSize: number = 16 +): string | undefined { + return /^-?[0-9.]+rem$/.test(value) + ? `${parseFloat(value.substr(0, value.length - 3)) * rootSize}px` + : undefined +} diff --git a/packages/tailwindcss-language-service/src/util/state.ts b/packages/tailwindcss-language-service/src/util/state.ts index c89cb30..117a8ed 100644 --- a/packages/tailwindcss-language-service/src/util/state.ts +++ b/packages/tailwindcss-language-service/src/util/state.ts @@ -43,6 +43,7 @@ export type Settings = { } experimental: { classRegex: string[] + showPixelValues: boolean } } diff --git a/packages/tailwindcss-language-service/src/util/stringify.ts b/packages/tailwindcss-language-service/src/util/stringify.ts index a72fa32..b7050f9 100644 --- a/packages/tailwindcss-language-service/src/util/stringify.ts +++ b/packages/tailwindcss-language-service/src/util/stringify.ts @@ -2,6 +2,7 @@ import removeMeta from './removeMeta' const dlv = require('dlv') import escapeClassName from 'css.escape' import { ensureArray } from './array' +import { remToPx } from './remToPx' export function stringifyConfigValue(x: any): string { if (typeof x === 'string') return x @@ -18,12 +19,17 @@ export function stringifyConfigValue(x: any): string { export function stringifyCss( className: string, obj: any, - tabSize: number = 2 + { + tabSize = 2, + showPixelValues = false, + }: Partial<{ tabSize: number; showPixelValues: boolean }> = {} ): string { if (obj.__rule !== true && !Array.isArray(obj)) return null if (Array.isArray(obj)) { - const rules = obj.map((x) => stringifyCss(className, x)).filter(Boolean) + const rules = obj + .map((x) => stringifyCss(className, x, { tabSize, showPixelValues })) + .filter(Boolean) if (rules.length === 0) return null return rules.join('\n\n') } @@ -42,7 +48,10 @@ export function stringifyCss( const indentStr = indent.repeat(context.length) const decls = props.reduce((acc, curr, i) => { const propStr = ensureArray(obj[curr]) - .map((val) => `${indentStr + indent}${curr}: ${val};`) + .map((val) => { + const px = showPixelValues ? remToPx(val) : undefined + return `${indentStr + indent}${curr}: ${val}${px ? ` /*${px}*/` : ''};` + }) .join('\n') return `${acc}${i === 0 ? '' : '\n'}${propStr}` }, '')