Deps(web, web-react, web-twig): Implement sass-embedded library

- use sass-embedded instead of sass
- @see https://sass-lang.com/documentation/breaking-changes/legacy-js-api/#bundlers

apps/demo/config/vite/app.ts

@@ -57,7 +57,8 @@ export default defineConfig({
     postcss: resolve(__dirname, 'config'),
     preprocessorOptions: {
       scss: {
-        includePaths: [
+        api: 'modern-compiler',
+        loadPaths: [
           join(pathRelativeToRepositoryRoot, 'node_modules'),
           join(pathRelativeToRepositoryRoot, 'node_modules/@lmc-eu/spirit-design-tokens/src/scss'),
         ],

apps/demo/package.json

@@ -25,7 +25,7 @@
     "npm-run-all2": "6.2.3",
     "postcss": "8.4.47",
     "rollup": "4.24.0",
-    "sass": "1.79.5",
+    "sass-embedded": "1.79.5",
     "sass-true": "8.1.0",
     "shx": "0.3.4",
     "typescript": "5.6.3",

apps/storybook/main.ts

@@ -30,7 +30,8 @@ const config: StorybookConfig = {
         postcss: resolve(__dirname, 'config'),
         preprocessorOptions: {
           scss: {
-            includePaths: [
+            api: 'modern-compiler',
+            loadPaths: [
               resolve(__dirname, '../../node_modules'),
               resolve(__dirname, '../../node_modules/@lmc-eu/spirit-design-tokens/src/scss'),
             ],

apps/web-twig-demo/package.json

@@ -19,7 +19,7 @@
     "core-js": "3.38.1",
     "regenerator-runtime": "0.14.1",
     "sass-loader": "14.2.1",
-    "sass": "1.79.5",
+    "sass-embedded": "1.79.5",
     "ts-loader": "9.5.1",
     "typescript": "5.6.3",
     "webpack-cli": "5.1.4",

apps/web-twig-demo/webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 // eslint-disable-next-line import/no-unresolved
 const Encore = require('@symfony/webpack-encore');
 // eslint-disable-next-line import/no-extraneous-dependencies
-const sass = require('sass');
+const sass = require('sass-embedded');
 
 // Manually configure the runtime environment if not already configured yet by the "encore" command.
 // It's useful when you use tools that rely on webpack.config.js file.
@@ -73,8 +73,10 @@ Encore
           // eslint-disable-next-line no-param-reassign
           options.implementation = sass;
           // eslint-disable-next-line no-param-reassign
+          options.api = 'modern-compiler';
+          // eslint-disable-next-line no-param-reassign
           options.sassOptions = {
-              includePaths: [
+              loadPaths: [
                 // used in docker image
                 './node_modules',
                 './node_modules/@lmc-eu/spirit-design-tokens/scss',

packages/design-tokens/README.md

@@ -157,6 +157,49 @@ module: {
               includePaths: [
                 path.resolve(__dirname, 'node_modules'),
                 path.resolve(__dirname, 'node_modules/@lmc-eu/spirit-design-tokens/scss'),
+              ],
+            },
+          },
+        },
+      ],
+    },
+  ];
+}
+// …
+```
+
+</details>
+
+##### Using the sass-embedded Library
+
+If you're using `sass-embedded`, you can specify the API as `legacy`, `modern`, or `modern-compiler`. More information can be found in [sass documentation](sass-embedded).
+
+We recommend using the `modern-compiler` option.
+Please note that this change also requires updating `includePaths` to `loadPaths`.
+
+<details>
+<summary>Webpack and <code>sass-embedded</code>:</summary>
+
+```javascript
+// webpack.config.js
+
+// …
+module: {
+  rules: [
+    {
+      test: /\.scss$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'sass-loader',
+          options: {
+            api: 'modern-compiler',
+            sassOptions: {
+              loadPaths: [
+                path.resolve(__dirname, 'node_modules'),
+                path.resolve(__dirname, 'node_modules/@lmc-eu/spirit-design-tokens/scss'),
+              ],
             },
           },
         },
@@ -287,3 +330,4 @@ See the [LICENSE](LICENSE.md) file for information.
 [`_typography.sass`]: src/scss/generated/_typography.scss
 [`spirit-web`]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web
 [migrate-to-spirit]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/CONTRIBUTING.md#migrating-your-components-to-spirit
+[sass-embedded]: https://sass-lang.com/documentation/breaking-changes/legacy-js-api/#bundlers

packages/form-validations/package.json

@@ -37,7 +37,7 @@
     "@types/jest": "29.5.13",
     "jest": "29.7.0",
     "npm-run-all": "4.1.5",
-    "sass": "1.79.5",
+    "sass-embedded": "1.79.5",
     "shx": "0.3.4",
     "tslib": "2.7.0",
     "typescript": "5.6.2",

packages/web-react/package.json

@@ -73,7 +73,7 @@
     "react-dom": "18.3.1",
     "recast": "0.23.9",
     "rollup": "4.24.0",
-    "sass": "1.79.5",
+    "sass-embedded": "1.79.5",
     "shx": "0.3.4",
     "terser-webpack-plugin": "5.3.10",
     "ts-loader": "9.5.1",

packages/web/package.json

@@ -73,7 +73,7 @@
     "postcss": "8.4.47",
     "postcss-cli": "11.0.0",
     "rollup": "4.24.0",
-    "sass": "1.79.5",
+    "sass-embedded": "1.79.5",
     "sass-true": "8.1.0",
     "shx": "0.3.4",
     "stylelint": "16.10.0",
@@ -82,7 +82,7 @@
     "typescript": "5.6.2"
   },
   "peerDependencies": {
-    "sass": ">=1.57.0 < 2"
+    "sass-embedded": ">=1.57.0 < 2"
   },
   "peerDependenciesMeta": {
     "sass": {