diff --git a/package.json b/package.json
index 00e79676bb..45c14264be 100644
--- a/package.json
+++ b/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",
diff --git a/postcss.config.js b/postcss.config.js
index 588ff60d6e..e3c8a0a489 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,6 @@
 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";
@@ -8,7 +8,7 @@ module.exports = (ctx) => {
     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";'
diff --git a/scripts/postcss-node-sass.js b/scripts/postcss-node-sass.js
deleted file mode 100644
index ebece61be7..0000000000
--- a/scripts/postcss-node-sass.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * POSTCSS-NODE-SASS
- * A PostCSS plugin to parse styles with node-sass
- * https://github.com/arpadHegedus/postcss-node-sass/blob/master/index.js
- */
-
-const postcss = require("postcss");
-const defaultNodeSass = require("node-sass");
-
-/**
- * This plugin copies what the postcss node sass plugin does.
- * So the plugin is copied from the github repository mentioned above.
- * The only added feature is possibility for adding extra data (scss) as an argument
- * in postcss.config.js.
- *
- * This entry is added to the original plugin:
- * data: (opt.data || "") + css.css,
- *
- */
-module.exports = (opt) => ({
-  postcssPlugin: "postcss-node-sass",
-  Once(root, { result }) {
-    const sass = opt.sass || defaultNodeSass;
-    const map = typeof result.opts.map === "object" ? result.opts.map : {};
-    const css = root.toResult(
-      Object.assign(result.opts, {
-        map: {
-          annotation: false,
-          inline: false,
-          sourcesContent: true,
-          ...map
-        }
-      })
-    );
-    opt = {
-      indentWidth: 4,
-      omitSourceMapUrl: true,
-      outputStyle: "expanded",
-      sourceMap: true,
-      sourceMapContents: true,
-      ...opt,
-      data: (opt.data || "") + css.css,
-      file: result.opts.from,
-      outFile: result.opts.to
-    };
-    let includedFiles;
-    return new Promise((resolve, reject) =>
-      sass.render(opt, (err, res) => (err ? reject(err) : resolve(res)))
-    )
-      .then((res) => {
-        includedFiles = res.stats.includedFiles.filter(
-          (item, pos, array) => array.indexOf(item) === pos
-        );
-        return postcss.parse(res.css.toString(), {
-          from: result.opts.from,
-          map: {
-            prev: res.map ? JSON.parse(res.map.toString()) : ""
-          }
-        });
-      })
-      .then((res) => {
-        result.root = res;
-        result.messages = includedFiles.map((file) => ({
-          type: "dependency",
-          parent: result.opts.from,
-          file
-        }));
-      });
-  }
-});
-
-module.exports.postcss = true;