vite plugin to combine all style

Question

I need to write a plugin to combine all css files, and returning it in an import statement.

const styles = {};
plugins: [vue(),
{
      name: "my-example", // this name will show up in warnings and errors
      enforce: "post",
      resolveId(source) {
        if (source === "virtual-module") {
          return source; // this signals that rollup should not ask other plugins or check the file system to find this id
        }
        return null; // other ids should be handled as usually
      },
      load(id) {
        if (id === "virtual-module") {
          console.log("load", styles);
          return `export default "${JSON.stringify(styles)}"`; // the source code for "virtual-module"
        }
        return null; // other ids should be handled as usually
      },
      transform(src, id) {
        if (/\.(css).*$/.test(id)) {
          styles[id] = src;
          return {
            code: "",
          };
        }
      },
    }],

and I am using it in App.vue like

import styles from 'virtual-module';
...
<p>{{ styles }}</p>

but its giving me {}. How I can combine all styles and get it via load?