feat(build): replace node-sass with dart-sass (#1934)

* chore: make dart sass work with jest

* chore: make dart sass work with build

* docs: remove info about node-sass

* chore: update snapshots

* chore: make stylelint run work properly after removing node-sass

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

@@ -23,8 +23,8 @@
     "lint:ci": "NODE_ENV=test yarn lint:js && yarn lint:styles",
     "lint:js": "yarn lint --fix",
     "lint:js:staged": "eslint --quiet --fix",
-    "lint:styles": "stylelint './src/**/*.{js,scss}'",
-    "lint:styles:staged": "stylelint './src/**/*.{js,scss}'",
+    "lint:styles": "stylelint './src/**/{Examples.*,*.scss}'",
+    "lint:styles:staged": "stylelint './src/**/{Examples.*,*.scss}'",
     "reset": "yarn clean && rm -rf ./node_modules",
     "serve": "NODE_NO_WARNINGS=1 gatsby serve -p 8000",
     "start": "NODE_NO_WARNINGS=1 cross-env gatsby develop",

packages/dnb-design-system-portal/src/docs/contribute/faq.md

@@ -17,21 +17,6 @@ LINT_STAGED=1
 
 ## Dependency issues
 
-### node-sass vs sass
-
-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
-  Module not found: TypeError: Cannot read property 'indexOf' of
-  undefined
-  ```
-
 ### puppeteer
 
 - When upgrading to a newer version than v8, puppeteer behaves inconsistent. Sometimes the content is just tiny bit off. But most importantly, > v10.4 is very inconsistent and off running on the GitHub Actions maxOS.

packages/dnb-eufemia/package.json

@@ -56,8 +56,8 @@
     "lint:js": "yarn lint --fix",
     "lint:js:staged": "eslint --quiet --fix",
     "lint:lockfile": "yarn lockfile-lint --path ../../yarn.lock --type yarn --validate-https --allowed-hosts yarn github.com codeload.github.com",
-    "lint:styles": "stylelint './src/**/*.{js,scss}'",
-    "lint:styles:staged": "stylelint './{src,scripts}/**/*.{js,scss}'",
+    "lint:styles": "stylelint './src/**/*{.stories.*,.scss}'",
+    "lint:styles:staged": "stylelint './src/**/*{.stories.*,.scss}'",
     "make-properties": "babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/makeProperties",
     "publish:ci": "yarn publish:prepare && ./scripts/postbuild/publish-release.sh",
     "publish:dry": "dotenv semantic-release --no-ci --dry-run",
@@ -211,8 +211,6 @@
     "markdown-tables-to-json": "0.1.7",
     "mkdirp": "1.0.4",
     "mock-match-media": "0.3.0",
-    "node-sass": "5.0.0",
-    "node-sass-once-importer": "5.3.2",
     "nodemon": "2.0.15",
     "opentype.js": "1.3.4",
     "ora": "5.4.1",
@@ -235,7 +233,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": "1.57.1",
     "sass-loader": "10.2.0",
     "semantic-release": "19.0.3",
     "simple-commit-message": "4.1.3",

packages/dnb-eufemia/scripts/prebuild/tasks/makeLibStyles.js

@@ -4,7 +4,7 @@
  */
 
 import gulp from 'gulp'
-import sass from 'node-sass'
+import sass from 'sass'
 import clone from 'gulp-clone'
 import rename from 'gulp-rename'
 import transform from 'gulp-transform'

packages/dnb-eufemia/scripts/prebuild/tasks/makeMainStyle.js

@@ -4,8 +4,7 @@
  */
 
 import gulp from 'gulp'
-import sass from 'node-sass'
-import onceImporter from 'node-sass-once-importer'
+import sass from 'sass'
 import clone from 'gulp-clone'
 import rename from 'gulp-rename'
 import transform from 'gulp-transform'
@@ -35,9 +34,7 @@ export default async function makeMainStyle() {
   await asyncForEach(listWithThemesToProcess, async (themeFile) => {
     // in order to keep the folder structure, we have to add these asterisks
     themeFile = themeFile.replace('/style/themes/', '/style/**/themes/')
-    await runFactory(themeFile, {
-      importOnce: false,
-    })
+    await runFactory(themeFile)
   })
 
   const listWithPackagesToProcess = await globby(
@@ -56,7 +53,7 @@ export default async function makeMainStyle() {
 
 export const runFactory = (
   src,
-  { returnResult = false, returnFiles = false, importOnce = true } = {}
+  { returnResult = false, returnFiles = false } = {}
 ) =>
   new Promise((resolve, reject) => {
     log.start('> PrePublish: transforming main style')
@@ -68,14 +65,7 @@ export const runFactory = (
         .src(src, {
           cwd: ROOT_DIR,
         })
-        .pipe(
-          transform(
-            'utf8',
-            transformSass({
-              importer: importOnce ? [onceImporter()] : [],
-            })
-          )
-        )
+        .pipe(transform('utf8', transformSass()))
         .pipe(
           rename({
             extname: '.css',

packages/dnb-eufemia/scripts/prebuild/tasks/transformUtils.js

@@ -1,4 +1,5 @@
-import sass from 'node-sass'
+import path from 'path'
+import sass from 'sass'
 import postcss from 'postcss'
 import cssnano from 'cssnano'
 import { log } from '../../lib'
@@ -21,13 +22,30 @@ export const transformCssnano = (config) => async (content, file) => {
 export const transformSass = (config) => (content, file) => {
   log.info(`> PrePublish: sass process | ${file.path}`)
 
+  let before
+  if (typeof window !== 'undefined') {
+    before = window.location
+
+    delete window.location
+    window.location = {
+      href: 'file://',
+    }
+  }
+
+  const importPath1 = path.dirname(file.path)
+  const importPath2 = path.resolve(__dirname, '../../../src/style/core/')
+
   content = sass.renderSync({
-    data: content,
     file: file.path,
+    includePaths: [importPath1, importPath2], // use loadPaths for new API
     ...config,
   })
 
-  return content.css.toString()
+  if (typeof window !== 'undefined') {
+    window.location = before
+  }
+
+  return String(content.css)
 }
 
 export const transformPostcss = (config) => async (content, file) => {