fix(index): continue watching after dependency {Error}

lib/index.js

@@ -186,6 +186,7 @@ module.exports = function loader (css, map) {
         return null
       })
   }).catch((err) => {
+    if (err.file) { this.addDependency(err.file) }
     return err.name === 'CssSyntaxError' ? cb(new SyntaxError(err)) : cb(err)
   })
 }

package.json

@@ -20,10 +20,12 @@
     "jest": "^21.0.0",
     "jsdoc-to-markdown": "^3.0.0",
     "memory-fs": "^0.4.0",
+    "postcss-import": "^11.0.0",
     "postcss-js": "^1.0.0",
     "standard": "^10.0.0",
     "standard-version": "^4.0.0",
     "sugarss": "^1.0.0",
+    "util.promisify": "^1.0.0",
     "webpack": "^3.0.0"
   },
   "scripts": {

test/__snapshots__/loader.test.js.snap

@@ -1,3 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loader Default 1`] = `"module.exports = \\"a { color: black }\\\\n\\""`;
+
+exports[`Loader Watching Deps After An Error Default 1`] = `"module.exports = \\"a { color: black }\\\\n\\""`;
+
+exports[`Loader Watching Deps After An Error Default 2`] = `"throw new Error(\\"Module build failed: Syntax Error \\\\n\\\\n(1:5) Unknown word\\\\n\\\\n\\\\u001b[31m\\\\u001b[1m>\\\\u001b[22m\\\\u001b[39m\\\\u001b[90m 1 | \\\\u001b[39ma \\\\u001b[33m{\\\\u001b[39m color black \\\\u001b[33m}\\\\u001b[39m\\\\n \\\\u001b[90m   | \\\\u001b[39m    \\\\u001b[31m\\\\u001b[1m^\\\\u001b[22m\\\\u001b[39m\\\\n \\\\u001b[90m 2 | \\\\u001b[39m\\\\n\\");"`;
+
+exports[`Loader Watching Deps After An Error Default 3`] = `"module.exports = \\"a { color: black }\\\\n\\""`;

test/fixtures/css-watching/index.js

@@ -0,0 +1,3 @@
+import style from './style.css'
+
+export default style

test/fixtures/css-watching/noSyntaxError.css

@@ -0,0 +1 @@
+a { color: black }

test/fixtures/css-watching/style.css

@@ -0,0 +1 @@
+@import "./styleDep";

test/fixtures/css-watching/syntaxError.css

@@ -0,0 +1 @@
+a { color black }

test/helpers/compiler.js

@@ -43,11 +43,21 @@ module.exports = function compiler (fixture, config, options) {
 
   if (!options.emit) compiler.outputFileSystem = new MemoryFS()
 
-  return new Promise((resolve, reject) => {
-    return compiler.run((err, stats) => {
-      if (err) reject(err)
+  if (options.watching) {
+    return new Promise((resolve, reject) => {
+      const c = compiler.watch({}, (err, stats) => {
+        options.handler(err, stats, (s) => {
+          c.close(resolve)
+        })
+      })
+    })
+  } else {
+    return new Promise((resolve, reject) => {
+      return compiler.run((err, stats) => {
+        if (err) reject(err)
 
-      resolve(stats)
+        resolve(stats)
+      })
     })
-  })
+  }
 }

test/helpers/fileChange.js

@@ -0,0 +1,31 @@
+const path = require('path')
+const { readFile, writeFile, unlink } = require('fs')
+const promisify = require('util.promisify')
+
+const rf = promisify(readFile)
+const wf = promisify(writeFile)
+const rm = promisify(unlink)
+
+function readCssFile (name) {
+  const fileName = path.join(__dirname, '../fixtures', name)
+
+  return rf(fileName)
+    .then(c => c.toString())
+}
+
+function writeCssFile (name, contents) {
+  const fileName = path.join(__dirname, '../fixtures', name)
+
+  return wf(fileName, contents)
+}
+
+module.exports.copyCssFile = function copyCssFile (src, dest) {
+  return readCssFile(src)
+    .then(contents => writeCssFile(dest, contents))
+}
+
+module.exports.deleteCssFile = function deleteCssFile (name) {
+  const fileName = path.join(__dirname, '../fixtures', name)
+
+  return rm(fileName)
+}

test/loader.test.js

@@ -2,6 +2,7 @@
 
 const webpack = require('./helpers/compiler')
 const { loader } = require('./helpers/compilation')
+const { copyCssFile, deleteCssFile } = require('./helpers/fileChange');
 
 describe('Loader', () => {
   test('Default', () => {
@@ -20,4 +21,62 @@ describe('Loader', () => {
         expect(src).toMatchSnapshot()
       })
   })
+
+  describe('Watching Deps After An Error', () => {
+    const files = {
+      syntaxError: "css-watching/syntaxError.css",
+      noSyntaxError: "css-watching/noSyntaxError.css",
+      changingFile: "css-watching/styleDep.css"
+    }
+
+    beforeAll(() => copyCssFile(files.noSyntaxError, files.changingFile))
+
+    afterAll(() => deleteCssFile(files.changingFile))
+
+    test('Default', () => {
+      const config = {
+        loader: {
+          options: {
+            plugins: [require("postcss-import")],
+            watching: true
+          }
+        }
+      }
+
+      const testSteps = [
+        (stats) => {
+          const { err, src } = loader(stats)
+          expect(src).toMatchSnapshot()
+          expect(err.length).toEqual(0)
+          return copyCssFile(files.syntaxError, files.changingFile)
+        },
+        (stats) => {
+          const { err, src } = loader(stats)
+          expect(src).toMatchSnapshot()
+          expect(err.length).toEqual(1)
+          return copyCssFile(files.noSyntaxError, files.changingFile)
+        },
+        (stats, close) => {
+          const { err, src } = loader(stats)
+          expect(src).toMatchSnapshot()
+          expect(src).toEqual("module.exports = \"a { color: black }\\n\"")
+          expect(err.length).toEqual(0)
+          return close()
+        }
+      ];
+
+      var currentStep = 0
+
+      const options = {
+        watching: true,
+        handler: (err, stats, close) => {
+          testSteps[currentStep](stats, close)
+          currentStep++
+        }
+      }
+
+      return webpack('css-watching/index.js', config, options)
+    })
+  })
+
 })