Use dart based sass in Portal and Stories

.ncurc.json

@@ -1,3 +1,3 @@
 {
-  "reject": ["node-sass"]
+  "reject": []
 }

packages/dnb-design-system-portal/.ncurc.json

@@ -1,3 +1,3 @@
 {
-  "reject": ["eslint", "node-sass", "ora"]
+  "reject": ["eslint", "ora"]
 }

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'),
             })
           : [],
     },

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",

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

packages/dnb-eufemia-sandbox/.ncurc.json

@@ -1,3 +1,3 @@
 {
-  "reject": ["node-sass", "sass-loader"]
+  "reject": ["sass-loader"]
 }

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"
   },

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",

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'))

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)

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)

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;

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 {

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"