Feature: return an object with id keys and style values for vue3-ssr

[jbmolle]

Hi,

Would it be possible to have a function similar to collect in vue3-ssr but instead of returning a joined string of all the styles, it would be an object { [id]: styleString }?
Nuxt v3.7.0 has just updated how they manage SSR Head with unhead. Before we could return an object { headTags: collect() } in nuxtApp.ssrContext.renderMeta. Now we are using useServerHead({ style: [xxx] }).

So to integrate NaiveUI with Nuxt, we were creating a plugin like this:

import { setup } from '@css-render/vue3-ssr'

export default defineNuxtPlugin((nuxtApp) => {
  if (process.server) {
    const { collect } = setup(nuxtApp.vueApp)
    nuxtApp.ssrContext!.renderMeta = () => {
      return {
        headTags: collect(),
      }
    }
  }
})

But now, we have to do:

mport { setup } from '@css-render/vue3-ssr'

export default defineNuxtPlugin((nuxtApp) => {
    const { collect } = setup(nuxtApp.vueApp)
    useServerHead({
        style: () => {
            const stylesString = collect()
            const stylesArray = stylesString.split(/<\/style>/g).filter(style => style)
            return stylesArray.map((styleString: string) => {
                const match = styleString.match(/<style cssr-id="([^"]*)">([\s\S]*)/)
                if (match) {
                    const id = match[1]
                    return { 'cssr-id': id, children: match[2] }
                }
                return {}
            })
        }
    })
})

so it would be easier to have a function collectAsObject in setup that would return the map of ids and corresponding CSS styles.