feat: upgrade sass-loader support to ^8

Author: Kocal

lib/loaders/sass.js

@@ -42,8 +42,10 @@ module.exports = {
         const config = Object.assign({}, {
             // needed by the resolve-url-loader
             sourceMap: (true === webpackConfig.sassOptions.resolveUrlLoader) || webpackConfig.useSourceMaps,
-            // CSS minification is handled with mini-css-extract-plugin
-            outputStyle: 'expanded'
+            sassOptions: {
+                // CSS minification is handled with mini-css-extract-plugin
+                outputStyle: 'expanded'
+            }
         });
 
         sassLoaders.push({

package.json

@@ -85,7 +85,7 @@
     "preact": "^8.2.1",
     "preact-compat": "^3.17.0",
     "sass": "^1.17.0",
-    "sass-loader": "^7.0.1",
+    "sass-loader": "^8.0.0",
     "sinon": "^2.3.4",
     "strip-ansi": "^6.0.0",
     "stylus": "^0.54.5",

test/WebpackConfig.js

@@ -844,7 +844,7 @@ describe('WebpackConfig object', () => {
 
         it('Pass options callback', () => {
             const config = createConfig();
-            const callback = (sassOptions) => {};
+            const callback = (options) => {};
             config.enableSassLoader(callback);
 
             expect(config.sassLoaderOptionsCallback).to.equal(callback);

test/loaders/sass.js

@@ -111,18 +111,20 @@ describe('loaders/sass', () => {
         sinon.stub(cssLoader, 'getLoaders')
             .callsFake(() => []);
 
-        config.enableSassLoader(function(sassOptions) {
-            sassOptions.custom_optiona = 'baz';
-            sassOptions.other_option = true;
+        config.enableSassLoader(function(options) {
+            options.sassOptions.custom_option = 'baz';
+            options.sassOptions.other_option = true;
         });
 
         const actualLoaders = sassLoader.getLoaders(config);
 
         expect(actualLoaders[1].options).to.deep.equals({
             sourceMap: true,
-            outputStyle: 'expanded',
-            custom_optiona: 'baz',
-            other_option: true
+            sassOptions: {
+                outputStyle: 'expanded',
+                custom_option: 'baz',
+                other_option: true
+            }
         });
         cssLoader.getLoaders.restore();
     });
@@ -134,8 +136,8 @@ describe('loaders/sass', () => {
         sinon.stub(cssLoader, 'getLoaders')
             .callsFake(() => []);
 
-        config.enableSassLoader(function(sassOptions) {
-            sassOptions.custom_option = 'baz';
+        config.enableSassLoader(function(options) {
+            options.custom_option = 'baz';
 
             // This should override the original config
             return { foo: true };

test/package-helper.js

@@ -123,7 +123,7 @@ describe('package-helper', () => {
     describe('The getInvalidPackageVersionRecommendations correctly checks installed versions', () => {
         it('Check package that *is* the correct version', () => {
             const versionProblems = packageHelper.getInvalidPackageVersionRecommendations([
-                { name: 'sass-loader', version: '^7.0.1' },
+                { name: 'sass-loader', version: '^8.0.0' },
                 { name: 'preact', version: '^8.1.0' }
             ]);
 
@@ -132,17 +132,17 @@ describe('package-helper', () => {
 
         it('Check package with a version too low', () => {
             const versionProblems = packageHelper.getInvalidPackageVersionRecommendations([
-                { name: 'sass-loader', version: '^8.0.1' },
+                { name: 'sass-loader', version: '^9.0.0' },
                 { name: 'preact', version: '9.0.0' }
             ]);
 
             expect(versionProblems).to.have.length(2);
             expect(versionProblems[0]).to.contain('is too old');
         });
 
-        it('Check package with a version too low', () => {
+        it('Check package with a version too new', () => {
             const versionProblems = packageHelper.getInvalidPackageVersionRecommendations([
-                { name: 'sass-loader', version: '^6.9.11' },
+                { name: 'sass-loader', version: '^7.0.1' },
                 { name: 'preact', version: '7.0.0' }
             ]);
 

yarn.lock

@@ -5255,7 +5255,7 @@ loader-utils@1.2.3:
     emojis-list "^2.0.0"
     json5 "^1.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==
@@ -7514,15 +7514,15 @@ sass-graph@2.2.5:
     scss-tokenizer "^0.2.3"
     yargs "^13.3.2"
 
-sass-loader@^7.0.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@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
+  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
   dependencies:
     clone-deep "^4.0.1"
-    loader-utils "^1.0.1"
-    neo-async "^2.5.0"
-    pify "^4.0.1"
+    loader-utils "^1.2.3"
+    neo-async "^2.6.1"
+    schema-utils "^2.6.1"
     semver "^6.3.0"
 
 sass@^1.17.0:
@@ -7546,14 +7546,22 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.6.5, schema-utils@^2.6.6:
+schema-utils@^2.6.1, schema-utils@^2.6.6:
   version "2.6.6"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.6.tgz#299fe6bd4a3365dc23d99fd446caff8f1d6c330c"
   integrity sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==
   dependencies:
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
+schema-utils@^2.6.5:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.5.tgz#c758f0a7e624263073d396e29cd40aa101152d8a"
+  integrity sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==
+  dependencies:
+    ajv "^6.12.0"
+    ajv-keywords "^3.4.1"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"