Use sass for styles (#4)

* Use sass for styles
Scss files under `styles` folder are compiled from `public/less`.
* Use single quote
* Set webpack alias for styles
* Use resolve.modulesDirectories for require relative path

Author: CYBAI

config/webpack.config.dev.js

@@ -10,7 +10,6 @@ var getClientEnvironment = require('./env');
 var paths = require('./paths');
 
 
-
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
 var publicPath = '/';
@@ -75,10 +74,11 @@ module.exports = {
     // some tools, although we do not recommend using it, see:
     // https://github.com/facebookincubator/create-react-app/issues/290
     extensions: ['.js', '.json', '.jsx', ''],
+    modulesDirectories: [ 'src-react', 'node_modules' ],
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web'
+      'react-native': 'react-native-web',
     }
   },
 
@@ -111,6 +111,7 @@ module.exports = {
           // Webpack 2 fixes this, but for now we include this hack.
           // https://github.com/facebookincubator/create-react-app/issues/1713
           /\.(js|jsx)(\?.*)?$/,
+          /\.scss$/,
           /\.css$/,
           /\.json$/,
           /\.svg$/
@@ -143,6 +144,10 @@ module.exports = {
         test: /\.css$/,
         loader: 'style!css?importLoaders=1!postcss'
       },
+      {
+        test: /\.scss$/,
+        loader: 'style!css!sass'
+      },
       // JSON is not enabled by default in Webpack but both Node and Browserify
       // allow it implicitly so we also enable it.
       {

config/webpack.config.prod.js

@@ -79,10 +79,11 @@ module.exports = {
     // some tools, although we do not recommend using it, see:
     // https://github.com/facebookincubator/create-react-app/issues/290
     extensions: ['.js', '.json', '.jsx', ''],
+    modulesDirectories: [ 'src-react', 'node_modules' ],
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web'
+      'react-native': 'react-native-web',
     }
   },
 

package.json

@@ -29,6 +29,7 @@
     "bluebird": "~3.5.0",
     "blueimp-md5": "~2.7.0",
     "body-parser": "~1.17.1",
+    "bootstrap-sass": "^3.3.7",
     "color": "~1.0.3",
     "cookie-parser": "~1.4.3",
     "crossroads": "~0.12.2",
@@ -55,6 +56,10 @@
     "passport-local": "~1.0.0",
     "raven": "~1.2.1",
     "rc": "~1.2.1",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-redux": "^5.0.4",
+    "redux": "^3.6.0",
     "rimraf": "~2.6.1",
     "semver": "~5.3.0",
     "serve-static": "~1.12.2",
@@ -64,11 +69,7 @@
     "superagent": "^0.21.0",
     "temp": "~0.8.3",
     "winston": "~2.3.1",
-    "yargs": "~8.0.0-candidate.0",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-redux": "^5.0.4",
-    "redux": "^3.6.0"
+    "yargs": "~8.0.0-candidate.0"
   },
   "devDependencies": {
     "ansi-color": "~0.2.1",
@@ -122,11 +123,13 @@
     "jest": "18.1.0",
     "json-loader": "0.5.4",
     "mocha": "~3.3.0",
+    "node-sass": "^4.5.3",
     "object-assign": "4.1.1",
     "phantomjs-prebuilt": "~2.1.14",
     "postcss-loader": "1.2.2",
     "promise": "7.1.1",
     "react-dev-utils": "^0.5.2",
+    "sass-loader": "^6.0.5",
     "style-loader": "0.13.1",
     "supertest": "~3.0.0",
     "url-loader": "0.5.7",

src-react/containers/path.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux'
 
+import 'styles/styles.scss';
+
 @connect(state => { return { ...state } })
 class Path extends Component {
   render() {

src-react/styles/d2h.scss

@@ -0,0 +1,206 @@
+/*
+*
+* Diff to HTML (diff2html.css)
+* Author: rtfpessoa
+* Modified by: codingtwinky
+* Date: Friday 29 August 2014
+* Last Update: Saturday 27 September 2014
+*
+*/
+
+.d2h-wrapper {
+  display: block;
+  margin: 0 auto;
+  text-align: left;
+  width: 100%;
+}
+
+.d2h-file-wrapper {
+  border-radius: 3px;
+}
+
+.d2h-file-header {
+  display: none;
+}
+
+.d2h-file-stats {
+  display: inline;
+  font-size: 12px;
+  text-align: center;
+  max-width: 15%;
+}
+
+.d2h-lines-added {
+  background-color: #ceffce;
+  border: 1px solid #b4e2b4;
+  color: #FFFFFF;
+  border-radius: 5px 0 0 5px;
+  padding: 2px;
+  width: 25px;
+}
+
+.d2h-lines-deleted {
+  background-color: #f7c8c8;
+  border: 1px solid #e9aeae;
+  color: #000000;
+  border-radius: 0 5px 5px 0;
+  padding: 2px;
+  width: 25px;
+}
+
+.d2h-file-name {
+  display: inline;
+  height: 33px;
+  max-width: 80%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.d2h-diff-table {
+  border-collapse: collapse;
+  font-family: 'Source Code Pro';
+  font-size: 12px;
+  height: 19px;
+  width: 100%;
+  tbody > tr > td {
+    padding: 0px;
+    border-spacing: 0px;
+    height: 105%;
+  }
+}
+
+.d2h-files-diff {
+  width: 100%;
+  display: flex;
+}
+
+.d2h-file-diff {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.d2h-file-side-diff {
+  display: inline-block;
+  overflow-x: auto;
+  width: 50%;
+}
+
+.d2h-code-line {
+  white-space: pre;
+  padding-left: 10px;
+  padding-right: 10px;
+  display: inline-flex;
+}
+
+.d2h-code-side-line {
+  white-space: pre;
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-flex;
+}
+
+.d2h-code-line del,
+.d2h-code-side-line del {
+  display: inline-block;
+  margin-top: -1px;
+  text-decoration: none;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.d2h-code-line ins,
+.d2h-code-side-line ins {
+  display: inline-block;
+  margin-top: -1px;
+  text-decoration: none;
+  background-color: rgba(255, 255, 255, 0.6);
+}
+
+.d2h-code-line-prefix {
+  display: inline-flex;
+  margin-right: 10px;
+}
+
+.line-num1 {
+  display: inline-block;
+  float: left;
+  width: 30px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.line-num2 {
+  display: inline-block;
+  float: right;
+  width: 30px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.d2h-code-linenumber {
+  position: static;
+  width: 52px;
+  min-width: 65px;
+  text-align: center;
+  background-color: #727a83;
+  color: rgba(0, 0, 0, 0.5);
+  border-width: 0 1px 0 1px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-left: 1px solid rgba(0, 0, 0, 0.34);
+  border-right: 1px solid rgba(0, 0, 0, 0.34);
+}
+
+.d2h-cntx {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.d2h-code-side-linenumber {
+  position: static;
+  display: table-cell;
+  width: 52px;
+  min-width: 65px;
+  text-align: center;
+  height: 100%;
+  background-color: rgba(114, 122, 131, 1);
+  color: rgba(0, 0, 0, 0.5);
+  border-width: 0 1px 0 1px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-left: 1px solid rgba(0, 0, 0, 0.34);
+  border-right: 1px solid rgba(0, 0, 0, 0.34);
+}
+
+.d2h-del {
+  background-color: #E86756;
+  color: #FFFFFF;
+
+  &.d2h-code-side-linenumber {
+    color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.d2h-ins {
+  background-color: #66F27B;
+  color: #000000;
+
+  &.d2h-code-side-linenumber {
+    color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.d2h-info {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.d2h-code-line-ctn {
+  .word-wrap & {
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -webkit-pre-wrap; /*Chrome & Safari */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    white-space: pre-wrap;       /* css-3 */
+  }
+}