feature #758 Feat/sass loader 8 (Kocal, weaverryan)

This PR was merged into the master branch.

Discussion
----------

Feat/sass loader 8

Fixes weird test issue for #736 - I'm trying to see if I can debug the "lowest" test failure.

It appears the problem is with Webpack > 4.22 and Vue < 2.5.0.

Commits
-------

fb24ca7 Vue 2.5.0 as minimum
9911316 build(deps): upgrade webpack version to ^4.36.0
960481f feat: upgrade sass-loader support to ^8

Author: weaverryan

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

@@ -46,7 +46,7 @@
     "style-loader": "^1.1.3",
     "terser-webpack-plugin": "^1.1.0",
     "tmp": "^0.2.1",
-    "webpack": "^4.22.0",
+    "webpack": "^4.36.0",
     "webpack-cli": "^3.0.0",
     "webpack-dev-server": "^3.1.14",
     "webpack-manifest-plugin": "^2.0.2",
@@ -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

@@ -1233,7 +1233,7 @@ acorn@^5.5.3:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
   integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
 
-acorn@^6.0.1, acorn@^6.4.1:
+acorn@^6.0.1, acorn@^6.2.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
   integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
@@ -5254,7 +5254,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==
@@ -7518,15 +7518,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:
@@ -7550,14 +7550,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"
@@ -8808,7 +8816,7 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^1.0.0"
 
-watchpack@^1.6.1:
+watchpack@^1.6.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"
   integrity sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==
@@ -8931,16 +8939,16 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^4.22.0:
-  version "4.43.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.43.0.tgz#c48547b11d563224c561dad1172c8aa0b8a678e6"
-  integrity sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g==
+webpack@^4.36.0:
+  version "4.42.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.42.1.tgz#ae707baf091f5ca3ef9c38b884287cfe8f1983ef"
+  integrity sha512-SGfYMigqEfdGchGhFFJ9KyRpQKnipvEvjc1TwrXEPCM6H5Wywu10ka8o3KGrMzSMxMQKt8aCHUFh5DaQ9UmyRg==
   dependencies:
     "@webassemblyjs/ast" "1.9.0"
     "@webassemblyjs/helper-module-context" "1.9.0"
     "@webassemblyjs/wasm-edit" "1.9.0"
     "@webassemblyjs/wasm-parser" "1.9.0"
-    acorn "^6.4.1"
+    acorn "^6.2.1"
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
     chrome-trace-event "^1.0.2"
@@ -8957,7 +8965,7 @@ webpack@^4.22.0:
     schema-utils "^1.0.0"
     tapable "^1.1.3"
     terser-webpack-plugin "^1.4.3"
-    watchpack "^1.6.1"
+    watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
 websocket-driver@>=0.5.1: