A simple PoC inspired by Gutenberg's build process of compiling SCSS files in packages/blocks. I'm just exploring a way of build/watch SCSS files in a blocks library. https://github.com/WordPress/gutenberg/blob/cdeca67b63635cca295ba8f4874130c53f394ab0/bin/packages/build-worker.js#L83

buildSCSS.js

/**
 * External dependencies
 */
const { promisify } = require( 'util' );
const path = require( 'path' );
const makeDir = require( 'make-dir' );
const fs = require("fs");
const sass = require( 'sass' );
const postcss = require( 'postcss' );

/**
 * Promisified sass.render.
 *
 * @type {Function}
 */
const renderSass = promisify( sass.render );

/**
 * Promisified fs.readFile.
 *
 * @type {Function}
 */
const readFile = promisify( fs.readFile );

/**
 * Promisified fs.writeFile.
 *
 * @type {Function}
 */
const writeFile = promisify( fs.writeFile );

async function buildCSS( file ) {
	const srcFile = path.resolve(file + '.scss');
	const outputFile = path.resolve(file + '.css');

	const [ , contents ] = await Promise.all( [
		makeDir( path.dirname( srcFile ) ),
		readFile( srcFile, 'utf8' ),
	] );

	const builtSass = await renderSass( {
		file,
		data: ''.concat( '@use "sass:math";', contents ),
	} );

	const result = await postcss(
		require( '@wordpress/postcss-plugins-preset' )
	).process( builtSass.css, {
		from: 'src/app.css',
		to: 'dest/app.css',
	} );

	await Promise.all( [
		writeFile( outputFile, result.css ),
		// writeFile( outputFileRTL, resultRTL.css ), // we could also auto rtls
	] );

}

// plain simple example on how to call this on a specific file.
// it will compile style.scss into style.css
buildCSS('./src/assets/blocks/myblock/style');

package.json

{
  "scripts" => {
    "build-style": "node ./worker.js"
  },
  "devDependencies": {
    "@wordpress/postcss-plugins-preset": "^4.32.0",
    "postcss": "^8.4.32",
    "sass": "^1.69.5",
  }
}