fix(dev-server): fix handling css parse errors

Author: adamdbradley

src/dev-server/dev-client/app-error.ts

@@ -105,7 +105,9 @@ function appendDiagnostic(win: Window, doc: Document, config: d.DevClientConfig,
 
       const tdNum = doc.createElement('td');
       tdNum.className = 'dev-server-diagnostic-blob-num';
-      tdNum.setAttribute('data-line-number', l.lineNumber + '');
+      if (l.lineNumber > -1) {
+        tdNum.setAttribute('data-line-number', l.lineNumber + '');
+      }
       tr.appendChild(tdNum);
 
       const tdCode = doc.createElement('td');

src/sys/node/node-logger.ts

@@ -331,7 +331,12 @@ export class NodeLogger implements d.Logger {
           return;
         }
 
-        let msg = `L${l.lineNumber}:  `;
+        let msg = ``;
+
+        if (l.lineNumber > -1) {
+          msg = `L${l.lineNumber}:  `;
+        }
+
         while (msg.length < INDENT.length) {
           msg = ' ' + msg;
         }

src/sys/node/optimize-css-worker.ts

@@ -24,21 +24,72 @@ export async function optimizeCssWorker(inputOpts: d.OptimizeCssInput) {
 
     const processor = postcss(plugins);
 
-    const result = await processor.process(inputOpts.css, {
-      map: null,
-      from: inputOpts.filePath
-    });
-
-    result.warnings().forEach(warning => {
-      output.diagnostics.push({
-        header: `Optimize CSS: ${warning.plugin}`,
-        messageText: warning.text,
-        level: 'warn',
-        type: 'css'
+    try {
+      const result = await processor.process(inputOpts.css, {
+        map: null,
+        from: inputOpts.filePath
       });
-    });
 
-    output.css = result.css;
+      result.warnings().forEach(warning => {
+        output.diagnostics.push({
+          header: `Optimize CSS: ${warning.plugin}`,
+          messageText: warning.text,
+          level: 'warn',
+          type: 'css',
+          absFilePath: inputOpts.filePath
+        });
+      });
+
+      output.css = result.css;
+
+    } catch (e) {
+      const diagnostic: d.Diagnostic = {
+        header: `Optimize CSS`,
+        messageText: `CSS Error`,
+        level: `error`,
+        type: `css`,
+        absFilePath: inputOpts.filePath
+      };
+
+      if (typeof e.name === 'string') {
+        diagnostic.header = e.name;
+      }
+
+      if (typeof e.reason === 'string') {
+        diagnostic.messageText = e.reason;
+      }
+
+      if (typeof e.source === 'string' && typeof e.line === 'number') {
+        const lines = (e.source as string).replace(/\r/g, '\n').split('\n');
+
+        if (lines.length > 0) {
+          const addLine = (lineNumber: number) => {
+            const line = lines[lineNumber];
+            if (typeof line === 'string') {
+              const printLine: d.PrintLine = {
+                lineIndex: -1,
+                lineNumber: -1,
+                text: line,
+                errorCharStart: -1,
+                errorLength: -1
+              };
+              diagnostic.lines = diagnostic.lines || [];
+              diagnostic.lines.push(printLine);
+            }
+          };
+
+          addLine(e.line - 3);
+          addLine(e.line - 2);
+          addLine(e.line - 1);
+          addLine(e.line);
+          addLine(e.line + 1);
+          addLine(e.line + 2);
+          addLine(e.line + 3);
+        }
+      }
+
+      output.diagnostics.push(diagnostic);
+    }
 
   } catch (e) {
     catchError(output.diagnostics, e);