critical - npm Package Compare versions

		@@ -0,4 +1,9 @@
		/*
		This is a fork of the inline-styles module by @maxogden
		with support for minification. The original module can be
		found here: https://github.com/maxogden/inline-styles
		*/

		var cheerio = require('cheerio');
		var path = require('path');
		// Fork of inline-styles with minification support
		var fs = require('fs');
		@@ -5,0 +10,0 @@ var url = require('url');

package.json

		{
		"name": "critical",
		"version": "0.1.4",
		"version": "0.1.5",
		"description": "Extract & Inline Critical-path CSS from HTML",
		@@ -5,0 +5,0 @@ "author": "Addy Osmani",

README.md

		# critical [![Build Status](https://travis-ci.org/addyosmani/critical.svg?branch=master)](https://travis-ci.org/addyosmani/critical)

		> Extract & Inline Critical-path CSS from HTML
		![](http://i.imgur.com/lAzmBD2.png)

		A module by [@addyosmani](http://github.com/addyosmani) and [@sindresorhus](http://github.com/sindresorhus)
		Critical extracts & inlines critical-path (above-the-fold) CSS from HTML

		@@ -13,3 +13,2 @@ ## Install


		## Usage
		@@ -27,9 +26,9 @@
		critical.generateInline({
		base: 'dist/',
		src: 'index.html',
		styleTarget: 'styles/main.css',
		htmlTarget: 'index-critical.html',
		width: 320,
		height: 480,
		minify: true
		base: 'dist/', // Your base directory
		src: 'index.html', // HTML source
		htmlTarget: 'index-critical.html', // Target for final HTML output
		styleTarget: 'styles/main.css', // Target for generated critical-path CSS (which we inline)
		width: 320, // Viewport width
		height: 480, // Viewport height
		minify: true // Minify critical-path CSS when inlining
		});
		@@ -151,15 +150,37 @@ ```
		Why, yes!. Take a look at [this](https://github.com/addyosmani/critical-path-css-demo) Gulp project
		which demonstrates using Critical to generate and inline critical-path CSS.
		which demonstrates using Critical to generate and inline critical-path CSS. It also includes a mini-tutorial
		that walks through how to use it in a simple webapp.

		### When should I just use Penthouse directly?

		I recommend using [Penthouse](http://npmjs.org/package/penthouse) directly if your app has a large number of styles
		or stylesheets being dynamically injected into the DOM. Critical is best used
		when your page uses a fixed set of stylesheets as we can automatically scrape
		this for you, avoiding the overhead of passing known styles yourself manually to Penthouse.
		The main differences between Critical and [Penthouse](https://github.com/pocketjoso/penthouse), a module we
		use, are:

		* Critical will automatically extract stylesheets from your HTML from which to generate critical-path CSS from,
		whilst other modules generally require you to specify this upfront.
		* Critical provides methods for inlining critical-path CSS (a common logical next-step once your CSS is generated)
		* Since we tackle both generation and inlining, we're able to abstract away some of the ugly boilerplate otherwise
		involved in tackling these problems separately.

		## License
		That said, if your site or app has a large number of styles or styles which are being dynamically injected into
		the DOM (sometimes common in Angular apps) I recommend using Penthouse directly. It will require you to supply
		styles upfront, but this may provide a higher level of accuracy if you find Critical isn't serving your needs.

		Apache 2.0
		Copyright 2014 Google Inc
		### What other alternatives to Critical are available?

		FilamentGroup maintain a [criticalCSS](https://github.com/filamentgroup/criticalCSS) node module, which
		similar to [Penthouse](https://github.com/pocketjoso/penthouse) will find and output the critical-path CSS for
		your pages.

		### Is Critical stable and suitable for production use?

		Many of the current tools around critical-path CSS are in an experimental stage and are constantly striving
		to improve. The same could be said of Critical. It hasn't been extensively tested on a ton of sites and it's
		very possible something may well break. That said, we welcome you to try it out on your project and report
		bugs if you find them.

		## Can I contribute?

		Of course. We appreciate all of our [contributors](https://github.com/addyosmani/critical/graphs/contributors) and
		welcome contributions to improve the project further. If you're uncertain whether an addition should be made, feel
		free to open up an issue and we can discuss it.

Improved metrics