From 68b6be4f131638c975fc0f6cc14a4f5ee927daee Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Wed, 18 Nov 2020 16:12:42 +0000 Subject: [PATCH 1/2] fix(deps): update dependency sass-loader to v10 for gatsby-plugin-sass --- packages/gatsby-plugin-sass/package.json | 2 +- yarn.lock | 41 +++++++++--------------- 2 files changed, 17 insertions(+), 26 deletions(-) diff --git a/packages/gatsby-plugin-sass/package.json b/packages/gatsby-plugin-sass/package.json index 276557d5d744e..911c09ddf3d59 100644 --- a/packages/gatsby-plugin-sass/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 4e27f97c8e8b2..e81b476328929 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12995,15 +12995,11 @@ idb-keyval@^3.2.0: resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-3.2.0.tgz#cbbf354deb5684b6cdc84376294fc05932845bd6" integrity sha512-slx8Q6oywCCSfKgPgL0sEsXtPVnSbTLWpyiDcu6msHOyKOLari1TD1qocXVCft80umnkk3/Qqh3lwoFt8T/BPQ== -ieee754@^1.1.13: +ieee754@^1.1.13, ieee754@^1.1.4: version "1.2.1" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== -ieee754@^1.1.4: - version "1.1.12" - resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b" - iferr@^0.1.5: version "0.1.5" resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501" @@ -15615,7 +15611,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== @@ -17184,10 +17180,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" @@ -22183,7 +22179,7 @@ sade@^1.7.3: dependencies: mri "^1.1.0" -safe-buffer@*: +safe-buffer@*, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== @@ -22192,11 +22188,6 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1: version "5.1.2" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" -safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519" - integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg== - safe-identifier@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/safe-identifier/-/safe-identifier-0.4.1.tgz#b6516bf72594f03142b5f914f4c01842ccb1b678" @@ -22257,16 +22248,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" From b68e0c94dbd4320fcbe347c935f738138e9a7972 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Wed, 9 Dec 2020 12:37:55 +0100 Subject: [PATCH 2/2] update documentation and peer dep --- docs/docs/bulma.md | 2 +- docs/docs/recipes/styling-css.md | 4 ++-- docs/docs/sass.md | 4 ++-- docs/docs/tailwind-css.md | 4 ++-- docs/docs/troubleshooting-common-errors.md | 2 +- packages/gatsby-plugin-sass/README.md | 12 ++++++++---- packages/gatsby-plugin-sass/package.json | 2 +- 7 files changed, 17 insertions(+), 13 deletions(-) diff --git a/docs/docs/bulma.md b/docs/docs/bulma.md index e058be3c27582..a9be1fd874afd 100644 --- a/docs/docs/bulma.md +++ b/docs/docs/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`. diff --git a/docs/docs/recipes/styling-css.md b/docs/docs/recipes/styling-css.md index b5d87c0aad878..61ce6730a6ad1 100644 --- a/docs/docs/recipes/styling-css.md +++ b/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. diff --git a/docs/docs/sass.md b/docs/docs/sass.md index 486171ac3d767..00e6055de2be3 100644 --- a/docs/docs/sass.md +++ b/docs/docs/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. diff --git a/docs/docs/tailwind-css.md b/docs/docs/tailwind-css.md index 56ccb57068d6f..d3d1443e0e54a 100644 --- a/docs/docs/tailwind-css.md +++ b/docs/docs/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`. diff --git a/docs/docs/troubleshooting-common-errors.md b/docs/docs/troubleshooting-common-errors.md index 5d88b4ef442b5..2fb5cc39d0d7d 100644 --- a/docs/docs/troubleshooting-common-errors.md +++ b/docs/docs/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/core`, 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` diff --git a/packages/gatsby-plugin-sass/README.md b/packages/gatsby-plugin-sass/README.md index 958f4f8b75d8c..730edcf8e432d 100644 --- a/packages/gatsby-plugin-sass/README.md +++ b/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,10 +64,10 @@ 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 @@ -75,7 +75,7 @@ plugins: [ { resolve: `gatsby-plugin-sass`, options: { - implementation: require("sass"), + implementation: require("node-sass"), }, }, ] @@ -210,6 +210,10 @@ plugins: [ +### 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 diff --git a/packages/gatsby-plugin-sass/package.json b/packages/gatsby-plugin-sass/package.json index 911c09ddf3d59..4740ac42cab90 100644 --- a/packages/gatsby-plugin-sass/package.json +++ b/packages/gatsby-plugin-sass/package.json @@ -28,7 +28,7 @@ "main": "index.js", "peerDependencies": { "gatsby": "^2.0.0", - "node-sass": "^4.9.0" + "sass": "^1.30.0" }, "repository": { "type": "git",