unused_css 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 313295e4c474b843705e8d12a7bd397969e64605
-  data.tar.gz: 39e1a472f668e1323bb94700bbca0a686ca965b4
+  metadata.gz: f54b308512eec95945edaa62f63b1bbd2e80fef1
+  data.tar.gz: f38f1cef3d2c3aada5551dadc168103986b2506f
 SHA512:
-  metadata.gz: 7bd5203d64675e585294ad55a6774d8429c642c68868943896ac4bec673ad44f043174df6e0fece37bfa376f86252eac5b9e44ea33ccad2e2be0ca4f93e058e6
-  data.tar.gz: ecc113b62ddfe035ae389c54779f79ee7d4bafc8c3942de5e19930110dd17d220b904c2fef735489150de79331fd162c013615b64b3651be715cd45cee11b9a3
+  metadata.gz: 9dd40b52c228de3078306379c4ec5f6879825bf9a0b293ceac3d8dfb909e761bd3cebe0c3d3f203645dfba176239dd39f8a9d418703e9c1e5c5b46393eb4731e
+  data.tar.gz: 17e47ae4a706ddc728179eeb86213620cf420ca0234613179ab1845ace1f76bc7b5d21817ca08b30f12a134f3904499ae09072f74e6d33fe18d6671b9d66cf3e

data/README.md

@@ -3,4 +3,83 @@ Unused CSS
 
 [![Build Status](https://travis-ci.org/christemple/unused-css.png?branch=master)](https://travis-ci.org/christemple/unused-css)
 
-A Ruby gem, built from a need, to watch a suite of functional tests and gather all of the unused CSS styles.
+A Ruby gem, built from a need, to watch a suite of functional tests and gather all of the unused CSS styles.
+
+Install
+-------
+
+```ruby
+gem install unused_css
+```
+
+
+How to use
+----------
+
+Here's a typical 'features/support/env.rb' file using Unused CSS to watch the Watir webdriver as it runs your functional tests:
+
+```ruby
+require "watir-webdriver"
+require "unused_css"
+
+$browser = Watir::Browser.new
+$unused_css = UnusedCSS::Watcher.new
+$unused_css.watch! $browser
+
+at_exit do
+  $browser.close
+  
+  # A list of all stylehseets together with their unused styles
+  puts "Unused CSS"
+  $unused_css.stylesheets.each do |stylesheet|
+    puts stylesheet.uri
+    stylesheet.styles.each { |style| puts style }
+  end
+  
+end
+```
+
+How it works
+------------
+
+Unused CSS will override the 'goto' method on Watir webdriver.  After going to the specified web page, it will grab any
+new stylesheets it may have found and scan all stylesheets it knows about removing any used css found on the page.
+
+
+Checking for unused css/styles on your terms (AJAX scenario)
+----------
+
+I thought it would be nice to also put you in control of when you want to check for used styles on a page.
+A page that relies on AJAX to dynamically load content will likely benefit from being able to do so.
+
+In one of your step definitions you can simply call:
+
+```ruby
+When(/^I recheck the styles on the page$/) do
+
+    # Where $browser is an instance of Watir webdriver that you
+    # have called the unused css watch! method on
+
+    $browser.check_for_unused_styles!
+end
+```
+
+Limitations
+-----------
+
+Unused CSS currently only works with Watir webdriver, I will be adding more webdrivers soon.
+
+TODO
+----
+
+There are still a few things I am looking to do with this Ruby gem.
+- Add support for more web drivers.
+- Add ability to create report after watching the tests.
+- ...not sure, you tell me :)
+
+
+Feedback
+--------
+Please send me a message or an email and let me know what you think.
+
+Chris Temple

data/app.rb

@@ -7,3 +7,11 @@ end
 get '/multiple' do
   erb :multiple
 end
+
+get '/ajax-content' do
+  <<-HTML
+    <div id="ajaxed-content">
+      I was pulled in by AJAX
+    </div>
+  HTML
+end

data/features/step_definitions/observation_steps.rb

@@ -8,4 +8,12 @@ end
 
 Then "I should see style '$style' was not used" do |style|
   fail "#{style} style was used" unless $unused_css.stylesheets.styles.include? style
+end
+
+When(/^I wait for content to be loaded into the DOM via AJAX$/) do
+  $browser.div(id: "ajaxed-content").wait_until_present
+end
+
+When(/^I recheck the styles on the page$/) do
+  $browser.check_for_unused_styles!
 end

data/features/{home_page.feature → unused_css.feature}

@@ -1,4 +1,4 @@
-Feature: Home page
+Feature: A user should be able to see when styles are unused
 
   Scenario: Going to a page with a single stylesheet
     Given I go to the home page
@@ -24,3 +24,13 @@ Feature: Home page
     Then I should see style '.sub-heading span' was not used
     Then I should see style '.old-error' was not used
 
+
+  Scenario: Going to a page that loads content via AJAX
+    Given I go to the home page
+    Then I should see style '#heading' was used
+    Then I should see style '.sub-heading' was not used
+    Then I should see style '#ajaxed-content' was not used
+    When I wait for content to be loaded into the DOM via AJAX
+    Then I should see 'I was pulled in by AJAX'
+    When I recheck the styles on the page
+    Then I should see style '#ajaxed-content' was used

data/lib/unused_css/stylesheet.rb

@@ -22,6 +22,7 @@ end
 
 
 class Stylesheets
+  include Enumerable
   attr_accessor :stylesheets
 
   def initialize
@@ -41,6 +42,10 @@ class Stylesheets
     @stylesheets.find { |stylesheet| stylesheet.uri == uri }
   end
 
+  def each &block
+    @stylesheets.each &block
+  end
+
   def styles
     @stylesheets.inject(Set.new) {|styles, stylesheet| styles.merge stylesheet.styles }
   end

data/lib/unused_css/version.rb

@@ -1,3 +1,3 @@
 module UnusedCSS
-  VERSION = "0.0.1"
+  VERSION = "0.1.0"
 end

data/lib/unused_css.rb

@@ -22,6 +22,13 @@ module UnusedCSS
             stylesheet.remove_pseudo_styles!
           end
         end
+
+        def check_for_unused_styles!
+          @unused_css.stylesheets.each do |stylesheet|
+            stylesheet.styles.delete_if {|style| self.element(css: style).exist? }
+            stylesheet.remove_pseudo_styles!
+          end
+        end
       end
       watir_browser.instance_exec self, &unused_css_block
     end

data/public/stylesheets/style.css

@@ -11,4 +11,10 @@
 .sub-heading span{
     font-size: 24px;
     line-height: 28px;
+}
+
+#ajaxed-content {
+    color: orangered;
+    font-size: 32px;
+    line-height: 38px;
 }

data/views/index.erb

@@ -4,9 +4,20 @@
     <meta charset="UTF-8">
     <title>Unused CSS</title>
     <link rel="stylesheet" href="/stylesheets/style.css"/>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
 </head>
 <body>
     <div id="heading">Very nice</div>
     <div class="old-error">No such style for old-error in style.css</div>
+
+    <script type="text/javascript">
+        $(function(){
+            setTimeout(function(){
+                $.get('/ajax-content', function(data){
+                    $("body").append(data);
+                });
+            }, 1000);
+        });
+    </script>
 </body>
 </html>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: unused_css
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.1.0
 platform: ruby
 authors:
 - Chris Temple
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-03-02 00:00:00.000000000 Z
+date: 2014-03-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: css_parser
@@ -126,10 +126,10 @@ files:
 - Rakefile
 - app.rb
 - config.ru
-- features/home_page.feature
 - features/step_definitions/navigation_steps.rb
 - features/step_definitions/observation_steps.rb
 - features/support/env.rb
+- features/unused_css.feature
 - lib/unused_css.rb
 - lib/unused_css/stylesheet.rb
 - lib/unused_css/version.rb
@@ -165,7 +165,7 @@ specification_version: 4
 summary: A Ruby gem, built from a need, to watch a suite of functional tests and gather
   all of the unused CSS styles.
 test_files:
-- features/home_page.feature
 - features/step_definitions/navigation_steps.rb
 - features/step_definitions/observation_steps.rb
 - features/support/env.rb
+- features/unused_css.feature