Skip to content

Repository files navigation

Deadweight

Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and reports which can be "safely" deleted.

Screencast!

Ryan Bates has worked his magic once again. Head over here for an excellent introduction to Deadweight.

How to Install It

$ gem install deadweight

How to Use It

There are multiple ways to use Deadweight. It's designed to be completely agnostic of whatever framework (or indeed language) your website is built on, but optimised for Ruby and Rails.

Run it From the Command Line

$ deadweight -s styles.css -s ie.css index.html about.html
$ deadweight -s http://www.tigerbloodwins.com/index.css http://www.tigerbloodwins.com/
$ deadweight --root http://kottke.org/ -s '/templates/2009/css.php?p=mac' / /everfresh /about

Integrate it With Your Integration Tests

Deadweight can hijack your Rails integration tests (both the spartan Test::Unit type and the refreshing Cucumber variety), capturing every page that is returned by your app during testing and saving you the trouble of manually specifying a ton of URLs and login processses.

First, put this in your Gemfile:

group :test do
gem 'colored'
gem 'deadweight', :require => 'deadweight/hijack/rails'
end

Then, run your integration tests with the environment variable DEADWEIGHT set to true:

rake test DEADWEIGHT=true
rake cucumber DEADWEIGHT=true

Let me know how it goes. It's not terribly customisable at the moment (you can't specify what exact stylesheets to look at, or what selectors to ignore). I'm looking for your feedback on how you'd like to be able to do that.

Rake Task

# lib/tasks/deadweight.rake
require 'deadweight'
Deadweight::RakeTask.new do |dw|
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
end

Running rake deadweight will output all unused rules, one per line. Note that it looks at http://localhost:3000 by default, so you'll need to have script/server (or whatever your server command looks like) running.

Call it Directly from Ruby

require 'deadweight'
dw = Deadweight.new
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
puts dw.run

Pipe In CSS Rules from STDIN

$ cat styles.css | deadweight index.html

Use it as an HTTP Proxy

$ deadweight -l deadweight.log -s styles.css -w http://github.com/ -P

Setting the Root URL

By default, Deadweight uses http://localhost:3000 as the base URL for all paths. To change it, set root:

dw.root = "http://staging.example.com" # staging server
dw.root = "http://example.com/staging-area" # urls can have paths in
dw.root = "/path/to/some/html" # local paths work too

What About Stuff Added by Javascript?

Deadweight is completely dumb about any classes, IDs or tags that are only added by your Javascript layer, but you can filter them out by setting ignore_selectors:

dw.ignore_selectors = /hover|lightbox|superimposed_kittens/

The command-line tool also has basic support for Lyndon with the -L flag, which simply pipes all HTML through the lyndon executable.

You Can Use Mechanize for Complex Stuff

Set mechanize to true and add a Proc to pages (rather than a String), and Deadweight will execute it using Mechanize:

dw.mechanize = true
# go through the login form to get to a protected URL
dw.pages << proc {
fetch('/login')
form = agent.page.forms.first
form.username = 'username'
form.password = 'password'
agent.submit(form)
fetch('/secret-page')
}
# use HTTP basic auth
dw.pages << proc {
agent.auth('username', 'password')
fetch('/other-secret-page')
}

The agent method returns the Mechanize instance. The fetch method is a wrapper around agent.get that will abort in the event of an HTTP error status.

If You Install colored, It'll Look Nicer

gem install colored

Copyright

Copyright (c) 2009 Aanand Prasad. See LICENSE for details.

About

Find unused CSS selectors by scraping your HTML

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - axs89/deadweight: Find unused CSS selectors by scraping your HTML · GitHub
Skip to content

Repository files navigation

Deadweight

Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and reports which can be "safely" deleted.

Screencast!

Ryan Bates has worked his magic once again. Head over here for an excellent introduction to Deadweight.

How to Install It

$ gem install deadweight

How to Use It

There are multiple ways to use Deadweight. It's designed to be completely agnostic of whatever framework (or indeed language) your website is built on, but optimised for Ruby and Rails.

Run it From the Command Line

$ deadweight -s styles.css -s ie.css index.html about.html
$ deadweight -s http://www.tigerbloodwins.com/index.css http://www.tigerbloodwins.com/
$ deadweight --root http://kottke.org/ -s '/templates/2009/css.php?p=mac' / /everfresh /about

Integrate it With Your Integration Tests

Deadweight can hijack your Rails integration tests (both the spartan Test::Unit type and the refreshing Cucumber variety), capturing every page that is returned by your app during testing and saving you the trouble of manually specifying a ton of URLs and login processses.

First, put this in your Gemfile:

group :test do
gem 'colored'
gem 'deadweight', :require => 'deadweight/hijack/rails'
end

Then, run your integration tests with the environment variable DEADWEIGHT set to true:

rake test DEADWEIGHT=true
rake cucumber DEADWEIGHT=true

Let me know how it goes. It's not terribly customisable at the moment (you can't specify what exact stylesheets to look at, or what selectors to ignore). I'm looking for your feedback on how you'd like to be able to do that.

Rake Task

# lib/tasks/deadweight.rake
require 'deadweight'
Deadweight::RakeTask.new do |dw|
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
end

Running rake deadweight will output all unused rules, one per line. Note that it looks at http://localhost:3000 by default, so you'll need to have script/server (or whatever your server command looks like) running.

Call it Directly from Ruby

require 'deadweight'
dw = Deadweight.new
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
puts dw.run

Pipe In CSS Rules from STDIN

$ cat styles.css | deadweight index.html

Use it as an HTTP Proxy

$ deadweight -l deadweight.log -s styles.css -w http://github.com/ -P

Setting the Root URL

By default, Deadweight uses http://localhost:3000 as the base URL for all paths. To change it, set root:

dw.root = "http://staging.example.com" # staging server
dw.root = "http://example.com/staging-area" # urls can have paths in
dw.root = "/path/to/some/html" # local paths work too

What About Stuff Added by Javascript?

Deadweight is completely dumb about any classes, IDs or tags that are only added by your Javascript layer, but you can filter them out by setting ignore_selectors:

dw.ignore_selectors = /hover|lightbox|superimposed_kittens/

The command-line tool also has basic support for Lyndon with the -L flag, which simply pipes all HTML through the lyndon executable.

You Can Use Mechanize for Complex Stuff

Set mechanize to true and add a Proc to pages (rather than a String), and Deadweight will execute it using Mechanize:

dw.mechanize = true
# go through the login form to get to a protected URL
dw.pages << proc {
fetch('/login')
form = agent.page.forms.first
form.username = 'username'
form.password = 'password'
agent.submit(form)
fetch('/secret-page')
}
# use HTTP basic auth
dw.pages << proc {
agent.auth('username', 'password')
fetch('/other-secret-page')
}

The agent method returns the Mechanize instance. The fetch method is a wrapper around agent.get that will abort in the event of an HTTP error status.

If You Install colored, It'll Look Nicer

gem install colored

Copyright

Copyright (c) 2009 Aanand Prasad. See LICENSE for details.

About

Find unused CSS selectors by scraping your HTML

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - axs89/deadweight: Find unused CSS selectors by scraping your HTML · GitHub
Skip to content

Repository files navigation

Deadweight

Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and reports which can be "safely" deleted.

Screencast!

Ryan Bates has worked his magic once again. Head over here for an excellent introduction to Deadweight.

How to Install It

$ gem install deadweight

How to Use It

There are multiple ways to use Deadweight. It's designed to be completely agnostic of whatever framework (or indeed language) your website is built on, but optimised for Ruby and Rails.

Run it From the Command Line

$ deadweight -s styles.css -s ie.css index.html about.html
$ deadweight -s http://www.tigerbloodwins.com/index.css http://www.tigerbloodwins.com/
$ deadweight --root http://kottke.org/ -s '/templates/2009/css.php?p=mac' / /everfresh /about

Integrate it With Your Integration Tests

Deadweight can hijack your Rails integration tests (both the spartan Test::Unit type and the refreshing Cucumber variety), capturing every page that is returned by your app during testing and saving you the trouble of manually specifying a ton of URLs and login processses.

First, put this in your Gemfile:

group :test do
gem 'colored'
gem 'deadweight', :require => 'deadweight/hijack/rails'
end

Then, run your integration tests with the environment variable DEADWEIGHT set to true:

rake test DEADWEIGHT=true
rake cucumber DEADWEIGHT=true

Let me know how it goes. It's not terribly customisable at the moment (you can't specify what exact stylesheets to look at, or what selectors to ignore). I'm looking for your feedback on how you'd like to be able to do that.

Rake Task

# lib/tasks/deadweight.rake
require 'deadweight'
Deadweight::RakeTask.new do |dw|
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
end

Running rake deadweight will output all unused rules, one per line. Note that it looks at http://localhost:3000 by default, so you'll need to have script/server (or whatever your server command looks like) running.

Call it Directly from Ruby

require 'deadweight'
dw = Deadweight.new
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
puts dw.run

Pipe In CSS Rules from STDIN

$ cat styles.css | deadweight index.html

Use it as an HTTP Proxy

$ deadweight -l deadweight.log -s styles.css -w http://github.com/ -P

Setting the Root URL

By default, Deadweight uses http://localhost:3000 as the base URL for all paths. To change it, set root:

dw.root = "http://staging.example.com" # staging server
dw.root = "http://example.com/staging-area" # urls can have paths in
dw.root = "/path/to/some/html" # local paths work too

What About Stuff Added by Javascript?

Deadweight is completely dumb about any classes, IDs or tags that are only added by your Javascript layer, but you can filter them out by setting ignore_selectors:

dw.ignore_selectors = /hover|lightbox|superimposed_kittens/

The command-line tool also has basic support for Lyndon with the -L flag, which simply pipes all HTML through the lyndon executable.

You Can Use Mechanize for Complex Stuff

Set mechanize to true and add a Proc to pages (rather than a String), and Deadweight will execute it using Mechanize:

dw.mechanize = true
# go through the login form to get to a protected URL
dw.pages << proc {
fetch('/login')
form = agent.page.forms.first
form.username = 'username'
form.password = 'password'
agent.submit(form)
fetch('/secret-page')
}
# use HTTP basic auth
dw.pages << proc {
agent.auth('username', 'password')
fetch('/other-secret-page')
}

The agent method returns the Mechanize instance. The fetch method is a wrapper around agent.get that will abort in the event of an HTTP error status.

If You Install colored, It'll Look Nicer

gem install colored

Copyright

Copyright (c) 2009 Aanand Prasad. See LICENSE for details.

About

Find unused CSS selectors by scraping your HTML

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - axs89/deadweight: Find unused CSS selectors by scraping your HTML · GitHub
Skip to content

Repository files navigation

Deadweight

Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and reports which can be "safely" deleted.

Screencast!

Ryan Bates has worked his magic once again. Head over here for an excellent introduction to Deadweight.

How to Install It

$ gem install deadweight

How to Use It

There are multiple ways to use Deadweight. It's designed to be completely agnostic of whatever framework (or indeed language) your website is built on, but optimised for Ruby and Rails.

Run it From the Command Line

$ deadweight -s styles.css -s ie.css index.html about.html
$ deadweight -s http://www.tigerbloodwins.com/index.css http://www.tigerbloodwins.com/
$ deadweight --root http://kottke.org/ -s '/templates/2009/css.php?p=mac' / /everfresh /about

Integrate it With Your Integration Tests

Deadweight can hijack your Rails integration tests (both the spartan Test::Unit type and the refreshing Cucumber variety), capturing every page that is returned by your app during testing and saving you the trouble of manually specifying a ton of URLs and login processses.

First, put this in your Gemfile:

group :test do
gem 'colored'
gem 'deadweight', :require => 'deadweight/hijack/rails'
end

Then, run your integration tests with the environment variable DEADWEIGHT set to true:

rake test DEADWEIGHT=true
rake cucumber DEADWEIGHT=true

Let me know how it goes. It's not terribly customisable at the moment (you can't specify what exact stylesheets to look at, or what selectors to ignore). I'm looking for your feedback on how you'd like to be able to do that.

Rake Task

# lib/tasks/deadweight.rake
require 'deadweight'
Deadweight::RakeTask.new do |dw|
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
end

Running rake deadweight will output all unused rules, one per line. Note that it looks at http://localhost:3000 by default, so you'll need to have script/server (or whatever your server command looks like) running.

Call it Directly from Ruby

require 'deadweight'
dw = Deadweight.new
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
puts dw.run

Pipe In CSS Rules from STDIN

$ cat styles.css | deadweight index.html

Use it as an HTTP Proxy

$ deadweight -l deadweight.log -s styles.css -w http://github.com/ -P

Setting the Root URL

By default, Deadweight uses http://localhost:3000 as the base URL for all paths. To change it, set root:

dw.root = "http://staging.example.com" # staging server
dw.root = "http://example.com/staging-area" # urls can have paths in
dw.root = "/path/to/some/html" # local paths work too

What About Stuff Added by Javascript?

Deadweight is completely dumb about any classes, IDs or tags that are only added by your Javascript layer, but you can filter them out by setting ignore_selectors:

dw.ignore_selectors = /hover|lightbox|superimposed_kittens/

The command-line tool also has basic support for Lyndon with the -L flag, which simply pipes all HTML through the lyndon executable.

You Can Use Mechanize for Complex Stuff

Set mechanize to true and add a Proc to pages (rather than a String), and Deadweight will execute it using Mechanize:

dw.mechanize = true
# go through the login form to get to a protected URL
dw.pages << proc {
fetch('/login')
form = agent.page.forms.first
form.username = 'username'
form.password = 'password'
agent.submit(form)
fetch('/secret-page')
}
# use HTTP basic auth
dw.pages << proc {
agent.auth('username', 'password')
fetch('/other-secret-page')
}

The agent method returns the Mechanize instance. The fetch method is a wrapper around agent.get that will abort in the event of an HTTP error status.

If You Install colored, It'll Look Nicer

gem install colored

Copyright

Copyright (c) 2009 Aanand Prasad. See LICENSE for details.

About

Find unused CSS selectors by scraping your HTML

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' GitHub - axs89/deadweight: Find unused CSS selectors by scraping your HTML · GitHub
Skip to content

Repository files navigation

Deadweight

Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and reports which can be "safely" deleted.

Screencast!

Ryan Bates has worked his magic once again. Head over here for an excellent introduction to Deadweight.

How to Install It

$ gem install deadweight

How to Use It

There are multiple ways to use Deadweight. It's designed to be completely agnostic of whatever framework (or indeed language) your website is built on, but optimised for Ruby and Rails.

Run it From the Command Line

$ deadweight -s styles.css -s ie.css index.html about.html
$ deadweight -s http://www.tigerbloodwins.com/index.css http://www.tigerbloodwins.com/
$ deadweight --root http://kottke.org/ -s '/templates/2009/css.php?p=mac' / /everfresh /about

Integrate it With Your Integration Tests

Deadweight can hijack your Rails integration tests (both the spartan Test::Unit type and the refreshing Cucumber variety), capturing every page that is returned by your app during testing and saving you the trouble of manually specifying a ton of URLs and login processses.

First, put this in your Gemfile:

group :test do
gem 'colored'
gem 'deadweight', :require => 'deadweight/hijack/rails'
end

Then, run your integration tests with the environment variable DEADWEIGHT set to true:

rake test DEADWEIGHT=true
rake cucumber DEADWEIGHT=true

Let me know how it goes. It's not terribly customisable at the moment (you can't specify what exact stylesheets to look at, or what selectors to ignore). I'm looking for your feedback on how you'd like to be able to do that.

Rake Task

# lib/tasks/deadweight.rake
require 'deadweight'
Deadweight::RakeTask.new do |dw|
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
end

Running rake deadweight will output all unused rules, one per line. Note that it looks at http://localhost:3000 by default, so you'll need to have script/server (or whatever your server command looks like) running.

Call it Directly from Ruby

require 'deadweight'
dw = Deadweight.new
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
puts dw.run

Pipe In CSS Rules from STDIN

$ cat styles.css | deadweight index.html

Use it as an HTTP Proxy

$ deadweight -l deadweight.log -s styles.css -w http://github.com/ -P

Setting the Root URL

By default, Deadweight uses http://localhost:3000 as the base URL for all paths. To change it, set root:

dw.root = "http://staging.example.com" # staging server
dw.root = "http://example.com/staging-area" # urls can have paths in
dw.root = "/path/to/some/html" # local paths work too

What About Stuff Added by Javascript?

Deadweight is completely dumb about any classes, IDs or tags that are only added by your Javascript layer, but you can filter them out by setting ignore_selectors:

dw.ignore_selectors = /hover|lightbox|superimposed_kittens/

The command-line tool also has basic support for Lyndon with the -L flag, which simply pipes all HTML through the lyndon executable.

You Can Use Mechanize for Complex Stuff

Set mechanize to true and add a Proc to pages (rather than a String), and Deadweight will execute it using Mechanize:

dw.mechanize = true
# go through the login form to get to a protected URL
dw.pages << proc {
fetch('/login')
form = agent.page.forms.first
form.username = 'username'
form.password = 'password'
agent.submit(form)
fetch('/secret-page')
}
# use HTTP basic auth
dw.pages << proc {
agent.auth('username', 'password')
fetch('/other-secret-page')
}

The agent method returns the Mechanize instance. The fetch method is a wrapper around agent.get that will abort in the event of an HTTP error status.

If You Install colored, It'll Look Nicer

gem install colored

Copyright

Copyright (c) 2009 Aanand Prasad. See LICENSE for details.

About

Find unused CSS selectors by scraping your HTML

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - axs89/deadweight: Find unused CSS selectors by scraping your HTML · GitHub
Skip to content

Repository files navigation

Deadweight

Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and reports which can be "safely" deleted.

Screencast!

Ryan Bates has worked his magic once again. Head over here for an excellent introduction to Deadweight.

How to Install It

$ gem install deadweight

How to Use It

There are multiple ways to use Deadweight. It's designed to be completely agnostic of whatever framework (or indeed language) your website is built on, but optimised for Ruby and Rails.

Run it From the Command Line

$ deadweight -s styles.css -s ie.css index.html about.html
$ deadweight -s http://www.tigerbloodwins.com/index.css http://www.tigerbloodwins.com/
$ deadweight --root http://kottke.org/ -s '/templates/2009/css.php?p=mac' / /everfresh /about

Integrate it With Your Integration Tests

Deadweight can hijack your Rails integration tests (both the spartan Test::Unit type and the refreshing Cucumber variety), capturing every page that is returned by your app during testing and saving you the trouble of manually specifying a ton of URLs and login processses.

First, put this in your Gemfile:

group :test do
gem 'colored'
gem 'deadweight', :require => 'deadweight/hijack/rails'
end

Then, run your integration tests with the environment variable DEADWEIGHT set to true:

rake test DEADWEIGHT=true
rake cucumber DEADWEIGHT=true

Let me know how it goes. It's not terribly customisable at the moment (you can't specify what exact stylesheets to look at, or what selectors to ignore). I'm looking for your feedback on how you'd like to be able to do that.

Rake Task

# lib/tasks/deadweight.rake
require 'deadweight'
Deadweight::RakeTask.new do |dw|
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
end

Running rake deadweight will output all unused rules, one per line. Note that it looks at http://localhost:3000 by default, so you'll need to have script/server (or whatever your server command looks like) running.

Call it Directly from Ruby

require 'deadweight'
dw = Deadweight.new
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
puts dw.run

Pipe In CSS Rules from STDIN

$ cat styles.css | deadweight index.html

Use it as an HTTP Proxy

$ deadweight -l deadweight.log -s styles.css -w http://github.com/ -P

Setting the Root URL

By default, Deadweight uses http://localhost:3000 as the base URL for all paths. To change it, set root:

dw.root = "http://staging.example.com" # staging server
dw.root = "http://example.com/staging-area" # urls can have paths in
dw.root = "/path/to/some/html" # local paths work too

What About Stuff Added by Javascript?

Deadweight is completely dumb about any classes, IDs or tags that are only added by your Javascript layer, but you can filter them out by setting ignore_selectors:

dw.ignore_selectors = /hover|lightbox|superimposed_kittens/

The command-line tool also has basic support for Lyndon with the -L flag, which simply pipes all HTML through the lyndon executable.

You Can Use Mechanize for Complex Stuff

Set mechanize to true and add a Proc to pages (rather than a String), and Deadweight will execute it using Mechanize:

dw.mechanize = true
# go through the login form to get to a protected URL
dw.pages << proc {
fetch('/login')
form = agent.page.forms.first
form.username = 'username'
form.password = 'password'
agent.submit(form)
fetch('/secret-page')
}
# use HTTP basic auth
dw.pages << proc {
agent.auth('username', 'password')
fetch('/other-secret-page')
}

The agent method returns the Mechanize instance. The fetch method is a wrapper around agent.get that will abort in the event of an HTTP error status.

If You Install colored, It'll Look Nicer

gem install colored

Copyright

Copyright (c) 2009 Aanand Prasad. See LICENSE for details.

About

Find unused CSS selectors by scraping your HTML

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - axs89/deadweight: Find unused CSS selectors by scraping your HTML · GitHub
Skip to content

Repository files navigation

Deadweight

Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and reports which can be "safely" deleted.

Screencast!

Ryan Bates has worked his magic once again. Head over here for an excellent introduction to Deadweight.

How to Install It

$ gem install deadweight

How to Use It

There are multiple ways to use Deadweight. It's designed to be completely agnostic of whatever framework (or indeed language) your website is built on, but optimised for Ruby and Rails.

Run it From the Command Line

$ deadweight -s styles.css -s ie.css index.html about.html
$ deadweight -s http://www.tigerbloodwins.com/index.css http://www.tigerbloodwins.com/
$ deadweight --root http://kottke.org/ -s '/templates/2009/css.php?p=mac' / /everfresh /about

Integrate it With Your Integration Tests

Deadweight can hijack your Rails integration tests (both the spartan Test::Unit type and the refreshing Cucumber variety), capturing every page that is returned by your app during testing and saving you the trouble of manually specifying a ton of URLs and login processses.

First, put this in your Gemfile:

group :test do
gem 'colored'
gem 'deadweight', :require => 'deadweight/hijack/rails'
end

Then, run your integration tests with the environment variable DEADWEIGHT set to true:

rake test DEADWEIGHT=true
rake cucumber DEADWEIGHT=true

Let me know how it goes. It's not terribly customisable at the moment (you can't specify what exact stylesheets to look at, or what selectors to ignore). I'm looking for your feedback on how you'd like to be able to do that.

Rake Task

# lib/tasks/deadweight.rake
require 'deadweight'
Deadweight::RakeTask.new do |dw|
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
end

Running rake deadweight will output all unused rules, one per line. Note that it looks at http://localhost:3000 by default, so you'll need to have script/server (or whatever your server command looks like) running.

Call it Directly from Ruby

require 'deadweight'
dw = Deadweight.new
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
puts dw.run

Pipe In CSS Rules from STDIN

$ cat styles.css | deadweight index.html

Use it as an HTTP Proxy

$ deadweight -l deadweight.log -s styles.css -w http://github.com/ -P

Setting the Root URL

By default, Deadweight uses http://localhost:3000 as the base URL for all paths. To change it, set root:

dw.root = "http://staging.example.com" # staging server
dw.root = "http://example.com/staging-area" # urls can have paths in
dw.root = "/path/to/some/html" # local paths work too

What About Stuff Added by Javascript?

Deadweight is completely dumb about any classes, IDs or tags that are only added by your Javascript layer, but you can filter them out by setting ignore_selectors:

dw.ignore_selectors = /hover|lightbox|superimposed_kittens/

The command-line tool also has basic support for Lyndon with the -L flag, which simply pipes all HTML through the lyndon executable.

You Can Use Mechanize for Complex Stuff

Set mechanize to true and add a Proc to pages (rather than a String), and Deadweight will execute it using Mechanize:

dw.mechanize = true
# go through the login form to get to a protected URL
dw.pages << proc {
fetch('/login')
form = agent.page.forms.first
form.username = 'username'
form.password = 'password'
agent.submit(form)
fetch('/secret-page')
}
# use HTTP basic auth
dw.pages << proc {
agent.auth('username', 'password')
fetch('/other-secret-page')
}

The agent method returns the Mechanize instance. The fetch method is a wrapper around agent.get that will abort in the event of an HTTP error status.

If You Install colored, It'll Look Nicer

gem install colored

Copyright

Copyright (c) 2009 Aanand Prasad. See LICENSE for details.

About

Find unused CSS selectors by scraping your HTML

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); GitHub - axs89/deadweight: Find unused CSS selectors by scraping your HTML · GitHub
Skip to content

Repository files navigation

Deadweight

Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and reports which can be "safely" deleted.

Screencast!

Ryan Bates has worked his magic once again. Head over here for an excellent introduction to Deadweight.

How to Install It

$ gem install deadweight

How to Use It

There are multiple ways to use Deadweight. It's designed to be completely agnostic of whatever framework (or indeed language) your website is built on, but optimised for Ruby and Rails.

Run it From the Command Line

$ deadweight -s styles.css -s ie.css index.html about.html
$ deadweight -s http://www.tigerbloodwins.com/index.css http://www.tigerbloodwins.com/
$ deadweight --root http://kottke.org/ -s '/templates/2009/css.php?p=mac' / /everfresh /about

Integrate it With Your Integration Tests

Deadweight can hijack your Rails integration tests (both the spartan Test::Unit type and the refreshing Cucumber variety), capturing every page that is returned by your app during testing and saving you the trouble of manually specifying a ton of URLs and login processses.

First, put this in your Gemfile:

group :test do
gem 'colored'
gem 'deadweight', :require => 'deadweight/hijack/rails'
end

Then, run your integration tests with the environment variable DEADWEIGHT set to true:

rake test DEADWEIGHT=true
rake cucumber DEADWEIGHT=true

Let me know how it goes. It's not terribly customisable at the moment (you can't specify what exact stylesheets to look at, or what selectors to ignore). I'm looking for your feedback on how you'd like to be able to do that.

Rake Task

# lib/tasks/deadweight.rake
require 'deadweight'
Deadweight::RakeTask.new do |dw|
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
end

Running rake deadweight will output all unused rules, one per line. Note that it looks at http://localhost:3000 by default, so you'll need to have script/server (or whatever your server command looks like) running.

Call it Directly from Ruby

require 'deadweight'
dw = Deadweight.new
dw.stylesheets = ["/stylesheets/style.css"]
dw.pages = ["/", "/page/1", "/about"]
puts dw.run

Pipe In CSS Rules from STDIN

$ cat styles.css | deadweight index.html

Use it as an HTTP Proxy

$ deadweight -l deadweight.log -s styles.css -w http://github.com/ -P

Setting the Root URL

By default, Deadweight uses http://localhost:3000 as the base URL for all paths. To change it, set root:

dw.root = "http://staging.example.com" # staging server
dw.root = "http://example.com/staging-area" # urls can have paths in
dw.root = "/path/to/some/html" # local paths work too

What About Stuff Added by Javascript?

Deadweight is completely dumb about any classes, IDs or tags that are only added by your Javascript layer, but you can filter them out by setting ignore_selectors:

dw.ignore_selectors = /hover|lightbox|superimposed_kittens/

The command-line tool also has basic support for Lyndon with the -L flag, which simply pipes all HTML through the lyndon executable.

You Can Use Mechanize for Complex Stuff

Set mechanize to true and add a Proc to pages (rather than a String), and Deadweight will execute it using Mechanize:

dw.mechanize = true
# go through the login form to get to a protected URL
dw.pages << proc {
fetch('/login')
form = agent.page.forms.first
form.username = 'username'
form.password = 'password'
agent.submit(form)
fetch('/secret-page')
}
# use HTTP basic auth
dw.pages << proc {
agent.auth('username', 'password')
fetch('/other-secret-page')
}

The agent method returns the Mechanize instance. The fetch method is a wrapper around agent.get that will abort in the event of an HTTP error status.

If You Install colored, It'll Look Nicer

gem install colored

Copyright

Copyright (c) 2009 Aanand Prasad. See LICENSE for details.

About

Find unused CSS selectors by scraping your HTML

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages