Function getComponentName

packages/backend/src/html/htmlMain.ts:103–135

(
  nodeName: string | undefined,
  className: string,
  nodeType: string,
)

// Get proper component name from node info
export function getComponentName(
  nodeName: string | undefined,
  className: string,
  nodeType: string,
): string {
  // Start with Styled prefix
  let name = "Styled";

  // Try to use node name first
  if (nodeName && nodeName.length > 0) {
    // Clean up the node name and capitalize first letter
    const cleanName = nodeName
      .replace(/[^a-zA-Z0-9]/g, "")
      .replace(/^[a-z]/, (match) => match.toUpperCase());

    name += cleanName || nodeType.charAt(0).toUpperCase() + nodeType.slice(1);
  }
  // Fall back to className if provided
  else if (className) {
    const parts = className.split("-");
    if (parts.length > 0 && parts[0]) {
      name += parts[0].charAt(0).toUpperCase() + parts[0].slice(1);
    } else {
      name += nodeType.charAt(0).toUpperCase() + nodeType.slice(1);
    }
  }
  // Last resort
  else {
    name += nodeType.charAt(0).toUpperCase() + nodeType.slice(1);
  }

  return name;
}

// Get the collected CSS as a string with improved formatting
export function getCollectedCSS(): string {