From a1966b8aed26de4a544d2de9393318377654bb3a Mon Sep 17 00:00:00 2001
From: Ben Scott <ben.scott@shopify.com>
Date: Mon, 24 Jan 2022 15:49:47 -0800
Subject: [PATCH] Improve error message if sass fails to compile

Sass errors shall now show a callstack of what triggered the error
---
 UNRELEASED.md                  |  2 ++
 config/rollup/plugin-styles.js | 21 +++++++++++++--------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 0b8f4c99e1f..d9f82e1bb5a 100644
--- a/UNRELEASED.md
+++ b/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
diff --git a/config/rollup/plugin-styles.js b/config/rollup/plugin-styles.js
index fb140dd9f36..8f9cee48c70 100644
--- a/config/rollup/plugin-styles.js
+++ b/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})