nav tabs on admin dashboard

node_modules/sass-loader/lib/importsToResolve.js

@@ -1,58 +1,60 @@
 "use strict";
 
 const path = require("path");
+const utils = require("loader-utils");
 
-// libsass uses this precedence when importing files without extension
-const extPrecedence = [".scss", ".sass", ".css"];
+const matchModuleImport = /^~([^\/]+|@[^\/]+[\/][^\/]+)$/;
 
 /**
  * When libsass tries to resolve an import, it uses a special algorithm.
  * Since the sass-loader uses webpack to resolve the modules, we need to simulate that algorithm. This function
- * returns an array of import paths to try.
+ * returns an array of import paths to try. The last entry in the array is always the original url
+ * to enable straight-forward webpack.config aliases.
  *
- * @param {string} request
+ * @param {string} url
  * @returns {Array<string>}
  */
-function importsToResolve(request) {
-    // libsass' import algorithm works like this:
-    // In case there is no file extension...
-    //   - Prefer modules starting with '_'.
-    //   - File extension precedence: .scss, .sass, .css.
-    // In case there is a file extension...
-    //   - If the file is a CSS-file, do not include it all, but just link it via @import url().
-    //   - The exact file name must match (no auto-resolving of '_'-modules).
-
+function importsToResolve(url) {
+    const request = utils.urlToRequest(url);
     // Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot.
     // @see https://github.com/webpack-contrib/sass-loader/issues/167
     const ext = path.extname(request);
-    const basename = path.basename(request);
-    const dirname = path.dirname(request);
-    const startsWithUnderscore = basename.charAt(0) === "_";
-    const hasCssExt = ext === ".css";
-    const hasSassExt = ext === ".scss" || ext === ".sass";
 
-    // a module import is an identifier like 'bootstrap-sass'
-    // We also need to check for dirname since it might also be a deep import like 'bootstrap-sass/something'
-    let isModuleImport = request.charAt(0) !== "." && dirname === ".";
-
-    if (dirname.charAt(0) === "@") {
-        // Check whether it is a deep import from scoped npm package
-        // (i.e. @pkg/foo/file), if so, process import as file import;
-        // otherwise, if we import from root npm scoped package (i.e. @pkg/foo)
-        // process import as a module import.
-        isModuleImport = !(dirname.indexOf("/") > -1);
+    if (matchModuleImport.test(url)) {
+        return [request, url];
     }
 
-    return (isModuleImport && [request]) || // Do not modify module imports
-        (hasCssExt && []) || // Do not import css files
-        (hasSassExt && [request]) || // Do not modify imports with explicit extensions
-        (startsWithUnderscore ? [] : extPrecedence) // Do not add underscore imports if there is already an underscore
-            .map(ext => "_" + basename + ext)
-            .concat(
-                extPrecedence.map(ext => basename + ext)
-            ).map(
-                file => dirname + "/" + file // No path.sep required here, because imports inside SASS are usually with /
-            );
+    // libsass' import algorithm works like this:
+
+    // In case there is a file extension...
+    //   - If the file is a CSS-file, do not include it all, but just link it via @import url().
+    //   - The exact file name must match (no auto-resolving of '_'-modules).
+    if (ext === ".css") {
+        return [];
+    }
+    if (ext === ".scss" || ext === ".sass") {
+        return [request, url];
+    }
+
+    // In case there is no file extension...
+    //   - Prefer modules starting with '_'.
+    //   - File extension precedence: .scss, .sass, .css.
+    const basename = path.basename(request);
+
+    if (basename.charAt(0) === "_") {
+        return [
+            `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
+            url
+        ];
+    }
+
+    const dirname = path.dirname(request);
+
+    return [
+        `${ dirname }/_${ basename }.scss`, `${ dirname }/_${ basename }.sass`, `${ dirname }/_${ basename }.css`,
+        `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
+        url
+    ];
 }
 
 module.exports = importsToResolve;

node_modules/sass-loader/lib/loader.js

@@ -1,18 +1,14 @@
 "use strict";
 
-const sass = require("node-sass");
 const path = require("path");
 const async = require("neo-async");
 const formatSassError = require("./formatSassError");
 const webpackImporter = require("./webpackImporter");
 const normalizeOptions = require("./normalizeOptions");
 const pify = require("pify");
+const semver = require("semver");
 
-// This queue makes sure node-sass leaves one thread available for executing
-// fs tasks when running the custom importer code.
-// This can be removed as soon as node-sass implements a fix for this.
-const threadPoolSize = process.env.UV_THREADPOOL_SIZE || 4;
-const asyncSassJobQueue = async.queue(sass.render, threadPoolSize - 1);
+let nodeSassJobQueue = null;
 
 /**
  * The sass-loader makes node-sass available to webpack modules.
@@ -47,8 +43,9 @@ function sassLoader(content) {
         return;
     }
 
-    // start the actual rendering
-    asyncSassJobQueue.push(options, (err, result) => {
+    const render = getRenderFuncFromSassImpl(options.implementation || require("node-sass"));
+
+    render(options, (err, result) => {
         if (err) {
             formatSassError(err, this.resourcePath);
             err.file && this.dependency(err.file);
@@ -80,4 +77,48 @@ function sassLoader(content) {
     });
 }
 
+/**
+ * Verifies that the implementation and version of Sass is supported by this loader.
+ *
+ * @param {Object} module
+ * @returns {Function}
+ */
+function getRenderFuncFromSassImpl(module) {
+    const info = module.info;
+    const components = info.split("\t");
+
+    if (components.length < 2) {
+        throw new Error("Unknown Sass implementation \"" + info + "\".");
+    }
+
+    const implementation = components[0];
+    const version = components[1];
+
+    if (!semver.valid(version)) {
+        throw new Error("Invalid Sass version \"" + version + "\".");
+    }
+
+    if (implementation === "dart-sass") {
+        if (!semver.satisfies(version, "^1.3.0")) {
+            throw new Error("Dart Sass version " + version + " is incompatible with ^1.3.0.");
+        }
+        return module.render.bind(module);
+    } else if (implementation === "node-sass") {
+        if (!semver.satisfies(version, "^4.0.0")) {
+            throw new Error("Node Sass version " + version + " is incompatible with ^4.0.0.");
+        }
+        // There is an issue with node-sass when async custom importers are used
+        // See https://github.com/sass/node-sass/issues/857#issuecomment-93594360
+        // We need to use a job queue to make sure that one thread is always available to the UV lib
+        if (nodeSassJobQueue === null) {
+            const threadPoolSize = Number(process.env.UV_THREADPOOL_SIZE || 4);
+
+            nodeSassJobQueue = async.queue(module.render.bind(module), threadPoolSize - 1);
+        }
+
+        return nodeSassJobQueue.push.bind(nodeSassJobQueue);
+    }
+    throw new Error("Unknown Sass implementation \"" + implementation + "\".");
+}
+
 module.exports = sassLoader;

node_modules/sass-loader/lib/webpackImporter.js

@@ -17,7 +17,6 @@
  */
 
 const path = require("path");
-const utils = require("loader-utils");
 const tail = require("lodash.tail");
 const importsToResolve = require("./importsToResolve");
 
@@ -63,7 +62,7 @@ function webpackImporter(resourcePath, resolve, addNormalizedDependency) {
     return (url, prev, done) => {
         startResolving(
             dirContextFrom(prev),
-            importsToResolve(utils.urlToRequest(url))
+            importsToResolve(url)
         ) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
             .catch(() => ({ file: url }))
             .then(done);