From 298ccfa704d7a5492b2f32f980a95997cc547c29 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Mon, 21 Oct 2024 11:24:00 +0200 Subject: [PATCH] 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 | 3 +- apps/demo/package.json | 2 +- apps/storybook/main.ts | 3 +- apps/web-twig-demo/package.json | 2 +- apps/web-twig-demo/webpack.config.js | 6 +- packages/design-tokens/README.md | 44 ++++ packages/form-validations/package.json | 2 +- packages/web-react/package.json | 2 +- packages/web/package.json | 4 +- yarn.lock | 292 +++++++++++++++++++++---- 10 files changed, 312 insertions(+), 48 deletions(-) diff --git a/apps/demo/config/vite/app.ts b/apps/demo/config/vite/app.ts index 49194b99d1..c28f377ac6 100644 --- a/apps/demo/config/vite/app.ts +++ b/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'), ], diff --git a/apps/demo/package.json b/apps/demo/package.json index f0d5fd8fc4..95cf5293ef 100644 --- a/apps/demo/package.json +++ b/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", diff --git a/apps/storybook/main.ts b/apps/storybook/main.ts index 911aed81f4..9d4dbe48d2 100644 --- a/apps/storybook/main.ts +++ b/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'), ], diff --git a/apps/web-twig-demo/package.json b/apps/web-twig-demo/package.json index 771a52be3c..8288e465bd 100644 --- a/apps/web-twig-demo/package.json +++ b/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", diff --git a/apps/web-twig-demo/webpack.config.js b/apps/web-twig-demo/webpack.config.js index edebab22ee..f109720345 100644 --- a/apps/web-twig-demo/webpack.config.js +++ b/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', diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md index bd2e454023..e06fa45335 100644 --- a/packages/design-tokens/README.md +++ b/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'), + ], + }, + }, + }, + ], + }, + ]; +} +// … +``` + + + +##### 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`. + +
+Webpack and sass-embedded: + +```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 diff --git a/packages/form-validations/package.json b/packages/form-validations/package.json index 9f39dae3cd..260a0f0cc9 100644 --- a/packages/form-validations/package.json +++ b/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", diff --git a/packages/web-react/package.json b/packages/web-react/package.json index 2685db85ee..8d31e6da0b 100644 --- a/packages/web-react/package.json +++ b/packages/web-react/package.json @@ -74,7 +74,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", diff --git a/packages/web/package.json b/packages/web/package.json index d5633f3b3b..bf08bebd71 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -74,7 +74,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", @@ -83,7 +83,7 @@ "typescript": "5.6.2" }, "peerDependencies": { - "sass": ">=1.57.0 < 2" + "sass-embedded": ">=1.57.0 < 2" }, "peerDependenciesMeta": { "sass": { diff --git a/yarn.lock b/yarn.lock index af3b9f3632..1fe14cb2e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2827,6 +2827,13 @@ __metadata: languageName: node linkType: hard +"@bufbuild/protobuf@npm:^2.0.0": + version: 2.2.0 + resolution: "@bufbuild/protobuf@npm:2.2.0" + checksum: 10/edef9d0daa77206720248e341f29f2503993c7afc4b9a3036115d75f7fb11b3921d8659a44a105f765b091d3484da7a7fa64ada88690dc1b53bd5aabe4145917 + languageName: node + linkType: hard + "@bugsnag/browser@npm:^7.25.0": version: 7.25.0 resolution: "@bugsnag/browser@npm:7.25.0" @@ -4740,7 +4747,7 @@ __metadata: npm-run-all2: "npm:6.2.3" postcss: "npm:8.4.47" rollup: "npm:4.24.0" - sass: "npm:1.79.5" + sass-embedded: "npm:1.79.5" sass-true: "npm:8.1.0" shx: "npm:0.3.4" typescript: "npm:5.6.3" @@ -4806,7 +4813,7 @@ __metadata: "@types/jest": "npm:29.5.13" jest: "npm:29.7.0" npm-run-all: "npm:4.1.5" - sass: "npm:1.79.5" + sass-embedded: "npm:1.79.5" shx: "npm:0.3.4" tslib: "npm:2.7.0" typescript: "npm:5.6.2" @@ -4910,7 +4917,7 @@ __metadata: react-transition-group: "npm:^4.4.5" recast: "npm:0.23.9" rollup: "npm:4.24.0" - sass: "npm:1.79.5" + sass-embedded: "npm:1.79.5" shx: "npm:0.3.4" terser-webpack-plugin: "npm:5.3.10" ts-loader: "npm:9.5.1" @@ -4960,7 +4967,7 @@ __metadata: postcss: "npm:8.4.47" postcss-cli: "npm:11.0.0" rollup: "npm:4.24.0" - sass: "npm:1.79.5" + sass-embedded: "npm:1.79.5" sass-true: "npm:8.1.0" shx: "npm:0.3.4" stylelint: "npm:16.10.0" @@ -4968,7 +4975,7 @@ __metadata: tslib: "npm:2.7.0" typescript: "npm:5.6.2" peerDependencies: - sass: ">=1.57.0 < 2" + sass-embedded: ">=1.57.0 < 2" peerDependenciesMeta: sass: optional: true @@ -11202,6 +11209,13 @@ __metadata: languageName: node linkType: hard +"buffer-builder@npm:^0.2.0": + version: 0.2.0 + resolution: "buffer-builder@npm:0.2.0" + checksum: 10/16bd9eb8ac6630a05441bcb56522e956ae6a0724371ecc49b9a6bc10d35690489140df73573d0577e1e85c875737e560a4e2e67521fddd14714ddf4e0097d0ec + languageName: node + linkType: hard + "buffer-crc32@npm:^1.0.0": version: 1.0.0 resolution: "buffer-crc32@npm:1.0.0" @@ -11693,15 +11707,6 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:^4.0.0": - version: 4.0.1 - resolution: "chokidar@npm:4.0.1" - dependencies: - readdirp: "npm:^4.0.1" - checksum: 10/62749d2173a60cc5632d6c6e0b7024f33aadce47b06d02e55ad03c7b8daaaf2fc85d4296c047473d04387fd992dab9384cc5263c70a3dc3018b7ebecfb5b5217 - languageName: node - linkType: hard - "chownr@npm:^1.1.1": version: 1.1.4 resolution: "chownr@npm:1.1.4" @@ -12096,6 +12101,13 @@ __metadata: languageName: node linkType: hard +"colorjs.io@npm:^0.5.0": + version: 0.5.2 + resolution: "colorjs.io@npm:0.5.2" + checksum: 10/a6f6345865b177d19481008cb299c46ec9ff1fd206f472cd9ef69ddbca65832c81237b19fdcd24f3f9540c3e6343a22eb486cd800f5eab9815ce7c98c16a0f0e + languageName: node + linkType: hard + "colors-option@npm:^3.0.0": version: 3.0.0 resolution: "colors-option@npm:3.0.0" @@ -25388,13 +25400,6 @@ __metadata: languageName: node linkType: hard -"readdirp@npm:^4.0.1": - version: 4.0.2 - resolution: "readdirp@npm:4.0.2" - checksum: 10/4ef93103307c7d5e42e78ecf201db58c984c4d66882a27c956250478b49c2444b1ff6aea8ce0f5e4157b2c07ce2fe870ad16c92ebd7c6ff30391ded6e42b9873 - languageName: node - linkType: hard - "real-require@npm:^0.2.0": version: 0.2.0 resolution: "real-require@npm:0.2.0" @@ -26988,7 +26993,7 @@ __metadata: languageName: node linkType: hard -"rxjs@npm:^7.5.5": +"rxjs@npm:^7.4.0, rxjs@npm:^7.5.5": version: 7.8.1 resolution: "rxjs@npm:7.8.1" dependencies: @@ -27073,6 +27078,224 @@ __metadata: languageName: node linkType: hard +"sass-embedded-android-arm64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-android-arm64@npm:1.79.5" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + +"sass-embedded-android-arm@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-android-arm@npm:1.79.5" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + +"sass-embedded-android-ia32@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-android-ia32@npm:1.79.5" + conditions: os=android & cpu=ia32 + languageName: node + linkType: hard + +"sass-embedded-android-riscv64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-android-riscv64@npm:1.79.5" + conditions: os=android & cpu=riscv64 + languageName: node + linkType: hard + +"sass-embedded-android-x64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-android-x64@npm:1.79.5" + conditions: os=android & cpu=x64 + languageName: node + linkType: hard + +"sass-embedded-darwin-arm64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-darwin-arm64@npm:1.79.5" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"sass-embedded-darwin-x64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-darwin-x64@npm:1.79.5" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"sass-embedded-linux-arm64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-linux-arm64@npm:1.79.5" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + +"sass-embedded-linux-arm@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-linux-arm@npm:1.79.5" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"sass-embedded-linux-ia32@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-linux-ia32@npm:1.79.5" + conditions: os=linux & cpu=ia32 + languageName: node + linkType: hard + +"sass-embedded-linux-musl-arm64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-linux-musl-arm64@npm:1.79.5" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + +"sass-embedded-linux-musl-arm@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-linux-musl-arm@npm:1.79.5" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"sass-embedded-linux-musl-ia32@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-linux-musl-ia32@npm:1.79.5" + conditions: os=linux & cpu=ia32 + languageName: node + linkType: hard + +"sass-embedded-linux-musl-riscv64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-linux-musl-riscv64@npm:1.79.5" + conditions: os=linux & cpu=riscv64 + languageName: node + linkType: hard + +"sass-embedded-linux-musl-x64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-linux-musl-x64@npm:1.79.5" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + +"sass-embedded-linux-riscv64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-linux-riscv64@npm:1.79.5" + conditions: os=linux & cpu=riscv64 + languageName: node + linkType: hard + +"sass-embedded-linux-x64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-linux-x64@npm:1.79.5" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + +"sass-embedded-win32-arm64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-win32-arm64@npm:1.79.5" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"sass-embedded-win32-ia32@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-win32-ia32@npm:1.79.5" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"sass-embedded-win32-x64@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded-win32-x64@npm:1.79.5" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"sass-embedded@npm:1.79.5": + version: 1.79.5 + resolution: "sass-embedded@npm:1.79.5" + dependencies: + "@bufbuild/protobuf": "npm:^2.0.0" + buffer-builder: "npm:^0.2.0" + colorjs.io: "npm:^0.5.0" + immutable: "npm:^4.0.0" + rxjs: "npm:^7.4.0" + sass-embedded-android-arm: "npm:1.79.5" + sass-embedded-android-arm64: "npm:1.79.5" + sass-embedded-android-ia32: "npm:1.79.5" + sass-embedded-android-riscv64: "npm:1.79.5" + sass-embedded-android-x64: "npm:1.79.5" + sass-embedded-darwin-arm64: "npm:1.79.5" + sass-embedded-darwin-x64: "npm:1.79.5" + sass-embedded-linux-arm: "npm:1.79.5" + sass-embedded-linux-arm64: "npm:1.79.5" + sass-embedded-linux-ia32: "npm:1.79.5" + sass-embedded-linux-musl-arm: "npm:1.79.5" + sass-embedded-linux-musl-arm64: "npm:1.79.5" + sass-embedded-linux-musl-ia32: "npm:1.79.5" + sass-embedded-linux-musl-riscv64: "npm:1.79.5" + sass-embedded-linux-musl-x64: "npm:1.79.5" + sass-embedded-linux-riscv64: "npm:1.79.5" + sass-embedded-linux-x64: "npm:1.79.5" + sass-embedded-win32-arm64: "npm:1.79.5" + sass-embedded-win32-ia32: "npm:1.79.5" + sass-embedded-win32-x64: "npm:1.79.5" + supports-color: "npm:^8.1.1" + varint: "npm:^6.0.0" + dependenciesMeta: + sass-embedded-android-arm: + optional: true + sass-embedded-android-arm64: + optional: true + sass-embedded-android-ia32: + optional: true + sass-embedded-android-riscv64: + optional: true + sass-embedded-android-x64: + optional: true + sass-embedded-darwin-arm64: + optional: true + sass-embedded-darwin-x64: + optional: true + sass-embedded-linux-arm: + optional: true + sass-embedded-linux-arm64: + optional: true + sass-embedded-linux-ia32: + optional: true + sass-embedded-linux-musl-arm: + optional: true + sass-embedded-linux-musl-arm64: + optional: true + sass-embedded-linux-musl-ia32: + optional: true + sass-embedded-linux-musl-riscv64: + optional: true + sass-embedded-linux-musl-x64: + optional: true + sass-embedded-linux-riscv64: + optional: true + sass-embedded-linux-x64: + optional: true + sass-embedded-win32-arm64: + optional: true + sass-embedded-win32-ia32: + optional: true + sass-embedded-win32-x64: + optional: true + bin: + sass: dist/bin/sass.js + checksum: 10/ad5c5c71e500ec4992c2782586537202f1b2075992b7a528647864cd734d7fb461a020957338c59b5754c27e2cee4740ea69f65efee9b29aba40676e7e1441f1 + languageName: node + linkType: hard + "sass-loader@npm:14.2.1": version: 14.2.1 resolution: "sass-loader@npm:14.2.1" @@ -27118,20 +27341,6 @@ __metadata: languageName: node linkType: hard -"sass@npm:1.79.5": - version: 1.79.5 - resolution: "sass@npm:1.79.5" - dependencies: - "@parcel/watcher": "npm:^2.4.1" - chokidar: "npm:^4.0.0" - immutable: "npm:^4.0.0" - source-map-js: "npm:>=0.6.2 <2.0.0" - bin: - sass: sass.js - checksum: 10/86f6ebe9c3c8d86cf8fff2e12f93109697140090604fb6180c8792c0e4fc98377c433dbd4c86a0272c47ba4c307edf24435a06d7e5995956048a23f9e187fedc - languageName: node - linkType: hard - "sax@npm:~1.2.4": version: 1.2.4 resolution: "sax@npm:1.2.4" @@ -27675,7 +27884,7 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1": +"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1": version: 1.2.1 resolution: "source-map-js@npm:1.2.1" checksum: 10/ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3 @@ -28652,7 +28861,7 @@ __metadata: languageName: node linkType: hard -"supports-color@npm:^8.0.0, supports-color@npm:~8.1.1": +"supports-color@npm:^8.0.0, supports-color@npm:^8.1.1, supports-color@npm:~8.1.1": version: 8.1.1 resolution: "supports-color@npm:8.1.1" dependencies: @@ -30559,6 +30768,13 @@ __metadata: languageName: node linkType: hard +"varint@npm:^6.0.0": + version: 6.0.0 + resolution: "varint@npm:6.0.0" + checksum: 10/7684113c9d497c01e40396e50169c502eb2176203219b96e1c5ac965a3e15b4892bd22b7e48d87148e10fffe638130516b6dbeedd0efde2b2d0395aa1772eea7 + languageName: node + linkType: hard + "vary@npm:~1.1.2": version: 1.1.2 resolution: "vary@npm:1.1.2"