middleman-inline-style 0.5.1

data/lib/middleman-inline-style/rule.rb

@@ -0,0 +1,18 @@
+class InlineStyle
+  # A simple abstraction of the data we get back from the parsers. CSSPool
+  # actually already does this for us but CSSParser does not so we need
+  # to create the abstraction ourselves.
+  class Rule
+    DYNAMIC_PSEUDO_CLASSES = %w(link visited active hover focus target enabled disabled checked)
+    DYNAMIC_PSEUDO_CLASSES_MATCHER = /:(#{DYNAMIC_PSEUDO_CLASSES.join('|')})$/
+
+    attr_reader :selector, :declarations, :specificity, :dynamic_pseudo_class
+
+    def initialize selector, declarations, specificity
+      @specificity = specificity
+      @selector, @dynamic_pseudo_class = selector.split DYNAMIC_PSEUDO_CLASSES_MATCHER
+      @selector.sub! /$^/, '*'
+      @declarations = declarations.scan /\s*([^:]+):\s*([^;]+);/
+    end
+  end
+end

data/lib/middleman-inline-style/version.rb

@@ -0,0 +1,3 @@
+class InlineStyle
+  VERSION = '0.5.1'
+end

data/middleman-inline-style.gemspec

@@ -0,0 +1,29 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "middleman-inline-style/version"
+
+Gem::Specification.new do |s|
+  s.name        = "middleman-inline-style"
+  s.version     = InlineStyle::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Macario Ortega", "Eric Anderson", "Trenton Broughton"]
+  s.email       = ["trenton@ikso.us"]
+  s.homepage    = "https://github.com/trenton42/middleman-inline-style"
+  s.summary     = %q{Inlines CSS for html email delivery}
+  s.description = %q{Inlines CSS for html email delivery}
+  s.post_install_message = %{Please read documentation for changes on the default css parser gem, specifically if you use csspool}
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+
+  s.add_development_dependency 'rspec'
+  s.add_development_dependency 'rack'
+  s.add_development_dependency 'rspec-core'
+  s.add_development_dependency 'mail'
+
+  s.add_dependency 'nokogiri'
+  s.add_dependency 'css_parser'
+  s.add_dependency 'maca-fork-csspool'
+end

data/spec/css_inlining_spec.rb

@@ -0,0 +1,90 @@
+require "spec_helper"
+
+describe InlineStyle do
+  shared_examples_for 'inlines styles' do
+    before do
+      processed  = InlineStyle.process File.read("#{FIXTURES}/boletin.html"), :stylesheets_path => FIXTURES
+      @processed = Nokogiri.HTML(processed)
+    end
+
+    it "should extract from linked stylesheet" do
+      @processed.css('#izq').first['style'].should match_style /margin: 30.0px;/
+    end
+
+    it "should extract styles from linked stylesheet with no media specified" do
+      @processed.css('#izq').first['style'].should match_style /color: red;/
+    end
+
+    it "should extract styles from linked stylesheet with media 'all'" do
+      @processed.css('#izq').first['style'].should match_style /border: none;/
+    end
+
+    it "should ignore styles from linked stylesheet with media other than screen" do
+      @processed.css('#izq').first['style'].should_not match_style /display: none;/
+    end
+
+    it "should not process pseudo classes" do
+      @processed.css('a').first['style'].should_not match_style /^:hover \{background-color: #8ae0ea; color: #126b5d;\}$/
+    end
+
+    it 'should process location-based pseudo classes' do
+      @processed.at_css('#izq')['style'].should match_style /padding: 1.0px;/
+    end
+
+    it 'should apply to #A #B' do
+      @processed.css('#logos #der').first['style'].should match_style /float: right;/
+    end
+
+    it 'should not override rules defined inline' do
+      @processed.css('#aviso').first['style'].should match_style /color: green;/
+    end
+
+    it 'should overwrite rule previously defined' do
+      @processed.css('#izq').first['style'].should_not match_style /padding: 0.0;/
+    end
+
+    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 match_style /^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 match_style /^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 match_style /^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
+
+  describe CssParser do
+    it { InlineStyle::CSSParser.should == InlineStyle::CssParserWrapper }
+    it_should_behave_like 'inlines styles'
+  end
+
+  describe CSSPool do
+    before do
+      class InlineStyle
+        remove_const :CSSParser
+        CSSParser = InlineStyle::CSSPoolWrapper 
+      end
+    end
+
+    after do
+      class InlineStyle
+        remove_const :CSSParser
+        CSSParser = InlineStyle::CssParserWrapper 
+      end
+    end
+    it { InlineStyle::CSSParser.should == InlineStyle::CSSPoolWrapper }
+    it_should_behave_like 'inlines styles'
+  end
+end

data/spec/css_parsing_spec.rb

@@ -0,0 +1,146 @@
+require "spec_helper"
+
+describe 'CSS parsing' do
+  shared_examples_for 'parses css' do
+    describe 'parsing tag selector' do
+      before do 
+        @wrapper = subject.new 'p {background-color: black; padding: 0.0 0.0 0.0 0.0}'
+      end
+
+      it { @wrapper.should have(1).rules }
+
+      describe 'rule' do
+        before { @rule = @wrapper.rules.first }
+        it { @rule.specificity.should == '0001' }
+        it { @rule.declarations.should == [['background-color', 'black'], ['padding', '0.0 0.0 0.0 0.0']] }
+        it { @rule.selector.should == 'p' }
+        it { @rule.dynamic_pseudo_class.should be_nil }
+      end
+    end
+
+    describe 'parsing body tag selector' do
+      before do 
+        @wrapper = subject.new 'body {background-color: black; padding: 0.0 0.0 0.0 0.0}'
+      end
+
+      it { @wrapper.should have(1).rules }
+
+      describe 'rule' do
+        before { @rule = @wrapper.rules.first }
+        it { @rule.specificity.should == '0001' }
+        it { @rule.declarations.should == [['background-color', 'black'], ['padding', '0.0 0.0 0.0 0.0']] }
+        it { @rule.selector.should == 'body' }
+        it { @rule.dynamic_pseudo_class.should be_nil }
+      end
+    end
+
+    describe 'parsing tag and class selector' do
+      before do 
+        @wrapper = subject.new 'div.article {background-color: black; padding: 0.0 0.0 0.0 0.0}'
+      end
+
+      it { @wrapper.should have(1).rules }
+
+      describe 'rule' do
+        before { @rule = @wrapper.rules.first }
+        it { @rule.specificity.should == '0011' }
+        it { @rule.declarations.should == [['background-color', 'black'], ['padding', '0.0 0.0 0.0 0.0']] }
+        it { @rule.selector.should == 'div.article' }
+        it { @rule.dynamic_pseudo_class.should be_nil }
+      end
+    end
+
+    describe 'parsing tag, class and id selector' do
+      before do 
+        @wrapper = subject.new 'div#headline.article {background-color: black; padding: 0.0 0.0 0.0 0.0}'
+      end
+
+      it { @wrapper.should have(1).rules }
+
+      describe 'rule' do
+        before { @rule = @wrapper.rules.first }
+        it { @rule.specificity.should == '0111' }
+        it { @rule.declarations.should == [['background-color', 'black'], ['padding', '0.0 0.0 0.0 0.0']] }
+        it { @rule.selector.should == 'div#headline.article' }
+        it { @rule.dynamic_pseudo_class.should be_nil }
+      end
+    end
+
+    describe 'parsing tag selector' do
+      before do 
+        @wrapper = subject.new 'p, div {background-color: black; padding: 0.0 0.0 0.0 0.0}'
+      end
+
+      it { @wrapper.should have(2).rules }
+
+      describe 'first rule' do
+        before { @rule = @wrapper.rules.first }
+        it { @rule.specificity.should == '0001' }
+        it { @rule.declarations.should == [['background-color', 'black'], ['padding', '0.0 0.0 0.0 0.0']] }
+        it { @rule.selector.should == 'p' }
+        it { @rule.dynamic_pseudo_class.should be_nil }
+      end
+
+      describe 'last rule' do
+        before { @rule = @wrapper.rules.last }
+        it { @rule.specificity.should == '0001' }
+        it { @rule.declarations.should == [['background-color', 'black'], ['padding', '0.0 0.0 0.0 0.0']] }
+        it { @rule.selector.should == 'div' }
+        it { @rule.dynamic_pseudo_class.should be_nil }
+      end
+    end
+
+    describe 'dynamic pseudo selectors' do
+      InlineStyle::Rule::DYNAMIC_PSEUDO_CLASSES.each do |pseudo_class|
+        describe "parsing tag with :#{pseudo_class}" do
+          before { @dynamic_pseudo_class = pseudo_class }
+          it_should_behave_like 'parses dynamic pseudo selector'
+        end
+      end
+    end
+  end
+
+  shared_examples_for 'parses dynamic pseudo selector' do
+    describe 'with tag' do
+      before do 
+        @wrapper = subject.new "p:#{@dynamic_pseudo_class} {background-color: black; padding: 0.0 0.0 0.0 0.0}"
+      end
+
+      it { @wrapper.should have(1).rules }
+
+      describe 'rule' do
+        before { @rule = @wrapper.rules.first }
+        # it { @rule.specificity.should == '011' }
+        it { @rule.declarations.should == [['background-color', 'black'], ['padding', '0.0 0.0 0.0 0.0']] }
+        it { @rule.selector.should == 'p' }
+        it { @rule.dynamic_pseudo_class.should == @dynamic_pseudo_class }
+      end
+    end
+
+    describe 'without tag' do
+      before do 
+        @wrapper = subject.new ":#{@dynamic_pseudo_class} {background-color: black; padding: 0.0 0.0 0.0 0.0}"
+      end
+
+      it { @wrapper.should have(1).rules }
+
+      describe 'rule' do
+        before { @rule = @wrapper.rules.first }
+        # it { @rule.specificity.should == '011' }
+        it { @rule.declarations.should == [['background-color', 'black'], ['padding', '0.0 0.0 0.0 0.0']] }
+        it { @rule.selector.should == '*' }
+        it { @rule.dynamic_pseudo_class.should == @dynamic_pseudo_class }
+      end
+    end
+  end
+
+  describe InlineStyle::CssParserWrapper do
+    subject { InlineStyle::CssParserWrapper }
+    it_should_behave_like 'parses css'
+  end
+
+  describe InlineStyle::CssParserWrapper do
+    subject { InlineStyle::CSSPoolWrapper }
+    it_should_behave_like 'parses css'
+  end
+end

data/spec/fixtures/all.css

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

data/spec/fixtures/boletin.html

@@ -0,0 +1,261 @@
+<!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;
+  color: blue;
+}
+
+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');
+}
+
+#logos img:first-child {
+  padding: 1px;
+}
+
+#izq {
+    float: left;
+}
+
+#logos #der {
+    float: right;
+}
+
+		
+  </style>
+  
+  
+  
+
+<div id="header">
+  <div id="aviso" style='color: green;'>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>