refactor: drop webpack@4 (#912)

BREAKING CHANGE: minimum supported `webpack` version is `5`

Author: cap-Bernardito

.github/workflows/nodejs.yml

@@ -56,7 +56,7 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
         node-version: [10.x, 12.x, 14.x]
-        webpack-version: [4, latest]
+        webpack-version: [latest]
 
     runs-on: ${{ matrix.os }}
 

README.md

@@ -83,7 +83,16 @@ Finally run `webpack` via your preferred method.
 
 Webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/).
 
-The `sass-loader` uses Sass's custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules from `node_modules`. Just prepend them with a `~` to tell Webpack that this is not a relative import:
+The `sass-loader` uses Sass's custom importer feature to pass all queries to the Webpack resolving engine.
+Thus you can import your Sass modules from `node_modules`.
+
+```scss
+@import "bootstrap";
+```
+
+Using `~` is deprecated and can be removed from your code (**we recommend it**), but we still support it for historical reasons.
+Why you can removed it? The loader will first try to resolve `@import` as relative, if it cannot be resolved, the loader will try to resolve `@import` inside [`node_modules`](https://webpack.js.org/configuration/resolve/#resolve-modules).
+Just prepend them with a `~` which tells webpack to look up the [`modules`](https://webpack.js.org/configuration/resolve/#resolve-modules).
 
 ```scss
 @import "~bootstrap";
@@ -569,7 +578,7 @@ For production builds it's recommended to extract the CSS from your bundle being
 
 There are two possibilities to extract a style sheet from the bundle:
 
-- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) (use this, when using webpack 4 configuration. Works in all use-cases)
+- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)
 - [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)
 
 **webpack.config.js**

package-lock.json

@@ -39,7 +39,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "webpack": "^4.36.0 || ^5.0.0",
+    "webpack": "^5.0.0",
     "node-sass": "^4.0.0 || ^5.0.0",
     "sass": "^1.3.0",
     "fibers": ">= 3.1.0"
@@ -57,23 +57,21 @@
   },
   "dependencies": {
     "klona": "^2.0.4",
-    "loader-utils": "^2.0.0",
     "neo-async": "^2.6.2",
-    "schema-utils": "^3.0.0",
-    "semver": "^7.3.2"
+    "semver": "^7.3.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^26.6.3",
     "bootstrap": "^4.5.3",
     "bootstrap-sass": "^3.4.1",
-    "cross-env": "^7.0.2",
+    "cross-env": "^7.0.3",
     "css-loader": "^5.0.1",
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
@@ -84,18 +82,18 @@
     "fibers": "^5.0.0",
     "file-loader": "^6.2.0",
     "foundation-sites": "^6.6.3",
-    "husky": "^4.3.0",
+    "husky": "^4.3.6",
     "jest": "^26.6.3",
-    "lint-staged": "^10.5.1",
+    "lint-staged": "^10.5.3",
     "material-components-web": "^8.0.0",
     "memfs": "^3.2.0",
     "node-sass": "^5.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.1.2",
-    "sass": "^1.29.0",
-    "standard-version": "^9.0.0",
+    "prettier": "^2.2.1",
+    "sass": "^1.32.0",
+    "standard-version": "^9.1.0",
     "style-loader": "^2.0.0",
-    "webpack": "^5.12.2"
+    "webpack": "^5.20.0"
   },
   "keywords": [
     "sass",

package.json

@@ -1,8 +1,5 @@
 import path from "path";
 
-import { validate } from "schema-utils";
-import { getOptions } from "loader-utils";
-
 import schema from "./options.json";
 import {
   getSassImplementation,
@@ -20,13 +17,7 @@ import SassError from "./SassError";
  * @param {string} content
  */
 async function loader(content) {
-  const options = getOptions(this);
-
-  validate(schema, options, {
-    name: "Sass Loader",
-    baseDataPath: "options",
-  });
-
+  const options = this.getOptions(schema);
   const callback = this.async();
   const implementation = getSassImplementation(this, options.implementation);
 

src/index.js

@@ -1,4 +1,5 @@
 {
+  "title": "Sass Loader options",
   "type": "object",
   "properties": {
     "implementation": {

src/options.json

@@ -3,7 +3,6 @@ import path from "path";
 
 import semver from "semver";
 import { klona } from "klona/full";
-import { urlToRequest } from "loader-utils";
 import async from "neo-async";
 
 function getDefaultSassImplementation() {
@@ -231,6 +230,7 @@ async function getSassOptions(
 // - ~@org/package
 // - ~@org/package/
 const isModuleImport = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+\/)$/;
+const moduleRequestRegex = /^[^?]*~/;
 
 /**
  * When `sass`/`node-sass` tries to resolve an import, it uses a special algorithm.
@@ -249,18 +249,19 @@ const isModuleImport = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+
 function getPossibleRequests(
   // eslint-disable-next-line no-shadow
   url,
-  forWebpackResolver = false,
-  rootContext = false
+  forWebpackResolver = false
 ) {
-  const request = urlToRequest(
-    url,
-    // Maybe it is server-relative URLs
-    forWebpackResolver && rootContext
-  );
+  let request = url;
 
   // In case there is module request, send this to webpack resolver
-  if (forWebpackResolver && isModuleImport.test(url)) {
-    return [...new Set([request, url])];
+  if (forWebpackResolver) {
+    request = request.replace(moduleRequestRegex, "");
+
+    if (isModuleImport.test(url)) {
+      request = request[request.length - 1] === "/" ? request : `${request}/`;
+
+      return [...new Set([request, url])];
+    }
   }
 
   // Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot.
@@ -376,6 +377,7 @@ function getWebpackResolver(
       mainFiles: ["_index", "index"],
       modules: [],
       restrictions: [/\.((sa|sc|c)ss)$/i],
+      preferRelative: true,
     })
   );
   const webpackResolve = promiseResolve(
@@ -385,6 +387,7 @@ function getWebpackResolver(
       mainFiles: ["_index", "index", "..."],
       extensions: [".sass", ".scss", ".css"],
       restrictions: [/\.((sa|sc|c)ss)$/i],
+      preferRelative: true,
     })
   );