chrome-extension-tools fix(hmr): fix `tailwindcss` hmr does not work (vite)

FIxed: Fix the problem that tailwindcss jit did not trigger the hmr update Todo: Fix the problem that the index.css?inline syntax does not work in hmr

Fix: #600 #671 #609 #512

Tests to be added...

import index.css?inline still cannot implement HMR in contentScripts, because it is static data, but manually refreshing the page can already work, Do you have any good ideas?

At present(After merged this PR), there is only one compromise way to fully realize HMR:

createShadowRoot.ts

import { type ReactNode } from 'react'
import { createRoot, type Root } from 'react-dom/client'

export const createElement = <T extends Element>(template: string) => {
  return new Range().createContextualFragment(template).firstElementChild as unknown as T
}

export interface RootOptions {
  mode?: ShadowRootMode
  style?: string
  script?: string
  element?: Element
}

const createShadowRoot = (
  name: string,
  options: RootOptions
): Root & { shadowHost: Element; shadowRoot: ShadowRoot; appRoot: Element } => {
  const { mode = 'open', style = '', script = '', element = '' } = options ?? {}
  const shadowHost = createElement(`<${name}></${name}>`)
  const shadowRoot = shadowHost.attachShadow({ mode })
  const appRoot = createElement(`<div id="app"></div>`)
  const appStyle = style && createElement(`<style type="text/css">${style}</style>`)
  const appScript = script && createElement(`<script type="application/javascript">${script}</script>`)
  const reactRoot = createRoot(appRoot)

  shadowRoot.append(appStyle, appRoot, appScript, element)

  return {
    shadowHost,
    shadowRoot,
    appRoot,
    render: (children: ReactNode) => {
      document.body.appendChild(shadowHost)
      return reactRoot.render(children)
    },
    unmount: () => {
      reactRoot.unmount()
      shadowHost.remove()
    }
  }
}

export default createShadowRoot

content.tsx

import React from 'react'
import App from './App'
import createShadowRoot from './createShadowRoot'
import style from './index.css?inline'

void (async () => {
  const root = createShadowRoot(__NAME__, {
    style: __DEV__ ? '' : style,
    mode: __DEV__ ? 'open' : 'closed'
  })
  root.render(
    <React.StrictMode>
      <RemeshRoot store={store}>
        <App />
      </RemeshRoot>
    </React.StrictMode>
  )

  // HMR Hack
  // https://github.com/crxjs/chrome-extension-tools/issues/600
  if (__DEV__) {
    await import('./index.css')
    const styleElement = document.querySelector('[data-vite-dev-id]')!
    root.shadowRoot.insertBefore(styleElement, root.shadowRoot.firstChild)
  }
})()

If it is a development environment, add the out style in head to shadow dom If it is a production environment, write css string to shadow dom