From e029dedcc06b6971ccbe001b17cc579b3d38511c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Thu, 28 Oct 2021 21:51:21 +0200
Subject: [PATCH] chore: use dart sass in Portal and Stories

---
 .ncurc.json                                   |  2 +-
 packages/dnb-design-system-portal/.ncurc.json |  2 +-
 .../dnb-design-system-portal/gatsby-config.js |  1 +
 .../dnb-design-system-portal/package.json     |  2 +-
 .../src/docs/uilib/development/issues.md      | 12 +++--
 packages/dnb-eufemia-sandbox/.ncurc.json      |  2 +-
 packages/dnb-eufemia-sandbox/package.json     |  2 +-
 packages/dnb-eufemia/package.json             |  1 +
 .../scripts/prepub/config/postcssConfig.js    | 13 +++--
 .../scripts/prepub/tasks/makeLibStyles.js     |  3 +-
 .../scripts/prepub/tasks/makeMainStyle.js     |  3 +-
 .../__snapshots__/DatePicker.test.js.snap     |  2 +-
 .../date-picker/style/_date-picker.scss       |  6 ++-
 yarn.lock                                     | 54 +++++++++++--------
 14 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/.ncurc.json b/.ncurc.json
index 98a19c28297..921b45cfcd7 100644
--- a/.ncurc.json
+++ b/.ncurc.json
@@ -1,3 +1,3 @@
 {
-  "reject": ["node-sass"]
+  "reject": []
 }
diff --git a/packages/dnb-design-system-portal/.ncurc.json b/packages/dnb-design-system-portal/.ncurc.json
index a2ffc9c2844..e4fc9c45a34 100644
--- a/packages/dnb-design-system-portal/.ncurc.json
+++ b/packages/dnb-design-system-portal/.ncurc.json
@@ -1,3 +1,3 @@
 {
-  "reject": ["eslint", "node-sass", "ora"]
+  "reject": ["eslint", "ora"]
 }
diff --git a/packages/dnb-design-system-portal/gatsby-config.js b/packages/dnb-design-system-portal/gatsby-config.js
index 440f2b3f329..40e626f0492 100644
--- a/packages/dnb-design-system-portal/gatsby-config.js
+++ b/packages/dnb-design-system-portal/gatsby-config.js
@@ -97,6 +97,7 @@ const plugins = [
         process.env.NODE_ENV === 'production'
           ? require('@dnb/eufemia/scripts/prepub/config/postcssConfig')({
               IE11: true,
+              sass: require('sass'),
             })
           : [],
     },
diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json
index c696a48f297..5107b15523b 100644
--- a/packages/dnb-design-system-portal/package.json
+++ b/packages/dnb-design-system-portal/package.json
@@ -111,7 +111,6 @@
     "jest-raw-loader": "1.0.1",
     "keycode": "2.2.0",
     "lint-staged": "11.1.2",
-    "node-sass": "5.0.0",
     "nodemon": "2.0.13",
     "ora": "5.4.1",
     "path-browserify": "1.0.1",
@@ -126,6 +125,7 @@
     "react-fake-props": "1.0.3",
     "react-live": "2.4.0",
     "react-markdown": "7.0.1",
+    "sass": "1.43.4",
     "start-server-and-test": "1.14.0",
     "stylelint": "13.13.1",
     "stylelint-config-prettier": "8.0.2",
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/development/issues.md b/packages/dnb-design-system-portal/src/docs/uilib/development/issues.md
index 758991d4f56..bdc227aeca9 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/development/issues.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/development/issues.md
@@ -8,12 +8,14 @@ order: 8
 
 ## Dependencies
 
-## sass
+## node-sass vs sass
 
-- Eufemia uses `node-sass` instead of `sass` (dart based) because we render sass during jest tests with `sass.renderSync` – even that should work with `sass` as well, it can't find the file it says.
-- We use several places a module called `node-sass-once-importer`, that is compatible only with `node-sass`.
-- We use `sass-loader` v10 because `TypeError: this.getOptions is not a function`.
-- We use `node-sass` v5, else we get this error message during portal run:
+The Portal (documentations) uses dart based `sass`, while the bundle and build process of the package `@dnb/eufemia` uses `node-sass` – because:
+
+- we render sass styles during jest tests with `sass.renderSync` – even that should work with `sass` as well, it can't find the [file it says](https://github.com/sass/dart-sass/issues/710).
+- several places a module called `node-sass-once-importer` is used, that is compatible only with `node-sass`.
+- it uses `sass-loader` v10 because `TypeError: this.getOptions is not a function`.
+- it uses `node-sass` v5, else we get this error message during portal run:
 
   ```
   ERROR in polyfill
diff --git a/packages/dnb-eufemia-sandbox/.ncurc.json b/packages/dnb-eufemia-sandbox/.ncurc.json
index b489fc2573c..6184b962626 100644
--- a/packages/dnb-eufemia-sandbox/.ncurc.json
+++ b/packages/dnb-eufemia-sandbox/.ncurc.json
@@ -1,3 +1,3 @@
 {
-  "reject": ["node-sass", "sass-loader"]
+  "reject": ["sass-loader"]
 }
diff --git a/packages/dnb-eufemia-sandbox/package.json b/packages/dnb-eufemia-sandbox/package.json
index ef25ca5b396..a14127fb279 100644
--- a/packages/dnb-eufemia-sandbox/package.json
+++ b/packages/dnb-eufemia-sandbox/package.json
@@ -24,8 +24,8 @@
     "@storybook/react": "6.3.8",
     "@storybook/theming": "6.3.8",
     "css-loader": "5.2.7",
-    "node-sass": "5.0.0",
     "raw-loader": "4.0.2",
+    "sass": "1.43.4",
     "sass-loader": "10.2.0",
     "style-loader": "2.0.0"
   },
diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json
index a0e7db53a82..ec4d6f020c6 100644
--- a/packages/dnb-eufemia/package.json
+++ b/packages/dnb-eufemia/package.json
@@ -215,6 +215,7 @@
     "rollup-plugin-node-globals": "1.4.0",
     "rollup-plugin-size-snapshot": "0.12.0",
     "rollup-plugin-terser": "7.0.2",
+    "sass": "1.43.4",
     "sass-variable-parser": "1.2.2",
     "semantic-release": "17.4.7",
     "simple-commit-message": "4.1.3",
diff --git a/packages/dnb-eufemia/scripts/prepub/config/postcssConfig.js b/packages/dnb-eufemia/scripts/prepub/config/postcssConfig.js
index 94b7ef3955d..3dfc2dea277 100644
--- a/packages/dnb-eufemia/scripts/prepub/config/postcssConfig.js
+++ b/packages/dnb-eufemia/scripts/prepub/config/postcssConfig.js
@@ -5,10 +5,11 @@
  */
 
 const fs = require('fs')
-const sass = require('node-sass')
+const sassBin = require('sass')
+const os = require('os')
 const path = require('path')
 
-module.exports = ({ IE11 = false, ...options } = {}) => {
+module.exports = ({ IE11 = false, sass = sassBin, ...options } = {}) => {
   return [
     // preset-env processes the most of our old legacy browsers
     require('postcss-preset-env')({
@@ -19,7 +20,9 @@ module.exports = ({ IE11 = false, ...options } = {}) => {
       ),
       importFrom: [
         extractCSSProperties(
-          require.resolve('@dnb/eufemia/src/style/index.scss')
+          require.resolve('@dnb/eufemia/src/style/index.scss'),
+          null,
+          sass
         ),
       ],
       ...options,
@@ -56,13 +59,13 @@ module.exports = ({ IE11 = false, ...options } = {}) => {
   ].filter((i) => i)
 }
 
-function extractCSSProperties(file, opts = {}) {
+function extractCSSProperties(file, opts = {}, sass = sassBin) {
   try {
     const sassResult = sass.renderSync({
       file,
       ...opts,
     })
-    const tmpDir = String(require('os').tmpdir)
+    const tmpDir = String(os.tmpdir)
     const tmpFile = path.resolve(
       tmpDir,
       path.basename(file.replace('.scss', '.css'))
diff --git a/packages/dnb-eufemia/scripts/prepub/tasks/makeLibStyles.js b/packages/dnb-eufemia/scripts/prepub/tasks/makeLibStyles.js
index 3a18a91950f..3bbe1576058 100644
--- a/packages/dnb-eufemia/scripts/prepub/tasks/makeLibStyles.js
+++ b/packages/dnb-eufemia/scripts/prepub/tasks/makeLibStyles.js
@@ -4,6 +4,7 @@
  */
 
 import gulp from 'gulp'
+import sass from 'node-sass'
 import clone from 'gulp-clone'
 import rename from 'gulp-rename'
 import transform from 'gulp-transform'
@@ -67,7 +68,7 @@ export const runFactory = (
         .pipe(
           transform(
             'utf8',
-            transformPostcss(postcssConfig({ IE11: true }))
+            transformPostcss(postcssConfig({ IE11: true, sass }))
           )
         )
         .pipe(cloneSink)
diff --git a/packages/dnb-eufemia/scripts/prepub/tasks/makeMainStyle.js b/packages/dnb-eufemia/scripts/prepub/tasks/makeMainStyle.js
index afbfd3634ba..9e724d23c38 100644
--- a/packages/dnb-eufemia/scripts/prepub/tasks/makeMainStyle.js
+++ b/packages/dnb-eufemia/scripts/prepub/tasks/makeMainStyle.js
@@ -4,6 +4,7 @@
  */
 
 import gulp from 'gulp'
+import sass from 'node-sass'
 import onceImporter from 'node-sass-once-importer'
 import clone from 'gulp-clone'
 import rename from 'gulp-rename'
@@ -83,7 +84,7 @@ export const runFactory = (
         .pipe(
           transform(
             'utf8',
-            transformPostcss(postcssConfig({ IE11: true }))
+            transformPostcss(postcssConfig({ IE11: true, sass }))
           )
         )
         .pipe(cloneSink)
diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
index 2b6662624b4..5c705deec42 100644
--- a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
+++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -3477,7 +3477,7 @@ legend.dnb-form-label {
             box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
   .dnb-date-picker__day, .dnb-date-picker__labels__day {
     display: flex;
-    flex-basis: 14.28571%;
+    flex-basis: calc(1 / 7 * 100%);
     justify-content: center; }
   .dnb-date-picker__day {
     position: relative;
diff --git a/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss b/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss
index 70d4302ace8..ffa6f8f57e8 100644
--- a/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss
+++ b/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss
@@ -283,7 +283,7 @@
   &__day,
   &__labels__day {
     display: flex;
-    flex-basis: percentage(1 / 7);
+    flex-basis: calc(1 / 7 * 100%);
     justify-content: center;
   }
 
@@ -470,7 +470,9 @@
 
     &__day,
     &__labels__day {
-      flex-basis: percentage(1 / 7) - 0.8;
+      // math.div works only in dart sass
+      // flex-basis: math.div(1, 7) * 100% - 0.8;
+      flex-basis: 13.48571%;
     }
 
     &__day {
diff --git a/yarn.lock b/yarn.lock
index 109660a9ac8..4521fd115d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2034,6 +2034,7 @@ __metadata:
     rollup-plugin-node-globals: 1.4.0
     rollup-plugin-size-snapshot: 0.12.0
     rollup-plugin-terser: 7.0.2
+    sass: 1.43.4
     sass-variable-parser: 1.2.2
     semantic-release: 17.4.7
     simple-commit-message: 4.1.3
@@ -9516,6 +9517,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.2.2, chokidar@npm:^3.4.0, chokidar@npm:^3.4.1, chokidar@npm:^3.4.2, chokidar@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "chokidar@npm:3.5.2"
+  dependencies:
+    anymatch: ~3.1.2
+    braces: ~3.0.2
+    fsevents: ~2.3.2
+    glob-parent: ~5.1.2
+    is-binary-path: ~2.1.0
+    is-glob: ~4.0.1
+    normalize-path: ~3.0.0
+    readdirp: ~3.6.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: d1fda32fcd67d9f6170a8468ad2630a3c6194949c9db3f6a91b16478c328b2800f433fb5d2592511b6cb145a47c013ea1cce60b432b1a001ae3ee978a8bffc2d
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:^2.0.0, chokidar@npm:^2.0.4, chokidar@npm:^2.1.8":
   version: 2.1.8
   resolution: "chokidar@npm:2.1.8"
@@ -9539,25 +9559,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.2.2, chokidar@npm:^3.4.0, chokidar@npm:^3.4.1, chokidar@npm:^3.4.2, chokidar@npm:^3.5.2":
-  version: 3.5.2
-  resolution: "chokidar@npm:3.5.2"
-  dependencies:
-    anymatch: ~3.1.2
-    braces: ~3.0.2
-    fsevents: ~2.3.2
-    glob-parent: ~5.1.2
-    is-binary-path: ~2.1.0
-    is-glob: ~4.0.1
-    normalize-path: ~3.0.0
-    readdirp: ~3.6.0
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: d1fda32fcd67d9f6170a8468ad2630a3c6194949c9db3f6a91b16478c328b2800f433fb5d2592511b6cb145a47c013ea1cce60b432b1a001ae3ee978a8bffc2d
-  languageName: node
-  linkType: hard
-
 "chownr@npm:*, chownr@npm:^2.0.0":
   version: 2.0.0
   resolution: "chownr@npm:2.0.0"
@@ -12069,7 +12070,6 @@ __metadata:
     jest-raw-loader: 1.0.1
     keycode: 2.2.0
     lint-staged: 11.1.2
-    node-sass: 5.0.0
     nodemon: 2.0.13
     ora: 5.4.1
     path-browserify: 1.0.1
@@ -12088,6 +12088,7 @@ __metadata:
     react-live: 2.4.0
     react-markdown: 7.0.1
     react-router-dom: 5.3.0
+    sass: 1.43.4
     smoothscroll-polyfill: 0.4.4
     start-server-and-test: 1.14.0
     stylelint: 13.13.1
@@ -12114,11 +12115,11 @@ __metadata:
     "@storybook/react": 6.3.8
     "@storybook/theming": 6.3.8
     css-loader: 5.2.7
-    node-sass: 5.0.0
     prop-types: 15.7.2
     raw-loader: 4.0.2
     react: 17.0.2
     react-dom: 17.0.2
+    sass: 1.43.4
     sass-loader: 10.2.0
     style-loader: 2.0.0
   languageName: unknown
@@ -28715,6 +28716,17 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"sass@npm:1.43.4":
+  version: 1.43.4
+  resolution: "sass@npm:1.43.4"
+  dependencies:
+    chokidar: ">=3.0.0 <4.0.0"
+  bin:
+    sass: sass.js
+  checksum: 9af80105dabd32752c60b4557115832982cf1019c02c952db6a26c61a3e18dc95044c896685e6e9a6d6dd6643fc411ecf2ea4a8a431a8a08a7510a45d5a492ae
+  languageName: node
+  linkType: hard
+
 "sax@npm:>=0.6.0, sax@npm:^1.2.4, sax@npm:~1.2.4":
   version: 1.2.4
   resolution: "sax@npm:1.2.4"