From 14f0fe9f3f23329fc5542bfce618525b791a59df Mon Sep 17 00:00:00 2001 From: Brad Cornes Date: Fri, 5 Feb 2021 14:49:06 +0000 Subject: [PATCH] replace `experimental.showPixelValues` setting with `showPixelEquivalents` and enable by default (#200) --- .../tailwindcss-intellisense/package.json | 11 +++++++++-- .../src/lsp/server.ts | 3 ++- .../src/completionProvider.ts | 17 ++++++++++++----- .../src/hoverProvider.ts | 5 +++-- .../src/util/remToPx.ts | 10 +++++++--- .../src/util/state.ts | 3 ++- .../src/util/stringify.ts | 19 +++++++++++++++---- 7 files changed, 50 insertions(+), 18 deletions(-) diff --git a/packages/tailwindcss-intellisense/package.json b/packages/tailwindcss-intellisense/package.json index 5e916bc..bf408ed 100755 --- a/packages/tailwindcss-intellisense/package.json +++ b/packages/tailwindcss-intellisense/package.json @@ -163,8 +163,15 @@ "type": "array", "scope": "language-overridable" }, - "tailwindCSS.experimental.showPixelValues": { - "type": "boolean" + "tailwindCSS.showPixelEquivalents": { + "type": "boolean", + "default": true, + "markdownDescription": "Show `px` equivalents for `rem` CSS values." + }, + "tailwindCSS.rootFontSize": { + "type": "number", + "default": 16, + "markdownDescription": "Root font size in pixels. Used to convert `rem` CSS values to their `px` equivalents. See `#tailwindCSS.showPixelEquivalents#`." } } } diff --git a/packages/tailwindcss-intellisense/src/lsp/server.ts b/packages/tailwindcss-intellisense/src/lsp/server.ts index f99bbea..9e5243c 100644 --- a/packages/tailwindcss-intellisense/src/lsp/server.ts +++ b/packages/tailwindcss-intellisense/src/lsp/server.ts @@ -48,8 +48,9 @@ const defaultSettings: Settings = { includeLanguages: {}, experimental: { classRegex: [], - showPixelValues: false, }, + showPixelEquivalents: true, + rootFontSize: 16, validate: true, lint: { cssConflict: 'warning', diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts index f7655a0..77963b5 100644 --- a/packages/tailwindcss-language-service/src/completionProvider.ts +++ b/packages/tailwindcss-language-service/src/completionProvider.ts @@ -900,8 +900,9 @@ export async function resolveCompletionItem( if (!item.documentation) { const settings = await getDocumentSettings(state) const css = stringifyCss(item.data.join(':'), className, { - tabSize: dlv(settings, 'tabSize'), - showPixelValues: dlv(settings, 'experimental.showPixelValues'), + tabSize: dlv(settings, 'tabSize', 2), + showPixelEquivalents: dlv(settings, 'showPixelEquivalents', true), + rootFontSize: dlv(settings, 'rootFontSize', 16), }) if (css) { item.documentation = { @@ -932,7 +933,10 @@ function isContextItem(state: State, keys: string[]): boolean { function stringifyDecls( obj: any, - { showPixelValues = false }: Partial<{ showPixelValues: boolean }> = {} + { + showPixelEquivalents = false, + rootFontSize = 16, + }: Partial<{ showPixelEquivalents: boolean; rootFontSize: number }> = {} ): string { let props = Object.keys(obj) let nonCustomProps = props.filter((prop) => !prop.startsWith('--')) @@ -945,7 +949,9 @@ function stringifyDecls( .map((prop) => ensureArray(obj[prop]) .map((value) => { - const px = showPixelValues ? remToPx(value) : undefined + const px = showPixelEquivalents + ? remToPx(value, rootFontSize) + : undefined return `${prop}: ${value}${px ? ` /*${px}*/` : ''};` }) .join(' ') @@ -960,7 +966,8 @@ async function getCssDetail(state: State, className: any): Promise { if (className.__rule === true) { const settings = await getDocumentSettings(state) return stringifyDecls(removeMeta(className), { - showPixelValues: dlv(settings, 'experimental.showPixelValues', false), + showPixelEquivalents: dlv(settings, 'showPixelEquivalents', true), + rootFontSize: dlv(settings, 'rootFontSize', 16), }) } return null diff --git a/packages/tailwindcss-language-service/src/hoverProvider.ts b/packages/tailwindcss-language-service/src/hoverProvider.ts index 92fa34d..8326afb 100644 --- a/packages/tailwindcss-language-service/src/hoverProvider.ts +++ b/packages/tailwindcss-language-service/src/hoverProvider.ts @@ -96,8 +96,9 @@ async function provideClassNameHover( className.className, dlv(state.classNames.classNames, [...parts, '__info']), { - tabSize: dlv(settings, 'tabSize'), - showPixelValues: dlv(settings, 'experimental.showPixelValues'), + tabSize: dlv(settings, 'tabSize', 2), + showPixelEquivalents: dlv(settings, 'showPixelEquivalents', true), + rootFontSize: dlv(settings, 'rootFontSize', 16), } ) diff --git a/packages/tailwindcss-language-service/src/util/remToPx.ts b/packages/tailwindcss-language-service/src/util/remToPx.ts index b9f1898..445bb60 100644 --- a/packages/tailwindcss-language-service/src/util/remToPx.ts +++ b/packages/tailwindcss-language-service/src/util/remToPx.ts @@ -2,7 +2,11 @@ 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 + if (/^-?[0-9.]+rem$/.test(value)) { + let number = parseFloat(value.substr(0, value.length - 3)) + if (!isNaN(number)) { + return `${number * rootSize}px` + } + } + return undefined } diff --git a/packages/tailwindcss-language-service/src/util/state.ts b/packages/tailwindcss-language-service/src/util/state.ts index 117a8ed..4835a71 100644 --- a/packages/tailwindcss-language-service/src/util/state.ts +++ b/packages/tailwindcss-language-service/src/util/state.ts @@ -33,6 +33,8 @@ export type Settings = { emmetCompletions: boolean includeLanguages: Record validate: boolean + showPixelEquivalents: boolean + rootFontSize: number lint: { cssConflict: DiagnosticSeveritySetting invalidApply: DiagnosticSeveritySetting @@ -43,7 +45,6 @@ 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 b7050f9..3aebd99 100644 --- a/packages/tailwindcss-language-service/src/util/stringify.ts +++ b/packages/tailwindcss-language-service/src/util/stringify.ts @@ -21,14 +21,25 @@ export function stringifyCss( obj: any, { tabSize = 2, - showPixelValues = false, - }: Partial<{ tabSize: number; showPixelValues: boolean }> = {} + showPixelEquivalents = false, + rootFontSize = 16, + }: Partial<{ + tabSize: number + showPixelEquivalents: boolean + rootFontSize: number + }> = {} ): string { if (obj.__rule !== true && !Array.isArray(obj)) return null if (Array.isArray(obj)) { const rules = obj - .map((x) => stringifyCss(className, x, { tabSize, showPixelValues })) + .map((x) => + stringifyCss(className, x, { + tabSize, + showPixelEquivalents, + rootFontSize, + }) + ) .filter(Boolean) if (rules.length === 0) return null return rules.join('\n\n') @@ -49,7 +60,7 @@ export function stringifyCss( const decls = props.reduce((acc, curr, i) => { const propStr = ensureArray(obj[curr]) .map((val) => { - const px = showPixelValues ? remToPx(val) : undefined + const px = showPixelEquivalents ? remToPx(val, rootFontSize) : undefined return `${indentStr + indent}${curr}: ${val}${px ? ` /*${px}*/` : ''};` }) .join('\n')