veyron-browser: Simple CSS setup (no Preprocessing yet) and Map file generation
Using a custom browserify transform to handle require('file.css') for use
with insertCSS. Later to be switched to do Rework preprocessing, hence not
using an existing plugin like cssify.
Adding map file generation to the browserify call.
Refactoring Prova options into variables for reuse.
Change-Id: I1612b51b9e37047bd0c0cec8dd83cc9dc32d6f0c
diff --git a/Makefile b/Makefile
index ab98338..6fbd95c 100644
--- a/Makefile
+++ b/Makefile
@@ -1,16 +1,19 @@
PATH:=$(VEYRON_ROOT)/environment/cout/node/bin:$(PATH)
PATH:=node_modules/.bin:$(PATH)
-# All JS files except build.js and third party
-JS_FILES = $(shell find src -name "*.js")
+# All JS and CSS files except build.js and third party
+BROWSERIFY_FILES = $(shell find src -name "*.js" -o -name "*.css")
+BROWSERIFY_OPTIONS = --transform ./css-transform --debug
+PROVA_OPTIONS = --browser --launch chrome --plugin proxyquireify/plugin
+PROVA_HEADLESS_OPTIONS = --headless --progress --quit
# Builds everything
all: public/bundle.js public/bundle.html public/platform.js
# Creating the bundle JS file
-public/bundle.js: $(JS_FILES) node_modules
+public/bundle.js: $(BROWSERIFY_FILES) node_modules
jshint src # lint all src JavaScript files
- browserify src/app.js -o public/bundle.js
+ browserify src/app.js $(BROWSERIFY_OPTIONS) $< | exorcist $@.map > $@ #Browserify and generate map file
# Creating the bundle HTML file
public/bundle.html: web-component-dependencies.html node_modules bower_components
@@ -37,7 +40,7 @@
# Uses prova to run tests in a headless chrome and then quit after all test finish
test:
jshint test # lint all test JavaScript files
- prova test/**/*.js --browser --launch chrome --headless --progress --quit --plugin proxyquireify/plugin
+ prova test/**/*.js $(PROVA_OPTIONS) $(PROVA_HEADLESS_OPTIONS)
# Continuously watch for changes to .js, .html or .css files.
# Rebundles the appropriate bundles when local files change
@@ -47,7 +50,7 @@
# Continuously reruns the tests as they change
watch-test:
@echo "Tests being watched at: http://0.0.0.0:7559"
- prova test/**/*.js --browser --launch chrome --plugin proxyquireify/plugin
+ prova test/**/*.js $(PROVA_OPTIONS)
# Serves the needed daemons and starts a server at http://localhost:$(HTTP_PORT)
# CTRL-C to stop
diff --git a/css-transform.js b/css-transform.js
new file mode 100644
index 0000000..4571178
--- /dev/null
+++ b/css-transform.js
@@ -0,0 +1,27 @@
+var through2 = require('through2');
+var path = require('path');
+
+module.exports = transform;
+
+//TODO(aghassemi) Vanilla CSS for now. Pre-process after switch to Rework
+function transform(file) {
+ if (path.extname(file) !== '.css') {
+ return through2();
+ }
+
+ var contents = [];
+
+ return through2(write, flush);
+
+ function write(data, encoding, callback) {
+ var string = data.toString();
+ contents.push(string);
+ callback();
+ }
+
+ function flush(callback) {
+ var css = contents.join('');
+ this.push('module.exports = ' + JSON.stringify(css));
+ callback();
+ }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index fee451e..dfa192c 100644
--- a/package.json
+++ b/package.json
@@ -8,14 +8,17 @@
},
"devDependencies": {
"browserify": "^4.2.3",
+ "exorcist": "^0.1.6",
"jshint": "^2.5.2",
"prova": "^1.14.0",
"proxyquireify": "^0.5.0",
"serve": "^1.4.0",
+ "through2": "^0.5.1",
"vulcanize": "^0.3.1"
},
"dependencies": {
"debug": "^1.0.4",
+ "insert-css": "^0.2.0",
"mercury": "^6.0.1",
"routes": "^1.2.0",
"veyron": "0.0.1"
diff --git a/src/components/viewport/index.css b/src/components/viewport/index.css
new file mode 100644
index 0000000..ae84c92
--- /dev/null
+++ b/src/components/viewport/index.css
@@ -0,0 +1,6 @@
+/* TODO(aghassemi) Use Rework */
+@import url(http://fonts.googleapis.com/css?family=Open+Sans);
+body {
+ font-family: 'Roboto', sans-serif;
+ color: #252525;
+}
diff --git a/src/components/viewport/index.js b/src/components/viewport/index.js
index 9cc7d94..272bf2e 100644
--- a/src/components/viewport/index.js
+++ b/src/components/viewport/index.js
@@ -1,7 +1,10 @@
var mercury = require('mercury');
+var insertCss = require('insert-css');
var AttributeHook = require('../../lib/mercury/attribute-hook');
var Sidebar = require('../sidebar/index');
var MainContent = require('../main-content/index');
+var css = require('./index.css');
+
var h = mercury.h;
module.exports = create;
@@ -13,6 +16,7 @@
function create() {}
function render(state, events) {
+ insertCss(css);
return h('core-drawer-panel', [
h('core-header-panel', {
'drawer': new AttributeHook(true)
