refactor: avoid using babel-code-frame (webpack-contrib#799)

Author: evilebottnawi

lib/CssSyntaxError.js

@@ -0,0 +1,28 @@
+module.exports = class CssSyntaxError extends Error {
+  constructor(error) {
+    super(error);
+
+    const { reason, line, column } = error;
+
+    this.name = 'CssSyntaxError';
+
+    // Based on https://github.com/postcss/postcss/blob/master/lib/css-syntax-error.es6#L132
+    // We don't need `plugin` and `file` properties.
+    this.message = `${this.name}\n\n`;
+
+    if (typeof line !== 'undefined') {
+      this.message += `(${line}:${column}) `;
+    }
+
+    this.message += `${reason}`;
+
+    const code = error.showSourceCode();
+
+    if (code) {
+      this.message += `\n\n${code}\n`;
+    }
+
+    // We don't need stack https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#31-dont-show-js-stack-for-csssyntaxerror
+    this.stack = false;
+  }
+};

lib/processCss.js

@@ -2,7 +2,6 @@
   MIT License http://www.opensource.org/licenses/mit-license.php
   Author Tobias Koppers @sokra
 */
-const formatCodeFrame = require('babel-code-frame');
 const Tokenizer = require('css-selector-tokenizer');
 const postcss = require('postcss');
 const loaderUtils = require('loader-utils');
@@ -14,6 +13,7 @@ const modulesScope = require('postcss-modules-scope');
 const modulesValues = require('postcss-modules-values');
 const valueParser = require('postcss-value-parser');
 
+const CssSyntaxError = require('./CssSyntaxError');
 const getLocalIdent = require('./getLocalIdent');
 
 const parserPlugin = postcss.plugin('css-loader-parser', (options) => (css) => {
@@ -227,46 +227,9 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
         urlItemRegExp: /___CSS_LOADER_URL___([0-9]+)___/,
       });
     })
-    .catch((err) => {
-      if (err.name === 'CssSyntaxError') {
-        const wrappedError = new CSSLoaderError(
-          'Syntax Error',
-          err.reason,
-          err.line != null && err.column != null
-            ? { line: err.line, column: err.column }
-            : null,
-          err.input.source
-        );
-        callback(wrappedError);
-      } else {
-        callback(err);
-      }
+    .catch((error) => {
+      callback(
+        error.name === 'CssSyntaxError' ? new CssSyntaxError(error) : error
+      );
     });
 };
-
-function formatMessage(message, loc, source) {
-  let formatted = message;
-  if (loc) {
-    formatted = `${formatted} (${loc.line}:${loc.column})`;
-  }
-  if (loc && source) {
-    formatted = `${formatted}\n\n${formatCodeFrame(
-      source,
-      loc.line,
-      loc.column
-    )}\n`;
-  }
-  return formatted;
-}
-
-function CSSLoaderError(name, message, loc, source, error) {
-  Error.call(this);
-  Error.captureStackTrace(this, CSSLoaderError);
-  this.name = name;
-  this.error = error;
-  this.message = formatMessage(message, loc, source);
-  this.hideStack = true;
-}
-
-CSSLoaderError.prototype = Object.create(Error.prototype);
-CSSLoaderError.prototype.constructor = CSSLoaderError;