chore(styles): quick win styles build improvement (#4114)

Using `sass-embedded` should improve performance of our sass builds a
bit and it's very easy to implement. Stayed with version 1.78.0 due to
additional deprecation warnings when updating to 1.81.0.

packages/documentation/package.json

@@ -76,7 +76,7 @@
     "rehype-autolink-headings": "7.1.0",
     "rehype-slug": "6.0.0",
     "rimraf": "6.0.1",
-    "sass": "1.78.0",
+    "sass-embedded": "1.78.0",
     "storybook": "8.2.7",
     "typescript": "5.5.4"
   }

packages/documentation/vite.config.js

@@ -23,4 +23,12 @@ export default {
     ],
     exclude: ['@swisspost/design-system-styles'],
   },
+  // https://www.oddbird.net/2024/08/14/sass-compiler/
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
 };

packages/styles/gulpfile.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 const gulp = require('gulp');
-const sass = require('sass');
+const sass = require('sass-embedded');
 const newer = require('gulp-newer');
 const gulpSass = require('gulp-sass')(sass);
 const sourcemaps = require('gulp-sourcemaps');

packages/styles/package.json

@@ -64,7 +64,7 @@
     "postcss-scss": "4.0.9",
     "prettier": "3.3.3",
     "rimraf": "6.0.1",
-    "sass": "1.78.0",
+    "sass-embedded": "1.78.0",
     "stylelint": "16.9.0",
     "stylelint-config-sass-guidelines": "11.1.0",
     "stylelint-prettier": "5.0.2",