From 3892453cd7c72b92cbb5c7fd0925ee000d142e0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mileta=20Dulovi=C4=87?= <dulovicmileta1@gmail.com>
Date: Mon, 19 Apr 2021 21:37:22 +0200
Subject: [PATCH] Fixed bug where styled-jsx examples don't work because of a
 wrong plugin (#23414)

## Bug

Fixes #23293.

Problem was that `styled-jsx-plugin-sass` was used instead of `@styled-jsx/plugin-sass` so it didn't work.

You can refer to the issue that is linked for more info.
---
 examples/with-storybook-styled-jsx-scss/.babelrc     | 2 +-
 examples/with-storybook-styled-jsx-scss/package.json | 8 ++++----
 examples/with-styled-jsx-scss/.babelrc               | 2 +-
 examples/with-styled-jsx-scss/package.json           | 8 +++++---
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/examples/with-storybook-styled-jsx-scss/.babelrc b/examples/with-storybook-styled-jsx-scss/.babelrc
index 3eaec7a8b8..02d0f1be09 100644
--- a/examples/with-storybook-styled-jsx-scss/.babelrc
+++ b/examples/with-storybook-styled-jsx-scss/.babelrc
@@ -4,7 +4,7 @@
       "next/babel",
       {
         "styled-jsx": {
-          "plugins": ["styled-jsx-plugin-sass"]
+          "plugins": ["@styled-jsx/plugin-sass"]
         }
       }
     ]
diff --git a/examples/with-storybook-styled-jsx-scss/package.json b/examples/with-storybook-styled-jsx-scss/package.json
index b782c55e7c..b2193ce2d2 100644
--- a/examples/with-storybook-styled-jsx-scss/package.json
+++ b/examples/with-storybook-styled-jsx-scss/package.json
@@ -11,10 +11,8 @@
   },
   "dependencies": {
     "next": "^10.0.0",
-    "sass": "^1.32.4",
     "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "styled-jsx-plugin-sass": "^1.0.0"
+    "react-dom": "17.0.1"
   },
   "license": "MIT",
   "devDependencies": {
@@ -28,6 +26,8 @@
     "@types/react-dom": "^16.9.8",
     "babel-loader": "^8.1.0",
     "react-is": "^17.0.1",
-    "typescript": "^4.0.3"
+    "typescript": "^4.0.3",
+    "sass": "^1.32.4",
+    "@styled-jsx/plugin-sass": "^3.0.0"
   }
 }
diff --git a/examples/with-styled-jsx-scss/.babelrc b/examples/with-styled-jsx-scss/.babelrc
index 3eaec7a8b8..02d0f1be09 100644
--- a/examples/with-styled-jsx-scss/.babelrc
+++ b/examples/with-styled-jsx-scss/.babelrc
@@ -4,7 +4,7 @@
       "next/babel",
       {
         "styled-jsx": {
-          "plugins": ["styled-jsx-plugin-sass"]
+          "plugins": ["@styled-jsx/plugin-sass"]
         }
       }
     ]
diff --git a/examples/with-styled-jsx-scss/package.json b/examples/with-styled-jsx-scss/package.json
index 8a66582452..cda5f94708 100644
--- a/examples/with-styled-jsx-scss/package.json
+++ b/examples/with-styled-jsx-scss/package.json
@@ -8,10 +8,12 @@
   },
   "dependencies": {
     "next": "latest",
-    "sass": "1.32.4",
     "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "styled-jsx-plugin-sass": "1.0.0"
+    "react-dom": "^16.7.0"
+  },
+  "devDependencies": {
+    "sass": "^1.32.8",
+    "@styled-jsx/plugin-sass": "^3.0.0"
   },
   "license": "MIT"
 }