fix: warning and error serialization (#1523)

Author: alexander-akait

package-lock.json

@@ -49,7 +49,7 @@
     "icss-utils": "^5.1.0",
     "postcss": "^8.4.21",
     "postcss-modules-extract-imports": "^3.0.0",
-    "postcss-modules-local-by-default": "^4.0.1",
+    "postcss-modules-local-by-default": "^4.0.3",
     "postcss-modules-scope": "^3.0.0",
     "postcss-modules-values": "^4.0.0",
     "postcss-value-parser": "^4.2.0",

package.json

@@ -7,8 +7,6 @@ import postcss from "postcss";
 import postcssPkg from "postcss/package.json";
 import { satisfies } from "semver";
 
-import CssSyntaxError from "./CssSyntaxError";
-import Warning from "./Warning";
 import schema from "./options.json";
 import { icssParser, importParser, urlParser } from "./plugins";
 import {
@@ -27,6 +25,8 @@ import {
   sort,
   combineRequests,
   stringifyRequest,
+  warningFactory,
+  syntaxErrorFactory,
 } from "./utils";
 
 export default async function loader(content, map, meta) {
@@ -189,14 +189,14 @@ export default async function loader(content, map, meta) {
     }
 
     callback(
-      error.name === "CssSyntaxError" ? new CssSyntaxError(error) : error
+      error.name === "CssSyntaxError" ? syntaxErrorFactory(error) : error
     );
 
     return;
   }
 
   for (const warning of result.warnings()) {
-    this.emitWarning(new Warning(warning));
+    this.emitWarning(warningFactory(warning));
   }
 
   const imports = []

src/CssSyntaxError.js

@@ -1281,6 +1281,57 @@ function combineRequests(preRequest, url) {
     : preRequest + url;
 }
 
+function warningFactory(obj) {
+  let message = "";
+
+  if (typeof obj.line !== "undefined") {
+    message += `(${obj.line}:${obj.column}) `;
+  }
+
+  if (typeof obj.plugin !== "undefined") {
+    message += `from "${obj.plugin}" plugin: `;
+  }
+
+  message += obj.text;
+
+  if (obj.node) {
+    message += `\n\nCode:\n  ${obj.node.toString()}\n`;
+  }
+
+  const warning = new Error(message);
+
+  warning.stack = null;
+
+  return warning;
+}
+
+function syntaxErrorFactory(obj) {
+  let message = "\nSyntaxError\n\n";
+
+  if (typeof obj.line !== "undefined") {
+    message += `(${obj.line}:${obj.column}) `;
+  }
+
+  if (typeof obj.plugin !== "undefined") {
+    message += `from "${obj.plugin}" plugin: `;
+  }
+
+  message += obj.file ? `${obj.file} ` : "<css input> ";
+  message += `${obj.reason}`;
+
+  const code = obj.showSourceCode();
+
+  if (code) {
+    message += `\n\n${code}\n`;
+  }
+
+  const error = new Error(message);
+
+  error.stack = null;
+
+  return error;
+}
+
 export {
   normalizeOptions,
   shouldUseModulesPlugins,
@@ -1306,4 +1357,6 @@ export {
   stringifyRequest,
   isDataUrl,
   defaultGetLocalIdent,
+  warningFactory,
+  syntaxErrorFactory,
 };

src/Warning.js

@@ -2202,68 +2202,101 @@ a {
 exports[`'exportType' option should work with 'css-style-sheet' value and urls: warnings 1`] = `
 Array [
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(120:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background: green url() xyz'
 
-(120:3) Unable to find uri in 'background: green url() xyz'",
+Code:
+  background: green url() xyz
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(124:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background: green url('') xyz'
 
-(124:3) Unable to find uri in 'background: green url('') xyz'",
+Code:
+  background: green url('') xyz
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(128:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background: green url(\\"\\") xyz'
 
-(128:3) Unable to find uri in 'background: green url(\\"\\") xyz'",
+Code:
+  background: green url(\\"\\") xyz
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(132:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background: green url('   ') xyz'
 
-(132:3) Unable to find uri in 'background: green url('   ') xyz'",
+Code:
+  background: green url('   ') xyz
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(136:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background: green url(
+  ) xyz'
 
-(136:3) Unable to find uri in 'background: green url(
-  ) xyz'",
+Code:
+  background: green url(
+  ) xyz
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(216:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background-image: -webkit-image-set('')'
 
-(216:3) Unable to find uri in 'background-image: -webkit-image-set('')'",
+Code:
+  background-image: -webkit-image-set('')
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(218:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background-image: image-set('')'
 
-(218:3) Unable to find uri in 'background-image: image-set('')'",
+Code:
+  background-image: image-set('')
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(219:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background-image: image-set(\\"\\")'
 
-(219:3) Unable to find uri in 'background-image: image-set(\\"\\")'",
+Code:
+  background-image: image-set(\\"\\")
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(220:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background-image: image-set(\\"\\" 1x)'
 
-(220:3) Unable to find uri in 'background-image: image-set(\\"\\" 1x)'",
+Code:
+  background-image: image-set(\\"\\" 1x)
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(221:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background-image: image-set(url())'
 
-(221:3) Unable to find uri in 'background-image: image-set(url())'",
+Code:
+  background-image: image-set(url())
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(222:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background-image: image-set(
+    url()
+  )'
 
-(222:3) Unable to find uri in 'background-image: image-set(
+Code:
+  background-image: image-set(
     url()
-  )'",
+  )
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(225:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background-image: image-set(URL())'
 
-(225:3) Unable to find uri in 'background-image: image-set(URL())'",
+Code:
+  background-image: image-set(URL())
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(226:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background-image: image-set(url(''))'
 
-(226:3) Unable to find uri in 'background-image: image-set(url(''))'",
+Code:
+  background-image: image-set(url(''))
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(227:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background-image: image-set(url(\\"\\"))'
 
-(227:3) Unable to find uri in 'background-image: image-set(url(\\"\\"))'",
+Code:
+  background-image: image-set(url(\\"\\"))
+",
   "ModuleWarning: Module Warning (from \`replaced original path\`):
-Warning
+(228:3) from \\"postcss-url-parser\\" plugin: Unable to find uri in 'background-image: image-set(url('') 1x)'
 
-(228:3) Unable to find uri in 'background-image: image-set(url('') 1x)'",
+Code:
+  background-image: image-set(url('') 1x)
+",
 ]
 `;