From 5c252bf84a6cf574b6e1b02f73190b3cf94530be Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Mon, 8 Aug 2022 21:15:22 -0500
Subject: [PATCH] chore: set up sass

---
 package-lock.json             | 37 +++++++++++++++++++++++++++++++++++
 package.json                  |  1 +
 src/{App.css => App.scss}     |  0
 src/App.tsx                   |  2 +-
 src/{index.css => index.scss} |  0
 src/index.tsx                 |  2 +-
 6 files changed, 40 insertions(+), 2 deletions(-)
 rename src/{App.css => App.scss} (100%)
 rename src/{index.css => index.scss} (100%)

diff --git a/package-lock.json b/package-lock.json
index e8f74d0..c6c331f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "sass": "^1.54.3",
         "typescript": "^4.7.4",
         "web-vitals": "^2.1.4"
       },
@@ -9052,6 +9053,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -15028,6 +15034,22 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.54.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.3.tgz",
+      "integrity": "sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -23669,6 +23691,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
       "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ=="
     },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -27798,6 +27825,16 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.54.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.3.tgz",
+      "integrity": "sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
diff --git a/package.json b/package.json
index 6759cfd..e4724af 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.54.3",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
diff --git a/src/App.css b/src/App.scss
similarity index 100%
rename from src/App.css
rename to src/App.scss
diff --git a/src/App.tsx b/src/App.tsx
index c1a3df8..54638aa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import logo from './logo.svg'
-import './App.css'
+import './App.scss'
 
 function App() {
   return (
diff --git a/src/index.css b/src/index.scss
similarity index 100%
rename from src/index.css
rename to src/index.scss
diff --git a/src/index.tsx b/src/index.tsx
index 985cf9a..ae1f56b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import './index.css'
+import './index.scss'
 import App from './App'
 import reportWebVitals from './reportWebVitals'