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 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">
            @import './_variables.scss';
            body { background-color: $myColor }
          </style>
          <template>
          </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);
      },
    }
    ...

</script>