inline-style 0.1.1 → 0.4

data/Manifest.txt

@@ -3,12 +3,16 @@ Manifest.txt
 README.rdoc
 Rakefile
 example.rb
-inline-style.gemspec
 lib/inline-style.rb
 lib/inline-style/rack/middleware.rb
-rack-inline-styles.gemspec
 spec/as_middleware_spec.rb
 spec/css_inlining_spec.rb
+spec/fixtures/all.css
+spec/fixtures/boletin.html
+spec/fixtures/box-model.html
+spec/fixtures/inline.html
+spec/fixtures/none.css
+spec/fixtures/print.css
+spec/fixtures/selectors.html
 spec/fixtures/style.css
-spec/fixtures/with-style-tag.html
 spec/spec_helper.rb

data/README.rdoc

@@ -1,11 +1,13 @@
 = inline-style
 
-* http://github.com/maca/inline-style
+http://github.com/maca/inline-style
 
 == DESCRIPTION:
 
-Simple utility for "inlining" all CSS in the style attribute for the html tags. Useful for html emails that won't
-correctly render stylesheets in some clients such as gmail.
+Will take all css in a page (either from linked stylesheet or from style tag) and will embed it in the style attribute for 
+each refered element taking selector specificity and declarator order.
+
+Useful for html email: some clients (gmail, et all) won't render non inline styles.
 
 * Includes a Rack middleware for using with Rails, Sinatra, etc...
 * It takes into account selector specificity.
@@ -14,7 +16,7 @@ correctly render stylesheets in some clients such as gmail.
     require 'inline-style'
 
     html  = File.read("#{ dir }/index.html")
-    puts InlineStyle.process(html, "#{ dir }/styles")
+    puts InlineStyle.process(html, :stylesheets_paths => "#{ dir }/styles")
         
 index.html contains:
     
@@ -63,7 +65,7 @@ index.html contains:
       </li>
     </ul>
 
-Will output:
+Will become:
         
     <ul id="number" class="listing inlined" style='font-family: "Lucida Grande", Lucida, Verdana, sans-serif;margin: 4.0px 3.0px 2.0px 1.0px;padding: 0.0;background-color: yellow;'>
       <li class="list-element odd" style='font-family: "Lucida Grande", Lucida, Verdana, sans-serif;margin: 4.0px 3.0px 2.0px 1.0px;padding: 0.0;background-color: black;'>
@@ -80,7 +82,7 @@ Will output:
       </li>
     </ul>
     
-As rack middleware:
+== RACK MIDDLEWARE:
 
     # Process all routes:
     use InlineStyle::Rack::Middleware
@@ -92,8 +94,9 @@ As rack middleware:
     use InlineStyle::Rack::Middleware, :paths => [%r(/mails/.*), "/somepath"]
     
 == ISSUES:
-  
-* Doesn't work with relative stylesheet links
+
+* It supports pseudo classes according to W3C specification for style in style attribute: http://www.w3.org/TR/css-style-attr, although browsers
+doesn't seems to.
 * It strips any numeric character (Rails may add) at the end of the stylesheet file name, anyway stylesheets should end with .css extension
 
 == REQUIREMENTS:
@@ -102,7 +105,7 @@ tenderlove's nokogiri and csspool
 
 == INSTALL:
 
-sudo gem install inline-style --source http://gemcutter.org
+    sudo gem install inline-style --source http://gemcutter.org
 
 == LICENSE:
 

data/Rakefile

@@ -8,7 +8,7 @@ $hoe = Hoe.new('inline-style', InlineStyle::VERSION) do |p|
   p.rubyforge_name       = p.name
   p.extra_deps         = [
     ['nokogiri','>= 1.3.3'],
-    ['csspool', '>= 2.0.0']  
+    ['maca-fork-csspool', '>= 2.0.2']  
   ]
   p.extra_dev_deps = [
     ['newgem', ">= #{::Newgem::VERSION}"]

data/example.rb

@@ -1,6 +1,5 @@
 require 'rubygems'
 require "#{ dir = File.dirname(__FILE__) }/lib/inline-style"
-require 'benchmark'
 
-html  = File.read("#{ dir }/spec/fixtures/with-style-tag.html")
-puts InlineStyle.process(html, "#{ dir }/spec/fixtures")
+html  = File.read("#{ fixtures = dir + '/spec/fixtures' }/boletin.html")
+puts InlineStyle.process(html)

data/lib/inline-style.rb

@@ -1,22 +1,36 @@
 require 'nokogiri'
 require 'open-uri'
-require 'csspool'
+require '/Users/sistemasinteractivos/Gems/Web/csspool/lib/csspool'
 
 require "#{ File.dirname( __FILE__ ) }/inline-style/rack/middleware"
 
 module InlineStyle
-  VERSION = '0.1.1'
-  
-  def self.process html, document_root
+  VERSION = '0.4'  
+
+  #   Options:
+  #     +:stylesheets_path+
+  #       Stylesheets root path, can also be a URL
+  #
+  #     +pseudo+
+  #       If set to true will inline style for pseudo classes according to the W3C specification:
+  #       http://www.w3.org/TR/css-style-attr.
+  #       Defaults to false and should probably be left like that because at least Safari and Firefox don't seem to 
+  #       comply with the specification for pseudo class style in the style attribute.
+  def self.process html, opts = {}
+    stylesheets_path = opts[:stylesheets_path] || ''
+    pseudo           = opts[:pseudo] || false
+    
     nokogiri_doc_given = Nokogiri::HTML::Document === html
-        
     html  = nokogiri_doc_given ? html : Nokogiri.HTML(html)
-    css   = extract_css html, document_root
+    css   = extract_css html, stylesheets_path
     nodes = {}
 
     css.rule_sets.each do |rule_set|
       rule_set.selectors.each do |selector|
-        html.css("body #{ selector }").each do |node|
+        css_selector = selector.to_s
+        css_selector = "#{ 'body ' unless /^body/ === css_selector }#{ css_selector.gsub /:.*/, '' }"
+        
+        html.css(css_selector).each do |node|
           nodes[node] ||= []
           nodes[node].push selector
           
@@ -26,31 +40,42 @@ module InlineStyle
           path << "##{ node['id'] }" if node['id']
           path << ".#{ node['class'].scan(/\S+/).join('.') }" if node['class']
           
-          CSSPool.CSS("#{ path }{#{ node['style'] }}").rule_sets.each{ |rule| nodes[node].push *rule.selectors}
+          CSSPool.CSS("#{ path }{#{ node['style'] }}").rule_sets.each{ |rule| nodes[node].push *rule.selectors }
         end
       end
     end
 
     nodes.each_pair do |node, style|
-      style = style.sort_by{ |sel| "#{ sel.specificity }#{ style.index sel }" } #TO fix
-      style.map!{ |sel| sel.declarations.map{ |d| d.to_css.strip }.join } and style.uniq!
-      node['style'] = style.join
+      style = style.sort_by{ |sel| "#{ sel.specificity }%03d" % style.index(sel) }
+      sets  = style.partition{ |sel| not /:\w+/ === sel.to_s  }
+      
+      sets.pop if not pseudo or sets.last.empty?
+      
+      node['style'] = sets.collect do |selectors|
+        index = sets.index selectors
+        
+        set   = selectors.map do |selector|
+          declarations = selector.declarations.map{ |d| d.to_css.squeeze(' ') }.join
+          index == 0 ? declarations : "\n#{ selector.to_s.gsub /\w(?=:)/, '' } {#{ declarations }}"
+        end
+                     
+        index == 0 && sets.size > 1 ? "{#{ set }}" : set.join
+      end.join.strip
     end
     
     nokogiri_doc_given ? html : html.to_s
   end
   
-  def self.extract_css html, document_root
-    
+  # Returns CSSPool::Document
+  def self.extract_css html, stylesheets_path = ''
     CSSPool.CSS html.css('style, link').collect { |e|
-      next unless e['media'].nil? or e['media'].match /\bscreen\b/
+      next unless e['media'].nil?  or ['screen', 'all'].include? e['media']
       next(e.remove and e.content) if e.name == 'style'
       next unless e['rel'] == 'stylesheet'
       e.remove
-      next open(e['href']).read if %r{^https?://} === e['href']
-      File.read File.join(document_root, e['href'].sub(/\?\d+$/,''))
+      
+      uri = %r{^https?://} === e['href'] ? e['href'] : File.join(stylesheets_path, e['href'].sub(/\?\d+$/,''))
+      open(uri).read rescue nil
     }.join("\n")
   end
-  
-  
 end

data/lib/inline-style/rack/middleware.rb

@@ -1,7 +1,7 @@
 module InlineStyle
   module Rack
-    
     class Middleware
+      #
       #   Options:
       #     +document_root+
       #       File system path for app's public directory where the stylesheets are to be found, defaults to
@@ -10,11 +10,19 @@ module InlineStyle
       #     +paths+
       #       Limit processing to the passed absolute paths
       #       Can be an array of strings or regular expressions, a single string or regular expression
-      #       If not passed will process output for every path
+      #       If not passed will process output for every path.
+      #       Regexps and strings must comence with '/'
+      #
+      #     +pseudo+
+      #       If set to true will inline style for pseudo classes according to the W3C specification:
+      #       http://www.w3.org/TR/css-style-attr.
+      #       Defaults to false and should probably be left like that because at least Safari and Firefox don't seem to 
+      #       comply with the specification for pseudo class style in the style attribute.
+      #
       def initialize app, opts = {}
-        @app           = app
-        @document_root = opts[:document_root]
-        @paths         = Regexp.new [*opts[:paths]].join('|')
+        @app   = app
+        @opts  = {:document_root => env['DOCUMENT_ROOT']}.merge(opts)
+        @paths = /^(?:#{ [*opts[:paths]].join('|') })/
       end
 
       def call env
@@ -24,12 +32,11 @@ module InlineStyle
         status, headers, content = response
         response = ::Rack::Response.new '', status, headers
         body     = content.respond_to?(:body) ? content.body : content
-                
-        response.write InlineStyle.process(body, @document_root || env['DOCUMENT_ROOT'])
+        
+        response.write InlineStyle.process(body, @opts)
         response.finish
       end
     end
-    
   end
 end
   

data/spec/as_middleware_spec.rb

@@ -12,46 +12,46 @@ describe InlineStyle::Rack::Middleware do
   end
   
   before do
-    @html = File.read("#{ FIXTURES }/with-style-tag.html")
+    @html = File.read("#{ FIXTURES }/boletin.html")
   end
 
   it "should inline css" do
-    get_response('/', @html, :stylesheets_path => FIXTURES).should have_inline_style_for('.list-element')
+    get_response('/', @html, :stylesheets_path => FIXTURES).should have_inline_style_for('#A')
   end
   
   describe 'Path inclusion' do
     
     it "should inline style for string path" do
       paths = "/some/path"
-      get_response('/some/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should have_inline_style_for('.list-element')
+      get_response('/some/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should have_inline_style_for('#A')
     end
     
     it "should not inline style for string path" do
       paths = "/some/path"
-      get_response('/some/other/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should_not have_inline_style_for('.list-element')
+      get_response('/some/other/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should_not have_inline_style_for('#A')
     end
     
     it "should inline style for regexp path" do
-      paths = %r{some/.*}
-      get_response('/some/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should have_inline_style_for('.list-element')
-      get_response('/some/other/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should have_inline_style_for('.list-element')
+      paths = %r{/some/.*}
+      get_response('/some/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should have_inline_style_for('#A')
+      get_response('/some/other/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should have_inline_style_for('#A')
     end
     
     it "should not inline style for regexp path" do
-      paths = %r{some/.*}
-      get_response('/other/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should_not have_inline_style_for('.list-element')
+      paths = %r{/some/.*}
+      get_response('/other/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should_not have_inline_style_for('#A')
     end
 
     it "should inline style for array regexp path" do
-      paths = [%r{some/path}, %r{/some/other/path}]
-      get_response('/some/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should have_inline_style_for('.list-element')
-      get_response('/some/other/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should have_inline_style_for('.list-element')
+      paths = [%r{/some/path}, %r{/some/other/path}]
+      get_response('/some/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should have_inline_style_for('#A')
+      get_response('/some/other/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should have_inline_style_for('#A')
     end
     
     it "should not inline style for array regexp path" do
-      paths = [%r{some/path}, %r{/some/other/path}]
-      get_response('/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should_not have_inline_style_for('.list-element')
-      get_response('/other/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should_not have_inline_style_for('.list-element')
+      paths = [%r{/some/path}, %r{/some/other/path}]
+      get_response('/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should_not have_inline_style_for('#A')
+      get_response('/other/path', @html, :stylesheets_path => FIXTURES, :paths => paths).should_not have_inline_style_for('#A')
     end
   end
 end

data/spec/css_inlining_spec.rb

@@ -1,30 +1,72 @@
-require "#{ dir = File.dirname(__FILE__) }/../lib/inline-style"
+require "#{ File.dirname __FILE__ }/spec_helper"
 
 describe InlineStyle do
-  describe 'CSS extraction' do
-    it "should extract from style tag"
-    it "should extract from link"
+  before do
+    @processed = InlineStyle.process Nokogiri.HTML(File.read("#{ FIXTURES }/boletin.html")), 
+      :pseudo => false,
+      :stylesheets_path => FIXTURES
   end
 
-  describe 'CSS processing' do
-    it 'should separate terms by space'
-    it 'should separate terms by coma'
-    it 'should order selectors by specificity'
-    it 'should order selectors by specificity and defininition order'
+  it "should extract from linked stylesheet" do
+    @processed.css('#izq').first['style'].should =~ /margin: 30.0px;/
   end
   
+  it "should extract styles from linked stylesheet with no media specified" do
+    @processed.css('#izq').first['style'].should =~ /color: red;/
+  end
+  
+  it "should extract styles from linked stylesheet with media 'all'" do
+    @processed.css('#izq').first['style'].should =~ /padding: 10.0px;/
+  end
+  
+  it "should ignore styles from linked stylesheet with media other than screen" do
+    @processed.css('#izq').first['style'].should_not =~ /display: none;/
+  end
+
+  it "should not process pseudo classes" do
+    @processed.to_s.should_not =~ /:hover/
+    @processed.to_s.should_not =~ /\{/
+  end
+  
+  it "should should process pseudo classes" do
+    processed = InlineStyle.process Nokogiri.HTML(File.read("#{ FIXTURES }/boletin.html")), :pseudo => true
+    processed.css('a').first['style'].should =~ /:hover/
+    processed.css('a').first['style'].should =~ /\{/
+  end
+
+  it 'should apply to #A #B' do
+    @processed.css('#logos #der').first['style'].should =~ /float: right;/
+  end
+  
+  # it 'should order selectors by specificity'
+  # it 'should order selectors by specificity and defininition order'
+  # it 'should overwrite rule with less specificity'
+  # it 'should overwrite rule previously defined'
+  # it 'should not overwrite rules defined inline'
+  
+  describe 'Box model' do
+    before do
+      @processed = InlineStyle.process( Nokogiri.HTML(File.read("#{ FIXTURES }/box-model.html")) )
+    end
+
+    it "should inline style for selector ul" do
+      @processed.css('ul').first['style'].should == "background: yellow; margin: 12.0px 12.0px 12.0px 12.0px; padding: 3.0px 3.0px 3.0px 3.0px;"
+    end
+
+    it "should inline style for selector li" do
+      @processed.css('li').each do |li|
+        li['style'].should =~ /^color: white; background: blue; margin: 12.0px 12.0px 12.0px 12.0px; padding: 12.0px 0.0px 12.0px 12.0px; list-style: none/
+      end
+    end
+
+    it "should inline style for selector li.withborder" do
+      @processed.css('li.withborder').first['style'].
+      should == "color: white; background: blue; margin: 12.0px 12.0px 12.0px 12.0px; padding: 12.0px 0.0px 12.0px 12.0px; list-style: none; border-style: dashed; border-width: medium; border-color: lime;"    
+    end
+  end
 end
 
 
 
 
 
-# It should order selectors by specificity
-# it should order selectors by specificity and defininition order
-# It should apply inline style by tag
-# It should apply inline style by universal selector
-# It should apply inline style for class
-# It should apply inline style for id
-# It should overwrite rule with less specificity
-# It should overwrite rule previously defined
-# It should not overwrite rules defined inline

data/spec/fixtures/all.css

@@ -0,0 +1,3 @@
+#izq {
+  padding: 10px;
+}

data/spec/fixtures/boletin.html

@@ -0,0 +1,256 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-type" />
+  <title>  Boletín CENART - November
+</title>
+  
+<link href="/style.css?1248460539" rel="stylesheet" media="screen" type="text/css" />
+
+<link href="/print.css?1248460539" rel="stylesheet" media="print" type="text/css" />
+<link href="/all.css?1248460539" rel="stylesheet" media="all" type="text/css" />
+<link href="/none.css?1248460539" rel="stylesheet" type="text/css" />
+
+
+
+</head>
+
+<body>
+  <style media="screen" type="text/css">
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
+  width: 680px;
+  color: #373737;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+p {
+  margin: 10px 0;
+}
+
+.clearer {
+    clear: both;
+}
+
+#banner {
+  margin: 15px;
+  text-align: right;
+  color: #639b22;
+}
+
+#banner span {
+  font-size: 20px;
+}
+
+#aviso {
+  padding: 25px 0;
+  text-align: center;
+}
+
+dl.categoria dt {
+  font-size: 20px;
+  padding: 10px;
+  background-color: #416517;
+  border-bottom: 1px dashed #a6a6a6;
+  color: #a0bf57;
+}
+
+dl.evento, div#direccion, div#contacto {
+  padding: 30px 25px 20px 35px;
+}
+
+dl.evento {
+  border-bottom: 1px dashed #a6a6a6;
+}
+
+dl.evento.non {
+  background-color: #d9e3cf;
+}
+
+dl.evento.par {
+  background-color: #cfdfe3;
+}
+
+dl.evento dt {
+  padding: 0;
+  font-size: 20px;
+  background: none;
+  font-weight: bold;
+  border: none;
+}
+
+a, b {
+  color: #185d6b;
+}
+
+a:hover {
+  background-color: #8ae0ea;
+  color: #126b5d;
+}
+
+dl.evento dd {
+  text-align: justify;
+  margin: 10px 0;
+}
+
+dd.poster {
+  float: right;
+}
+
+dd.poster img {
+  border: 1px solid #909090;
+  margin: 0 0 25px 25px;
+}
+
+div#footer b {
+  color: #5f792d;
+}
+
+div#contacto a {
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+#logos {
+  width: 100%;
+  margin-top: 40px;
+  background-image: url('/images/boletines/Noviembre/logos_fondo.jpg');
+}
+
+#izq {
+    float: left;
+}
+
+#logos #der {
+    float: right;
+}
+
+		
+  </style>
+  
+  
+  
+
+<div id="header">
+  <div id="aviso">Si usted no puede visualizar correctamente este boletín haga <a href="http://localhost:3000/boletines/noviembre-2009">click aquí</a></div>
+  <div id="banner"><span id="cenart">CENART</span> Noviembre 2009</div>
+</div>
+
+
+  
+
+  
+  <dl class="categoria" id="A">
+    <dt>A</dt>
+    <dd>
+      
+        
+        <dl class="evento non">
+          <dt><a href="">1</a></dt>
+          
+          <dd class="descripcion"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</dd>
+          <dd class="fechas"><b>Fechas: </b>Fecha</dd>
+          <dd class="locacion"><b>Lugar: </b>Lugar</dd>
+          <dd class="precio"><b>Público: </b>Público</dd>
+          <dd class="precio"><b>Precio: </b>Precio</dd>
+        </dl>
+        
+      
+    </dd>
+  </dl>
+  
+
+  
+
+  
+
+  
+
+  
+  <dl class="categoria" id="B">
+    <dt>B</dt>
+    <dd>
+      
+        
+        <dl class="evento par">
+          <dt><a href="">1</a></dt>
+          
+          <dd class="descripcion"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</dd>
+          <dd class="fechas"><b>Fechas: </b>Fecha</dd>
+          <dd class="locacion"><b>Lugar: </b>Lugar</dd>
+          <dd class="precio"><b>Público: </b>Público</dd>
+          <dd class="precio"><b>Precio: </b>Precio</dd>
+        </dl>
+        
+      
+    </dd>
+  </dl>
+  
+
+  
+
+  
+  <dl class="categoria" id="C">
+    <dt>C</dt>
+    <dd>
+      
+        
+        <dl class="evento non">
+          <dt><a href="">1</a></dt>
+          
+          <dd class="descripcion"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</dd>
+          <dd class="fechas"><b>Fechas: </b>Fecha</dd>
+          <dd class="locacion"><b>Lugar: </b>Lugar</dd>
+          <dd class="precio"><b>Público: </b>Público</dd>
+          <dd class="precio"><b>Precio: </b>Precio</dd>
+        </dl>
+        
+      
+    </dd>
+  </dl>
+  
+
+  
+
+  
+
+  
+
+  
+
+
+<div id="footer">
+  <div id="direccion">
+    <b>lorem</b><br/ >
+    ipsum<br />
+    dolor<br />
+    sit<br />
+  </div>
+
+  <div id="contacto">
+    contacto <br />
+    <a href="mailto:mail@host.org">mail@host.org</a>
+  </div>
+  <div id="logos">
+    <img src="A" id="izq" alt="A" />
+    <img src="B" id="der" alt="B" />
+    <div class="clearer">
+  </div>
+</div>
+
+
+
+</div></body>
+
+
+</html>

data/spec/fixtures/box-model.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBliC "-//W3C//DTD html 4.01//EN">
+<html>
+  <head>
+    <title>Examples of margins, padding, and borders</title>
+    <style type="text/css">
+    
+      ul { 
+        background: yellow; 
+        margin: 12px 12px 12px 12px;
+        padding: 3px 3px 3px 3px;
+                                     /* No borders set */
+      }
+      li.withborder {
+        border-style: dashed;
+        border-width: medium;        /* sets border width on all sides */
+        border-color: lime;
+      }
+      li { 
+        color: white;                /* text color is white */ 
+        background: blue;            /* Content, padding will be blue */
+        margin: 12px 12px 12px 12px;
+        padding: 12px 0px 12px 12px; /* Note 0px padding right */
+        list-style: none             /* no glyphs before a list item */
+      }
+      
+      #A #B {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <ul>
+      <li>First element of list</li>
+      <li class="withborder">Second element of list is a bit longer to illustrate wrapping.</li>
+    </ul>
+  </body>
+</html>

data/spec/fixtures/inline.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>  Boletín CENART - November
+</title>
+<link href="/print.css?1248460539" rel="stylesheet" media="print" type="text/css">
+</head>
+<body style='font: 13.0px "Lucida Grande", Lucida, Verdana, sans-serif; width: 680.0px; color: #373737; margin-left: auto; margin-right: auto;'>
+  <div id="header" style="margin: 0.0; padding: 0.0;">
+  <div id="aviso" style="margin: 0.0; padding: 0.0; padding: 25.0px 0.0; text-align: center;">Si usted no puede visualizar correctamente este boletín haga <a href="http://localhost:3000/boletines/noviembre-2009" style="margin: 0.0; padding: 0.0; color: #185d6b;">click aquí</a>
+</div>
+  <div id="banner" style="margin: 0.0; padding: 0.0; margin: 15.0px; text-align: right; color: #639b22;">
+<span id="cenart" style="margin: 0.0; padding: 0.0; font-size: 20.0px;">CENART</span> Noviembre 2009</div>
+</div>
+
+
+  
+
+  
+  <dl class="categoria" id="A" style="margin: 0.0; padding: 0.0;">
+<dt style="margin: 0.0; padding: 0.0; font-size: 20.0px; padding: 10.0px; background-color: #416517; border-bottom: 1.0px dashed #a6a6a6; color: #a0bf57;">A</dt>
+    <dd style="margin: 0.0; padding: 0.0;">
+      
+        
+        <dl class="evento non" style="margin: 0.0; padding: 0.0; padding: 30.0px 25.0px 20.0px 35.0px; border-bottom: 1.0px dashed #a6a6a6; background-color: #d9e3cf;">
+<dt style="margin: 0.0; padding: 0.0; font-size: 20.0px; padding: 10.0px; background-color: #416517; border-bottom: 1.0px dashed #a6a6a6; color: #a0bf57; padding: 0.0; font-size: 20.0px; background: none; font-weight: bold; border: none;"><a href="" style="margin: 0.0; padding: 0.0; color: #185d6b;">1</a></dt>
+          
+          <dd class="descripcion" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<p style="margin: 0.0; padding: 0.0; margin: 10.0px 0.0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</dd>
+          <dd class="fechas" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Fechas: </b>Fecha</dd>
+          <dd class="locacion" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Lugar: </b>Lugar</dd>
+          <dd class="precio" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Público: </b>Público</dd>
+          <dd class="precio" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Precio: </b>Precio</dd>
+        </dl>
+</dd>
+  </dl>
+<dl class="categoria" id="B" style="margin: 0.0; padding: 0.0;">
+<dt style="margin: 0.0; padding: 0.0; font-size: 20.0px; padding: 10.0px; background-color: #416517; border-bottom: 1.0px dashed #a6a6a6; color: #a0bf57;">B</dt>
+    <dd style="margin: 0.0; padding: 0.0;">
+      
+        
+        <dl class="evento par" style="margin: 0.0; padding: 0.0; padding: 30.0px 25.0px 20.0px 35.0px; border-bottom: 1.0px dashed #a6a6a6; background-color: #cfdfe3;">
+<dt style="margin: 0.0; padding: 0.0; font-size: 20.0px; padding: 10.0px; background-color: #416517; border-bottom: 1.0px dashed #a6a6a6; color: #a0bf57; padding: 0.0; font-size: 20.0px; background: none; font-weight: bold; border: none;"><a href="" style="margin: 0.0; padding: 0.0; color: #185d6b;">1</a></dt>
+          
+          <dd class="descripcion" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<p style="margin: 0.0; padding: 0.0; margin: 10.0px 0.0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</dd>
+          <dd class="fechas" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Fechas: </b>Fecha</dd>
+          <dd class="locacion" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Lugar: </b>Lugar</dd>
+          <dd class="precio" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Público: </b>Público</dd>
+          <dd class="precio" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Precio: </b>Precio</dd>
+        </dl>
+</dd>
+  </dl>
+<dl class="categoria" id="C" style="margin: 0.0; padding: 0.0;">
+<dt style="margin: 0.0; padding: 0.0; font-size: 20.0px; padding: 10.0px; background-color: #416517; border-bottom: 1.0px dashed #a6a6a6; color: #a0bf57;">C</dt>
+    <dd style="margin: 0.0; padding: 0.0;">
+      
+        
+        <dl class="evento non" style="margin: 0.0; padding: 0.0; padding: 30.0px 25.0px 20.0px 35.0px; border-bottom: 1.0px dashed #a6a6a6; background-color: #d9e3cf;">
+<dt style="margin: 0.0; padding: 0.0; font-size: 20.0px; padding: 10.0px; background-color: #416517; border-bottom: 1.0px dashed #a6a6a6; color: #a0bf57; padding: 0.0; font-size: 20.0px; background: none; font-weight: bold; border: none;"><a href="" style="margin: 0.0; padding: 0.0; color: #185d6b;">1</a></dt>
+          
+          <dd class="descripcion" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<p style="margin: 0.0; padding: 0.0; margin: 10.0px 0.0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</dd>
+          <dd class="fechas" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Fechas: </b>Fecha</dd>
+          <dd class="locacion" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Lugar: </b>Lugar</dd>
+          <dd class="precio" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Público: </b>Público</dd>
+          <dd class="precio" style="margin: 0.0; padding: 0.0; text-align: justify; margin: 10.0px 0.0;">
+<b style="margin: 0.0; padding: 0.0; color: #185d6b;">Precio: </b>Precio</dd>
+        </dl>
+</dd>
+  </dl>
+<div id="footer" style="margin: 0.0; padding: 0.0;">
+  <div id="direccion" style="margin: 0.0; padding: 0.0; padding: 30.0px 25.0px 20.0px 35.0px;">
+    <b style="margin: 0.0; padding: 0.0; color: #185d6b; color: #5f792d;">lorem</b><br style="margin: 0.0; padding: 0.0;">
+    ipsum<br style="margin: 0.0; padding: 0.0;">
+    dolor<br style="margin: 0.0; padding: 0.0;">
+    sit<br style="margin: 0.0; padding: 0.0;">
+</div>
+
+  <div id="contacto" style="margin: 0.0; padding: 0.0; padding: 30.0px 25.0px 20.0px 35.0px;">
+    contacto <br style="margin: 0.0; padding: 0.0;"><a href="mailto:mail@host.org" style="margin: 0.0; padding: 0.0; color: #185d6b; font-weight: bold; font-size: 1.2em;">mail@host.org</a>
+  </div>
+  <div id="logos" style="margin: 0.0; padding: 0.0; width: 100.0%; margin-top: 40.0px; background-image: url(/images/boletines/Noviembre/logos_fondo.jpg);">
+    <img src="A" id="izq" alt="A" style="margin: 0.0; padding: 0.0; float: left;"><img src="B" id="der" alt="B" style="margin: 0.0; padding: 0.0; float: right;"><div class="clearer" style="margin: 0.0; padding: 0.0; clear: both;">
+  </div>
+</div>
+
+
+
+</div>
+</body>
+</html>

data/spec/fixtures/none.css

@@ -0,0 +1,3 @@
+#izq {
+  color: red;
+}

data/spec/fixtures/print.css

@@ -0,0 +1,3 @@
+#izq {
+  display: none;
+}

data/spec/fixtures/selectors.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html PUBliC "-//W3C//DTD html 4.01//EN">
+<html>
+<head>
+  <title>Examples of margins, padding, and borders</title>
+  <style type="text/css">
+  #A #B {
+    color: red;
+  }
+  .cA .cB {
+    color: blue;
+  }
+  
+  </style>
+</head>
+<body>
+  <div id="A">
+    A
+    <div id="B">B</div>
+  </div>
+  
+  <div class="cA">
+    cA
+    <div class="cB">cB</div>
+  </div>
+  
+</body>
+</html>

data/spec/fixtures/style.css

@@ -1,4 +1,3 @@
-.one, .two, .three {
-  margin: 30;
-  color: red;
+#izq {
+  margin: 30px;
 }

data/spec/spec_helper.rb

@@ -15,7 +15,7 @@ module HaveInlineStyleMatcher
 
     def matches? html
       @html = html
-      @html.css(@selector).inject(true){ |bool, e| bool and !e['style'].nil? }
+      !@html.css(@selector).empty? and @html.css(@selector).inject(true){ |bool, e| bool and !e['style'].nil? }
     end
 
     def failure_message

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: inline-style
 version: !ruby/object:Gem::Version 
-  version: 0.1.1
+  version: "0.4"
 platform: ruby
 authors: 
 - Macario Ortega
@@ -9,7 +9,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2009-10-22 00:00:00 -05:00
+date: 2009-10-29 00:00:00 -06:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -23,14 +23,14 @@ dependencies:
         version: 1.3.3
     version: 
 - !ruby/object:Gem::Dependency 
-  name: csspool
+  name: maca-fork-csspool
   type: :runtime
   version_requirement: 
   version_requirements: !ruby/object:Gem::Requirement 
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        version: 2.0.0
+        version: 2.0.2
     version: 
 - !ruby/object:Gem::Dependency 
   name: newgem
@@ -53,8 +53,10 @@ dependencies:
         version: 1.8.0
     version: 
 description: |-
-  Simple utility for "inlining" all CSS in the style attribute for the html tags. Useful for html emails that won't
-  correctly render stylesheets in some clients such as gmail.
+  Will take all css in a page (either from linked stylesheet or from style tag) and will embed it in the style attribute for 
+  each refered element taking selector specificity and declarator order.
+  
+  Useful for html email: some clients (gmail, et all) won't render non inline styles.
   
   * Includes a Rack middleware for using with Rails, Sinatra, etc...
   * It takes into account selector specificity.
@@ -74,14 +76,18 @@ files:
 - README.rdoc
 - Rakefile
 - example.rb
-- inline-style.gemspec
 - lib/inline-style.rb
 - lib/inline-style/rack/middleware.rb
-- rack-inline-styles.gemspec
 - spec/as_middleware_spec.rb
 - spec/css_inlining_spec.rb
+- spec/fixtures/all.css
+- spec/fixtures/boletin.html
+- spec/fixtures/box-model.html
+- spec/fixtures/inline.html
+- spec/fixtures/none.css
+- spec/fixtures/print.css
+- spec/fixtures/selectors.html
 - spec/fixtures/style.css
-- spec/fixtures/with-style-tag.html
 - spec/spec_helper.rb
 has_rdoc: true
 homepage: http://github.com/maca/inline-style
@@ -111,6 +117,6 @@ rubyforge_project: inline-style
 rubygems_version: 1.3.5
 signing_key: 
 specification_version: 3
-summary: Simple utility for "inlining" all CSS in the style attribute for the html tags
+summary: Will take all css in a page (either from linked stylesheet or from style tag) and will embed it in the style attribute for  each refered element taking selector specificity and declarator order
 test_files: []
 

data/inline-style.gemspec

@@ -1,46 +0,0 @@
-# -*- encoding: utf-8 -*-
-
-Gem::Specification.new do |s|
-  s.name = %q{inline-style}
-  s.version = "0.1"
-
-  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
-  s.authors = ["Macario Ortega"]
-  s.date = %q{2009-10-22}
-  s.description = %q{Simple utility for "inlining" all CSS in the style attribute for the html tags. Useful for html emails that won't
-correctly render stylesheets in some clients such as gmail.
-
-* Includes a Rack middleware for using with Rails, Sinatra, etc...
-* It takes into account selector specificity.}
-  s.email = ["macarui@gmail.com"]
-  s.extra_rdoc_files = ["History.txt", "Manifest.txt", "README.rdoc"]
-  s.files = ["History.txt", "Manifest.txt", "README.rdoc", "Rakefile", "example.rb", "inline-style.gemspec", "lib/inline-style.rb", "lib/inline-style/rack/middleware.rb", "rack-inline-styles.gemspec", "spec/as_middleware_spec.rb", "spec/css_inlining_spec.rb", "spec/fixtures/style.css", "spec/fixtures/with-style-tag.html", "spec/spec_helper.rb"]
-  s.homepage = %q{http://github.com/maca/inline-style}
-  s.rdoc_options = ["--main", "README.rdoc"]
-  s.require_paths = ["lib"]
-  s.rubyforge_project = %q{inline-style}
-  s.rubygems_version = %q{1.3.5}
-  s.summary = %q{Simple utility for "inlining" all CSS in the style attribute for the html tags}
-
-  if s.respond_to? :specification_version then
-    current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
-    s.specification_version = 3
-
-    if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
-      s.add_runtime_dependency(%q<nokogiri>, [">= 1.3.3"])
-      s.add_runtime_dependency(%q<csspool>, [">= 2.0.0"])
-      s.add_development_dependency(%q<newgem>, [">= 1.4.1"])
-      s.add_development_dependency(%q<hoe>, [">= 1.8.0"])
-    else
-      s.add_dependency(%q<nokogiri>, [">= 1.3.3"])
-      s.add_dependency(%q<csspool>, [">= 2.0.0"])
-      s.add_dependency(%q<newgem>, [">= 1.4.1"])
-      s.add_dependency(%q<hoe>, [">= 1.8.0"])
-    end
-  else
-    s.add_dependency(%q<nokogiri>, [">= 1.3.3"])
-    s.add_dependency(%q<csspool>, [">= 2.0.0"])
-    s.add_dependency(%q<newgem>, [">= 1.4.1"])
-    s.add_dependency(%q<hoe>, [">= 1.8.0"])
-  end
-end

data/rack-inline-styles.gemspec

@@ -1,37 +0,0 @@
-# -*- encoding: utf-8 -*-
-
-Gem::Specification.new do |s|
-  s.name = %q{rack-inline-styles}
-  s.version = "0.0.1"
-
-  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
-  s.authors = ["Macario Ortega"]
-  s.date = %q{2009-10-16}
-  s.description = %q{FIX (describe your package)}
-  s.email = ["macarui@gmail.com"]
-  s.extra_rdoc_files = ["History.txt", "Manifest.txt", "README.rdoc"]
-  s.files = [".git/HEAD", ".git/config", ".git/description", ".git/hooks/applypatch-msg", ".git/hooks/commit-msg", ".git/hooks/post-commit", ".git/hooks/post-receive", ".git/hooks/post-update", ".git/hooks/pre-applypatch", ".git/hooks/pre-commit", ".git/hooks/pre-rebase", ".git/hooks/update", ".git/index", ".git/info/exclude", ".git/objects/14/fa7459b8ceed4fef2dae431412c51591335354", ".git/objects/2c/0095bcd01468cbafdbb01befcd08cd60ccfb78", ".git/objects/37/04bf0d18ced6f7c6a85467ca3ae017e87d9bf4", ".git/objects/55/8a5df09d6f6b75f07504dd86ead7a0078c9031", ".git/objects/a6/cfe2d2693a7d73be08898b26a1f44886878c21", ".git/objects/e4/f29ca4d0099d827535a935fed78a2aa70fb3e7", ".git/objects/f0/4fbfb5595b8187bf753bdedebb89ee835c28ef", "History.txt", "Manifest.txt", "README.rdoc", "Rakefile", "lib/rack/inline-styles.rb", "rack-inline-styles.gemspec", "spec/spec_helper.rb"]
-  s.has_rdoc = true
-  s.homepage = %q{http://github.com/#{github_username}/#{project_name}}
-  s.rdoc_options = ["--main", "README.rdoc"]
-  s.require_paths = ["lib"]
-  s.rubyforge_project = %q{rack-inline-styles}
-  s.rubygems_version = %q{1.3.1}
-  s.summary = %q{FIX (describe your package)}
-
-  if s.respond_to? :specification_version then
-    current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
-    s.specification_version = 2
-
-    if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
-      s.add_development_dependency(%q<newgem>, [">= 1.4.1"])
-      s.add_development_dependency(%q<hoe>, [">= 1.8.0"])
-    else
-      s.add_dependency(%q<newgem>, [">= 1.4.1"])
-      s.add_dependency(%q<hoe>, [">= 1.8.0"])
-    end
-  else
-    s.add_dependency(%q<newgem>, [">= 1.4.1"])
-    s.add_dependency(%q<hoe>, [">= 1.8.0"])
-  end
-end

data/spec/fixtures/with-style-tag.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-  "http://www.w3.org/TR/html4/loose.dtd">
-
-<html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
-  <style type="text/css" media="screen">
-  * {
-    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
-    margin: 4px 3px 2px 1px;
-    padding: 0;
-  }
-
-  #list {
-    margin: 10;
-  }
-
-  #list li {
-    font-family: Arial;
-  }
-
-  .element {
-    padding: 10;
-  }
-
-  .odd {
-    background-color: black;
-  }
-
-  .pair {
-    background-color: red;
-  }
-
-  </style>
-  <link rel="stylesheet" href="style.css?1212121" type="text/css" media="screen" title="no title" charset="utf-8">
-
-</head>
-<body>
-  <ul id='number' class='listing inlined' style='background-color: yellow'>
-    <li class='list-element odd'>
-      <span>1</span>
-    </li>
-    <li class='list-element pair'>
-      <span>2</span>
-    </li>
-    <li class='list-element odd'>
-      <span>3</span>
-    </li>
-    <li class='list-element pair'>
-      <span>4</span>
-    </li>
-  </ul>
-</body>
-</html>