sass-loader 11.1.1 → 12.3.0

package/README.md

@@ -119,17 +119,18 @@ Thankfully there are a two solutions to this problem:
 
 ## Options
 
-|                   Name                    |         Type         |                 Default                 | Description                                                       |
-| :---------------------------------------: | :------------------: | :-------------------------------------: | :---------------------------------------------------------------- |
-|  **[`implementation`](#implementation)**  |      `{Object}`      |                 `sass`                  | Setup Sass implementation to use.                                 |
-|     **[`sassOptions`](#sassoptions)**     | `{Object\|Function}` | defaults values for Sass implementation | Options for Sass.                                                 |
-|       **[`sourceMap`](#sourcemap)**       |     `{Boolean}`      |           `compiler.devtool`            | Enables/Disables generation of source maps.                       |
-|  **[`additionalData`](#additionaldata)**  | `{String\|Function}` |               `undefined`               | Prepends/Appends `Sass`/`SCSS` code before the actual entry file. |
-| **[`webpackImporter`](#webpackimporter)** |     `{Boolean}`      |                 `true`                  | Enables/Disables the default Webpack importer.                    |
+|                     Name                      |         Type         |                 Default                 | Description                                                       |
+| :-------------------------------------------: | :------------------: | :-------------------------------------: | :---------------------------------------------------------------- |
+|    **[`implementation`](#implementation)**    |  `{Object\|String}`  |                 `sass`                  | Setup Sass implementation to use.                                 |
+|       **[`sassOptions`](#sassoptions)**       | `{Object\|Function}` | defaults values for Sass implementation | Options for Sass.                                                 |
+|         **[`sourceMap`](#sourcemap)**         |     `{Boolean}`      |           `compiler.devtool`            | Enables/Disables generation of source maps.                       |
+|    **[`additionalData`](#additionaldata)**    | `{String\|Function}` |               `undefined`               | Prepends/Appends `Sass`/`SCSS` code before the actual entry file. |
+|   **[`webpackImporter`](#webpackimporter)**   |     `{Boolean}`      |                 `true`                  | Enables/Disables the default Webpack importer.                    |
+| **[`warnRuleAsWarning`](#warnruleaswarning)** |     `{Boolean}`      |                 `false`                 | Treats the `@warn` rule as a webpack warning.                     |
 
 ### `implementation`
 
-Type: `Object`
+Type: `Object | String`
 Default: `sass`
 
 The special `implementation` option determines which implementation of Sass to use.
@@ -168,6 +169,8 @@ In order to avoid this situation you can use the `implementation` option.
 
 The `implementation` options either accepts `sass` (`Dart Sass`) or `node-sass` as a module.
 
+#### Object
+
 For example, to use Dart Sass, you'd pass:
 
 ```js
@@ -193,6 +196,33 @@ module.exports = {
 };
 ```
 
+#### String
+
+For example, to use Dart Sass, you'd pass:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              // Prefer `dart-sass`
+              implementation: require.resolve("sass"),
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 Note that when using `sass` (`Dart Sass`), **synchronous compilation is twice as fast as asynchronous compilation** by default, due to the overhead of asynchronous callbacks.
 To avoid this overhead, you can use the [fibers](https://www.npmjs.com/package/fibers) package to call asynchronous importers from the synchronous code path.
 
@@ -277,11 +307,13 @@ Default: defaults values for Sass implementation
 
 Options for [Dart Sass](http://sass-lang.com/dart-sass) or [Node Sass](https://github.com/sass/node-sass) implementation.
 
+> ℹ️ The `charset` option has `true` value by default for `dart-sass`, we strongly discourage change value to `false`, because webpack doesn't support files other than `utf-8`.
+
 > ℹ️ The `indentedSyntax` option has `true` value for the `sass` extension.
 
 > ℹ️ Options such as `data` and `file` are unavailable and will be ignored.
 
-> ℹ We recommend not to set the `outFile`, `sourceMapContents`, `sourceMapEmbed`, `sourceMapRoot` options because `sass-loader` automatically sets these options when the `sourceMap` option is `true`.
+> ℹ We strongly discourage change `outFile`, `sourceMapContents`, `sourceMapEmbed`, `sourceMapRoot` options because `sass-loader` automatically sets these options when the `sourceMap` option is `true`.
 
 > ℹ️ Access to the [loader context](https://webpack.js.org/api/loaders/#the-loader-context) inside the custom importer can be done using the `this.webpackLoaderContext` property.
 
@@ -573,6 +605,65 @@ module.exports = {
 };
 ```
 
+### `warnRuleAsWarning`
+
+Type: `Boolean`
+Default: `false`
+
+Treats the `@warn` rule as a webpack warning.
+
+> ℹ️ It will be `true` by default in the next major release.
+
+**style.scss**
+
+```scss
+$known-prefixes: webkit, moz, ms, o;
+
+@mixin prefix($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if not index($known-prefixes, $prefix) {
+      @warn "Unknown prefix #{$prefix}.";
+    }
+
+    -#{$prefix}-#{$property}: $value;
+  }
+  #{$property}: $value;
+}
+
+.tilt {
+  // Oops, we typo'd "webkit" as "wekbit"!
+  @include prefix(transform, rotate(15deg), wekbit ms);
+}
+```
+
+The presented code will throw webpack warning instead logging.
+
+To ignore unnecessary warnings you can use the [ignoreWarnings](https://webpack.js.org/configuration/other-options/#ignorewarnings) option.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              warnRuleAsWarning: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ## Examples
 
 ### Extracts CSS into separate files

package/dist/SassError.js

@@ -8,7 +8,8 @@ exports.default = void 0;
 class SassError extends Error {
   constructor(sassError) {
     super();
-    this.name = "SassError";
+    this.name = "SassError"; // TODO remove me in the next major release
+
     this.originalSassError = sassError;
     this.loc = {
       line: sassError.line,

package/dist/SassWarning.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+class SassWarning extends Error {
+  constructor(warning, options) {
+    super(warning);
+    this.name = "SassWarning";
+    this.hideStack = true;
+
+    if (options.span) {
+      this.loc = {
+        line: options.span.start.line,
+        column: options.span.start.column
+      };
+    }
+  }
+
+}
+
+var _default = SassWarning;
+exports.default = _default;

package/dist/options.json

@@ -3,11 +3,20 @@
   "type": "object",
   "properties": {
     "implementation": {
-      "description": "The implementation of the sass to be used (https://github.com/webpack-contrib/sass-loader#implementation).",
-      "type": "object"
+      "description": "The implementation of the sass to be used.",
+      "link": "https://github.com/webpack-contrib/sass-loader#implementation",
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "object"
+        }
+      ]
     },
     "sassOptions": {
-      "description": "Options for `node-sass` or `sass` (`Dart Sass`) implementation. (https://github.com/webpack-contrib/sass-loader#implementation).",
+      "description": "Options for `node-sass` or `sass` (`Dart Sass`) implementation.",
+      "link": "https://github.com/webpack-contrib/sass-loader#sassoptions",
       "anyOf": [
         {
           "type": "object",
@@ -19,7 +28,8 @@
       ]
     },
     "additionalData": {
-      "description": "Prepends/Appends `Sass`/`SCSS` code before the actual entry file (https://github.com/webpack-contrib/sass-loader#additionaldata).",
+      "description": "Prepends/Appends `Sass`/`SCSS` code before the actual entry file.",
+      "link": "https://github.com/webpack-contrib/sass-loader#additionaldata",
       "anyOf": [
         {
           "type": "string"
@@ -30,11 +40,18 @@
       ]
     },
     "sourceMap": {
-      "description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/sass-loader#sourcemap).",
+      "description": "Enables/Disables generation of source maps.",
+      "link": "https://github.com/webpack-contrib/sass-loader#sourcemap",
       "type": "boolean"
     },
     "webpackImporter": {
-      "description": "Enables/Disables default `webpack` importer (https://github.com/webpack-contrib/sass-loader#webpackimporter).",
+      "description": "Enables/Disables default `webpack` importer.",
+      "link": "https://github.com/webpack-contrib/sass-loader#webpackimporter",
+      "type": "boolean"
+    },
+    "warnRuleAsWarning": {
+      "description": "Treats the '@warn' rule as a webpack warning.",
+      "link": "https://github.com/webpack-contrib/sass-loader#warnruleaswarning",
       "type": "boolean"
     }
   },

package/dist/utils.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getRenderFunctionFromSassImplementation = getRenderFunctionFromSassImplementation;
 exports.getSassImplementation = getSassImplementation;
 exports.getSassOptions = getSassOptions;
-exports.getWebpackResolver = getWebpackResolver;
 exports.getWebpackImporter = getWebpackImporter;
-exports.getRenderFunctionFromSassImplementation = getRenderFunctionFromSassImplementation;
-exports.normalizeSourceMap = normalizeSourceMap;
+exports.getWebpackResolver = getWebpackResolver;
 exports.isSupportedFibers = isSupportedFibers;
+exports.normalizeSourceMap = normalizeSourceMap;
 
 var _url = _interopRequireDefault(require("url"));
 
@@ -19,6 +19,8 @@ var _full = require("klona/full");
 
 var _neoAsync = _interopRequireDefault(require("neo-async"));
 
+var _SassWarning = _interopRequireDefault(require("./SassWarning"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function getDefaultSassImplementation() {
@@ -40,9 +42,7 @@ function getDefaultSassImplementation() {
   return require(sassImplPkg);
 }
 /**
- * @public
- * This function is not Webpack-specific and can be used by tools wishing to
- * mimic `sass-loader`'s behaviour, so its signature should not be changed.
+ * This function is not Webpack-specific and can be used by tools wishing to mimic `sass-loader`'s behaviour, so its signature should not be changed.
  */
 
 
@@ -58,6 +58,17 @@ function getSassImplementation(loaderContext, implementation) {
     }
   }
 
+  if (typeof resolvedImplementation === "string") {
+    try {
+      // eslint-disable-next-line import/no-dynamic-require, global-require
+      resolvedImplementation = require(resolvedImplementation);
+    } catch (error) {
+      loaderContext.emitError(error); // eslint-disable-next-line consistent-return
+
+      return;
+    }
+  }
+
   const {
     info
   } = resolvedImplementation;
@@ -86,6 +97,11 @@ function getSassImplementation(loaderContext, implementation) {
 
   loaderContext.emitError(new Error(`Unknown Sass implementation "${implementationName}".`));
 }
+/**
+ * @param {any} loaderContext
+ * @returns {boolean}
+ */
+
 
 function isProductionLikeMode(loaderContext) {
   return loaderContext.mode === "production" || !loaderContext.mode;
@@ -93,8 +109,10 @@ function isProductionLikeMode(loaderContext) {
 
 function proxyCustomImporters(importers, loaderContext) {
   return [].concat(importers).map(importer => function proxyImporter(...args) {
-    this.webpackLoaderContext = loaderContext;
-    return importer.apply(this, args);
+    const self = { ...this,
+      webpackLoaderContext: loaderContext
+    };
+    return importer.apply(self, args);
   });
 }
 
@@ -180,6 +198,57 @@ async function getSassOptions(loaderContext, loaderOptions, content, implementat
   options.importer = options.importer ? proxyCustomImporters(Array.isArray(options.importer) ? options.importer : [options.importer], loaderContext) : [];
   options.includePaths = [].concat(process.cwd()).concat( // We use `includePaths` in context for resolver, so it should be always absolute
   (options.includePaths || []).map(includePath => _path.default.isAbsolute(includePath) ? includePath : _path.default.join(process.cwd(), includePath))).concat(process.env.SASS_PATH ? process.env.SASS_PATH.split(process.platform === "win32" ? ";" : ":") : []);
+
+  if (typeof options.charset === "undefined") {
+    options.charset = true;
+  }
+
+  if (!options.logger) {
+    // TODO set me to `true` by default in the next major release
+    const needEmitWarning = loaderOptions.warnRuleAsWarning === true;
+    const logger = loaderContext.getLogger("sass-loader");
+
+    const formatSpan = span => `${span.url || "-"}:${span.start.line}:${span.start.column}: `;
+
+    options.logger = {
+      debug(message, loggerOptions) {
+        let builtMessage = "";
+
+        if (loggerOptions.span) {
+          builtMessage = formatSpan(loggerOptions.span);
+        }
+
+        builtMessage += message;
+        logger.debug(builtMessage);
+      },
+
+      warn(message, loggerOptions) {
+        let builtMessage = "";
+
+        if (loggerOptions.deprecation) {
+          builtMessage += "Deprecation ";
+        }
+
+        if (loggerOptions.span && !loggerOptions.stack) {
+          builtMessage = formatSpan(loggerOptions.span);
+        }
+
+        builtMessage += message;
+
+        if (loggerOptions.stack) {
+          builtMessage += `\n\n${loggerOptions.stack}`;
+        }
+
+        if (needEmitWarning) {
+          loaderContext.emitWarning(new _SassWarning.default(builtMessage, loggerOptions));
+        } else {
+          logger.warn(builtMessage);
+        }
+      }
+
+    };
+  }
+
   return options;
 }
 
@@ -203,12 +272,12 @@ const IS_MODULE_IMPORT = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/
  *
  * @param {string} url
  * @param {boolean} forWebpackResolver
- * @param {string} rootContext
+ * @param {boolean} fromImport
  * @returns {Array<string>}
  */
 
 function getPossibleRequests( // eslint-disable-next-line no-shadow
-url, forWebpackResolver = false) {
+url, forWebpackResolver = false, fromImport = false) {
   let request = url; // In case there is module request, send this to webpack resolver
 
   if (forWebpackResolver) {
@@ -224,7 +293,7 @@ url, forWebpackResolver = false) {
   // @see https://github.com/webpack-contrib/sass-loader/issues/167
 
 
-  const ext = _path.default.extname(request).toLowerCase(); // Because @import is also defined in CSS, Sass needs a way of compiling plain CSS @imports without trying to import the files at compile time.
+  const extension = _path.default.extname(request).toLowerCase(); // Because @import is also defined in CSS, Sass needs a way of compiling plain CSS @imports without trying to import the files at compile time.
   // To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports:
   //  - imports where the URL ends with .css.
   //  - imports where the URL begins http:// or https://.
@@ -234,15 +303,19 @@ url, forWebpackResolver = false) {
   // The `node-sass` package sends `@import` ending on `.css` to importer, it is bug, so we skip resolve
 
 
-  if (ext === ".css") {
+  if (extension === ".css") {
     return [];
   }
 
   const dirname = _path.default.dirname(request);
 
+  const normalizedDirname = dirname === "." ? "" : `${dirname}/`;
+
   const basename = _path.default.basename(request);
 
-  return [...new Set([`${dirname}/_${basename}`, request].concat(forWebpackResolver ? [`${_path.default.dirname(url)}/_${basename}`, url] : []))];
+  const basenameWithoutExtension = _path.default.basename(request, extension);
+
+  return [...new Set([].concat(fromImport ? [`${normalizedDirname}_${basenameWithoutExtension}.import${extension}`, `${normalizedDirname}${basenameWithoutExtension}.import${extension}`] : []).concat([`${normalizedDirname}_${basename}`, `${normalizedDirname}${basename}`]).concat(forWebpackResolver ? [url] : []))];
 }
 
 function promiseResolve(callbackResolve) {
@@ -313,8 +386,16 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
     }
   }
 
-  const isDartSass = implementation.info.includes("dart-sass");
-  const sassResolve = promiseResolve(resolverFactory({
+  const isDartSass = implementation.info.includes("dart-sass"); // We only have one difference with the built-in sass resolution logic and out resolution logic:
+  // First, we look at the files starting with `_`, then without `_` (i.e. `_name.sass`, `_name.scss`, `_name.css`, `name.sass`, `name.scss`, `name.css`),
+  // although `sass` look together by extensions (i.e. `_name.sass`/`name.sass`/`_name.scss`/`name.scss`/`_name.css`/`name.css`).
+  // It shouldn't be a problem because `sass` throw errors:
+  // - on having `_name.sass` and `name.sass` (extension can be `sass`, `scss` or `css`) in the same directory
+  // - on having `_name.sass` and `_name.scss` in the same directory
+  //
+  // Also `sass` prefer `sass`/`scss` over `css`.
+
+  const sassModuleResolve = promiseResolve(resolverFactory({
     alias: [],
     aliasFields: [],
     conditionNames: [],
@@ -327,7 +408,20 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
     restrictions: [/\.((sa|sc|c)ss)$/i],
     preferRelative: true
   }));
-  const webpackResolve = promiseResolve(resolverFactory({
+  const sassImportResolve = promiseResolve(resolverFactory({
+    alias: [],
+    aliasFields: [],
+    conditionNames: [],
+    descriptionFiles: [],
+    extensions: [".sass", ".scss", ".css"],
+    exportsFields: [],
+    mainFields: [],
+    mainFiles: ["_index.import", "_index", "index.import", "index"],
+    modules: [],
+    restrictions: [/\.((sa|sc|c)ss)$/i],
+    preferRelative: true
+  }));
+  const webpackModuleResolve = promiseResolve(resolverFactory({
     dependencyType: "sass",
     conditionNames: ["sass", "style"],
     mainFields: ["sass", "style", "main", "..."],
@@ -336,7 +430,16 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
     restrictions: [/\.((sa|sc|c)ss)$/i],
     preferRelative: true
   }));
-  return (context, request) => {
+  const webpackImportResolve = promiseResolve(resolverFactory({
+    dependencyType: "sass",
+    conditionNames: ["sass", "style"],
+    mainFields: ["sass", "style", "main", "..."],
+    mainFiles: ["_index.import", "_index", "index.import", "index", "..."],
+    extensions: [".sass", ".scss", ".css"],
+    restrictions: [/\.((sa|sc|c)ss)$/i],
+    preferRelative: true
+  }));
+  return (context, request, fromImport) => {
     // See https://github.com/webpack/webpack/issues/12340
     // Because `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`
     // custom importer may not return `{ file: '/path/to/name.ext' }` and therefore our `context` will be relative
@@ -375,11 +478,11 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
       // 5. Filesystem imports relative to a `SASS_PATH` path.
       //
       // `sass` run custom importers before `3`, `4` and `5` points, we need to emulate this behavior to avoid wrong resolution.
-      const sassPossibleRequests = getPossibleRequests(request); // `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`, so we need emulate this too
+      const sassPossibleRequests = getPossibleRequests(request, false, fromImport); // `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`, so we need emulate this too
 
       if (!isDartSass) {
         resolutionMap = resolutionMap.concat({
-          resolve: sassResolve,
+          resolve: fromImport ? sassImportResolve : sassModuleResolve,
           context: _path.default.dirname(context),
           possibleRequests: sassPossibleRequests
         });
@@ -388,16 +491,16 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
       resolutionMap = resolutionMap.concat( // eslint-disable-next-line no-shadow
       includePaths.map(context => {
         return {
-          resolve: sassResolve,
+          resolve: fromImport ? sassImportResolve : sassModuleResolve,
           context,
           possibleRequests: sassPossibleRequests
         };
       }));
     }
 
-    const webpackPossibleRequests = getPossibleRequests(request, true);
+    const webpackPossibleRequests = getPossibleRequests(request, true, fromImport);
     resolutionMap = resolutionMap.concat({
-      resolve: webpackResolve,
+      resolve: fromImport ? webpackImportResolve : webpackModuleResolve,
       context: _path.default.dirname(context),
       possibleRequests: webpackPossibleRequests
     });
@@ -405,19 +508,22 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
   };
 }
 
-const matchCss = /\.css$/i;
+const MATCH_CSS = /\.css$/i;
 
 function getWebpackImporter(loaderContext, implementation, includePaths) {
   const resolve = getWebpackResolver(loaderContext.getResolve, implementation, includePaths);
-  return (originalUrl, prev, done) => {
-    resolve(prev, originalUrl).then(result => {
+  return function importer(originalUrl, prev, done) {
+    const {
+      fromImport
+    } = this;
+    resolve(prev, originalUrl, fromImport).then(result => {
       // Add the result as dependency.
       // Although we're also using stats.includedFiles, this might come in handy when an error occurs.
       // In this case, we don't get stats.includedFiles from node-sass/sass.
       loaderContext.addDependency(_path.default.normalize(result)); // By removing the CSS file extension, we trigger node-sass to include the CSS file instead of just linking it.
 
       done({
-        file: result.replace(matchCss, "")
+        file: result.replace(MATCH_CSS, "")
       });
     }) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
     .catch(() => {
@@ -455,6 +561,10 @@ function getRenderFunctionFromSassImplementation(implementation) {
 }
 
 const ABSOLUTE_SCHEME = /^[A-Za-z0-9+\-.]+:/;
+/**
+ * @param {string} source
+ * @returns {"absolute" | "scheme-relative" | "path-absolute" | "path-absolute"}
+ */
 
 function getURLType(source) {
   if (source[0] === "/") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "11.1.1",
+  "version": "12.3.0",
   "description": "Sass loader for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/sass-loader",
@@ -13,7 +13,7 @@
   },
   "main": "dist/cjs.js",
   "engines": {
-    "node": ">= 10.13.0"
+    "node": ">= 12.13.0"
   },
   "scripts": {
     "start": "npm run build -- -w",
@@ -21,7 +21,7 @@
     "prebuild": "npm run clean",
     "build": "cross-env NODE_ENV=production babel src -d dist --copy-files",
     "commitlint": "commitlint --from=master",
-    "security": "npm audit",
+    "security": "npm audit --production",
     "lint:prettier": "prettier --list-different .",
     "lint:js": "eslint --cache .",
     "lint": "npm-run-all -l -p \"lint:**\"",
@@ -59,40 +59,41 @@
     "neo-async": "^2.6.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.0",
-    "@babel/preset-env": "^7.14.1",
-    "@commitlint/cli": "^12.1.1",
-    "@commitlint/config-conventional": "^12.1.1",
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@commitlint/cli": "^13.1.0",
+    "@commitlint/config-conventional": "^13.1.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^26.6.3",
-    "bootstrap": "^4.5.3",
+    "babel-jest": "^27.0.6",
     "bootstrap-sass": "^3.4.1",
+    "bootstrap-v4": "npm:bootstrap@^4.5.3",
+    "bootstrap-v5": "npm:bootstrap@^5.0.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.4",
+    "css-loader": "^6.2.0",
     "del": "^6.0.0",
-    "del-cli": "^3.0.1",
-    "enhanced-resolve": "^5.8.0",
-    "eslint": "^7.26.0",
+    "del-cli": "^4.0.1",
+    "enhanced-resolve": "^5.8.2",
+    "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.23.3",
     "fibers": "^5.0.0",
     "file-loader": "^6.2.0",
     "foundation-sites": "^6.6.3",
-    "husky": "^6.0.0",
-    "jest": "^26.6.3",
-    "lint-staged": "^11.0.0",
+    "husky": "^7.0.1",
+    "jest": "^27.0.6",
+    "lint-staged": "^11.0.1",
     "material-components-web": "^8.0.0",
     "memfs": "^3.2.2",
-    "node-sass": "^6.0.0",
+    "node-sass": "^6.0.1",
     "node-sass-glob-importer": "^5.3.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.0",
-    "sass": "^1.32.12",
+    "prettier": "^2.3.2",
+    "sass": "^1.35.2",
     "semver": "^7.3.5",
-    "standard-version": "^9.3.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^5.36.2"
+    "standard-version": "^9.3.1",
+    "style-loader": "^3.2.1",
+    "webpack": "^5.45.1"
   },
   "keywords": [
     "sass",