Merge pull request #2141 from weaveworks/convert-to-sass

Use Sass instead of Less

client/app/scripts/contrast-main.js

@@ -1,10 +1,9 @@
 import 'babel-polyfill';
-import 'font-awesome-webpack';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
-import '../styles/contrast.less';
+import '../styles/contrast.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore';
 

client/app/scripts/main.dev.js

@@ -1,12 +1,11 @@
 import 'babel-polyfill';
-import 'font-awesome-webpack';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import Immutable from 'immutable';
 import installDevTools from 'immutable-devtools';
 
-import '../styles/main.less';
+import '../styles/main.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore.dev';
 import DevTools from './components/dev-tools';

client/app/scripts/main.js

@@ -1,10 +1,9 @@
 import 'babel-polyfill';
-import 'font-awesome-webpack';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
-import '../styles/main.less';
+import '../styles/main.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore';
 

client/app/scripts/terminal-main.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
-import '../styles/main.less';
+import '../styles/main.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore';
 

client/app/styles/contrast.less

@@ -1,37 +0,0 @@
-@import "main";
-
-@background-color: lighten(@primary-color, 75%);
-@background-lighter-color: lighten(@background-color, 10%);
-@background-darker-color: darken(@background-color, 20%);
-@background-darker-secondary-color: darken(@background-color, 15%);
-@background-dark-color: @primary-color;
-@text-color: black;
-@text-secondary-color: lighten(@text-color, 10%);
-@text-tertiary-color: lighten(@text-color, 20%);
-@border-light-color: lighten(@text-color, 50%);
-@text-darker-color: darken(@text-color, 20%);
-@white: white;
-
-@node-opacity-blurred: 0.6;
-@node-highlight-fill-opacity: 0.3;
-@node-highlight-stroke-opacity: 0.5;
-@node-highlight-stroke-width: 3px;
-@node-border-stroke-width: 5px;
-@node-pseudo-opacity: 1;
-@edge-highlight-opacity: 0.3;
-@edge-opacity-blurred: 0;
-@edge-opacity: 0.5;
-@edge-link-stroke-width: 3px;
-
-@btn-opacity-default: 1;
-@btn-opacity-hover: 1;
-@btn-opacity-selected: 1;
-
-@link-opacity-default: 1;
-
-@search-border-color: @background-darker-color;
-@search-border-width: 2px;
-
-/* specific elements */
-@body-background-color: #FFF;
-@label-background-color: #FFF;

client/app/styles/contrast.scss

@@ -0,0 +1,37 @@
+@import "main";
+
+$background-color: lighten($primary-color, 75%);
+$background-lighter-color: lighten($background-color, 10%);
+$background-darker-color: darken($background-color, 20%);
+$background-darker-secondary-color: darken($background-color, 15%);
+$background-dark-color: $primary-color;
+$text-color: black;
+$text-secondary-color: lighten($text-color, 10%);
+$text-tertiary-color: lighten($text-color, 20%);
+$border-light-color: lighten($text-color, 50%);
+$text-darker-color: darken($text-color, 20%);
+$white: white;
+
+$node-opacity-blurred: 0.6;
+$node-highlight-fill-opacity: 0.3;
+$node-highlight-stroke-opacity: 0.5;
+$node-highlight-stroke-width: 3px;
+$node-border-stroke-width: 5px;
+$node-pseudo-opacity: 1;
+$edge-highlight-opacity: 0.3;
+$edge-opacity-blurred: 0;
+$edge-opacity: 0.5;
+$edge-link-stroke-width: 3px;
+
+$btn-opacity-default: 1;
+$btn-opacity-hover: 1;
+$btn-opacity-selected: 1;
+
+$link-opacity-default: 1;
+
+$search-border-color: $background-darker-color;
+$search-border-width: 2px;
+
+/* specific elements */
+$body-background-color: #FFF;
+$label-background-color: #FFF;

client/package.json

@@ -60,19 +60,18 @@
     "eslint-plugin-react": "6.8.0",
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.9.0",
-    "font-awesome-webpack": "0.0.4",
     "html-webpack-plugin": "2.24.1",
     "http-proxy-rules": "1.0.1",
     "immutable-devtools": "0.0.7",
     "jest-cli": "17.0.3",
     "json-loader": "0.5.4",
-    "less": "2.7.1",
-    "less-loader": "2.2.3",
+    "node-sass": "3.13.1",
     "postcss-loader": "1.2.0",
     "react-addons-perf": "15.4.1",
     "redux-devtools": "3.3.1",
     "redux-devtools-dock-monitor": "1.1.1",
     "redux-devtools-log-monitor": "1.1.1",
+    "sass-loader": "4.1.1",
     "style-loader": "0.13.1",
     "url": "0.11.0",
     "url-loader": "0.5.7",
@@ -99,7 +98,9 @@
     "loadreport": "npm run noprobe && sleep 1 && curl -X POST -H \"Content-Type: application/json\" http://$BACKEND_HOST/api/report -d"
   },
   "jest": {
-    "transform": {".*": "<rootDir>/node_modules/babel-jest"},
+    "transform": {
+      ".*": "<rootDir>/node_modules/babel-jest"
+    },
     "setupFiles": [
       "<rootDir>/test/support/localStorage.js"
     ],

client/webpack.local.config.js

@@ -82,9 +82,9 @@ module.exports = {
   module: {
     // Webpack is opionated about how pkgs should be laid out:
     // https://github.com/webpack/webpack/issues/1617
-    noParse: /xterm/,
+    noParse: [/xterm\/(.*).map$/, /xterm\/dist\/xterm\.js/],
     include: [
-      path.resolve(__dirname, 'app/scripts')
+      path.resolve(__dirname, 'app/scripts', 'app/styles')
     ],
 
     preLoaders: [
@@ -99,10 +99,6 @@ module.exports = {
         test: /\.json$/,
         loader: 'json-loader'
       },
-      {
-        test: /\.less$/,
-        loader: 'style-loader!css-loader!postcss-loader!less-loader'
-      },
       {
         test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         loader: 'url-loader?limit=10000&minetype=application/font-woff'
@@ -115,6 +111,10 @@ module.exports = {
         test: /\.jsx?$/,
         exclude: /node_modules|vendor/,
         loaders: ['babel']
+      },
+      {
+        test: /\.(scss|css)$/,
+        loader: 'style-loader!css-loader!postcss-loader!sass-loader'
       }
     ]
   },
@@ -128,5 +128,11 @@ module.exports = {
   // Automatically transform files with these extensions
   resolve: {
     extensions: ['', '.js', '.jsx']
+  },
+  sassLoader: {
+    includePaths: [
+      path.resolve(__dirname, './node_modules/xterm'),
+      path.resolve(__dirname, './node_modules/font-awesome')
+    ]
   }
 };

client/webpack.production.config.js

@@ -48,9 +48,9 @@ module.exports = {
   module: {
     // Webpack is opionated about how pkgs should be laid out:
     // https://github.com/webpack/webpack/issues/1617
-    noParse: /xterm/,
+    noParse: [/xterm\/dist\/xterm\.js/],
     include: [
-      path.resolve(__dirname, 'app/scripts')
+      path.resolve(__dirname, 'app/scripts', 'app/styles')
     ],
     preLoaders: [
       {
@@ -60,11 +60,6 @@ module.exports = {
       }
     ],
     loaders: [
-      {
-        test: /\.less$/,
-        loader: ExtractTextPlugin.extract('style-loader',
-          'css-loader?minimize!postcss-loader!less-loader')
-      },
       {
         test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         loader: 'url-loader?limit=10000&minetype=application/font-woff'
@@ -77,7 +72,15 @@ module.exports = {
         test: /\.ico$/,
         loader: 'file-loader?name=[name].[ext]'
       },
-      { test: /\.jsx?$/, exclude: /node_modules|vendor/, loader: 'babel' }
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules|vendor/,
+        loader: 'babel'
+      },
+      {
+        test: /\.scss$/,
+        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss!sass-loader?minimize')
+      }
     ]
   },
 
@@ -126,5 +129,11 @@ module.exports = {
       template: 'app/html/index.html',
       filename: 'index.html'
     })
-  ]
+  ],
+  sassLoader: {
+    includePaths: [
+      path.resolve(__dirname, './node_modules/xterm'),
+      path.resolve(__dirname, './node_modules/font-awesome')
+    ]
+  }
 };