which sass lib can use to implement renderSync function in moduleCache.sass

[isaacqian]

My project is a pure html project. I want to render vue sfc according data from api. Insert sass.js by <script src="./libs/sass/sass.js"></script>; First I use sass.js to compile in renderSync function like below:

var sass = new Sass();
const options = {
    moduleCache: {
            vue: Vue,
            sass: {
                renderSync(args) {
                    const { data, file, filename, outFile, sourceMap } = args;
                    return new Promise((reslove, reject) => {
                        sass.compile(data, function (result) {
                            reslove({
                                css: result.text,
                                stats: {}
                            });
                        });
                    });
                }
            }
        },
    },
    ...
};

Then if I try to return some test scss code, it works. like beow:

var sass = new Sass();
const options = {
    moduleCache: {
            vue: Vue,
            sass: {
                renderSync(args) {
                    return {
                        css: '.chart-con{background:#f00}',
                        stats: {}
                    }
                }
            }
        },
    },
    ...
};

This means that renderSync function must return sync。 So I then search if sass.js can compile sync, but it seems impossible. Is there any other sass lib can do job like sass.js. The form is like this beolow:

// my expected form
let cssstr = sasslib.compile(sassstr);
...

I would be happy if anyone can provide some suggestions.

[isaacqian]

[solved] I rebuild vue3-sfc-loader without compress. And modify call stack of renderSync function with async await