uncss - npm Package Compare versions

lib/phantom-script.js

tests/css/test.css

tests/js/script.js

1

bin/index.js

		@@ -17,2 +17,3 @@ #!/usr/bin/env node
		.option('-s, --stylesheets <file, ...>', 'Specify additional stylesheets to process')
		.option('-t, --timeout <milliseconds>', 'Wait for JS evaluation')
		.parse(process.argv);
		@@ -19,0 +20,0 @@

55

lib/lib.js

		@@ -5,5 +5,47 @@ /jslint node: true, plusplus: true, stupid: true /

		var fs = require('fs');
		var async = require('async'),
		child_process = require('child_process'),
		fs = require('fs'),
		path = require('path'),
		phantom = require('phantomjs');

		/**
		* Run a page through phantomjs
		* @param {String} Filename The name of the HTML page
		* @param {Function} Callback
		* @return {String} The contents of the files, as seen by Phantom
		*/
		function phantom_eval(filename, timeout, callback) {
		var childArgs = [
		path.join(__dirname, 'phantom-script.js'),
		filename,
		timeout
		],
		page,
		buffer = '',
		error = '';

		page = child_process.spawn(phantom.path, childArgs);
		page.stdout.setEncoding('utf8');
		page.stderr.setEncoding('utf8');

		page.stdout.on('data', function (data) {
		buffer += data;
		});

		page.stderr.on('data', function (data) {
		error += data;
		});

		page.on('close', function (code) {
		if (code === 0 && error === '') {
		callback(buffer);
		} else {
		console.log(error);
		process.exit(1);
		}
		});
		}

		/**
		* Given an array of filenames, return an array of the files' contents,
		@@ -54,3 +96,3 @@ * only if the filename matches a regex
		return selectors.filter(function (selector) {
		var match, i, temp;
		var match, i, j, temp;
		/* Don't process @-rules (for now?) */
		@@ -63,2 +105,10 @@ if (selector[0] === '@') {
		}
		// Issue #7 check regex ignores
		for (j = 0; j < ignore.length; ++j) {
		// if ignore is RegExp and matches selector ...
		if (toString.call(ignore[j]) === '[object RegExp]' && ignore[j].test(selector)){
		return true;
		}
		}

		/* For each DOM, match the selector */
		@@ -138,4 +188,5 @@ for (i = 0; i < doms.length; ++i) {

		module.exports.phantom_eval = phantom_eval;
		module.exports.mapReadFiles = mapReadFiles;
		module.exports.extract_stylesheets = extract_stylesheets;
		module.exports.filterUnusedRules = filterUnusedRules;

91

lib/uncss.js

		/jslint node: true /
		"use strict";

		var css = require('css'),
		var async = require('async'),
		css = require('css'),
		csso = require('csso'),
		@@ -12,37 +13,13 @@ cheerio = require('cheerio'),
		/**
		* Main exposed function
		* @param {Array} files array of filenames
		* @param {Object} opt options
		* @param {Function} cb callback
		* @return {String} uncss'd css
		* This function does all the heavy-lifting
		* @param {[type]} files List of HTML files
		* @param {[type]} doms List of DOMS loaded by PhantomJS
		* @param {[type]} options Options passed to the program
		* @param {Function} callback
		*/
		function uncss(files, opt, cb) {
		var callback,
		stylesheets,
		doms,
		options,
		function uncss(files, doms, options, callback) {
		var stylesheets,
		parsed_css,
		used_css;

		/* If 'files' is a string, it should represent an HTML page. */
		if (typeof files === 'string') {
		doms = [files];
		} else {
		doms = utility.mapReadFiles(files);
		}
		if (typeof opt === 'function') {
		/* There were no options,
		* this argument is really the callback
		*/
		options = {};
		callback = opt;
		} else if (typeof opt === 'object' && typeof cb === 'function') {
		options = opt;
		callback = cb;
		} else {
		throw 'TypeError: expected a callback';
		}

		options.csspath = (typeof options.csspath === 'string') ? options.csspath : '';

		/* Parse the HTML. */
		@@ -102,2 +79,50 @@ doms = doms.map(function (dom) {

		module.exports = uncss;
		/**
		* Main exposed function.
		* Here we check the options and callback, then run the files through PhantomJS.
		* @param {Array} files array of filenames
		* @param {Object} opt options
		* @param {Function} cb callback
		*/
		function init(files, opt, cb) {
		var callback,
		doms,
		options;

		/* If 'files' is a string, it should represent an HTML page. */
		if (typeof files === 'string') {
		doms = [files];
		} else {
		doms = utility.mapReadFiles(files);
		}
		if (typeof opt === 'function') {
		/* There were no options,
		* this argument is really the callback
		*/
		options = {};
		callback = opt;
		} else if (typeof opt === 'object' && typeof cb === 'function') {
		options = opt;
		callback = cb;
		} else {
		throw 'TypeError: expected a callback';
		}

		options.csspath = (typeof options.csspath === 'string') ? options.csspath : '';

		async.map(
		doms,
		function (f, oncomplete) {
		return utility.phantom_eval(f, options.timeout, oncomplete);
		},
		function (res) {
		if (typeof res !== 'Array') {
		res = [res];
		}
		uncss(files, doms, options, callback);
		}
		);
		}

		// TODO: This might be counterintuitive
		module.exports = init;

6

package.json

		{
		"name": "uncss",
		"version": "0.5.5",
		"version": "0.6.0",
		"description": "Remove unused CSS styles",
		@@ -34,4 +34,6 @@ "main": "lib/uncss.js",
		"cheerio": "~0.12.4",
		"underscore": "~1.5.2"
		"underscore": "~1.5.2",
		"async": "~0.2.9",
		"phantomjs": "~1.9.2-5"
		}
		}

26

README.md

		@@ -18,7 +18,11 @@ # UnCSS #

		-h, --help output usage information
		-V, --version output the version number
		-c, --compress Compress CSS output
		-i, --ignore=<selector ...> Do not remove given selectors
		-h, --help output usage information
		-V, --version output the version number
		-c, --compress Compress CSS output
		-i, --ignore <selector, ...> Do not remove given selectors
		-C, --csspath <path> Relative path where the CSS files are located
		-s, --stylesheets <file, ...> Specify additional stylesheets to process
		-t, --timeout <milliseconds> Wait for JS evaluation


		### Within node: ###
		@@ -30,6 +34,7 @@
		options = {
		ignore: ['#added_at_runtime', '.created_by_jQuery'],
		compress: true,
		csspath: "../public/css/", // path where the CSS files are related to the html files. By default, uncss uses the path specified in the <link rel="stylesheet" href="path/to/file.css">
		stylesheets: ["lib/bootstrap/dist/css/bootstrap.css", "src/public/css/main.css"] // Force the list of stylesheets to optimize using a path relative to the `Gruntfile.js`. Otherwise, it extracts the stylesheets from the html files
		ignore: ['#added_at_runtime', /test\-[0-9]+/],
		csspath: "../public/css/",
		stylesheets: ["lib/bootstrap/dist/css/bootstrap.css", "src/public/css/main.css"],
		timeout: 1000
		};
		@@ -52,2 +57,9 @@

		#### Options in depth: ####
		- __compress__ [Boolean]: Whether the CSS output should be compressed.
		- __ignore__ [Array]: provide a list of selectors that should not be removed by UnCSS. For example, styles added by user interaction with the page (hover, click), since those are not detectable by UnCSS yet. Both literal names and regex patterns are recognized.
		- __csspath__ [String]: Path where the CSS files are related to the html files. By default, UnCSS uses the path specified in the <link rel="stylesheet" href="path/to/file.css"\>
		- __stylesheets__ [Array]: Force the list of stylesheets to optimize using a path relative to the `Gruntfile.js`. Otherwise, it extracts the stylesheets from the html files.
		- __timeout__ [Number]: Specify how long to wait for the JS to be loaded.

		### grunt-uncss ###
		@@ -54,0 +66,0 @@ If you are looking for the grunt plugin, head over to [grunt-uncss](https://github.com/addyosmani/grunt-uncss), created by @addyosmani

tests/bootstrap.uncss.html

Sorry, the diff of this file is not supported yet

uncss - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes