From 411181392c72789cf8869b96fdc2d5af596d1580 Mon Sep 17 00:00:00 2001
From: Valeriy Sidorenko <balepas@yandex-team.ru>
Date: Tue, 31 Oct 2023 12:03:05 +0100
Subject: [PATCH] fix(build-lib): replace deprecated sass api with a new one

---
 package-lock.json           |  8 +++---
 package.json                |  2 +-
 src/common/library/index.ts | 50 +++++++++++++++++++++++--------------
 3 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b5226d6..b9e4565 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -66,7 +66,7 @@
         "react-refresh": "^0.14.0",
         "resolve-url-loader": "^5.0.0",
         "rimraf": "^5.0.1",
-        "sass": "^1.62.1",
+        "sass": "^1.69.0",
         "sass-loader": "^13.3.2",
         "semver": "^7.5.4",
         "signal-exit": "^4.1.0",
@@ -16986,9 +16986,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
-      "version": "1.63.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.4.tgz",
-      "integrity": "sha512-Sx/+weUmK+oiIlI+9sdD0wZHsqpbgQg8wSwSnGBjwb5GwqFhYNwwnI+UWZtLjKvKyFlKkatRK235qQ3mokyPoQ==",
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
diff --git a/package.json b/package.json
index d116355..067d01b 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,7 @@
     "react-refresh": "^0.14.0",
     "resolve-url-loader": "^5.0.0",
     "rimraf": "^5.0.1",
-    "sass": "^1.62.1",
+    "sass": "^1.69.0",
     "sass-loader": "^13.3.2",
     "semver": "^7.5.4",
     "signal-exit": "^4.1.0",
diff --git a/src/common/library/index.ts b/src/common/library/index.ts
index 91e2cc2..fb1b6ec 100644
--- a/src/common/library/index.ts
+++ b/src/common/library/index.ts
@@ -1,6 +1,7 @@
 import * as path from 'node:path';
 import * as fs from 'node:fs';
 import * as childProcess from 'node:child_process';
+import {fileURLToPath, pathToFileURL} from 'node:url';
 import * as babel from '@babel/core';
 import {globStream} from 'fast-glob';
 import {rimraf} from 'rimraf';
@@ -146,35 +147,46 @@ function compileStyles(
             const sourceMapFile = getFilePath(file, {dir: outputDir, ext: 'css.map'});
 
             try {
-                const sassTransformed = sass.renderSync({
-                    file: scssFile,
+                const sassTransformed = sass.compile(scssFile, {
                     sourceMap: true,
-                    sourceMapContents: true,
-                    outFile: cssFile,
-                    importer: (url) => {
-                        if (url.startsWith('~')) {
-                            return {file: path.resolve(paths.appNodeModules, url.replace('~', ''))};
-                        }
-
-                        return new Error(`Unrecognized import ${url} in ${origScssFile}`);
-                    },
+                    sourceMapIncludeSources: true,
+                    importers: [
+                        {
+                            findFileUrl(url) {
+                                if (url.startsWith('~')) {
+                                    return pathToFileURL(
+                                        getFilePath(url.substring(1), {dir: paths.appNodeModules}),
+                                    );
+                                }
+                                throw new Error(`Unrecognized import ${url} in ${origScssFile}`);
+                            },
+                        },
+                    ],
                 });
 
-                if (sassTransformed?.css) {
+                if (sassTransformed.css) {
+                    const sourceMap = sassTransformed.sourceMap;
+                    if (sourceMap) {
+                        sourceMap.sources = sourceMap.sources.map((url) => {
+                            return path.relative(path.dirname(scssFile), fileURLToPath(url));
+                        });
+                    }
                     const postcssTransformed = await postcss([
                         postcssPresetEnv({enableClientSidePolyfills: false}),
                     ]).process(sassTransformed.css, {
-                        to: cssFile.split('/').pop(),
-                        map: {prev: sassTransformed.map?.toString(), inline: false},
+                        to: path.basename(cssFile),
+                        from: path.basename(scssFile),
+                        map: {prev: sourceMap, inline: false},
                     });
-                    fs.writeFileSync(cssFile, postcssTransformed.css);
 
+                    let css = postcssTransformed.css;
                     if (postcssTransformed.map) {
-                        fs.writeFileSync(
-                            sourceMapFile,
-                            JSON.stringify(postcssTransformed.map.toJSON()),
-                        );
+                        const finalSourceMap = postcssTransformed.map.toJSON();
+                        finalSourceMap.sourceRoot = '';
+                        fs.writeFileSync(sourceMapFile, JSON.stringify(finalSourceMap));
+                        css += `\n/*# sourceMappingURL=${path.basename(sourceMapFile)} */`;
                     }
+                    fs.writeFileSync(cssFile, css);
                 }
             } catch (sassErr) {
                 logger.error(`Style compilation errors for ${scssFile}`);