🍕 Use dart-sass fallback for vueify sass compilation

When CLAYCLI_COMPILE_SCRIPTS_SKIP_STYLE_POSTCSS=true, compile vueify sass/scss blocks with the sass package so Browserify builds no longer fail on missing node-sass in staged rollout environments.

Made-with: Cursor

Author: jjpaulino

lib/cmd/compile/scripts.js

@@ -342,6 +342,41 @@ function buildScripts(entries, options = {}) {
     babel: babelConfig
   };
 
+  function compileSassWithDartSass(source, cb, compiler, filePath) {
+    let sass;
+    const includePaths = [path.dirname(filePath)];
+
+    try {
+      sass = require('sass');
+    } catch (e) {
+      cb(new Error('Sass styles require the "sass" package when CLAYCLI_COMPILE_SCRIPTS_SKIP_STYLE_POSTCSS=true'));
+      return;
+    }
+
+    try {
+      const sassOptions = Object.assign({
+        data: source,
+        file: filePath,
+        includePaths
+      }, compiler.options.sass || {});
+
+      sassOptions.includePaths = sassOptions.includePaths
+        ? sassOptions.includePaths.concat(includePaths)
+        : includePaths;
+
+      sass.render(sassOptions, (err, res) => {
+        if (err) {
+          cb(err);
+          return;
+        }
+
+        cb(null, res.css.toString());
+      });
+    } catch (e) {
+      cb(e);
+    }
+  }
+
   if (!skipVueStylePostcss) {
     vueifyTransformOptions.postcss = [
       cssImport(),
@@ -350,6 +385,14 @@ function buildScripts(entries, options = {}) {
       nested(),
       simpleVars()
     ];
+  } else {
+    // Vueify's default sass/scss compiler requires node-sass.
+    // During staged rollout we intentionally skip this postcss path and
+    // compile sass/scss with dart-sass to avoid node-sass runtime failures.
+    vueifyTransformOptions.customCompilers = {
+      sass: compileSassWithDartSass,
+      scss: compileSassWithDartSass
+    };
   }
 
   bundler.require(entries)