From c8632a48b28093910503ee6cf66c39610159986a Mon Sep 17 00:00:00 2001
From: SarKurd <sarbast2030@gmail.com>
Date: Thu, 12 Mar 2020 21:52:12 +0100
Subject: [PATCH 1/2] update next-sass example to use built-in sass support

---
 examples/with-next-sass/README.md                         | 2 +-
 examples/with-next-sass/components/hello-world.js         | 7 +++++++
 .../with-next-sass/components/hello-world.module.scss     | 5 +++++
 examples/with-next-sass/next.config.js                    | 2 --
 examples/with-next-sass/package.json                      | 5 ++---
 examples/with-next-sass/pages/_app.js                     | 7 +++++++
 examples/with-next-sass/pages/index.js                    | 8 ++++++--
 examples/with-next-sass/styles.scss                       | 5 +++++
 examples/with-next-sass/styles/style.scss                 | 4 ----
 9 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 examples/with-next-sass/components/hello-world.js
 create mode 100644 examples/with-next-sass/components/hello-world.module.scss
 delete mode 100644 examples/with-next-sass/next.config.js
 create mode 100644 examples/with-next-sass/pages/_app.js
 create mode 100644 examples/with-next-sass/styles.scss
 delete mode 100644 examples/with-next-sass/styles/style.scss

diff --git a/examples/with-next-sass/README.md b/examples/with-next-sass/README.md
index 60ef149c54ac712..0754a1c473e72c4 100644
--- a/examples/with-next-sass/README.md
+++ b/examples/with-next-sass/README.md
@@ -1,6 +1,6 @@
 # Example app with next-sass
 
-This example uses next-sass without css-modules. The config can be found in `next.config.js`, change `withSass()` to `withSass({cssModules: true})` if you use css-modules. Then in the code, you import the stylesheet as `import style from '../styles/style.scss'` and use it like `<div className={style.example}>`. [Learn more](https://github.com/zeit/next-plugins/tree/master/packages/next-sass).
+This example demonstrates how to use Next.js' built-in SASS(SCSS) imports and SASS(SCSS) modules support.
 
 ## Deploy your own
 
diff --git a/examples/with-next-sass/components/hello-world.js b/examples/with-next-sass/components/hello-world.js
new file mode 100644
index 000000000000000..2a478662183d392
--- /dev/null
+++ b/examples/with-next-sass/components/hello-world.js
@@ -0,0 +1,7 @@
+import styles from './hello-world.module.scss'
+
+export default () => (
+  <div className={styles.hello}>
+    Hello World, I am being styled using SCSS Modules!
+  </div>
+)
diff --git a/examples/with-next-sass/components/hello-world.module.scss b/examples/with-next-sass/components/hello-world.module.scss
new file mode 100644
index 000000000000000..5b1000dcd9c613e
--- /dev/null
+++ b/examples/with-next-sass/components/hello-world.module.scss
@@ -0,0 +1,5 @@
+$color: red;
+
+.hello {
+  color: $color;
+}
diff --git a/examples/with-next-sass/next.config.js b/examples/with-next-sass/next.config.js
deleted file mode 100644
index ed73b1374f1bd56..000000000000000
--- a/examples/with-next-sass/next.config.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const withSass = require('@zeit/next-sass')
-module.exports = withSass()
diff --git a/examples/with-next-sass/package.json b/examples/with-next-sass/package.json
index da5a8dcd941d7ba..3511b5b825603b4 100644
--- a/examples/with-next-sass/package.json
+++ b/examples/with-next-sass/package.json
@@ -5,10 +5,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "@zeit/next-sass": "^1.0.0",
     "next": "latest",
-    "node-sass": "4.7.2",
     "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react-dom": "^16.7.0",
+    "sass": "1.26.3"
   }
 }
diff --git a/examples/with-next-sass/pages/_app.js b/examples/with-next-sass/pages/_app.js
new file mode 100644
index 000000000000000..569ae43d200dad8
--- /dev/null
+++ b/examples/with-next-sass/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles.scss'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/examples/with-next-sass/pages/index.js b/examples/with-next-sass/pages/index.js
index bfb3f3abf7c5496..55d4550097ccbbb 100644
--- a/examples/with-next-sass/pages/index.js
+++ b/examples/with-next-sass/pages/index.js
@@ -1,3 +1,7 @@
-import '../styles/style.scss'
+import HelloWorld from '../components/hello-world'
 
-export default () => <div className="example">Hello World!</div>
+export default () => (
+  <div className="app">
+    <HelloWorld />
+  </div>
+)
diff --git a/examples/with-next-sass/styles.scss b/examples/with-next-sass/styles.scss
new file mode 100644
index 000000000000000..f1a1f1957ed9bd3
--- /dev/null
+++ b/examples/with-next-sass/styles.scss
@@ -0,0 +1,5 @@
+$backgroundColor: #2ecc71;
+
+.app {
+  background-color: $backgroundColor;
+}
diff --git a/examples/with-next-sass/styles/style.scss b/examples/with-next-sass/styles/style.scss
deleted file mode 100644
index 73cc2e0e844ba3d..000000000000000
--- a/examples/with-next-sass/styles/style.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$color: #2ecc71;
-.example {
-  background-color: $color;
-}

From 5472518e34cc7dd5bb5c71808324ace4537d2989 Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Thu, 12 Mar 2020 23:37:33 -0400
Subject: [PATCH 2/2] Update README.md

---
 examples/with-next-sass/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/with-next-sass/README.md b/examples/with-next-sass/README.md
index 0754a1c473e72c4..4df3a58463dd8d5 100644
--- a/examples/with-next-sass/README.md
+++ b/examples/with-next-sass/README.md
@@ -1,6 +1,6 @@
 # Example app with next-sass
 
-This example demonstrates how to use Next.js' built-in SASS(SCSS) imports and SASS(SCSS) modules support.
+This example demonstrates how to use Next.js' built-in Global Sass/Scss imports and Component-Level Sass/Scss modules support.
 
 ## Deploy your own