feat: enhance custom property handling, variable transforms, and code generation

- Improve custom property handling in code generation and markup transforms
- Add utility for consistent raw variable name retrieval
- Extend Tailwind width and height keyword support
- Refine text rendering for invisible text and style merging
- Update variable collection with rewrites to improve token resolution

Author: Justineo

packages/extension/mcp/tools/code/assets/vector.ts

@@ -23,6 +23,10 @@ export async function exportSvgEntry(
     svgString = transformSvgAttributes(svgString, config)
 
     const baseProps = extractSvgAttributes(svgString)
+    if (!Object.keys(baseProps).length) {
+      // If we failed to parse attributes, inline the SVG to avoid emitting an empty tag.
+      return { props: {}, raw: svgString }
+    }
     try {
       const asset = await ensureAssetUploaded(svgUint8, 'image/svg+xml', {
         width: Math.round(node.width),

packages/extension/mcp/tools/code/collect.ts

@@ -3,11 +3,22 @@ import type { AssetDescriptor } from '@tempad-dev/mcp-shared'
 import type { SemanticNode } from '@/mcp/semantic-tree'
 import type { CodegenConfig } from '@/utils/codegen'
 
+import { toDecimalPlace } from '@/utils/number'
+
 import type { SvgEntry } from './assets'
 
 import { exportSvgEntry, hasImageFills, replaceImageUrlsWithAssets } from './assets'
 import { preprocessStyles, stripInertShadows } from './style'
 
+const VECTOR_LIKE_TYPES = new Set<SceneNode['type']>([
+  'VECTOR',
+  'BOOLEAN_OPERATION',
+  'STAR',
+  'LINE',
+  'ELLIPSE',
+  'POLYGON'
+])
+
 export type CollectedSceneData = {
   nodes: Map<string, SceneNode>
   styles: Map<string, Record<string, string>>
@@ -20,20 +31,47 @@ export async function collectSceneData(
   assetRegistry: Map<string, AssetDescriptor>
 ): Promise<CollectedSceneData> {
   const semanticNodes = flattenSemanticNodes(roots)
+  const parentById = buildSemanticParentMap(roots)
   const nodes = new Map<string, SceneNode>()
   const styles = new Map<string, Record<string, string>>()
   const svgs = new Map<string, SvgEntry>()
+  const skipped = new Set<string>()
 
   for (const semantic of semanticNodes) {
+    if (skipped.has(semantic.id)) continue
+
     const node = figma.getNodeById(semantic.id) as SceneNode | null
     if (!node || !node.visible) continue
 
     nodes.set(semantic.id, node)
 
-    if (semantic.assetKind === 'vector') {
+    const isSemanticVectorOnly = semantic.children.length > 0 && isVectorSubtree(semantic)
+
+    const isVectorOnlyContainer = isVectorContainer(node) || isSemanticVectorOnly
+
+    if (isVectorOnlyContainer && node.width > 0 && node.height > 0) {
       const svgEntry = await exportSvgEntry(node, config, assetRegistry)
       if (svgEntry) {
         svgs.set(semantic.id, svgEntry)
+        skipDescendants(semantic, skipped)
+        const processed = await collectNodeStyle(node, semantic, parentById, nodes, styles)
+        if (processed) {
+          styles.set(semantic.id, processed)
+        }
+      }
+      continue
+    }
+
+    const shouldExportVector = semantic.assetKind === 'vector' && node.width > 0 && node.height > 0
+
+    if (shouldExportVector) {
+      const svgEntry = await exportSvgEntry(node, config, assetRegistry)
+      if (svgEntry) {
+        svgs.set(semantic.id, svgEntry)
+        const processed = await collectNodeStyle(node, semantic, parentById, nodes, styles)
+        if (processed) {
+          styles.set(semantic.id, processed)
+        }
       }
       continue
     }
@@ -43,6 +81,16 @@ export async function collectSceneData(
 
       let processed = preprocessStyles(css, node)
 
+      const parentSemantic = parentById.get(semantic.id)
+      if (parentSemantic) {
+        const parentNode =
+          nodes.get(parentSemantic.id) ?? (figma.getNodeById(parentSemantic.id) as SceneNode | null)
+        const parentStyle = parentSemantic ? styles.get(parentSemantic.id) : undefined
+        if (parentNode) {
+          processed = applyConstraintsPosition(processed, node, parentNode, parentStyle)
+        }
+      }
+
       if (hasImageFills(node)) {
         processed = await replaceImageUrlsWithAssets(processed, node, config, assetRegistry)
       }
@@ -55,9 +103,172 @@ export async function collectSceneData(
     }
   }
 
+  for (const [id, entry] of Array.from(svgs.entries())) {
+    const node = nodes.get(id)
+    if (!node) {
+      svgs.delete(id)
+      continue
+    }
+    if (node.width <= 0 || node.height <= 0) {
+      svgs.delete(id)
+      continue
+    }
+    const widthAttr = Number(entry.props?.width ?? 0)
+    const heightAttr = Number(entry.props?.height ?? 0)
+    if (widthAttr <= 0 || heightAttr <= 0) {
+      svgs.delete(id)
+    }
+  }
+
   return { nodes, styles, svgs }
 }
 
+function isVectorContainer(node: SceneNode): boolean {
+  if (!('children' in node)) return false
+  const visibleChildren = node.children.filter((child) => child.visible)
+  if (!visibleChildren.length) return false
+  return visibleChildren.every((child) => VECTOR_LIKE_TYPES.has(child.type))
+}
+
+function isVectorSubtree(semantic: SemanticNode): boolean {
+  if (!semantic.children.length) return semantic.assetKind === 'vector'
+  return semantic.children.every((child) => isVectorSubtree(child))
+}
+
+function buildSemanticParentMap(roots: SemanticNode[]): Map<string, SemanticNode | undefined> {
+  const map = new Map<string, SemanticNode | undefined>()
+  const walk = (node: SemanticNode, parent?: SemanticNode) => {
+    map.set(node.id, parent)
+    node.children.forEach((child) => walk(child, node))
+  }
+  roots.forEach((root) => walk(root, undefined))
+  return map
+}
+
+async function collectNodeStyle(
+  node: SceneNode,
+  semantic: SemanticNode,
+  parentById: Map<string, SemanticNode | undefined>,
+  nodes: Map<string, SceneNode>,
+  styles: Map<string, Record<string, string>>
+): Promise<Record<string, string> | null> {
+  try {
+    const css = await node.getCSSAsync()
+    let processed = preprocessStyles(css, node)
+
+    const parentSemantic = parentById.get(semantic.id)
+    if (parentSemantic) {
+      const parentNode =
+        nodes.get(parentSemantic.id) ?? (figma.getNodeById(parentSemantic.id) as SceneNode | null)
+      const parentStyle = parentSemantic ? styles.get(parentSemantic.id) : undefined
+      if (parentNode) {
+        processed = applyConstraintsPosition(processed, node, parentNode, parentStyle)
+      }
+    }
+
+    return processed
+  } catch (error) {
+    console.warn('[tempad-dev] Failed to process node styles:', error)
+    return null
+  }
+}
+
+function applyConstraintsPosition(
+  style: Record<string, string>,
+  node: SceneNode,
+  parent: SceneNode,
+  parentStyle?: Record<string, string>
+): Record<string, string> {
+  const constraints = (node as { constraints?: Constraints }).constraints
+  if (!constraints) return style
+
+  const layoutMode = (parent as { layoutMode?: string }).layoutMode
+  if (layoutMode && layoutMode !== 'NONE') return style
+
+  const parentDisplay = parentStyle?.display?.toLowerCase()
+  if (parentDisplay && (parentDisplay.includes('flex') || parentDisplay.includes('grid'))) {
+    return style
+  }
+
+  const width = (node as { width?: number }).width ?? 0
+  const height = (node as { height?: number }).height ?? 0
+  const parentWidth = (parent as { width?: number }).width ?? 0
+  const parentHeight = (parent as { height?: number }).height ?? 0
+
+  if (!parentWidth || !parentHeight) return style
+
+  const transform = (node as { relativeTransform?: Transform }).relativeTransform
+  if (!transform || transform.length < 2 || transform[0].length < 3 || transform[1].length < 3) {
+    return style
+  }
+
+  const left = transform[0][2]
+  const top = transform[1][2]
+  const right = parentWidth - width - left
+  const bottom = parentHeight - height - top
+
+  const result: Record<string, string> = { ...style, position: 'absolute' }
+
+  const h = constraints.horizontal
+  switch (h) {
+    case 'MIN':
+      result.left = `${toDecimalPlace(left)}px`
+      break
+    case 'MAX':
+      result.right = `${toDecimalPlace(right)}px`
+      break
+    case 'CENTER': {
+      const offset = width / 2 + (parentWidth / 2 - width / 2 - left)
+      result.left = `calc(50% - ${toDecimalPlace(offset)}px)`
+      break
+    }
+    case 'STRETCH':
+      result.left = `${toDecimalPlace(left)}px`
+      result.right = `${toDecimalPlace(right)}px`
+      break
+    case 'SCALE':
+      result.left = `${toDecimalPlace((left / parentWidth) * 100)}%`
+      result.right = `${toDecimalPlace((right / parentWidth) * 100)}%`
+      break
+    default:
+      break
+  }
+
+  const v = constraints.vertical
+  switch (v) {
+    case 'MIN':
+      result.top = `${toDecimalPlace(top)}px`
+      break
+    case 'MAX':
+      result.bottom = `${toDecimalPlace(bottom)}px`
+      break
+    case 'CENTER': {
+      const offset = height / 2 + (parentHeight / 2 - height / 2 - top)
+      result.top = `calc(50% - ${toDecimalPlace(offset)}px)`
+      break
+    }
+    case 'STRETCH':
+      result.top = `${toDecimalPlace(top)}px`
+      result.bottom = `${toDecimalPlace(bottom)}px`
+      break
+    case 'SCALE':
+      result.top = `${toDecimalPlace((top / parentHeight) * 100)}%`
+      result.bottom = `${toDecimalPlace((bottom / parentHeight) * 100)}%`
+      break
+    default:
+      break
+  }
+
+  return result
+}
+
+function skipDescendants(semantic: SemanticNode, bucket: Set<string>): void {
+  semantic.children.forEach((child) => {
+    bucket.add(child.id)
+    skipDescendants(child, bucket)
+  })
+}
+
 function flattenSemanticNodes(nodes: SemanticNode[]): SemanticNode[] {
   const res: SemanticNode[] = []
   const traverse = (n: SemanticNode) => {

packages/extension/mcp/tools/code/index.ts

@@ -12,7 +12,7 @@ import { activePlugin } from '@/ui/state'
 import { stringifyComponent } from '@/utils/component'
 import {
   extractVarNames,
-  normalizeCssVarName,
+  normalizeCustomPropertyName,
   replaceVarFunctions,
   stripFallback,
   toVarExpr
@@ -21,11 +21,11 @@ import {
 import type { RenderContext, CodeLanguage } from './render'
 
 import { currentCodegenConfig } from '../config'
-import { collectCandidateVariableIds, resolveTokenDefsByNames } from '../token'
+import { resolveTokenDefsByNames } from '../token'
+import { applyPluginTransforms, buildVariableMappings, normalizeStyleVars } from '../token/mapping'
 import { collectSceneData } from './collect'
 import { buildGetCodeMessage } from './messages'
 import { renderSemanticNode } from './render'
-import { transform } from './variables'
 
 // Tags that should render children without extra whitespace/newlines.
 const COMPACT_TAGS = new Set([
@@ -124,13 +124,14 @@ export async function handleGetCode(
   const config = currentCodegenConfig()
   const pluginCode = activePlugin.value?.code
 
+  const mappings = buildVariableMappings(nodes)
+
   const assetRegistry = new Map<string, AssetDescriptor>()
   const { nodes: nodeMap, styles, svgs } = await collectSceneData(tree.roots, config, assetRegistry)
 
-  const styleVarNames = await transform(styles, {
-    pluginCode,
-    config
-  })
+  // Normalize codeSyntax-based outputs (e.g. "--ui-bg" / "$kui-color") back to canonical var(--name)
+  // BEFORE Tailwind conversion, so css->Tailwind operates on a single stable representation.
+  const usedCandidateIds = normalizeStyleVars(styles, mappings)
 
   const ctx: RenderContext = {
     styles,
@@ -160,12 +161,16 @@ export async function handleGetCode(
   const MAX_CODE_CHARS = Math.floor(MCP_MAX_PAYLOAD_BYTES * 0.6)
   const { markup, message } = buildGetCodeMessage(rawMarkup, MAX_CODE_CHARS, tree.stats)
 
+  const finalMarkup = await applyPluginTransforms(markup, pluginCode, config)
+
   // Only include tokens actually referenced in the final output.
-  const usedTokenNames = new Set<string>(styleVarNames)
-  extractVarNames(markup).forEach((n) => usedTokenNames.add(n))
+  const usedTokenNames = new Set<string>()
+  extractVarNames(finalMarkup).forEach((n) => usedTokenNames.add(n))
+  // Also capture bare custom property tokens if a plugin emits "--foo" directly.
+  finalMarkup.match(/--[A-Za-z0-9-_]+/g)?.forEach((m) => usedTokenNames.add(m))
 
   const usedTokens = await resolveTokenDefsByNames(usedTokenNames, config, pluginCode, {
-    candidateIds: () => collectCandidateVariableIds(nodes).variableIds
+    candidateIds: usedCandidateIds.size ? usedCandidateIds : mappings.variableIds
   })
 
   const codegen = {
@@ -188,7 +193,7 @@ export async function handleGetCode(
       out = replaceVarFunctions(out, ({ name, full }) => {
         const trimmed = name.trim()
         if (!trimmed.startsWith('--')) return full
-        const canonical = `--${normalizeCssVarName(trimmed.slice(2))}`
+        const canonical = normalizeCustomPropertyName(trimmed)
         const val = tokenMap.get(canonical)
         return typeof val === 'string' ? val : toVarExpr(canonical)
       })
@@ -201,7 +206,7 @@ export async function handleGetCode(
       return out
     }
 
-    const resolvedMarkup = replaceToken(markup)
+    const resolvedMarkup = replaceToken(finalMarkup)
     // If tokens are resolved, we don't need to return the token definitions
     return {
       lang: resolvedLang,
@@ -214,7 +219,7 @@ export async function handleGetCode(
 
   return {
     lang: resolvedLang,
-    code: markup,
+    code: finalMarkup,
     assets: Array.from(assetRegistry.values()),
     usedTokens,
     codegen,