Embed CSS in JS bundles

Rather than requiring users to manually inject both JavaScript and CSS files, bundle Annotator's CSS in the JavaScript bundle. Uses [enhance-css][1] and [clean-css][2] for image inlining and CSS compression, and [insert-css][3] to do the actual injection of a style tag into the page. [1]: https://github.com/jakubpawlowicz/enhance-css [2]: https://github.com/jakubpawlowicz/clean-css [3]: https://github.com/substack/insert-css
openannotation · Apr 10, 2015 · 56e7ff1 · 56e7ff1 · tilgovi · Apr 10, 2015
1 parent c67c353
commit 56e7ff1
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 50 deletions.
diff --git a/Makefile b/Makefile
@@ -1,5 +1,4 @@
 BROWSERIFY := node_modules/.bin/browserify
-UGLIFYCSS := node_modules/.bin/uglifycss
 UGLIFYJS := node_modules/.bin/uglifyjs
 
 # Check that the user has run 'npm install'
@@ -20,9 +19,9 @@ SRC := $(shell find src -type f -name '*.js')
 
 all: annotator plugins annotator-full
 
-annotator: pkg/annotator.min.js pkg/annotator.min.css
+annotator: pkg/annotator.min.js
 plugins: $(patsubst %.js,%.min.js,$(PLUGINS_PKG))
-annotator-full: pkg/annotator-full.min.js pkg/annotator.min.css
+annotator-full: pkg/annotator-full.min.js
 
 clean:
 	rm -rf .deps pkg
@@ -42,18 +41,10 @@ doc/api/%.rst: src/%.js
 	@mkdir -p $(@D)
 	tools/apidoc $< >$@
 
-pkg/%.min.css: pkg/%.css
-	@echo Writing $@
-	@$(UGLIFYCSS) $< >$@
-
 pkg/%.min.js: pkg/%.js
 	@echo Writing $@
 	@$(UGLIFYJS) --preamble "$$(tools/preamble)" $< >$@
 
-pkg/annotator.css: css/annotator.css
-	@mkdir -p pkg/
-	@tools/data_uri_ify <$< >$@
-
 pkg/annotator.js: browser.js
 	@mkdir -p pkg/ .deps/
 	@$(BROWSERIFY) -s annotator $< >$@

diff --git a/css/annotator.css b/css/annotator.css
@@ -25,7 +25,7 @@
 -------------------------------------------------------------------- */
 
 .annotator-adder {
-	background-image: url(../img/annotator-icon-sprite.png);
+	background-image: url(../img/annotator-icon-sprite.png?embed);
 	background-repeat: no-repeat;
 }
 
@@ -36,7 +36,7 @@
 .annotator-viewer .annotator-controls a,
 .annotator-filter .annotator-filter-navigation button:after,
 .annotator-filter .annotator-filter-property .annotator-filter-clear {
-	background-image: url(../img/annotator-glyph-sprite.png);
+	background-image: url(../img/annotator-glyph-sprite.png?embed);
 	background-repeat: no-repeat;
 }
 

diff --git a/demo.html b/demo.html
@@ -3,8 +3,6 @@
   <head>
     <meta charset="utf-8">
     <title>JS annotation test</title>
-    <!-- Annotator's styling and images -->
-    <link rel="stylesheet" type="text/css" href="pkg/annotator.min.css">
   </head>
 
   <body>

diff --git a/dev.html b/dev.html
@@ -3,8 +3,6 @@
   <head>
     <meta charset="utf-8">
     <title>JS annotation test</title>
-
-    <link rel="stylesheet" type="text/css" href="css/annotator.css">
     <style>
       /* This is evil but people do it. This checks that we correctly
          calculate the position of the adder and other UI elements in any

diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "backbone-extend-standalone": "~0.1.2",
     "es6-promise": "~0.1.1",
+    "insert-css": "^0.2.0",
     "jquery": "~1.11.0",
     "xpath-range": "0.0.5"
   },
@@ -17,7 +18,9 @@
     "browserify": "^9.0.8",
     "browserify-middleware": "^5.0.2",
     "browserify-shim": "^3.8.3",
+    "clean-css": "^3.1.9",
     "connect": "~2.10.1",
+    "enhance-css": "^1.1.0",
     "jscs": "~1.6.0",
     "jshint": "~2.5.0",
     "jwt-simple": "~0.1.0",
@@ -28,13 +31,14 @@
     "karma-phantomjs-launcher": "^0.1.4",
     "karma-sauce-launcher": "^0.2.10",
     "sinon": "~1.6.0",
+    "through": "^2.3.7",
     "uglify-js": "~2.4.12",
-    "uglifycss": "~0.0.5",
     "wgxpath": "^0.23.0"
   },
   "browser": "browser.js",
   "browserify": {
     "transform": [
+      "./tools/cssify",
       "browserify-shim"
     ]
   },

diff --git a/src/annotator.js b/src/annotator.js
@@ -1,5 +1,10 @@
 "use strict";
 
+var insertCss = require('insert-css');
+var css = require('../css/annotator.css');
+
+insertCss(css);
+
 var authorizer = require('./authorizer');
 var core = require('./core');
 var identifier = require('./identifier');

diff --git a/tools/cssify.js b/tools/cssify.js
@@ -0,0 +1,36 @@
+"use strict";
+
+var path = require('path');
+
+var EnhanceCSS = require('enhance-css');
+var CleanCSS = require('clean-css');
+var through = require('through');
+
+
+module.exports = function (filename) {
+    if (!/\.css$/i.test(filename)) {
+        return through();
+    }
+
+    var css = "";
+
+    return through(
+        function (chunk) {
+            css += chunk;
+        },
+        function () {
+            var enhance = new EnhanceCSS({
+                rootPath: path.dirname(filename)
+            });
+            var clean = new CleanCSS();
+
+            css = enhance.process(css).embedded.plain;
+            css = clean.minify(css).styles;
+
+            var body = "module.exports = " + JSON.stringify(css);
+
+            this.queue(body);
+            this.queue(null);
+        }
+    );
+};
diff --git a/tools/data_uri_ify b/tools/data_uri_ify