Remove libsass as a dependency (#9803) (#9811)

Remove libsass as a dependency

libsass is platform specific, therefore we can not ship it as a dependency. Instead, we will commit the compiled CSS for the UI Framework to the repository. This is updated when running `npm run uiFramework:start` which also starts the docs site.

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

.gitignore

@@ -33,4 +33,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",
@@ -144,7 +144,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",
@@ -154,7 +153,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",
@@ -220,6 +218,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",
@@ -232,6 +231,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,76 @@
+const sass = require('node-sass');
+const postcss = require('postcss');
+const postcssConfig = require('../src/optimize/postcss.config');
+const chokidar = require('chokidar');
+const debounce = require('lodash/function/debounce');
+const platform = require('os').platform();
+
+module.exports = function (grunt) {
+  grunt.registerTask('uiFramework:start', function () {
+    const done = this.async();
+    Promise.all([uiFrameworkWatch(), uiFrameworkServerStart()]).then(done);
+  });
+
+  function uiFrameworkServerStart() {
+    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'
+      ],
+      opts: { stdio: 'inherit' }
+    };
+
+    return new Promise((resolve, reject) => {
+      grunt.util.spawn(serverCmd, (error, result, code) => {
+        if (error || code !== 0) {
+          const message = result.stderr || result.stdout;
+
+          grunt.log.error(message);
+
+          return reject();
+        }
+
+        grunt.log.writeln(result);
+
+        resolve();
+      });
+
+    });
+  }
+
+  function uiFrameworkCompile() {
+    sass.render({
+      file: 'ui_framework/components/index.scss'
+    }, function (error, result) {
+      if (error) {
+        grunt.log.error(error);
+      }
+
+      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);
+
+          if (result.map) {
+            grunt.file.write('ui_framework/dist/ui_framework.css.map', result.map);
+          }
+        });
+    });
+  }
+
+  function uiFrameworkWatch() {
+    const debouncedCompile = debounce(uiFrameworkCompile, 400, { leading: true });
+
+    return new Promise((resolve, reject) => {
+      debouncedCompile();
+
+      chokidar.watch('ui_framework/components', { ignoreInitial: true }).on('all', (event, path) => {
+        grunt.log.writeln(event, path);
+        debouncedCompile();
+      });
+    });
+  }
+};

ui_framework/doc_site/build/ui_framework.css

@@ -0,0 +1 @@
+../../dist/ui_framework.css

ui_framework/doc_site/src/main.scss

@@ -1,5 +1,4 @@
-
-@import "../../components/index";
+@import "../../dist/ui_framework.css";
 @import "./views/app";
 @import "./components/guide_code_viewer/guide_code_viewer";
 @import "./components/guide_nav/guide_nav";

ui_framework/doc_site/src/views/app_view.jsx

@@ -16,7 +16,7 @@ import {
 } from '../components';
 
 // Inject version into header.
-const pkg = require('json!../../../../../package.json');
+const pkg = require('json!../../../../package.json');
 
 export default class AppView extends Component {