feat(codegen): add textGrowth, textAlignVertical and clipContent to code generation

- textGrowth: auto → whitespace-nowrap, fixed-width-height → overflow-hidden
- textAlignVertical: middle/bottom → vertical-align CSS
- clipContent: true → overflow-hidden on containers
This commit is contained in:
Fini 2026-02-22 08:17:36 +08:00
parent 6a99edde23
commit 90e40c05bf
2 changed files with 14 additions and 0 deletions

View file

@ -138,6 +138,9 @@ function layoutToCSS(node: ContainerProps): Record<string, string> {
}
css['align-items'] = map[node.alignItems] ?? node.alignItems
}
if (node.clipContent) {
css.overflow = 'hidden'
}
return css
}
@ -240,6 +243,10 @@ function generateNodeHTML(
if (node.fontFamily) css['font-family'] = `'${node.fontFamily}', sans-serif`
if (node.lineHeight) css['line-height'] = String(node.lineHeight)
if (node.letterSpacing) css['letter-spacing'] = `${node.letterSpacing}px`
if (node.textAlignVertical === 'middle') css['vertical-align'] = 'middle'
else if (node.textAlignVertical === 'bottom') css['vertical-align'] = 'bottom'
if (node.textGrowth === 'auto') css['white-space'] = 'nowrap'
else if (node.textGrowth === 'fixed-width-height') css.overflow = 'hidden'
if (node.underline) css['text-decoration'] = 'underline'
if (node.strikethrough) css['text-decoration'] = 'line-through'
Object.assign(css, effectsToCSS(node.effects))

View file

@ -135,6 +135,9 @@ function layoutToTailwind(node: ContainerProps): string[] {
}
if (aiMap[node.alignItems]) classes.push(aiMap[node.alignItems])
}
if (node.clipContent) {
classes.push('overflow-hidden')
}
return classes
}
@ -193,6 +196,10 @@ function textToTailwind(node: TextNode): string[] {
if (node.fontFamily) classes.push(`font-['${node.fontFamily.replace(/\s/g, '_')}']`)
if (node.lineHeight) classes.push(`leading-[${node.lineHeight}]`)
if (node.letterSpacing) classes.push(`tracking-[${node.letterSpacing}px]`)
if (node.textAlignVertical === 'middle') classes.push('align-middle')
else if (node.textAlignVertical === 'bottom') classes.push('align-bottom')
if (node.textGrowth === 'auto') classes.push('whitespace-nowrap')
else if (node.textGrowth === 'fixed-width-height') classes.push('overflow-hidden')
if (node.underline) classes.push('underline')
if (node.strikethrough) classes.push('line-through')
return classes