BREAKING(gatsby-plugin-sass): sass-loader to v10 & default usage of `…

…sass` (#27991)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: LekoArts <lekoarts@gmail.com>

docs/docs/how-to/local-development/troubleshooting-common-errors.md

@@ -34,7 +34,7 @@ Here are some examples of plugins that require you to install more than just the
 
 - [gatsby-plugin-emotion](/packages/gatsby-plugin-emotion/): `@emotion/react`, and `@emotion/styled`
 - [gatsby-plugin-styled-components](/packages/gatsby-plugin-styled-components/): `styled-components`, and `babel-plugin-styled-components`
-- [gatsby-plugin-sass](/packages/gatsby-plugin-sass/): `node-sass`, or `dart-sass`
+- [gatsby-plugin-sass](/packages/gatsby-plugin-sass/): `node-sass`, or `sass`
 - [gatsby-plugin-material-ui](/packages/gatsby-plugin-material-ui/): `@material-ui/styles`
 - [gatsby-image](/packages/gatsby-image/): `gatsby-transformer-sharp`, and `gatsby-plugin-sharp`
 

docs/docs/how-to/styling/bulma.md

@@ -10,7 +10,7 @@ This guide assumes that you have a Gatsby project set up. If you need to set up
 
 For starters, let's install all the required packages we're going to need.
 
-`yarn add bulma node-sass gatsby-plugin-sass`
+`yarn add bulma sass gatsby-plugin-sass`
 
 Then, add the `gatsby-plugin-sass` in to `gatsby-config.js`.
 

docs/docs/how-to/styling/sass.md

@@ -12,9 +12,9 @@ Sass will compile `.sass` and `.scss` files to `.css` files for you, so you can
 
 This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [**Quick Start guide**](/docs/quick-start/), then come back.
 
-1. Install the Gatsby plugin [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass/) and `node-sass`, a required peer dependency as of v2.0.0.
+1. Install the Gatsby plugin [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass/) and `sass`, a required peer dependency as of v3.0.0.
 
-`npm install node-sass gatsby-plugin-sass`
+`npm install sass gatsby-plugin-sass`
 
 2. Include the plugin in your `gatsby-config.js` file.
 

docs/docs/how-to/styling/tailwind-css.md

@@ -118,10 +118,10 @@ See the [Twin + Gatsby + Emotion installation guide](https://github.com/ben-roge
 
 #### Option #3: SCSS
 
-1. Install the Gatsby SCSS plugin [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass) and `node-sass`.
+1. Install the Gatsby SCSS plugin [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass) and `sass`.
 
 ```shell
-npm install node-sass gatsby-plugin-sass
+npm install sass gatsby-plugin-sass
 ```
 
 2. To be able to use Tailwind classes in your SCSS files, add the `tailwindcss` package into the `postCssPlugins` parameter in your `gatsby-config.js`.

docs/docs/recipes/styling-css.md

@@ -230,9 +230,9 @@ Sass will compile `.scss` and `.sass` files to `.css` files for you, so you can
 
 ### Directions
 
-1. Install the Gatsby plugin [gatsby-plugin-sass](/plugins/gatsby-plugin-sass/) and `node-sass`.
+1. Install the Gatsby plugin [gatsby-plugin-sass](/plugins/gatsby-plugin-sass/) and `sass`.
 
-`npm install node-sass gatsby-plugin-sass`
+`npm install sass gatsby-plugin-sass`
 
 2. Include the plugin in your `gatsby-config.js` file.
 

packages/gatsby-plugin-sass/README.md

@@ -4,7 +4,7 @@ Provides drop-in support for Sass/SCSS stylesheets
 
 ## Install
 
-`npm install node-sass gatsby-plugin-sass`
+`npm install sass gatsby-plugin-sass`
 
 ## How to use
 
@@ -64,18 +64,18 @@ plugins: [
 
 ### Alternative Sass Implementations
 
-By default the node implementation of Sass (`node-sass`) is used. To use the implementation written in Dart (`dart-sass`), you can install `sass` instead of `node-sass` and pass it into the options as the implementation:
+By default, the Dart implementation of Sass (`sass`) is used. To use the implementation written in Node (`node-sass`), you can install `node-sass` instead of `sass` and pass it into the options as the implementation:
 
 ```shell
-npm install --save-dev sass
+npm install node-sass
 ```
 
 ```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: `gatsby-plugin-sass`,
     options: {
-      implementation: require("sass"),
+      implementation: require("node-sass"),
     },
   },
 ]
@@ -210,6 +210,10 @@ plugins: [
 
 <!-- Please keep the breaking changes list ordered with the newest change at the top -->
 
+### v3.0.0
+
+- `sass-loader` is updated to v10 which adds support for `node-sass@^5.0.0` but also switches the default `implementation` to `sass`. webpack also recommends using `sass` so this is reflected in the documentation here, too. In the [deprecation notice of node-sass](https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate) it is noted that switching from `node-sass` to `sass` is straightforward as both packages use the same JavaScript API.
+
 ### v2.0.0
 
 - `node-sass` is moved to a peer dependency. Installing the package

packages/gatsby-plugin-sass/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "sass-loader": "^7.3.1"
+    "sass-loader": "^10.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
@@ -28,7 +28,7 @@
   "main": "index.js",
   "peerDependencies": {
     "gatsby": "^2.0.0",
-    "node-sass": "^4.9.0"
+    "sass": "^1.30.0"
   },
   "repository": {
     "type": "git",

yarn.lock

@@ -15734,7 +15734,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -17295,10 +17295,10 @@ negotiator@0.6.2, negotiator@~0.6.2:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
-neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
-  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
+neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1, neo-async@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
 nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0:
   version "2.1.0"
@@ -22369,16 +22369,16 @@ saslprep@^1.0.0:
   dependencies:
     sparse-bitfield "^3.0.3"
 
-sass-loader@^7.3.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.3.1.tgz#a5bf68a04bcea1c13ff842d747150f7ab7d0d23f"
-  integrity sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==
+sass-loader@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.1.0.tgz#1727fcc0c32ab3eb197cda61d78adf4e9174a4b3"
+  integrity sha512-ZCKAlczLBbFd3aGAhowpYEy69Te3Z68cg8bnHHl6WnSCvnKpbM6pQrz957HWMa8LKVuhnD9uMplmMAHwGQtHeg==
   dependencies:
-    clone-deep "^4.0.1"
-    loader-utils "^1.0.1"
-    neo-async "^2.5.0"
-    pify "^4.0.1"
-    semver "^6.3.0"
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    neo-async "^2.6.2"
+    schema-utils "^3.0.0"
+    semver "^7.3.2"
 
 sax@>=0.6.0, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4:
   version "1.2.4"