[UI Framework] Spawn compileCss as a child process to prevent a node-sass fatal error from killing the watch process (#13222) (#13476)

* Spawn compileCss as a child process to prevent a node-sass fatal error from killing the watch process.
* Document tasks.

tasks/ui_framework.js

@@ -3,6 +3,7 @@ import postcss from 'postcss';
 import postcssConfig from '../src/optimize/postcss.config';
 import chokidar from 'chokidar';
 import debounce from 'lodash/function/debounce';
+
 const platform = require('os').platform();
 const isPlatformWindows = /^win/.test(platform);
 
@@ -44,6 +45,11 @@ module.exports = function (grunt) {
     Promise.all([uiFrameworkWatch(), uiFrameworkServerStart()]).then(done);
   });
 
+  grunt.registerTask('uiFramework:compileCss', function () {
+    const done = this.async();
+    uiFrameworkCompile().then(done);
+  });
+
   function uiFrameworkServerStart() {
     const serverCmd = {
       cmd: isPlatformWindows ? '.\\node_modules\\.bin\\webpack-dev-server.cmd' : './node_modules/.bin/webpack-dev-server',
@@ -77,27 +83,49 @@ module.exports = function (grunt) {
   }
 
   function uiFrameworkCompile() {
-    sass.render({
-      file: 'ui_framework/components/index.scss'
-    }, function (error, result) {
-      if (error) {
-        grunt.log.error(error);
-      }
+    const src = 'ui_framework/components/index.scss';
+    const dest = 'ui_framework/dist/ui_framework.css';
 
-      postcss([postcssConfig])
-        .process(result.css, { from: 'ui_framework/components/index.scss', to: 'ui_framework/dist/ui_framework.css' })
-        .then(result => {
-          grunt.file.write('ui_framework/dist/ui_framework.css', result.css);
+    return new Promise(resolve => {
+      sass.render({
+        file: src,
+      }, function (error, result) {
+        if (error) {
+          grunt.log.error(error);
+        }
 
-          if (result.map) {
-            grunt.file.write('ui_framework/dist/ui_framework.css.map', result.map);
-          }
-        });
+        postcss([postcssConfig])
+          .process(result.css, { from: src, to: dest })
+          .then(result => {
+            grunt.file.write(dest, result.css);
+
+            if (result.map) {
+              grunt.file.write(`${dest}.map`, result.map);
+            }
+
+            resolve();
+          });
+      });
     });
   }
 
   function uiFrameworkWatch() {
-    const debouncedCompile = debounce(uiFrameworkCompile, 400, { leading: true });
+    const debouncedCompile = debounce(() => {
+      // Compile the SCSS in a separate process because node-sass throws a fatal error if it fails
+      // to compile.
+      grunt.util.spawn({
+        cmd: isPlatformWindows ? '.\\node_modules\\.bin\\grunt.cmd' : './node_modules/.bin/grunt',
+        args: [
+          'uiFramework:compileCss',
+        ],
+      }, (error, result) => {
+        if (error) {
+          grunt.log.error(result.stdout);
+        } else {
+          grunt.log.writeln(result);
+        }
+      });
+    }, 400, { leading: true });
 
     return new Promise(() => {
       debouncedCompile();

ui_framework/README.md

@@ -7,8 +7,12 @@
 
 ### Documentation
 
+Compile the CSS with `./node_modules/grunt/bin/grunt uiFramework:compileCss` (OS X) or
+`.\node_modules\grunt\bin\grunt uiFramework:compileCss` (Windows).
+
 You can view interactive documentation by running `npm run uiFramework:start` and then visiting
-`http://localhost:8020/`.
+`http://localhost:8020/`. This will also start watching the SCSS files, and will recompile the CSS
+automatically for you when you make changes.
 
 You can run `node scripts/jest --watch` to watch for changes and run the tests as you code.