This is very promising as a solution to finally getting Sage to work with the API v3 block editor.

The injection works fine folliowing a build with npm build but I can't get it to work in the same way as front styles with hot reloading using npm run dev.

Steps to reproduce:

1. Add some Tailwind styles in editor.css, for example:

@import "tailwindcss";

.editor-styles-wrapper {
  @apply font-sans bg-blue-50 px-32;
}

.editor-styles-wrapper h1 {
  @apply font-bold text-4xl mb-8;
}

.editor-styles-wrapper p {
  @apply mb-4;
}

2. Run npm run build - terminal shows the build process output running successfully
3. Edit a page in wp-admin - styles have been applied as expected:

4. Now run npm run dev - terminal output shows the process is running
5. Make a change to editor.css, eg. change bg-blue-50 to bg-red-100 and save the file
6. No changes are observed, even after fully reloading the admin edit page. Expected behaviour is that the changes will apply immediately, as they do on the front side after changing app.css

This means that hot reloading is working on the front but not admin, which is a little confusing.

I can also confirm that installing an API v2 plugin to disable the iframe editor does not fix things. Styles do not hot reload in this scenario.

Thank you for testing it out and the feedback! Not yet sure how to tackle the iframe'd editor's CSS in dev mode

Pushed some updates this weekend that have improved the integration between Vite's dev server and the iframed block editor a bit for updates made to editor.css, but it still needs some more polish

I left off today with refreshing the page when a change is detected Edit: One more update - 32b3ae4

I thought we could get away with this:

/**
 * Add Vite's HMR client to iframed block editor.
 *
 * @return void
 */
add_action('enqueue_block_assets', function () {
    if (! is_admin() || ! get_current_screen()?->is_block_editor()) {
        return;
    }

    if (! Vite::isRunningHot()) {
        return;
    }

    $devUrl = trim(File::get(Vite::hotFile()));
    wp_enqueue_script_module('vite-hmr', $devUrl.'/@vite/client');
});

But it looks like wp_enqueue_script_module isn't currently compatible with the iframed editor (WordPress/gutenberg#64482)

A workaround:

    wp_register_script('vite-hmr', false);
    wp_enqueue_script('vite-hmr');
    wp_add_inline_script('vite-hmr', "
        if (window.self !== window.top) {
            const script = document.createElement('script');
            script.type = 'module';
            script.src = '{$devUrl}/@vite/client';
            document.head.appendChild(script);
        }
    ");