Make CSS files/path configurable

Added config options to readme

corrected order of assert params

added another test css

README.md

@@ -33,6 +33,12 @@ critical.generateInline({
 
     // HTML source
     src: 'index.html',
+
+    // Your CSS directory (optional)
+    cssPath: 'dist/styles/',
+
+    // Your CSS File (optional)
+    css: 'dist/styles/main.css',
 
     // Viewport width
     width: 320,

external/styles/main.css

@@ -0,0 +1,64 @@
+body {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+
+.header,
+.marketing{
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+
+.header {
+    border-bottom: 1px solid #e5e5e5;
+}
+
+
+.header h3 {
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 40px;
+    padding-bottom: 19px;
+}
+
+
+.jumbotron {
+    text-align: center;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.jumbotron .btn {
+    font-size: 21px;
+    padding: 14px 24px;
+}
+
+
+.marketing {
+    margin: 40px 0;
+}
+
+
+@media screen and (min-width: 768px) {
+    .container {
+        max-width: 730px;
+    }
+
+
+    .header,
+    .marketing{
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+
+    .header {
+        margin-bottom: 30px;
+    }
+
+
+    .jumbotron {
+        border-bottom: 0;
+    }
+}

fixture/styles/unused.css

@@ -0,0 +1,3 @@
+#unused-selector {
+    display:none;
+}

index.js

@@ -36,18 +36,34 @@ exports.generate = function (opts, cb) {
     var url = path.join(opts.base, opts.src);
 
     fs.readFile(url, function (err, html) {
+        var css,hrefs;
         if (err) {
             cb(err);
             return;
         }
 
         // Oust extracts a list of your stylesheets
-        var hrefs = oust(html, 'stylesheets');
+        hrefs = oust(html.toString('utf8'), 'stylesheets');
+
         // Penthouse then determines your critical
         // path CSS using these as input.
+        // @todo consider all stylesheets
+        if (opts.css) {
+            css = opts.css;
+        } else if (opts.cssPath) {
+            css = path.join(opts.cssPath,path.basename(hrefs[0]));
+        } else {
+            css = path.join(opts.base, hrefs[0]);
+        }
+
+        if (!fs.existsSync(css)) {
+            throw 'Could not find CSS "' + css +'"';
+        }
+
+
         penthouse({
             url: url,
-            css: path.join(opts.base, hrefs[0]),
+            css: css,
             // What viewports do you care about?
             width: opts.width,   // viewport width
             height: opts.height  // viewport height

test.js

@@ -32,7 +32,7 @@ it('generates critical-path CSS successfully', function (done) {
       width: 320,
       height: 480
     }, function (err, output) {
-        assert.strictEqual(expected, output);
+        assert.strictEqual(output, expected);
         done();
     });
 });
@@ -47,7 +47,23 @@ it('generates minified critical-path CSS successfully', function (done) {
       width: 320,
       height: 480
     }, function (err, output) {
-        assert.strictEqual(expected, output);
+        assert.strictEqual(output, expected);
+        done();
+    });
+});
+
+it('generates minified critical-path CSS successfully with external css file configured', function (done) {
+    var expected = fs.readFileSync('fixture/styles/critical-min.css', 'utf8');
+
+    critical.generate({
+        base: 'fixture/',
+        src: 'index.html',
+        css: ['external/styles/main.css','fixture/styles/unused.css'],
+        minify: true,
+        width: 320,
+        height: 480
+    }, function (err, output) {
+        assert.strictEqual(output, expected);
         done();
     });
 });
@@ -61,7 +77,7 @@ it('generates critical-path CSS without writing to disk', function (done) {
       width: 320,
       height: 480
     }, function (err, output) {
-        assert.strictEqual(expected, output);
+        assert.strictEqual(output, expected);
         done();
     });
 });
@@ -74,7 +90,7 @@ it('inlines critical-path CSS successfully', function (done) {
       src: 'index-critical.html',
       dest: 'test-final.html'
     }, function (err, output) {
-      assert.strictEqual(expected, output);
+      assert.strictEqual(output, expected);
       done();
     });
 });
@@ -86,7 +102,7 @@ it('inlines critical-path CSS without writing to disk', function (done) {
       base: 'fixture/',
       src: 'index-critical.html'
     }, function (err, output) {
-      assert.strictEqual(expected, output);
+      assert.strictEqual(output, expected);
       done();
     });
 });
@@ -100,7 +116,7 @@ it('inlines and minified critical-path CSS', function (done) {
       src: 'index-critical.html',
       dest: 'test-inlined-minified.html'
     }, function (err, output) {
-      assert.strictEqual(expected, output);
+      assert.strictEqual(output, expected);
       done();
     });
 });