feat: use webpack logger to log sass messages (only for dart-sass),…

… configure it using https://webpack.js.org/configuration/other-options/#infrastructurelogging (#991)
webpack-contrib · Oct 27, 2021 · bb7cef9 · bb7cef9
1 parent 3498284
commit bb7cef9
Show file tree

Hide file tree

Showing 9 changed files with 1,302 additions and 1,326 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,7 +74,7 @@
     "del": "^6.0.0",
     "del-cli": "^4.0.1",
     "enhanced-resolve": "^5.8.2",
-    "eslint": "^7.30.0",
+    "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.23.3",
     "fibers": "^5.0.0",

diff --git a/src/utils.js b/src/utils.js
@@ -168,10 +168,7 @@ async function getSassOptions(
     : content;
 
   // opt.outputStyle
-  if (
-    typeof options.outputStyle === "undefined" &&
-    isProductionLikeMode(loaderContext)
-  ) {
+  if (!options.outputStyle && isProductionLikeMode(loaderContext)) {
     options.outputStyle = "compressed";
   }
 
@@ -231,6 +228,45 @@ async function getSassOptions(
     options.charset = true;
   }
 
+  if (!options.logger) {
+    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}`;
+        }
+
+        logger.warn(builtMessage);
+      },
+    };
+  }
+
   return options;
 }
 

diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`loader should allow to use own logger (dart-sass) (sass): css 1`] = `
+"a {
+  color: red;
+}"
+`;
+
+exports[`loader should allow to use own logger (dart-sass) (sass): errors 1`] = `Array []`;
+
+exports[`loader should allow to use own logger (dart-sass) (sass): logs 1`] = `
+Array [
+  Object {
+    "message": "My debug message",
+    "type": "debug",
+  },
+  Object {
+    "message": "My warning message",
+    "type": "warn",
+  },
+]
+`;
+
+exports[`loader should allow to use own logger (dart-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`loader should allow to use own logger (dart-sass) (scss): css 1`] = `
+"a {
+  color: red;
+}"
+`;
+
+exports[`loader should allow to use own logger (dart-sass) (scss): errors 1`] = `Array []`;
+
+exports[`loader should allow to use own logger (dart-sass) (scss): logs 1`] = `
+Array [
+  Object {
+    "message": "My debug message",
+    "type": "debug",
+  },
+  Object {
+    "message": "My warning message",
+    "type": "warn",
+  },
+]
+`;
+
+exports[`loader should allow to use own logger (dart-sass) (scss): warnings 1`] = `Array []`;
+
 exports[`loader should import .import.sass files (dart-sass) (sass): css 1`] = `
 "a {
   display: block;
@@ -1326,6 +1372,70 @@ SassError: Can't find stylesheet to import.",
 
 exports[`loader should throw an error with a explicit file and a file does not exist using "@use" rule (dart-sass) (scss): warnings 1`] = `Array []`;
 
+exports[`loader should use webpack logger (dart-sass) (sass): css 1`] = `
+"a {
+  color: red;
+}"
+`;
+
+exports[`loader should use webpack logger (dart-sass) (sass): errors 1`] = `Array []`;
+
+exports[`loader should use webpack logger (dart-sass) (sass): logs 1`] = `
+Array [
+  Array [
+    Object {
+      "args": Array [
+        "file:///<cwd>/sass/logging.sass:0:0: My debug message",
+      ],
+      "type": "debug",
+    },
+    Object {
+      "args": Array [
+        "My warning message
+
+test/sass/logging.sass 2:1  root stylesheet
+",
+      ],
+      "type": "warn",
+    },
+  ],
+]
+`;
+
+exports[`loader should use webpack logger (dart-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`loader should use webpack logger (dart-sass) (scss): css 1`] = `
+"a {
+  color: red;
+}"
+`;
+
+exports[`loader should use webpack logger (dart-sass) (scss): errors 1`] = `Array []`;
+
+exports[`loader should use webpack logger (dart-sass) (scss): logs 1`] = `
+Array [
+  Array [
+    Object {
+      "args": Array [
+        "file:///<cwd>/scss/logging.scss:0:0: My debug message",
+      ],
+      "type": "debug",
+    },
+    Object {
+      "args": Array [
+        "My warning message
+
+test/scss/logging.scss 2:1  root stylesheet
+",
+      ],
+      "type": "warn",
+    },
+  ],
+]
+`;
+
+exports[`loader should use webpack logger (dart-sass) (scss): warnings 1`] = `Array []`;
+
 exports[`loader should watch firstly in the "includePaths" values (dart-sass) (sass): css 1`] = `
 ".bar {
   color: red;

diff --git a/test/helpers/getCodeFromSass.js b/test/helpers/getCodeFromSass.js
@@ -781,6 +781,8 @@ function getCodeFromSass(testId, options) {
         .concat([testImporter])
     : [testImporter];
 
+  sassOptions.logger = { debug: () => {}, warn: () => {} };
+
   const { css, map } = implementation.renderSync(sassOptions);
 
   return { css: css.toString(), sourceMap: map };

diff --git a/test/helpers/getCompiler.js b/test/helpers/getCompiler.js
@@ -59,6 +59,7 @@ export default function getCompiler(fixture, config = {}, options = {}) {
     // eslint-disable-next-line no-undefined
     resolve: config.resolve || undefined,
   };
+
   // Compiler Options
   // eslint-disable-next-line no-param-reassign
   options = Object.assign({ output: false }, options);
@@ -71,7 +72,6 @@ export default function getCompiler(fixture, config = {}, options = {}) {
 
   if (!options.output) {
     compiler.outputFileSystem = createFsFromVolume(new Volume());
-    compiler.outputFileSystem.join = path.join.bind(path);
   }
 
   return compiler;

diff --git a/test/loader.test.js b/test/loader.test.js
@@ -1,4 +1,5 @@
 import path from "path";
+import url from "url";
 
 import nodeSass from "node-sass";
 import dartSass from "sass";
@@ -1737,6 +1738,69 @@ describe("loader", () => {
           expect(getWarnings(stats)).toMatchSnapshot("warnings");
           expect(getErrors(stats)).toMatchSnapshot("errors");
         });
+
+        it(`should use webpack logger (${implementationName}) (${syntax})`, async () => {
+          const testId = getTestId("logging", syntax);
+          const options = {
+            implementation: getImplementationByName(implementationName),
+          };
+          const compiler = getCompiler(testId, { loader: { options } });
+          const stats = await compile(compiler);
+          const codeFromBundle = getCodeFromBundle(stats, compiler);
+          const codeFromSass = getCodeFromSass(testId, options);
+          const logs = [];
+
+          for (const [name, value] of stats.compilation.logging) {
+            if (/sass-loader/.test(name)) {
+              logs.push(
+                value.map((item) => {
+                  return {
+                    type: item.type,
+                    args: item.args.map((arg) =>
+                      arg
+                        .replace(url.pathToFileURL(__dirname), "file:///<cwd>")
+                        .replace(/\\/g, "/")
+                    ),
+                  };
+                })
+              );
+            }
+          }
+
+          expect(codeFromBundle.css).toBe(codeFromSass.css);
+          expect(codeFromBundle.css).toMatchSnapshot("css");
+          expect(getWarnings(stats)).toMatchSnapshot("warnings");
+          expect(getErrors(stats)).toMatchSnapshot("errors");
+          expect(logs).toMatchSnapshot("logs");
+        });
+
+        it(`should allow to use own logger (${implementationName}) (${syntax})`, async () => {
+          const testId = getTestId("logging", syntax);
+          const logs = [];
+          const options = {
+            implementation: getImplementationByName(implementationName),
+            sassOptions: {
+              logger: {
+                warn: (message) => {
+                  logs.push({ type: "warn", message });
+                },
+                debug: (message) => {
+                  logs.push({ type: "debug", message });
+                },
+              },
+            },
+          };
+          const compiler = getCompiler(testId, { loader: { options } });
+          const stats = await compile(compiler);
+          const codeFromBundle = getCodeFromBundle(stats, compiler);
+          const codeFromSass = getCodeFromSass(testId, options);
+
+          expect(codeFromBundle.css).toBe(codeFromSass.css);
+          expect(codeFromBundle.css).toMatchSnapshot("css");
+          expect(getWarnings(stats)).toMatchSnapshot("warnings");
+          expect(getErrors(stats)).toMatchSnapshot("errors");
+          expect(logs).toMatchSnapshot("logs");
+        });
       }
     });
   });

diff --git a/test/sass/logging.sass b/test/sass/logging.sass
@@ -0,0 +1,5 @@
+@debug "My debug message"
+@warn "My warning message"
+
+a
+  color: red
diff --git a/test/scss/logging.scss b/test/scss/logging.scss
@@ -0,0 +1,6 @@
+@debug "My debug message";
+@warn "My warning message";
+
+a {
+  color: red;
+}