From 28466f72177a690798b7e62639573dc467624726 Mon Sep 17 00:00:00 2001
From: Martin Pitt <martin@piware.de>
Date: Fri, 23 Jul 2021 07:24:35 +0200
Subject: [PATCH] webpack: Move from sassc to Dart sass

Fixes #475
---
 .github/workflows/livetest.yml.disabled |  2 +-
 package.json                            |  2 ++
 webpack.config.js                       | 38 ++++++++++++++-----------
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/livetest.yml.disabled b/.github/workflows/livetest.yml.disabled
index 3130783..37d4ea4 100644
--- a/.github/workflows/livetest.yml.disabled
+++ b/.github/workflows/livetest.yml.disabled
@@ -44,7 +44,7 @@ jobs:
       - name: Install dependencies
         run: |
           sudo apt update
-          sudo apt install -y cockpit-system cockpit-ws nodejs npm sassc make
+          sudo apt install -y cockpit-system cockpit-ws nodejs npm make
 
       - uses: actions/github-script@v3
         id: get-pr
diff --git a/package.json b/package.json
index 80c09e2..5480494 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,8 @@
     "mini-css-extract-plugin": "^0.11.0",
     "po2json": "^1.0.0-alpha",
     "qunit": "^2.9.3",
+    "sass": "^1.35.2",
+    "sass-loader": "^12.1.0",
     "sizzle": "^2.3.3",
     "stdio": "^2.1.0",
     "string-replace-loader": "^3.0.0",
diff --git a/webpack.config.js b/webpack.config.js
index e2caf5f..8b5aa1d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,4 @@
 const path = require("path");
-const childProcess = require('child_process');
 
 const copy = require("copy-webpack-plugin");
 const extract = require("mini-css-extract-plugin");
@@ -37,22 +36,11 @@ if (production) {
     }));
 }
 
-/* check if sassc is available, to avoid unintelligible error messages */
-try {
-    childProcess.execFileSync('sassc', ['--version'], { stdio: ['pipe', 'inherit', 'inherit'] });
-} catch (e) {
-    if (e.code === 'ENOENT') {
-        console.error("ERROR: You need to install the 'sassc' package to build this project.");
-        process.exit(1);
-    } else {
-        throw e;
-    }
-}
-
 module.exports = {
     mode: production ? 'production' : 'development',
     resolve: {
-        modules: [ nodedir ],
+        modules: [ nodedir, path.resolve(__dirname, 'src/lib') ],
+        alias: { 'font-awesome': path.resolve(nodedir, 'font-awesome-sass/assets/stylesheets') },
     },
     resolveLoader: {
         modules: [ nodedir, path.resolve(__dirname, 'src/lib') ],
@@ -90,7 +78,7 @@ module.exports = {
                         options: {
                             sourceMap: true,
                             url: false,
-                        }
+                        },
                     },
                     {
                         loader: 'string-replace-loader',
@@ -107,7 +95,15 @@ module.exports = {
                             ]
                         },
                     },
-                    'sassc-loader',
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            sourceMap: !production,
+                            sassOptions: {
+                                outputStyle: production ? 'compressed' : undefined,
+                            },
+                        },
+                    },
                 ]
             },
             {
@@ -122,7 +118,15 @@ module.exports = {
                             url: false
                         }
                     },
-                    'sassc-loader',
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            sourceMap: !production,
+                            sassOptions: {
+                                outputStyle: production ? 'compressed' : undefined,
+                            },
+                        },
+                    },
                 ]
             },
         ]