replace `experimental.showPixelValues` setting with `showPixelEquivalents` and enable by default (#200)

master
Brad Cornes 2021-02-05 14:49:06 +00:00
parent 6304d223ae
commit 14f0fe9f3f
7 changed files with 50 additions and 18 deletions

View File

@ -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#`."
}
}
}

View File

@ -48,8 +48,9 @@ const defaultSettings: Settings = {
includeLanguages: {},
experimental: {
classRegex: [],
showPixelValues: false,
},
showPixelEquivalents: true,
rootFontSize: 16,
validate: true,
lint: {
cssConflict: 'warning',

View File

@ -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<string> {
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

View File

@ -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),
}
)

View File

@ -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
}

View File

@ -33,6 +33,8 @@ export type Settings = {
emmetCompletions: boolean
includeLanguages: Record<string, string>
validate: boolean
showPixelEquivalents: boolean
rootFontSize: number
lint: {
cssConflict: DiagnosticSeveritySetting
invalidApply: DiagnosticSeveritySetting
@ -43,7 +45,6 @@ export type Settings = {
}
experimental: {
classRegex: string[]
showPixelValues: boolean
}
}

View File

@ -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')