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

[cjcenizal]

No description provided.

[tylersmalley]

Expanding on our conversation here. When would someone need to manually compile the CSS? I can understand creating a grunt task for it, but not sure it warrants an aliased npm task.

[cjcenizal]

@tylersmalley I've addressed your feedback. Can you take another look?

[tylersmalley]

We should use Bluebird.promisify instead of wrapping here

[cjcenizal]

Could you show me what you mean?

[tylersmalley]

Thinking something like this:

  import { promisify } from 'bluebird';
  const renderSass = promisify(sass.render);

  function uiFrameworkCompile() {
    const from = 'ui_framework/components/index.scss';
    const to = 'ui_framework/dist/ui_framework.css';

    return renderSass({
      file: from
    }).then(result => {
      postcss([postcssConfig])
        .process(result.css, { from, to })
        .then(result => {
          grunt.file.write(to, result.css);

          if (result.map) {
            grunt.file.write(`${to}.map`, result.map);
          }
        });
    }).catch(error => {
      grunt.log.error(error);
    });
  }

[tylersmalley]

If you wanted to use a promise here you could as well, but I feel the callback is fine if you want to leave it.

const spawn = promisify(grunt.util.spawn);

...

spawn({
  cmd: isPlatformWindows ? '.\\node_modules\\.bin\\grunt.cmd' : './node_modules/.bin/grunt',
  args: [ 'uiFramework:compileCss' ]
}).then(grunt.log.writeln).catch(e => grunt.log.error(e.stdout));

[tylersmalley]

One minor request to use promisify.

[cjcenizal]

@tylersmalley When I implemented your change, the output in the terminal lost some of its color, and the "bell" also didn't ring when there was an error:

Here's how it looked before:

Any suggestions on what's going on here and how we can get this behavior back?

[tylersmalley]

Can use src here

[cjcenizal]

Good catch! Fixed. Thanks.

[tylersmalley]

LGTM - not sure why promisify is dropping the colors and bell. Got the same results with Node 8's util.promisify. This works fine.