feat(iframe): support custom stylesheet injection

[allandelmare]

Feature Request

Problem

When embedding custom content in the Puck iframe (e.g., Tailwind CSS from an API endpoint, custom fonts), there's no way to inject stylesheets that participate in the waitForStyles mechanism.

Currently, the only workaround is using the iframe override to inject styles via useEffect, but this causes a flash of unstyled content (FOUC) because:

1. Custom stylesheets aren't in the host document
2. They're injected after the override mounts
3. waitForStyles completes before custom styles load

Proposed Solution

Add two new properties to IframeConfig:

interface IframeConfig {
  enabled?: boolean;
  waitForStyles?: boolean;
  // New:
  stylesheets?: string[];
  onStylesLoaded?: () => void;
}

Usage:

<Puck
  iframe={{
    enabled: true,
    waitForStyles: true,
    stylesheets: [
      '/api/tailwind-styles',
      'https://fonts.googleapis.com/css2?family=Inter'
    ],
    onStylesLoaded: () => console.log('All styles ready'),
  }}
/>

Use Case

I'm building a PayloadCMS plugin that integrates Puck. Users can configure custom stylesheets (Tailwind, custom fonts, design system CSS) that need to load in the preview iframe before rendering.

Implementation

I have a working implementation ready if this approach is approved. It:

• Injects custom <link> elements after host styles
• Tracks loading via onload/onerror handlers
• Includes a timeout fallback for reliability
• Calls onStylesLoaded when all styles (host + custom) are ready

Happy to submit a PR if this direction makes sense!

[FedericoBonel]

Hey @allandelmare!
Thanks for opening this, I think this looks like a nice API to have.

If you have the code ready you can open a PR, just keep in mind it might take some time to get to it since we just released and want to get the current version stable first!