From 7ff5e42f3e52da454466c614f51d0804bbee0096 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 1 Dec 2015 18:05:43 +0000 Subject: [PATCH] Run the CSS through webpack so we can pull in CSS files from modules with require rather than symlinking into the node_module directory which is breaking people on different npm versions. --- .gitignore | 2 +- package.json | 11 +++++++---- src/skins/vector/css/gemini-scrollbar.css | 1 - src/skins/vector/css/gfm.css | 1 - src/skins/vector/css/github.css | 1 - src/vector/index.js | 7 +++++++ webpack.config.js | 6 ++++++ 7 files changed, 21 insertions(+), 8 deletions(-) delete mode 120000 src/skins/vector/css/gemini-scrollbar.css delete mode 120000 src/skins/vector/css/gfm.css delete mode 120000 src/skins/vector/css/github.css diff --git a/.gitignore b/.gitignore index 7cbd6fc236..f5a3b1bdcd 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,4 @@ lib .DS_Store key.pem cert.pem -build +vector/components.css diff --git a/package.json b/package.json index caed363d97..0e7f21b0e0 100644 --- a/package.json +++ b/package.json @@ -12,22 +12,25 @@ "scripts": { "reskindex": "reskindex vector -h src/skins/vector/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": "^8.9.1", "linkifyjs": "^2.0.0-beta.4", "matrix-js-sdk": "https://github.com/matrix-org/matrix-js-sdk.git#develop", "matrix-react-sdk": "https://github.com/matrix-org/matrix-react-sdk.git#develop", @@ -44,12 +47,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" } } diff --git a/src/skins/vector/css/gemini-scrollbar.css b/src/skins/vector/css/gemini-scrollbar.css deleted file mode 120000 index 4e3c83ba7d..0000000000 --- a/src/skins/vector/css/gemini-scrollbar.css +++ /dev/null @@ -1 +0,0 @@ -../../../../node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css \ No newline at end of file diff --git a/src/skins/vector/css/gfm.css b/src/skins/vector/css/gfm.css deleted file mode 120000 index 7940eacb53..0000000000 --- a/src/skins/vector/css/gfm.css +++ /dev/null @@ -1 +0,0 @@ -../../../../node_modules/gfm.css/gfm.css \ No newline at end of file diff --git a/src/skins/vector/css/github.css b/src/skins/vector/css/github.css deleted file mode 120000 index 1ca3fc5a7b..0000000000 --- a/src/skins/vector/css/github.css +++ /dev/null @@ -1 +0,0 @@ -../../../../node_modules/highlight.js/styles/github.css \ No newline at end of file diff --git a/src/vector/index.js b/src/vector/index.js index 00c22719ad..10057d99c7 100644 --- a/src/vector/index.js +++ b/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"); diff --git a/webpack.config.js b/webpack.config.js index 929e57d71b..3c71ed368a 100644 --- a/webpack.config.js +++ b/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'