replace `experimental.showPixelValues` setting with `showPixelEquivalents` and enable by default (#200)
parent
6304d223ae
commit
14f0fe9f3f
|
@ -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#`."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -48,8 +48,9 @@ const defaultSettings: Settings = {
|
|||
includeLanguages: {},
|
||||
experimental: {
|
||||
classRegex: [],
|
||||
showPixelValues: false,
|
||||
},
|
||||
showPixelEquivalents: true,
|
||||
rootFontSize: 16,
|
||||
validate: true,
|
||||
lint: {
|
||||
cssConflict: 'warning',
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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),
|
||||
}
|
||||
)
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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')
|
||||
|
|
Loading…
Reference in New Issue