Improve error message if sass fails to compile (#4954)

Sass errors shall now show a callstack of what triggered the error

Author: BPScott

UNRELEASED.md

@@ -17,6 +17,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 
 ### Development workflow
 
+- Improve error logging in the event of sass errors. ([#4954](https://github.com/Shopify/polaris-react/pull/4954))
+
 ### Dependency upgrades
 
 ### Code quality

config/rollup/plugin-styles.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const {promisify} = require('util');
 
 const {createFilter} = require('@rollup/pluginutils');
 const nodeSass = require('node-sass');
@@ -22,8 +21,6 @@ module.exports.styles = function styles({
 
   const filter = createFilter(include, exclude);
 
-  const renderSass = promisify(nodeSass.render);
-
   const styleProcessor = postcss([
     cssModules({
       ...modules,
@@ -148,11 +145,19 @@ module.exports.styles = function styles({
         return null;
       }
 
-      const sassOutput = await renderSass({
-        data: source,
-        outputStyle: 'compact',
-        includePaths: [path.dirname(id)],
-      }).then((result) => result.css.toString());
+      let sassOutput;
+      try {
+        sassOutput = nodeSass
+          .renderSync({
+            data: source,
+            file: id,
+            outputStyle: 'compact',
+            includePaths: [path.dirname(id)],
+          })
+          .css.toString();
+      } catch (err) {
+        throw new Error(err.formatted);
+      }
 
       const postCssOutput = await styleProcessor
         .process(sassOutput, {from: id})