diff --git a/src/services/codegen/html-generator.ts b/src/services/codegen/html-generator.ts
index ef4e9dcc7..c5b4cdeab 100644
--- a/src/services/codegen/html-generator.ts
+++ b/src/services/codegen/html-generator.ts
@@ -138,6 +138,9 @@ function layoutToCSS(node: ContainerProps): Record {
}
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))
diff --git a/src/services/codegen/react-generator.ts b/src/services/codegen/react-generator.ts
index 2d2983d32..15f7e1da3 100644
--- a/src/services/codegen/react-generator.ts
+++ b/src/services/codegen/react-generator.ts
@@ -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