Function generateStyledComponents

packages/backend/src/html/htmlMain.ts:153–177

()

// Generate styled-components with improved naming and formatting
export function generateStyledComponents(): string {
  const components: string[] = [];

  Object.entries(cssCollection).forEach(
    ([className, { styles, componentName, element, nodeType }]) => {
      // Skip if no styles
      if (!styles.length) return;

      // Determine base HTML element - defaults to div
      const baseElement = element || (nodeType === "TEXT" ? "p" : "div");

      const styledComponent = `const ${componentName} = styled.${baseElement}\`
  ${styles.join(";\n  ")}${styles.length ? ";" : ""}
\`;`;

      components.push(styledComponent);
    },
  );

  if (components.length === 0) {
    return "";
  }

  return `${components.join("\n\n")}`;
}

// Get a valid React component name from a layer name
export function getReactComponentName(node: any): string {