Merge pull request #454 from vector-im/require-css

Build CSS with webpack

.gitignore

@@ -4,4 +4,4 @@ lib
 .DS_Store
 key.pem
 cert.pem
-build
+vector/components.css

package.json

@@ -13,21 +13,23 @@
   "scripts": {
     "reskindex": "reskindex -h src/header",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
-    "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/bundle.css -c uglifycss --no-watch",
+    "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css --no-watch",
     "build:compile": "babel --source-maps -d lib src",
     "build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js",
     "build": "npm run build:css && npm run build:compile && npm run build:bundle",
     "start:js": "webpack -w src/vector/index.js vector/bundle.js",
-    "start:skins:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/bundle.css",
+    "start:skins:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css",
     "//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270",
     "start": "parallelshell \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
-    "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map",
+    "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
     "prepublish": "npm run build:css && npm run build:compile"
   },
   "dependencies": {
     "classnames": "^2.1.2",
+    "extract-text-webpack-plugin": "^0.9.1",
     "filesize": "^3.1.2",
     "flux": "~2.0.3",
+    "gemini-scrollbar": "^1.3.0",
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.0.0-beta.4",
@@ -46,12 +48,12 @@
     "babel-core": "^5.8.25",
     "babel-loader": "^5.3.2",
     "catw": "^1.0.1",
+    "css-raw-loader": "^0.1.1",
     "http-server": "^0.8.4",
     "json-loader": "^0.5.3",
     "parallelshell": "^1.2.0",
     "rimraf": "^2.4.3",
     "source-map-loader": "^0.1.5",
-    "uglifycss": "0.0.15",
     "webpack": "^1.12.6"
   }
 }

src/skins/vector/css/gemini-scrollbar.css

@@ -1 +0,0 @@
-../../../../node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css

src/skins/vector/css/gfm.css

@@ -1 +0,0 @@
-../../../../node_modules/gfm.css/gfm.css

src/skins/vector/css/github.css

@@ -1 +0,0 @@
-../../../../node_modules/highlight.js/styles/github.css

src/vector/index.js

@@ -16,6 +16,13 @@ limitations under the License.
 
 'use strict';
 
+// CSS requires: just putting them here for now as CSS is going to be
+// refactored soon anyway
+require('../../vector/components.css');
+require('gemini-scrollbar/gemini-scrollbar.css');
+require('gfm.css/gfm.css');
+require('highlight.js/styles/github.css');
+
 var RunModernizrTests = require("./modernizr"); // this side-effects a global
 var React = require("react");
 var ReactDOM = require("react-dom");

webpack.config.js

@@ -1,5 +1,6 @@
 var path = require('path');
 var webpack = require('webpack');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 module.exports = {
     module: {
@@ -9,6 +10,8 @@ module.exports = {
         loaders: [
             { test: /\.json$/, loader: "json" },
             { test: /\.js$/, loader: "babel", include: path.resolve('./src') },
+            // css-raw-loader loads CSS but doesn't try to treat url()s as require()s
+            { test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
         ]
     },
     output: {
@@ -37,6 +40,9 @@ module.exports = {
             'process.env': {
                 NODE_ENV: JSON.stringify(process.env.NODE_ENV)
             }
+        }),
+        new ExtractTextPlugin("bundle.css", {
+            allChunks: true
         })
     ],
     devtool: 'source-map'