Limit threads when transpiling with node-sass (#105)

This PR introduces a worker queue which limits the number of concurrent threads similar to how webpack [sass-loader](https://github.com/webpack-contrib/sass-loader/blob/2529c0716b1bca321c22d16636b1385682b1c730/lib/loader.js#L14) does. The changes are a workaround for the issues in node-sass discussed in #104.

Author: dnjstrom

package.json

@@ -48,6 +48,7 @@
     "cssnano": "^3.10.0",
     "fs-extra": "^5.0.0",
     "import-cwd": "^2.1.0",
+    "p-queue": "^2.4.2",
     "pify": "^3.0.0",
     "postcss": "^6.0.21",
     "postcss-load-config": "^1.2.0",
@@ -79,4 +80,4 @@
       ]
     ]
   }
-}
+}

src/sass-loader.js

@@ -2,6 +2,12 @@ import path from 'path'
 import pify from 'pify'
 import resolve from 'resolve'
 import importCwd from 'import-cwd'
+import PQueue from 'p-queue'
+
+// This queue makes sure node-sass leaves one thread available for executing fs tasks
+// See: https://github.com/sass/node-sass/issues/857
+const threadPoolSize = process.env.UV_THREADPOOL_SIZE || 4
+const workQueue = new PQueue({ concurrency: threadPoolSize - 1 })
 
 const moduleRe = /^~([a-z0-9]|@).+/i
 
@@ -17,54 +23,59 @@ export default {
   test: /\.s[ac]ss$/,
   async process({ code }) {
     const sass = importCwd('node-sass')
-    const res = await pify(sass.render.bind(sass))({
-      ...this.options,
-      file: this.id,
-      data: code,
-      indentedSyntax: /\.sass$/.test(this.id),
-      sourceMap: this.sourceMap,
-      importer: [
-        (url, importer, done) => {
-          if (!moduleRe.test(url)) return done({ file: url })
 
-          const moduleUrl = url.slice(1)
-          const partialUrl = getUrlOfPartial(moduleUrl)
+    return new Promise((resolve, reject) => {
+      workQueue.add(() =>
+        pify(sass.render.bind(sass))({
+          ...this.options,
+          file: this.id,
+          data: code,
+          indentedSyntax: /\.sass$/.test(this.id),
+          sourceMap: this.sourceMap,
+          importer: [
+            (url, importer, done) => {
+              if (!moduleRe.test(url)) return done({ file: url })
 
-          const options = {
-            basedir: path.dirname(importer),
-            extensions: ['.scss', '.sass', '.css']
-          }
-          const finishImport = id => {
-            done({
-              // Do not add `.css` extension in order to inline the file
-              file: id.endsWith('.css') ? id.replace(/\.css$/, '') : id
-            })
-          }
+              const moduleUrl = url.slice(1)
+              const partialUrl = getUrlOfPartial(moduleUrl)
 
-          const next = () => {
-            // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
-            done({ file: url })
-          }
+              const options = {
+                basedir: path.dirname(importer),
+                extensions: ['.scss', '.sass', '.css']
+              }
+              const finishImport = id => {
+                done({
+                  // Do not add `.css` extension in order to inline the file
+                  file: id.endsWith('.css') ? id.replace(/\.css$/, '') : id
+                })
+              }
 
-          // Give precedence to importing a partial
-          resolvePromise(partialUrl, options)
-            .then(finishImport)
-            .catch(err => {
-              if (err.code === 'MODULE_NOT_FOUND' || err.code === 'ENOENT') {
-                resolvePromise(moduleUrl, options)
-                  .then(finishImport)
-                  .catch(next)
-              } else {
-                next()
+              const next = () => {
+                // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
+                done({ file: url })
               }
-            })
-        }
-      ].concat(this.options.importer || [])
-    })
 
-    return {
-      code: res.css.toString(),
-      map: res.map && res.map.toString()
-    }
+              // Give precedence to importing a partial
+              resolvePromise(partialUrl, options)
+                .then(finishImport)
+                .catch(err => {
+                  if (err.code === 'MODULE_NOT_FOUND' || err.code === 'ENOENT') {
+                    resolvePromise(moduleUrl, options)
+                      .then(finishImport)
+                      .catch(next)
+                  } else {
+                    next()
+                  }
+                })
+            }
+          ].concat(this.options.importer || [])
+        }).then(res =>
+          resolve({
+            code: res.css.toString(),
+            map: res.map && res.map.toString()
+          })
+        ).catch(reject)
+      )
+    })
   }
 }

yarn.lock

@@ -4556,6 +4556,10 @@ p-locate@^2.0.0:
   dependencies:
     p-limit "^1.1.0"
 
+p-queue@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-2.4.2.tgz#03609826682b743be9a22dba25051bd46724fc34"
+
 package-json@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"