minify splash-screen stylesheet (bug 965925)

lib/assets/gitignore

@@ -34,6 +34,7 @@ src/locales/*
 src/media/build_id.txt
 src/media/locales/*
 src/media/css/include.css
+src/media/css/splash.css
 src/media/imgurls.txt
 src/media/include.css
 src/media/include.js

lib/build.js

@@ -13,6 +13,7 @@ var blacklist = [
     'templates.js',  // Generated dynamically.
     'include.js',
     'include.css',
+    'splash.css'
 ];
 
 function concatJS(src_dir, callback) {
@@ -59,16 +60,9 @@ function compileStylus(source_path, callback) {
     });
 }
 
-function concatCSS(src_dir, callback) {
-    var css_pattern = /href="(\/media\/css\/.+\.styl\.css)"/g;
-    var url_pattern = /url\(([^)]+)\)/g;
-
-    var img_urls = [];
-    var css_dir = path.resolve(src_dir, 'media', 'css');
-    var imgurls_fn = path.resolve(src_dir, 'media', 'imgurls.txt');
+function fix_urls(img_urls, css_dir, src_dir, url_pattern, data) {
     var has_origin = false;
 
-    function fix_urls(data) {
     return data.replace(url_pattern, function(match, url, offset, string) {
         url = url.replace(/"|'/g, '');
         has_origin = false;
@@ -112,6 +106,55 @@ function concatCSS(src_dir, callback) {
     });
 }
 
+function minifyCSS(src_dir, src, callback) {
+    var css_pattern = new RegExp('href=".+' + src + '"', 'g');
+    var url_pattern = /url\(([^)]+)\)/g;
+
+    var img_urls = [];
+    var css_dir = path.resolve(src_dir, 'media/css');
+    var imgurls_fn = path.resolve(src_dir, 'media/imgurls.txt');
+
+    var index_html = fs.readFile(path.resolve(src_dir, 'index.html'), function(err, data) {
+        if (err) {
+            console.error('Could not read `index.html`.', err);
+            return;
+        }
+        var match;
+        var files = [];
+        data = data.toString();
+        while (match = css_pattern.exec(data)) {
+            files.push(path.resolve(src_dir + match[1]));
+        }
+
+        var output = '';
+
+        compileStylus(path.resolve(src_dir, src).replace('.styl.css', '.styl'), function(err, data) {
+            if (err) {
+                console.warn(err);
+            } else {
+                output = fix_urls(img_urls, css_dir, src_dir, url_pattern, data + '\n');
+            }
+            fs.appendFile(imgurls_fn, img_urls.join('\n') + '\n', function(err) {
+                if (err) {
+                    console.error('Error writing `imgurls.txt` to disk.');
+                    return;
+                }
+                console.log('Created ' + imgurls_fn);
+            });
+            callback(output);
+        });
+    });
+}
+
+function concatCSS(src_dir, callback) {
+    var css_pattern = /href="(\/media\/css\/.+\.styl\.css)"/g;
+    var url_pattern = /url\(([^)]+)\)/g;
+
+    var img_urls = [];
+    var css_dir = path.resolve(src_dir, 'media/css');
+    var imgurls_fn = path.resolve(src_dir, 'media/imgurls.txt');
+    var has_origin = false;
+
     var index_html = fs.readFile(path.resolve(src_dir, 'index.html'), function(err, data) {
         if (err) {
             console.error('Could not read `index.html`.', err);
@@ -134,13 +177,13 @@ function concatCSS(src_dir, callback) {
                 if (err) {
                     console.warn(err);
                 } else {
-                    output[index] = fix_urls(data + '\n');
+                    output[index] = fix_urls(img_urls, css_dir, src_dir, url_pattern, data + '\n');
                 }
                 remaining--;
                 if (!remaining) {
                     fs.writeFile(imgurls_fn, img_urls.join('\n') + '\n', function(err) {
                         if (err) {
-                            console.error('Error writing `cssurls.txt` to disk.');
+                            console.error('Error writing `imgurls.txt` to disk.');
                             return;
                         }
                         console.log('Created ' + imgurls_fn);
@@ -209,4 +252,5 @@ function compileHTML(src_dir, callback) {
 module.exports.js = concatJS;
 module.exports.stylus = compileStylus;
 module.exports.css = concatCSS;
+module.exports.cssMinify = minifyCSS;
 module.exports.html = compileHTML;

lib/commonplace.js

@@ -288,6 +288,7 @@ function clean(src_dir, callback) {
         'templates.js',
         'media/build_id.txt',
         'media/imgurls.txt',
+        'media/css/splash.css',
         'media/css/include.css',
         'media/js/include.js',
         'media/locales/',
@@ -569,9 +570,11 @@ function build_includes(src_dir, callback) {
         }
     );
 
+    var cleancss = (new (require('clean-css')));
+
     build.css(src_dir, function(data) {
         if (!raw) {
-            data = (new (require('clean-css'))).minify(data);
+            data = cleancss.minify(data);
         }
         var include_css = path.resolve(src_dir, 'media', 'css', 'include.css');
         fs.writeFile(include_css, data, function(err) {
@@ -584,7 +587,29 @@ function build_includes(src_dir, callback) {
         });
     });
 
+    // The stylesheet used for the splash screen needs to happen after the
+    // other files have been processed (because of the `imgurls.txt` file).
+    console.log( path.resolve(src_dir, 'media', 'css', 'splash.styl') )
+    fs.exists(path.resolve(src_dir, 'media', 'css', 'splash.styl'), function (exists) {
+        if (!exists) {
+            return completed();
+        }
+
+        build.cssMinify(src_dir, 'media/css/splash.styl.css', function(data) {
+            if (!raw) {
+                data = cleancss.minify(data);
+            }
+            var splash_css = path.resolve(src_dir, 'media', 'css', 'splash.css');
+            fs.writeFile(splash_css, data, function(err) {
+                if (err) {
+                    console.error('Error writing `splash.css` to disk.');
+                    return;
+                }
+                console.log('Created ' + splash_css);
                 completed();
+            });
+        });
+    });
 }
 
 function lint() {

src/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
     <title>Commonplace Sample App</title>
+    <link rel="stylesheet" href="https://marketplace-dev-cdn.allizom.org/media/fireplace/css/splash.css">
     <link rel="stylesheet" href="https://marketplace-dev-cdn.allizom.org/media/fireplace/css/include.css">
   </head>
   <body class="home" data-media="">