Adds SCSS support for plugins (#19643)

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

package.json

@@ -307,6 +307,7 @@
     "murmurhash3js": "3.0.1",
     "ncp": "2.0.0",
     "nock": "8.0.0",
+    "node-sass": "^4.9.0",
     "pixelmatch": "4.0.2",
     "prettier": "^1.12.1",
     "proxyquire": "1.7.11",

packages/kbn-plugin-generator/sao_template/sao.js

@@ -63,12 +63,20 @@ module.exports = function({ name }) {
         message: 'Should a server API be generated?',
         default: true,
       },
+      generateScss: {
+        type: 'confirm',
+        message: 'Should SCSS be used?',
+        when: answers => answers.generateApp,
+        default: true,
+      },
     },
     filters: {
       'public/**/*': 'generateApp',
       'translations/**/*': 'generateTranslations',
       'public/hack.js': 'generateHack',
       'server/**/*': 'generateApi',
+      'public/app.scss': 'generateScss',
+      '.kibana-plugin-helpers.json': 'generateScss',
     },
     move: {
       gitignore: '.gitignore',

packages/kbn-plugin-generator/sao_template/template/.kibana-plugin-helpers.json

@@ -0,0 +1,3 @@
+{
+  "styleSheetToCompile": "public/app.scss"
+}

packages/kbn-plugin-generator/sao_template/template/index.js

@@ -9,7 +9,10 @@ export default function (kibana) {
       app: {
         title: '<%= startCase(name) %>',
         description: '<%= description %>',
-        main: 'plugins/<%= kebabCase(name) %>/app'
+        main: 'plugins/<%= kebabCase(name) %>/app',
+        <% if (generateScss) { %>
+        styleSheetPath: require('path').resolve(__dirname, 'public/app.scss'),
+        <% } %>
       },
       <% } %>
       <% if (generateHack) { %>

packages/kbn-plugin-helpers/package.json

@@ -17,6 +17,7 @@
     "gulp-zip": "^4.1.0",
     "inquirer": "^1.2.2",
     "minimatch": "^3.0.4",
+    "node-sass": "^4.9.0",
     "through2": "^2.0.3",
     "through2-map": "^3.0.0",
     "vinyl-fs": "^3.0.0"

packages/kbn-plugin-helpers/tasks/build/__fixtures__/create_build_test_plugin/public/styles.scss

@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}

packages/kbn-plugin-helpers/tasks/build/create_build.js

@@ -17,10 +17,11 @@
  * under the License.
  */
 
-const join = require('path').join;
+const path = require('path');
 const relative = require('path').relative;
 const { readFileSync, writeFileSync, unlinkSync, existsSync } = require('fs');
 const execFileSync = require('child_process').execFileSync;
+const sass = require('node-sass');
 const del = require('del');
 const vfs = require('vinyl-fs');
 const rename = require('gulp-rename');
@@ -34,7 +35,7 @@ const winCmd = require('../../lib/win_cmd');
 // in the built zip file. Therefore we remove all symlinked dependencies, so we
 // can re-create them when installing the plugin.
 function removeSymlinkDependencies(root) {
-  const nodeModulesPattern = join(root, '**', 'node_modules', '**');
+  const nodeModulesPattern = path.join(root, '**', 'node_modules', '**');
 
   return through.obj((file, enc, cb) => {
     const isSymlink = file.symlink != null;
@@ -50,7 +51,7 @@ function removeSymlinkDependencies(root) {
 
 // parse a ts config file
 function parseTsconfig(pluginSourcePath, configPath) {
-  const ts = require(join(pluginSourcePath, 'node_modules', 'typescript'));
+  const ts = require(path.join(pluginSourcePath, 'node_modules', 'typescript'));
 
   const { error, config } = ts.parseConfigFileTextToJson(
     configPath,
@@ -72,24 +73,28 @@ module.exports = function createBuild(
   files
 ) {
   const buildSource = plugin.root;
-  const buildRoot = join(buildTarget, 'kibana', plugin.id);
+  const buildRoot = path.join(buildTarget, 'kibana', plugin.id);
 
   return del(buildTarget)
     .then(function() {
       return new Promise(function(resolve, reject) {
         vfs
-          .src(files, { cwd: buildSource, base: buildSource, allowEmpty: true })
+          .src(files, {
+            cwd: buildSource,
+            base: buildSource,
+            allowEmpty: true,
+          })
           // modify the package.json file
           .pipe(rewritePackageJson(buildSource, buildVersion, kibanaVersion))
 
           // put all files inside the correct directories
           .pipe(
-            rename(function nestFileInDir(path) {
-              const nonRelativeDirname = path.dirname.replace(
+            rename(function nestFileInDir(filePath) {
+              const nonRelativeDirname = filePath.dirname.replace(
                 /^(\.\.\/?)+/g,
                 ''
               );
-              path.dirname = join(
+              filePath.dirname = path.join(
                 relative(buildTarget, buildRoot),
                 nonRelativeDirname
               );
@@ -119,7 +124,31 @@ module.exports = function createBuild(
       );
     })
     .then(function() {
-      const buildConfigPath = join(buildRoot, 'tsconfig.json');
+      if (!plugin.styleSheetToCompile) {
+        return;
+      }
+
+      const file = path.resolve(plugin.root, plugin.styleSheetToCompile);
+      if (!existsSync(file)) {
+        throw new Error(
+          `Path provided for styleSheetToCompile does not exist: ${file}`
+        );
+      }
+
+      const outputFileName = path.basename(file, path.extname(file)) + '.css';
+      const output = path.join(
+        buildRoot,
+        path.dirname(plugin.styleSheetToCompile),
+        outputFileName
+      );
+
+      const rendered = sass.renderSync({ file, output });
+      writeFileSync(output, rendered.css);
+
+      del.sync([path.join(buildRoot, '**', '*.s{a,c}ss')]);
+    })
+    .then(function() {
+      const buildConfigPath = path.join(buildRoot, 'tsconfig.json');
 
       if (!existsSync(buildConfigPath)) {
         return;
@@ -135,7 +164,7 @@ module.exports = function createBuild(
       const buildConfig = parseTsconfig(buildSource, buildConfigPath);
 
       if (buildConfig.extends) {
-        buildConfig.extends = join(
+        buildConfig.extends = path.join(
           relative(buildRoot, buildSource),
           buildConfig.extends
         );
@@ -144,7 +173,7 @@ module.exports = function createBuild(
       }
 
       execFileSync(
-        join(buildSource, 'node_modules', '.bin', winCmd('tsc')),
+        path.join(buildSource, 'node_modules', '.bin', winCmd('tsc')),
         ['--pretty', 'true'],
         {
           cwd: buildRoot,
@@ -153,8 +182,8 @@ module.exports = function createBuild(
       );
 
       del.sync([
-        join(buildRoot, '**', '*.{ts,tsx,d.ts}'),
-        join(buildRoot, 'tsconfig.json'),
+        path.join(buildRoot, '**', '*.{ts,tsx,d.ts}'),
+        path.join(buildRoot, 'tsconfig.json'),
       ]);
     })
     .then(function() {

packages/kbn-plugin-helpers/tasks/build/create_build.test.js

@@ -18,7 +18,7 @@
  */
 
 const { resolve } = require('path');
-const { readdirSync } = require('fs');
+const { readdirSync, existsSync, unlink } = require('fs');
 const del = require('del');
 const createBuild = require('./create_build');
 
@@ -116,4 +116,31 @@ describe('creating the build', () => {
       );
     });
   });
+
+  describe('with styleSheetToCompile', () => {
+    const sassPath = 'public/styles.scss';
+    const cssPath = resolve(PLUGIN_BUILD_TARGET, 'public/styles.css');
+
+    // set skipInstallDependencies to true for these tests
+    beforeEach(() => (PLUGIN.styleSheetToCompile = sassPath));
+    // set it back to false after
+    afterEach(() => {
+      PLUGIN.styleSheetToCompile = undefined;
+      unlink(cssPath);
+    });
+
+    it('produces CSS', async () => {
+      expect(PLUGIN.styleSheetToCompile).toBe(sassPath);
+
+      await createBuild(
+        PLUGIN,
+        buildTarget,
+        buildVersion,
+        kibanaVersion,
+        buildFiles
+      );
+
+      expect(existsSync(cssPath)).toBe(true);
+    });
+  });
 });

src/dev/build/build_distributables.js

@@ -44,6 +44,7 @@ import {
   RemovePackageJsonDepsTask,
   TranspileBabelTask,
   TranspileTypescriptTask,
+  TranspileScssTask,
   UpdateLicenseFileTask,
   VerifyEnvTask,
   VerifyExistingNodeBuildsTask,
@@ -109,6 +110,7 @@ export async function buildDistributables(options) {
   await run(UpdateLicenseFileTask);
   await run(RemovePackageJsonDepsTask);
   await run(CleanExtraFilesFromModulesTask);
+  await run(TranspileScssTask);
   await run(OptimizeBuildTask);
 
   /**

src/dev/build/tasks/index.js

@@ -34,5 +34,6 @@ export * from './optimize_task';
 export * from './os_packages';
 export * from './transpile_babel_task';
 export * from './transpile_typescript_task';
+export * from './transpile_scss_task';
 export * from './verify_env_task';
 export * from './write_sha_sums_task';

src/dev/build/tasks/transpile_scss_task.js

@@ -0,0 +1,43 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { toArray } from 'rxjs/operators';
+import { buildAll } from '../../../server/sass/build_all';
+import { findPluginSpecs } from '../../../plugin_discovery/find_plugin_specs';
+
+export const TranspileScssTask = {
+  description: 'Transpiling SCSS to CSS',
+
+  async run(config, log, build) {
+    const scanDirs = [ build.resolvePath('src/core_plugins') ];
+    const { spec$ } = findPluginSpecs({ plugins: { scanDirs, paths: [] } });
+    const enabledPlugins = await spec$.pipe(toArray()).toPromise();
+
+    function onSuccess(builder) {
+      log.info(`Compiled SCSS: ${builder.source}`);
+    }
+
+    function onError(builder, e) {
+      log.error(`Compiling SCSS failed: ${builder.source}`);
+      throw e;
+    }
+
+    await buildAll(enabledPlugins, { onSuccess, onError });
+  }
+};

src/server/kbn_server.js

@@ -39,6 +39,7 @@ import { sampleDataMixin } from './sample_data';
 import { kibanaIndexMappingsMixin } from './mappings';
 import { serverExtensionsMixin } from './server_extensions';
 import { uiMixin } from '../ui';
+import { sassMixin } from './sass';
 
 const rootDir = fromRoot('.');
 
@@ -90,6 +91,9 @@ export default class KbnServer {
       // watch bundle server is running
       optimizeMixin,
 
+      // transpiles SCSS into CSS
+      sassMixin,
+
       // initialize the plugins
       Plugins.initializeMixin,
 

src/server/logging/log_format_string.js

@@ -49,7 +49,8 @@ const typeColors = {
   optmzr: 'white',
   managr: 'green',
   optimize: 'magentaBright',
-  listening: 'magentaBright'
+  listening: 'magentaBright',
+  scss: 'magentaBright',
 };
 
 const color = _.memoize(function (name) {

src/server/sass/build.js

@@ -0,0 +1,83 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import path from 'path';
+import { promisify } from 'util';
+import fs from 'fs';
+import sass from 'node-sass';
+import minimatch from 'minimatch';
+
+const renderSass = promisify(sass.render);
+const writeFile = promisify(fs.writeFile);
+
+export class Build {
+  constructor(source, options = {}) {
+    this.source = source;
+    this.onSuccess = options.onSuccess || (() => {});
+    this.onError = options.onError || (() => {});
+  }
+
+  outputPath() {
+    const fileName = path.basename(this.source, path.extname(this.source)) + '.css';
+    return path.join(path.dirname(this.source), fileName);
+  }
+
+  /**
+   * Glob based on source path
+   */
+
+  getGlob() {
+    return path.join(path.dirname(this.source), '**', '*.s{a,c}ss');
+  }
+
+  async buildIfInPath(path) {
+    if (minimatch(path, this.getGlob())) {
+      await this.build();
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Transpiles SASS and writes CSS to output
+   */
+
+  async build() {
+    try {
+      const outFile = this.outputPath();
+
+      const rendered = await renderSass({
+        file: this.source,
+        outFile,
+        sourceMap: true,
+        sourceMapEmbed: true,
+        sourceComments: true,
+      });
+
+      await writeFile(outFile, rendered.css);
+
+      this.onSuccess(this);
+    } catch(e) {
+      this.onError(this, e);
+    } finally {
+      return this;
+    }
+  }
+}

src/server/sass/build.test.js

@@ -0,0 +1,51 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import sass from 'node-sass';
+import { Build } from './build';
+
+jest.mock('node-sass');
+
+describe('SASS builder', () => {
+  jest.mock('fs');
+
+  it('generates a glob', () => {
+    const builder = new Build('/foo/style.sass');
+    expect(builder.getGlob()).toEqual('/foo/**/*.s{a,c}ss');
+  });
+
+  it('builds SASS', () => {
+    sass.render.mockImplementation(() => Promise.resolve(null, { css: 'test' }));
+    const builder = new Build('/foo/style.sass');
+    builder.build();
+
+    expect(sass.render.mock.calls[0][0]).toEqual({
+      file: '/foo/style.sass',
+      outFile: '/foo/style.css',
+      sourceComments: true,
+      sourceMap: true,
+      sourceMapEmbed: true
+    });
+  });
+
+  it('has an output file with a different extension', () => {
+    const builder = new Build('/foo/style.sass');
+    expect(builder.outputPath()).toEqual('/foo/style.css');
+  });
+});

src/server/sass/build_all.js

@@ -0,0 +1,38 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Build } from './build';
+import { collectUiExports } from '../../ui/ui_exports';
+
+export function buildAll(enabledPluginSpecs, { onSuccess, onError }) {
+  const { uiAppSpecs = [] } = collectUiExports(enabledPluginSpecs);
+
+  return Promise.all(uiAppSpecs.reduce((acc, uiAppSpec) => {
+    if (!uiAppSpec.styleSheetPath) {
+      return acc;
+    }
+
+    const builder = new Build(uiAppSpec.styleSheetPath, {
+      onSuccess,
+      onError,
+    });
+
+    return [...acc, builder.build()];
+  }, []));
+}

src/server/sass/index.js

@@ -0,0 +1,76 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { IS_KIBANA_DISTRIBUTABLE } from '../../utils';
+
+export async function sassMixin(kbnServer, server, config) {
+  if (process.env.kbnWorkerType === 'optmzr') {
+    return;
+  }
+
+
+  /**
+   * Build assets
+   *
+   * SCSS is only transpiled while running from source
+   */
+
+  if (IS_KIBANA_DISTRIBUTABLE) {
+    return;
+  }
+
+  const { buildAll } = require('./build_all');
+
+  function onSuccess(builder) {
+    server.log(['info', 'scss'], `Compiled CSS: ${builder.source}`);
+  }
+
+  function onError(builder, error) {
+    server.log(['warning', 'scss'], `Compiling CSS failed: ${builder.source}`);
+    server.log(['warning', 'scss'], error);
+  }
+
+  const scssBundles = await buildAll(kbnServer.pluginSpecs, { onSuccess, onError });
+
+
+  /**
+   * Setup Watchers
+   *
+   * Similar to the optimizer, we only setup watchers while in development mode
+   */
+
+  if (!config.get('env').dev) {
+    return;
+  }
+
+  const { FSWatcher } = require('chokidar');
+  const watcher = new FSWatcher({ ignoreInitial: true });
+
+  scssBundles.forEach(bundle => {
+    watcher.add(bundle.getGlob());
+  });
+
+  watcher.on('all', async (event, path) => {
+    for (let i = 0; i < scssBundles.length; i++) {
+      if (await scssBundles[i].buildIfInPath(path)) {
+        return;
+      }
+    }
+  });
+}

src/ui/ui_apps/__tests__/ui_app.js

@@ -38,7 +38,7 @@ function createStubUiAppSpec(extraParams) {
   };
 }
 
-function createStubKbnServer() {
+function createStubKbnServer(extraParams) {
   return {
     plugins: [],
     config: {
@@ -46,7 +46,8 @@ function createStubKbnServer() {
         .withArgs('server.basePath')
         .returns('')
     },
-    server: {}
+    server: {},
+    ...extraParams,
   };
 }
 
@@ -89,6 +90,10 @@ describe('ui apps / UiApp', () => {
         expect(app.getModules()).to.eql([]);
       });
 
+      it('has no styleSheetPath', () => {
+        expect(app.getStyleSheetUrlPath()).to.be(undefined);
+      });
+
       it('has a mostly empty JSON representation', () => {
         expect(JSON.parse(JSON.stringify(app))).to.eql({
           id: spec.id,
@@ -309,4 +314,15 @@ describe('ui apps / UiApp', () => {
       expect(app.getModules()).to.eql(['bar']);
     });
   });
+
+  describe('#getStyleSheetUrlPath', () => {
+    it('returns public path to styleSheetPath', () => {
+      const app = createUiApp(
+        createStubUiAppSpec({ pluginId: 'foo', id: 'foo', styleSheetPath: '/bar/public/baz/style.scss' }),
+        createStubKbnServer({ plugins: [{ id: 'foo', publicDir: '/bar/public' }] })
+      );
+
+      expect(app.getStyleSheetUrlPath()).to.eql('plugins/foo/baz/style.css');
+    });
+  });
 });

src/ui/ui_apps/ui_app.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import path from 'path';
 import { UiNavLink } from '../ui_nav_links';
 
 export class UiApp {
@@ -33,6 +34,7 @@ export class UiApp {
       linkToLastSubUrl,
       listed,
       url = `/app/${id}`,
+      styleSheetPath,
     } = spec;
 
     if (!id) {
@@ -51,6 +53,7 @@ export class UiApp {
     this._url = url;
     this._pluginId = pluginId;
     this._kbnServer = kbnServer;
+    this._styleSheetPath = styleSheetPath;
 
     if (this._pluginId && !this._getPlugin()) {
       throw new Error(`Unknown plugin id "${this._pluginId}"`);
@@ -102,6 +105,25 @@ export class UiApp {
     return this._main ? [this._main] : [];
   }
 
+  getStyleSheetUrlPath() {
+    if (!this._styleSheetPath) {
+      return;
+    }
+
+    const plugin = this._getPlugin();
+
+    // get the path of the stylesheet relative to the public dir for the plugin
+    let relativePath = path.relative(plugin.publicDir, this._styleSheetPath);
+
+    // replace back slashes on windows
+    relativePath = relativePath.split('\\').join('/');
+
+    // replace the extension of relativePath to be .css
+    relativePath = relativePath.slice(0, -path.extname(relativePath).length) + '.css';
+
+    return `plugins/${this.getId()}/${relativePath}`;
+  }
+
   _getPlugin() {
     const pluginId = this._pluginId;
     const { plugins } = this._kbnServer;
@@ -119,7 +141,8 @@ export class UiApp {
       icon: this._icon,
       main: this._main,
       navLink: this._navLink,
-      linkToLastSubUrl: this._linkToLastSubUrl
+      linkToLastSubUrl: this._linkToLastSubUrl,
+      styleSheetPath: this._styleSheetPath,
     };
   }
 }

src/ui/ui_exports/ui_export_types/ui_apps.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { isAbsolute, normalize } from 'path';
 import { flatConcatAtType } from './reduce';
 import { alias, mapSpec, wrap } from './modify_reduce';
 
@@ -36,7 +37,9 @@ function applySpecDefaults(spec, type, pluginSpec) {
   } = spec;
 
   if (spec.injectVars) {
-    throw new Error(`[plugin:${pluginId}] uiExports.app.injectVars has been removed. Use server.injectUiAppVars('${id}', () => { ... })`);
+    throw new Error(
+      `[plugin:${pluginId}] uiExports.app.injectVars has been removed. Use server.injectUiAppVars('${id}', () => { ... })`
+    );
   }
 
   if (spec.uses) {
@@ -45,6 +48,14 @@ function applySpecDefaults(spec, type, pluginSpec) {
     );
   }
 
+  const styleSheetPath = spec.styleSheetPath ? normalize(spec.styleSheetPath) : undefined;
+
+  if (styleSheetPath && (!isAbsolute(styleSheetPath) || !styleSheetPath.startsWith(pluginSpec.getPublicDir()))) {
+    throw new Error(
+      `[plugin:${pluginId}] uiExports.app.styleSheetPath must be an absolute path within the public directory`
+    );
+  }
+
   return {
     pluginId,
     id,
@@ -57,6 +68,7 @@ function applySpecDefaults(spec, type, pluginSpec) {
     linkToLastSubUrl,
     listed,
     url,
+    styleSheetPath,
   };
 }
 

src/ui/ui_render/bootstrap/template.js.hbs

@@ -1,19 +1,24 @@
 window.onload = function () {
-  function bundleFile(filename) {
+  function createAnchor(href) {
     var anchor = document.createElement('a');
-    anchor.setAttribute('href', '{{bundlePath}}/' + filename);
+    anchor.setAttribute('href', href);
     return anchor.href;
   }
-  var files = [
-    bundleFile('vendors.style.css'),
-    bundleFile('commons.style.css'),
-    bundleFile('{{appId}}.style.css'),
 
-    bundleFile('vendors.bundle.js'),
-    bundleFile('commons.bundle.js'),
-    bundleFile('{{appId}}.bundle.js')
+  var files = [
+    createAnchor('{{bundlePath}}/vendors.style.css'),
+    createAnchor('{{bundlePath}}/commons.style.css'),
+    createAnchor('{{bundlePath}}/{{appId}}.style.css'),
+
+    createAnchor('{{bundlePath}}/vendors.bundle.js'),
+    createAnchor('{{bundlePath}}/commons.bundle.js'),
+    createAnchor('{{bundlePath}}/{{appId}}.bundle.js')
   ];
 
+  if ('{{styleSheetPath}}' !== '') {
+    files.push(createAnchor('{{styleSheetPath}}'));
+  }
+
   (function next() {
     var file = files.shift();
     if (!file) return;

src/ui/ui_render/ui_render_mixin.js

@@ -62,10 +62,12 @@ export function uiRenderMixin(kbnServer, server, config) {
           throw Boom.notFound(`Unknown app: ${id}`);
         }
 
+        const basePath = config.get('server.basePath');
         const bootstrap = new AppBootstrap({
           templateData: {
             appId: app.getId(),
-            bundlePath: `${config.get('server.basePath')}/bundles`
+            bundlePath: `${basePath}/bundles`,
+            styleSheetPath: app.getStyleSheetUrlPath() ? `${basePath}/${app.getStyleSheetUrlPath()}` : null,
           },
           translations: await request.getUiTranslations()
         });

yarn.lock

@@ -862,6 +862,10 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
+async-foreach@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+
 async-limiter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
@@ -2289,6 +2293,10 @@ capture-stack-trace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
 
+caseless@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -2761,7 +2769,7 @@ combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2, commander@^2.12.1:
+commander@2, commander@^2.12.1, commander@^2.9.0:
   version "2.15.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
 
@@ -3044,6 +3052,13 @@ cross-spawn-async@^1.0.1:
     lru-cache "^2.6.5"
     which "^1.1.1"
 
+cross-spawn@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
 cross-spawn@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@@ -5237,6 +5252,16 @@ geckodriver@1.11.0:
     got "5.6.0"
     tar "4.0.2"
 
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  dependencies:
+    is-property "^1.0.0"
+
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -5384,7 +5409,7 @@ glob@5.0.13:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@6.0.4, glob@^6.0.1:
+glob@6.0.4, glob@^6.0.1, glob@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
   dependencies:
@@ -5424,7 +5449,7 @@ glob@^5.0.14, glob@^5.0.15, glob@~5.0.0, glob@~5.0.15:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@~7.1.1:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
   dependencies:
@@ -5835,6 +5860,15 @@ har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
 
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
 har-validator@~4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
@@ -6244,6 +6278,10 @@ imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
 
+in-publish@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+
 indent-string@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
@@ -6597,6 +6635,20 @@ is-installed-globally@^0.1.0:
     global-dirs "^0.1.0"
     is-path-inside "^1.0.0"
 
+is-my-ip-valid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824"
+
+is-my-json-valid@^2.12.4:
+  version "2.17.2"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.17.2.tgz#6b2103a288e94ef3de5cf15d29dd85fc4b78d65c"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    is-my-ip-valid "^1.0.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
 is-natural-number@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-natural-number/-/is-natural-number-4.0.1.tgz#ab9d76e1db4ced51e35de0c72ebecf09f734cde8"
@@ -6691,6 +6743,10 @@ is-promise@~1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-1.0.1.tgz#31573761c057e33c2e91aab9e96da08cefbe76e5"
 
+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
 is-redirect@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
@@ -7335,6 +7391,10 @@ jquery@^3.1.1, jquery@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
 
+js-base64@^2.1.8:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.5.tgz#e293cd3c7c82f070d700fc7a1ca0a2e69f101f92"
+
 js-base64@^2.1.9:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
@@ -7513,6 +7573,10 @@ jsonparse@^1.1.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
 
+jsonpointer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -8033,6 +8097,10 @@ lodash._topath@^3.0.0:
   dependencies:
     lodash.isarray "^3.0.0"
 
+lodash.assign@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+
 lodash.assignin@^4.0.9:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assignin/-/lodash.assignin-4.2.0.tgz#ba8df5fb841eb0a3e8044232b0e263a8dc6a28a2"
@@ -8045,6 +8113,10 @@ lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
 
+lodash.clonedeep@^4.3.2:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+
 lodash.cond@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
@@ -8154,6 +8226,10 @@ lodash.merge@^4.4.0:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
 
+lodash.mergewith@^4.6.0:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
+
 lodash.orderby@4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.orderby/-/lodash.orderby-4.6.0.tgz#e697f04ce5d78522f54d9338b32b81a3393e4eb3"
@@ -8236,14 +8312,14 @@ lodash@4.17.4:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+lodash@^4.0.0, lodash@^4.17.10:
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
+
 lodash@^4.0.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.1, lodash@^4.8.2, lodash@~4.17.4, lodash@~4.17.5:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
-lodash@^4.17.10:
-  version "4.17.10"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
-
 lodash@~4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.3.0.tgz#efd9c4a6ec53f3b05412429915c3e4824e4d25a4"
@@ -8459,7 +8535,7 @@ memory-fs@^0.4.0, memory-fs@~0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-meow@^3.3.0:
+meow@^3.3.0, meow@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
   dependencies:
@@ -8760,7 +8836,7 @@ mv@~2:
     ncp "~2.0.0"
     rimraf "~2.4.0"
 
-nan@^2.0.8, nan@^2.3.0:
+nan@^2.0.8, nan@^2.10.0, nan@^2.3.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
 
@@ -8875,6 +8951,24 @@ node-fetch@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.1.1.tgz#369ca70b82f50c86496104a6c776d274f4e4a2d4"
 
+node-gyp@^3.3.1:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
+  dependencies:
+    fstream "^1.0.0"
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3 || 4"
+    osenv "0"
+    request "2"
+    rimraf "2"
+    semver "~5.3.0"
+    tar "^2.0.0"
+    which "1"
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -8932,6 +9026,30 @@ node-pre-gyp@^0.6.39:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
+node-sass@^4.9.0:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.9.0.tgz#d1b8aa855d98ed684d6848db929a20771cc2ae52"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    lodash.mergewith "^4.6.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.10.0"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "~2.79.0"
+    sass-graph "^2.2.4"
+    stdout-stream "^1.4.0"
+    "true-case-path" "^1.0.2"
+
 node-status-codes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
@@ -8947,7 +9065,7 @@ nomnom@~1.6.2:
     colors "0.5.x"
     underscore "~1.4.4"
 
-nopt@3.x, nopt@~3.0.6:
+"nopt@2 || 3", nopt@3.x, nopt@~3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
   dependencies:
@@ -9027,7 +9145,7 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npmlog@^4.0.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   dependencies:
@@ -9258,6 +9376,12 @@ os-homedir@^1.0.0, os-homedir@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
 
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
 os-locale@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
@@ -9270,7 +9394,7 @@ os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
-osenv@^0.1.0, osenv@^0.1.4:
+osenv@0, osenv@^0.1.0, osenv@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
   dependencies:
@@ -10197,6 +10321,10 @@ qs@~5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-5.1.0.tgz#4d932e5c7ea411cca76a312d39a606200fd50cd9"
 
+qs@~6.3.0:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
+
 qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
@@ -10975,6 +11103,31 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.0"
     tough-cookie ">=2.3.3"
 
+request@2:
+  version "2.87.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
 request@2.81.0:
   version "2.81.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
@@ -11029,6 +11182,31 @@ request@^2.55.0, request@^2.65.0, request@^2.83.0, request@^2.85.0:
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
 
+request@~2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+    uuid "^3.0.0"
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -11305,6 +11483,15 @@ sao@^0.22.12:
     user-home "^2.0.0"
     yarn-install "^0.5.1"
 
+sass-graph@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
+  dependencies:
+    glob "^7.0.0"
+    lodash "^4.0.0"
+    scss-tokenizer "^0.2.3"
+    yargs "^7.0.0"
+
 sax@>=0.6.0, sax@^1.1.4, sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -11325,6 +11512,13 @@ scroll-into-view@^1.3.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/scroll-into-view/-/scroll-into-view-1.9.1.tgz#90c3b338422f9fddaebad90e6954790940dc9c1e"
 
+scss-tokenizer@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
+  dependencies:
+    js-base64 "^2.1.8"
+    source-map "^0.4.2"
+
 seek-bzip@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/seek-bzip/-/seek-bzip-1.0.5.tgz#cfe917cb3d274bcffac792758af53173eb1fabdc"
@@ -11353,6 +11547,10 @@ semver@~4.3.3:
   version "4.3.6"
   resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
 
+semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -11639,7 +11837,7 @@ source-map@0.1.32:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@0.4.x, source-map@^0.4.4:
+source-map@0.4.x, source-map@^0.4.2, source-map@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   dependencies:
@@ -11843,6 +12041,12 @@ statuses@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
+stdout-stream@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b"
+  dependencies:
+    readable-stream "^2.0.1"
+
 stealthy-require@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
@@ -12222,7 +12426,7 @@ tar@4.0.2:
     mkdirp "^0.5.0"
     yallist "^3.0.2"
 
-tar@^2.2.1:
+tar@^2.0.0, tar@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
   dependencies:
@@ -12510,6 +12714,12 @@ trough@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.1.tgz#a9fd8b0394b0ae8fff82e0633a0a36ccad5b5f86"
 
+"true-case-path@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"
+  dependencies:
+    glob "^6.0.4"
+
 trunc-html@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/trunc-html/-/trunc-html-1.0.2.tgz#6e631ce8ec43e415a5e9f6a7e770572ec026f22b"
@@ -12617,6 +12827,10 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -13542,10 +13756,20 @@ whet.extend@~0.9.9:
   version "0.9.9"
   resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
 
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
+which@1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  dependencies:
+    isexe "^2.0.0"
+
 which@^1.1.1, which@^1.2.1, which@^1.2.12, which@^1.2.9, which@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
@@ -13774,6 +13998,12 @@ yallist@^3.0.0, yallist@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
 
+yargs-parser@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
+  dependencies:
+    camelcase "^3.0.0"
+
 yargs-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
@@ -13826,6 +14056,24 @@ yargs@^11.0.0:
     y18n "^3.2.1"
     yargs-parser "^9.0.2"
 
+yargs@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^5.0.0"
+
 yargs@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"