Merge pull request #578 from danskernesdigitalebibliotek/replace-node…

…-sass-with-sass

Replaced node-sass with sass

package.json

@@ -51,6 +51,7 @@
     "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "@csstools/postcss-sass": "^5.0.1",
     "@cypress/browserify-preprocessor": "^3.0.2",
     "@cypress/code-coverage": "^3.9.12",
     "@graphql-codegen/add": "^3.1.1",
@@ -111,7 +112,6 @@
     "istanbul-lib-coverage": "^3.2.0",
     "markdownlint-cli2": "^0.4.0",
     "mutationobserver-shim": "^0.3.7",
-    "node-sass": "^7.0.1",
     "nyc": "^15.1.0",
     "orval": "^6.8.1",
     "postcss": "^8.4.31",
@@ -120,6 +120,7 @@
     "postcss-scss": "^4.0.8",
     "prettier": "^2.6.2",
     "replace-in-file": "^6.3.2",
+    "sass": "^1.69.0",
     "source-map-support": "^0.5.21",
     "style-loader": "^3.3.1",
     "stylelint": "^15.10.3",

postcss.config.js

@@ -1,14 +1,14 @@
 const autoprefixer = require("autoprefixer");
 const cssnano = require("cssnano");
-const nodesass = require("./scripts/postcss-node-sass");
+const postcssSass = require("@csstools/postcss-sass");
 
 module.exports = (ctx) => {
   const production = ctx.env === "production";
   return {
     parser: "postcss-scss",
     map: ctx.options.map,
     plugins: [
-      nodesass({
+      postcssSass({
         // We always want to inject all of our variables and mixins.
         // There is not to be any actual output from _system.scss.
         data: '@import "./src/components/design-system/_system.scss";'