Skip to content

Instantly share code, notes, and snippets.

@8bitDesigner
Last active December 12, 2015 03:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 8bitDesigner/4709474 to your computer and use it in GitHub Desktop.
Save 8bitDesigner/4709474 to your computer and use it in GitHub Desktop.

Usage

node pruneCss.js styles.css output > strippedFile.css

Use Chrome's audit panel to get a list of unused CSS selectors on the current page, and, presuming your CSS file conforms to the style of "[selector] {all; rules; one: one-line;}" this script will print out the CSS file, omitting the unused selectors.

var fs = require('fs')
// Pull in our list of styles and list of unused selectors
var styles = fs.readFileSync(process.argv[2], 'utf8').split('\n')
, unused = fs.readFileSync(process.argv[3], 'utf8').split('\n')
// Yank off the trailing whitespace
styles.pop()
unused.pop()
var log = function(thing) { console.log(thing) }
, prune = function(list) {
return function(line) {
var keep = true
list.forEach(function(test) {
if (!keep) return
if (line.indexOf(test+'{') === 0) keep = false
})
return keep
}
}
styles.filter(prune(unused)).forEach(log)
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
a:hover,a:active{outline:0}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{height:auto;border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}
button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}
button,input{*overflow:visible;line-height:normal}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}
input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
textarea{overflow:auto;vertical-align:top}
.clearfix,.but,.form-buttons,.form-actions,#unav,#unav .mint-customer-bar ul.mint-customer-bar,#unav .container,#unav .sites,.product-detail .product-thumbs,.product-detail .configurable-options,.product-detail .description,.product-detail .about-collection,.fb-friends,#mint-modal-content.express .actions,.rewards .main .layout-simple .rewards-list h3,.member-bar .nav-main,.mint-intimint-customer-showroom .product .case-header .social,#showMoreContainer .product .case-header .social{*zoom:1;}
.clearfix:before,.but:before,.form-buttons:before,.form-actions:before,#unav:before,#unav .mint-customer-bar ul.mint-customer-bar:before,#unav .container:before,#unav .sites:before,.product-detail .product-thumbs:before,.product-detail .configurable-options:before,.product-detail .description:before,.product-detail .about-collection:before,.fb-friends:before,#mint-modal-content.express .actions:before,.rewards .main .layout-simple .rewards-list h3:before,.member-bar .nav-main:before,.mint-intimint-customer-showroom .product .case-header .social:before,#showMoreContainer .product .case-header .social:before,.clearfix:after,.but:after,.form-buttons:after,.form-actions:after,#unav:after,#unav .mint-customer-bar ul.mint-customer-bar:after,#unav .container:after,#unav .sites:after,.product-detail .product-thumbs:after,.product-detail .configurable-options:after,.product-detail .description:after,.product-detail .about-collection:after,.fb-friends:after,#mint-modal-content.express .actions:after,.rewards .main .layout-simple .rewards-list h3:after,.member-bar .nav-main:after,.mint-intimint-customer-showroom .product .case-header .social:after,#showMoreContainer .product .case-header .social:after{display:table;content:""}
.clearfix:after,.but:after,.form-buttons:after,.form-actions:after,#unav:after,#unav .mint-customer-bar ul.mint-customer-bar:after,#unav .container:after,#unav .sites:after,.product-detail .product-thumbs:after,.product-detail .configurable-options:after,.product-detail .description:after,.product-detail .about-collection:after,.fb-friends:after,#mint-modal-content.express .actions:after,.rewards .main .layout-simple .rewards-list h3:after,.member-bar .nav-main:after,.mint-intimint-customer-showroom .product .case-header .social:after,#showMoreContainer .product .case-header .social:after{clear:both}
.pull-right,.R{float:right}
/* Generated from Chrome's Audit panel */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section
audio,canvas,video
audio:not([controls])
sub,sup
sup
sub
img
button,input,select,textarea
button,input
button,input[type="button"],input[type="reset"],input[type="submit"]
input[type="search"]
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button
textarea
.clearfix,.but,.form-buttons,.form-actions,#unav,#unav .mint-customer-bar ul.mint-customer-bar,#unav .container,#unav
.page-title p
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment