asynchronous style processing support

[FranckFreiburger]

Here is an example of processStyles option usage to handle asynchronous style processing (sass here).
This example also handle @import resolution and loading.

<script type="module">
 
    import * as Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.runtime.esm-browser.prod.js'
    import * as sass from 'https://jspm.dev/sass'
    import { loadModule } from 'https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.esm.js'

    // In the example, for convenience, we simply retrieve file content from a string.
    const files = {
        '/_variables.scss': `
          $myColor: #123 
        `,
        '/main.vue': /* <!-- */`

          <script setup>
          </script>

          <style lang="sass" scoped>
            @import './_variables.scss';
            .test { background-color: $myColor; color: invert($myColor)  }
          </style>

          <template>
            <div class="test">test</div>
          </template>
          
        `/* --> */,
    };

    const options = {
      moduleCache: {
        vue: Vue,
      },
      async getFile(url) {
        
        if ( files[url] )
          return files[url];
      },
      async processStyles(src, lang, filename, options) {

        if ( lang !== 'sass' )
          throw new Error(`unsupported "${ lang }" style processor`);
        
        const sassDepImporter = {
          canonicalize: str => new URL(str, 'file:'),
          load: async url => {

            const res = options.getResource({ refPath: filename, relPath: url.pathname }, options);
            const content = await res.getContent();
            return {
              contents: await content.getContentData(false),
              syntax: content.type.slice(1), // content.type is the file extension, then just strip the "."
            };
          },
        };

        try {

          const compiled = await sass.compileStringAsync(src, {
            importers: [sassDepImporter],
          });
  
          return compiled.css;
        } catch(ex) {

          options.log('error', ex.message);
          return undefined;
        }
      },
      addStyle(styleStr) {
        console.log("addStyle", styleStr)
        const style = document.createElement('style');
        style.textContent = styleStr;
        const ref = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, ref);
      },

      log(type, ...args) {
        console[type](...args);
      },
    }

    Vue.createApp(Vue.defineAsyncComponent(() => loadModule('/main.vue', options))).mount(document.body);
    
</script>