How to use the sass.renderSync function in sass

function scss(inFile, outFile) {
  const options = {
    file: inFile,
    includePaths: ["./website"],
  };
  let result = renderSync(options).css.toString("utf8");
  // Due to how parcel works, we have to include relative URLs in the sass
  // file website/main.scss
  // Example:
  //  background-image: url(./img/deleteButtonOutline.svg);
  // When bundle.scss is built in ./build/website/ it then can't resolve these
  // relative path names. Like if it's in /docs.
  // So just hack it here... All this should be replaced with parcel soon.
  result = result.replace(/.\/img\//g, "/static/img/");
  result = result.replace(/\(img\//g, "(/static/img/");
  result = result.replace(/\("img\//g, `("/static/img/`);
  console.log("scss", inFile, outFile);
  fs.writeFileSync(outFile, result);
}

const fs = require("fs-extra");
const sass = require("sass");

// This builds a customized version of materialize that doesn't override the parent
// site's styling.  To use, comment out
//
// @import "components/toast" 
// @import "components/navbar";
//
// in the source file (src/libs/...) and run this script.
var result = sass.renderSync({
  file: `src/libs/materialize-css/sass/materialize.scss`,
  outputStyle: 'compressed'
});

fs.writeFile(`src/assets/css/materialize.min.css`, result.css);

css,
        {
          syncImport: true,
          filename: fileName,
          ...(rendererOptions.less || {}),
        } as Less.Options,
        (error, output) => {
          if (error || output === undefined) throw error;
          transformedCss = output.css.toString();
        },
      );
    } else if (fileType === FileTypes.scss || fileType === FileTypes.sass) {
      const filePath = getFilePath(fileName);
      const { includePaths, ...sassOptions } = rendererOptions.sass || {};

      transformedCss = sass
        .renderSync({
          // NOTE: Solves an issue where tilde imports fail.
          // https://github.com/sass/dart-sass/issues/801
          // Will strip `~` from imports, unless followed by a slash.
          data: css.replace(/(@import ['"])~(?!\/)/gm, '$1'),
          indentedSyntax: fileType === FileTypes.sass,
          includePaths: [filePath, 'node_modules', ...(includePaths || [])],
          ...sassOptions,
        })
        .css.toString();
    } else {
      transformedCss = css;
    }

    const processedCss = processor.process(transformedCss, {
      from: fileName,

const fs = require('fs');
const util = require('util');
const sass = require('sass');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const postcss = require('postcss');

const writeFile = util.promisify(fs.writeFile);

// build css
const filePath = './src/ImageViewer.scss';
const css = sass.renderSync({ file: filePath }).css.toString();

async function compileCss () {
  const unminifiedCssPromise = postcss([autoprefixer]).process(css, { from: undefined });
  const minifiedCssPromise = postcss([cssnano, autoprefixer]).process(css, { from: undefined });
  const [unminifiedCss, minifiedCss] = await Promise.all([unminifiedCssPromise, minifiedCssPromise]);
  const distUnminified = writeFile('./dist/iv-viewer.css', unminifiedCss);
  const distMinified = writeFile('./dist/iv-viewer.min.css', minifiedCss);

  return Promise.all([distUnminified, distMinified]);
}

compileCss();

function compileSass(sassFile, cssFile, isDebug) {
	let result = sass.renderSync({
		sourceMap: false,
		file: sassFile,
		outputStyle: isDebug ? "expanded" : "compressed"
	});
	if (result && result.css) {
		result = result.css.toString();
		if (cssFile) {
			console.log("Compiling", cssFile);
			fs.writeFileSync(cssFile, result, "utf8");
		}
	} else {
		console.warn("No result from sass for ", sassFile);
	}
	return result;
}

promises.push(
                                                    zip
                                                        .file(`daudmod/${emitter}.json`)
                                                        .async("string")
                                                        .then((json) => {
                                                            ent.obj.emitter = [JSON.parse(json)];
                                                        })
                                                );
                                            }
                                        })(entry);
                                    }
                                    textureMapRules[0] = textureMapRules[0].concat(textureMapR);

                                    if (text3) {
                                        try {
                                            const ab = sass.renderSync({ data: text3 }).css.toString("utf8");
                                            const imagePromises = [];
                                            let cleansed = ab;
                                            let images = ab.match(/url\("\.\/?(.*?\.png)"\)/g);
                                            images = images ? images : [];
                                            const fixed = [];
                                            const fixedMap = [];
                                            const replacePairs = [];
                                            for (let imagen = 0; imagen < images.length; imagen++) {
                                                const imocc = images[imagen];
                                                const m = /url\("\.\/?(.*?\.png)"\)/g.exec(imocc);
                                                const imgurl = m[1] + "";
                                                if (debug) console.log(`theme css imagesss ${imgurl}`);
                                                if (fixed.indexOf(imgurl) > 0) {
                                                    replacePairs.push([imocc, fixed.indexOf(imgurl)]);
                                                } else {
                                                    fixed.push(imgurl);

}, map),
        }));
        const options = Object.assign({
            includePaths: ['node_modules'],
            importer: require('../sass-resolver/sass-resolver')(),
            indentWidth: 4,
            omitSourceMapUrl: true,
            outputStyle: 'expanded',
            sourceMap: true,
            sourceMapContents: true,
        }, opts, {
            data: css.css,
            file: result.opts.from,
            outFile: result.opts.to,
        });
        const sassResult = sass.renderSync(options);
        const parsed = await postcss.parse(sassResult.css.toString(), {
            from: result.opts.from,
            map: sassResult.map && {
                prev: JSON.parse(sassResult.map.toString()),
            },
        });
        result.root = parsed;

        const dependencies = await Promise.all(
            sassResult.stats.includedFiles.map(async (fileName) => {
                if (existsSync(fileName)) {
                    return fileName;
                }
                return null;
            })
        );

export async function compileSass(filePath: string) {
  const { css } = renderSync({ file: filePath });
  return css;
}

update() {
        if (!window.editor_markup) return

        let html = window.editor_markup.getValue()

        if (window.editor_style) {
            let data = window.editor_style.getValue()
            let res = {}

            try {
                res = sass.renderSync({ data, outputStyle: 'compressed' })
            } catch (err) {
                res.css = data
            }

            html = insertStyle(html, res.css)
        }
        if (window.editor_script) {
            let js = window.editor_script.getValue()
            html = insertScript(html, js)
        }

        if (true) {
            let content = ''
            if (window.require) {
                let fs = window.require('fs')
                content = fs.readFileSync(`${decodeURIComponent(_query.app_path)}/lib/babel.min.js`, 'utf8')

function parseScssIntoRules(scss) {
    return parseCssIntoRules(renderSync({ data: scss }).css.toString("utf8"));
}