From b7acb29df4acff2833672e0a4b5296d4d88c7dc4 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 20 Apr 2023 12:00:53 +0100
Subject: [PATCH] Ensure PostCSS outputs source maps for Sass sources
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We transform Sass sources (Autoprefixer only) but didn’t source map the changes
---
 shared/tasks/build/package.test.mjs |  6 ++++++
 shared/tasks/styles.mjs             | 25 +++++++++++++++++++------
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/shared/tasks/build/package.test.mjs b/shared/tasks/build/package.test.mjs
index 48302c8374..a48de1ee97 100644
--- a/shared/tasks/build/package.test.mjs
+++ b/shared/tasks/build/package.test.mjs
@@ -70,6 +70,12 @@ describe('package/', () => {
         return output
       }))
 
+      // Add Autoprefixer prefixes to all source '*.scss' files
+      .flatMap(mapPathTo(['**/*.scss'], ({ dir: requirePath, name }) => [
+        join(requirePath, `${name}.scss`),
+        join(requirePath, `${name}.scss.map`) // with source map
+      ]))
+
       // Replaces source component '*.yaml' with:
       // - `fixtures.json` fixtures for tests
       // - `macro-options.json` component options
diff --git a/shared/tasks/styles.mjs b/shared/tasks/styles.mjs
index 3a9d917ef3..89742b5180 100644
--- a/shared/tasks/styles.mjs
+++ b/shared/tasks/styles.mjs
@@ -43,10 +43,25 @@ export async function compileStylesheet ([modulePath, { srcPath, destPath, fileP
   let css
   let map
 
-  // Configure PostCSS
+  /**
+   * Configure PostCSS
+   *
+   * @type {import('postcss').ProcessOptions}
+   */
   const options = {
     from: moduleSrcPath,
-    to: moduleDestPath
+    to: moduleDestPath,
+
+    /**
+     * Always generate source maps for either:
+     *
+     * 1. PostCSS on Sass compiler result
+     * 2. PostCSS on Sass sources (Autoprefixer only)
+     */
+    map: {
+      annotation: true,
+      inline: false
+    }
   }
 
   // Compile Sass to CSS
@@ -79,10 +94,8 @@ export async function compileStylesheet ([modulePath, { srcPath, destPath, fileP
     }))
 
     // Pass source maps to PostCSS
-    options.map = {
-      annotation: true,
-      inline: false,
-      prev: map
+    if (typeof options.map === 'object') {
+      options.map.prev = map
     }
   }