Function generateSvelteComponent

packages/backend/src/html/htmlMain.ts:291–309

(html: string)

// Generate Svelte component from the collected styles and HTML
function generateSvelteComponent(html: string): string {
  // Build CSS classes similar to styled-components but for Svelte
  const cssRules: string[] = [];

  Object.entries(cssCollection).forEach(([className, { styles }]) => {
    if (!styles.length) return;

    // Always use class selector to avoid conflicts
    cssRules.push(
      `.${className} {\n  ${styles.join(";\n  ")}${styles.length ? ";" : ""}\n}`,
    );
  });

  return `${html}

<style>
${cssRules.join("\n\n")}
</style>`;
}

export const htmlMain = async (
  sceneNode: Array<SceneNode>,