fix(sass): drop node-sass in favor of sass since it's deprecated

BREAKING CHANGE: `node-sass` is no longer supported and users must switch to `sass`

README.md

@@ -65,10 +65,10 @@ cd my-app
 > NOTE: You can also add the `--typescript` flag to bootstrap a react-app with
 > typescript support
 
-Next, install `react-md` and `node-sass`:
+Next, install `react-md` and `sass`:
 
 ```sh
-npm install --save react-md node-sass
+npm install --save react-md sass
 ```
 
 Next, create a `src/App.scss` file to include all the `react-md` styles and

examples/create-react-app-typescript/package.json

@@ -17,12 +17,12 @@
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.5",
-    "node-sass": "^4.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-md": "latest",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "sass": "^1.36.0",
     "typescript": "^4.0.3",
     "web-vitals": "^0.2.4"
   },

examples/create-react-app/package.json

@@ -12,12 +12,12 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.1.2",
     "@testing-library/user-event": "^12.2.2",
-    "node-sass": "^4.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-md": "latest",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "sass": "^1.36.0",
     "web-vitals": "^0.2.4"
   },
   "eslintConfig": {

examples/gatsby-typescript/package.json

@@ -22,7 +22,7 @@
     "gatsby-plugin-layout": "^1.3.10",
     "gatsby-plugin-sass": "^2.3.12",
     "gatsby-plugin-typescript": "^2.4.16",
-    "node-sass": "^4.14.1",
-    "prettier": "2.0.5"
+    "prettier": "2.0.5",
+    "sass": "^1.36.0"
   }
 }

examples/gatsby/package.json

@@ -21,7 +21,7 @@
   "devDependencies": {
     "gatsby-plugin-layout": "^1.3.10",
     "gatsby-plugin-sass": "^2.3.12",
-    "node-sass": "^4.14.1",
-    "prettier": "2.0.5"
+    "prettier": "2.0.5",
+    "sass": "^1.36.0"
   }
 }

examples/nextjs-typescript/package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "@types/node": "^14.0.27",
     "@types/react": "^16.9.43",
-    "node-sass": "^4.14.1",
+    "sass": "^1.36.0",
     "typescript": "^3.9.7"
   }
 }

examples/nextjs/package.json

@@ -14,6 +14,6 @@
     "react-md": "latest"
   },
   "devDependencies": {
-    "node-sass": "^4.14.1"
+    "sass": "^1.36.0"
   }
 }

package.json

@@ -64,7 +64,6 @@
     "@types/jest": "^27.0.0",
     "@types/lodash": "^4.14.172",
     "@types/node": "^15.14.7",
-    "@types/node-sass": "^4.11.2",
     "@types/prettier": "^2.3.2",
     "@types/reach__router": "^1.3.9",
     "@types/react": "^17.0.17",

packages/dev-utils/package.json

@@ -30,7 +30,6 @@
     "lodash": "^4.17.21",
     "loglevel": "^1.7.1",
     "markdown-toc": "^1.2.0",
-    "node-sass": "^5.0.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.6",
     "postcss-flexbugs-fixes": "^5.0.2",
@@ -39,6 +38,7 @@
     "pretty-ms": "^7.0.0",
     "prompts": "^2.4.1",
     "rimraf": "^3.0.2",
+    "sass": "^1.37.5",
     "sassdoc": "^2.7.2",
     "ts-morph": "^11.0.3",
     "typedoc": "^0.21.5",
@@ -49,6 +49,7 @@
     "@types/cssnano": "^4.0.1",
     "@types/he": "^1.1.2",
     "@types/prompts": "^2.0.14",
+    "@types/sass": "^1.16.1",
     "chokidar-cli": "^3.0.0"
   }
 }

packages/dev-utils/src/sandbox/constants.ts

@@ -34,7 +34,7 @@ export const DEV_DEPENDENCIES = [
   "@types/node",
   "@types/react",
   "@types/react-dom",
-  "node-sass",
+  "sass",
   "react-scripts",
   "typescript",
 ];

packages/dev-utils/src/sassdoc.ts

@@ -1,7 +1,7 @@
 import { writeFile } from "fs-extra";
 import { omit } from "lodash";
 import log from "loglevel";
-import { renderSync } from "node-sass";
+import { renderSync } from "sass";
 import { join } from "path";
 import { BuiltInParserName } from "prettier";
 import {

packages/dev-utils/src/themes.ts

@@ -3,7 +3,7 @@ import { writeFileSync } from "fs";
 import { ensureDir, writeFile } from "fs-extra";
 import { flatMap } from "lodash";
 import log from "loglevel";
-import { renderSync } from "node-sass";
+import { renderSync } from "sass";
 import { join } from "path";
 import postcss, { AcceptedPlugin } from "postcss";
 import postcssFlexbugsFixes from "postcss-flexbugs-fixes";

packages/dev-utils/src/utils/styles/variable.ts

@@ -1,6 +1,6 @@
 import { VariableItem } from "sassdoc";
 import log from "loglevel";
-import { renderSync } from "node-sass";
+import { renderSync } from "sass";
 import { tempStylesDir, Primative, SimplePrimative } from "../../constants";
 
 export type VariableValue =

packages/documentation/package.json

@@ -72,7 +72,8 @@
     "react-router-dom": "^5.2.0",
     "react-swipeable": "^6.1.2",
     "react-transition-group": "^4.4.2",
-    "react-virtualized": "^9.22.3"
+    "react-virtualized": "^9.22.3",
+    "sass": "^1.37.5"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
@@ -88,7 +89,6 @@
     "babel-plugin-prismjs": "^2.1.0",
     "cross-env": "^7.0.3",
     "eslint-config-next": "^11.1.0",
-    "node-sass": "^5.0.0",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",
     "typescript": "^4.3.5",

packages/react-md/README.md

@@ -120,10 +120,10 @@ cd my-app
 > NOTE: You can also add the `--typescript` flag to bootstrap a react-app with
 > typescript support
 
-Next, install `react-md` and `node-sass`:
+Next, install `react-md` and `sass`:
 
 ```sh
-npm install --save react-md node-sass
+npm install --save react-md sass
 ```
 
 Next, create a `src/App.scss` file to include all the `react-md` styles and