71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import removeMeta from './removeMeta'
|
|
import dlv from 'dlv'
|
|
import escapeClassName from 'css.escape'
|
|
import { ensureArray } from './array'
|
|
import { remToPx } from './remToPx'
|
|
import stringifyObject from 'stringify-object'
|
|
import isObject from './isObject'
|
|
import { Settings } from './state'
|
|
|
|
export function stringifyConfigValue(x: any): string {
|
|
if (isObject(x)) return `${Object.keys(x).length} values`
|
|
if (typeof x === 'function') return 'ƒ'
|
|
return stringifyObject(x, {
|
|
inlineCharacterLimit: Infinity,
|
|
singleQuotes: false,
|
|
transform: (obj, prop, originalResult) => {
|
|
if (typeof obj[prop] === 'function') {
|
|
return 'ƒ'
|
|
}
|
|
return originalResult
|
|
},
|
|
})
|
|
}
|
|
|
|
export function stringifyCss(className: string, obj: any, settings: Settings): string {
|
|
if (obj.__rule !== true && !Array.isArray(obj)) return null
|
|
|
|
if (Array.isArray(obj)) {
|
|
const rules = obj.map((x) => stringifyCss(className, x, settings)).filter(Boolean)
|
|
if (rules.length === 0) return null
|
|
return rules.join('\n\n')
|
|
}
|
|
|
|
let css = ``
|
|
const indent = ' '.repeat(settings.editor.tabSize)
|
|
|
|
const context = dlv(obj, '__context', [])
|
|
const props = Object.keys(removeMeta(obj))
|
|
if (props.length === 0) return null
|
|
|
|
for (let i = 0; i < context.length; i++) {
|
|
css += `${indent.repeat(i)}${context[i]} {\n`
|
|
}
|
|
|
|
const indentStr = indent.repeat(context.length)
|
|
const decls = props.reduce((acc, curr, i) => {
|
|
const propStr = ensureArray(obj[curr])
|
|
.map((val) => {
|
|
const px = settings.tailwindCSS.showPixelEquivalents
|
|
? remToPx(val, settings.tailwindCSS.rootFontSize)
|
|
: undefined
|
|
return `${indentStr + indent}${curr}: ${val}${px ? `/* ${px} */` : ''};`
|
|
})
|
|
.join('\n')
|
|
return `${acc}${i === 0 ? '' : '\n'}${propStr}`
|
|
}, '')
|
|
css += `${indentStr}${augmentClassName(className, obj)} {\n${decls}\n${indentStr}}`
|
|
|
|
for (let i = context.length - 1; i >= 0; i--) {
|
|
css += `${indent.repeat(i)}\n}`
|
|
}
|
|
|
|
return css
|
|
}
|
|
|
|
function augmentClassName(className: string, obj: any): string {
|
|
const pseudo = obj.__pseudo.join('')
|
|
const scope = obj.__scope ? `${obj.__scope} ` : ''
|
|
return `${scope}.${escapeClassName(className)}${pseudo}`
|
|
}
|