Remove libsass as a dependency

.gitignore

@@ -34,4 +34,4 @@ selenium
 *.swp
 *.swo
 *.out
-src/ui_framework/doc_site/build/*.js*
+ui_framework/doc_site/build/*.js*

package.json

@@ -63,7 +63,7 @@
     "mocha": "mocha",
     "mocha:debug": "mocha --debug-brk",
     "sterilize": "grunt sterilize",
-    "uiFramework:start": "webpack-dev-server --config src/ui_framework/doc_site/webpack.config.js --hot --inline --content-base src/ui_framework/doc_site/build"
+    "uiFramework:start": "grunt uiFramework:start"
   },
   "repository": {
     "type": "git",
@@ -145,7 +145,6 @@
     "moment-timezone": "0.5.4",
     "no-ui-slider": "1.2.0",
     "node-fetch": "1.3.2",
-    "node-sass": "3.8.0",
     "node-uuid": "1.4.7",
     "pegjs": "0.9.0",
     "postcss-loader": "1.2.1",
@@ -155,7 +154,6 @@
     "rimraf": "2.4.3",
     "rison-node": "1.0.0",
     "rjs-repack-loader": "1.0.6",
-    "sass-loader": "4.0.0",
     "script-loader": "0.6.1",
     "semver": "5.1.0",
     "style-loader": "0.12.3",
@@ -222,6 +220,7 @@
     "mocha": "2.5.3",
     "murmurhash3js": "3.0.1",
     "ncp": "2.0.0",
+    "node-sass": "3.8.0",
     "nock": "8.0.0",
     "npm": "3.10.8",
     "portscanner": "1.0.0",
@@ -234,6 +233,7 @@
     "react-router-redux": "4.0.4",
     "redux": "3.0.0",
     "redux-thunk": "0.1.0",
+    "sass-loader": "4.0.0",
     "simple-git": "1.37.0",
     "sinon": "1.17.2",
     "source-map": "0.5.6",

src/optimize/base_optimizer.js

@@ -125,7 +125,6 @@ class BaseOptimizer {
       module: {
         loaders: [
           { test: /\.less$/, loader: makeStyleLoader('less-loader') },
-          { test: /\.scss$/, loader: makeStyleLoader('sass-loader') },
           { test: /\.css$/, loader: makeStyleLoader() },
           { test: /\.jade$/, loader: 'jade-loader' },
           { test: /\.json$/, loader: 'json-loader' },

src/ui/public/autoload/styles.js

@@ -1,5 +1,5 @@
 // Kibana UI Framework
-require('../../../ui_framework/components/index.scss');
+require('../../../../ui_framework/dist/ui_framework.css');
 
 // All Kibana styles inside of the /styles dir
 const context = require.context('../styles', false, /[\/\\](?!mixins|variables|_|\.)[^\/\\]+\.less/);

tasks/config/copy.js

@@ -4,6 +4,7 @@ module.exports = function (grunt) {
       options: { mode: true },
       src: [
         'src/**',
+        'ui_framework/dist/**',
         'bin/**',
         'webpackShims/**',
         'config/kibana.yml',

tasks/ui_framework.js

@@ -0,0 +1,54 @@
+const sass = require('node-sass');
+const platform = require('os').platform();
+
+module.exports = function (grunt) {
+  const watcherCmd = {
+    cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\node-sass' : './node_modules/.bin/node-sass',
+    args: [
+      'ui_framework/components/index.scss',
+      '--watch',
+      '--recursive',
+      'ui_framework/dist/ui_framework.css'
+    ]
+  };
+
+  const serverCmd = {
+    cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\webpack-dev-server' : './node_modules/.bin/webpack-dev-server',
+    args: [
+      '--config=ui_framework/doc_site/webpack.config.js',
+      '--hot ',
+      '--inline',
+      '--content-base=ui_framework/doc_site/build'
+    ]
+  };
+
+  function spawn(task) {
+    return new Promise((resolve, reject) => {
+      grunt.util.spawn(task, (error, result, code) => {
+        grunt.log.writeln();
+
+        if (error || code !== 0) {
+          const message = result.stderr || result.stdout;
+
+          grunt.log.error(message);
+
+          reject();
+        }
+
+        grunt.log.writeln(result);
+
+        resolve();
+      });
+
+    });
+  }
+
+  grunt.registerTask('uiFramework:start', function () {
+    const done = this.async();
+    const commands = [watcherCmd, serverCmd].map((cmd) => {
+      return Object.assign({ opts: { stdio: 'inherit' } }, cmd);
+    });
+
+    Promise.all(commands.map(spawn)).then(done);
+  });
+};