bootstrap-email 0.3.4 → 1.0.0.alpha2.1

data/core/scss/components/_grid.scss

@@ -0,0 +1,38 @@
+table.row {
+  table-layout: fixed;
+  -premailer-width: 100%;
+  width: 100%;
+  & > tbody > tr > td {
+    min-height: 1px;
+    font-weight: normal;
+    padding-right: 30px;
+    vertical-align: top;
+    text-align: left;
+  }
+}
+
+@each $key, $value in $grid-cols {
+  td.col-#{$key},
+  td.col-lg-#{$key} {
+    width: $value;
+  }
+}
+
+@each $space, $value in $spacers {
+  table.row.g-#{$space},
+  table.row.gx-#{$space},
+  table.row.g-lg-#{$space},
+  table.row.gx-lg-#{$space} {
+    & > tbody > tr > td {
+      padding-right: $value;
+    }
+  }
+  table.row.g-#{$space},
+  table.row.gy-#{$space},
+  table.row.g-lg-#{$space},
+  table.row.gy-lg-#{$space} {
+    & > tbody > tr > td {
+      padding-bottom: $value;
+    }
+  }
+}

data/core/scss/components/_hr.scss

@@ -0,0 +1,8 @@
+table.hr {
+  width: 100%;
+  & > tbody > tr > td {
+    border-top: 1px solid $border-color;
+    height: 1px;
+    width: 100%;
+  }
+}

data/core/{sass → scss/components}/_image.scss

@@ -1,5 +1,6 @@
 .img-fluid {
   height: auto;
-  width: 100%;
   max-width: 100%;
+  -premailer-width: 100%;
+  width: 100%;
 }

data/core/scss/components/_stack.scss

@@ -0,0 +1,33 @@
+@each $space, $value in $spacers {
+  table.stack-x.gap-#{$space} > tbody > tr > td {
+    padding-right: $value;
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+  table.stack-y.gap-#{$space} > tbody > tr {
+    & > td {
+      padding-bottom: $value;
+    }
+    &:last-child > td {
+      padding-bottom: 0;
+    }
+  }
+}
+
+.stack-cell {
+  vertical-align: top;
+  text-align: left;
+}
+
+@each $align in $vertical-align {
+  table.stack-valign-#{$align} > tbody > tr > td {
+    vertical-align: $align;
+  }
+}
+
+@each $align in $text-align {
+  table.stack-align-#{$align} > tbody > tr > td {
+    text-align: $align;
+  }
+}

data/core/scss/utilities/_background.scss

@@ -0,0 +1,5 @@
+@each $name, $color in $all-colors {
+  @include background-color-util('.bg-#{$name}') {
+    background-color: $color;
+  }
+}

data/core/scss/utilities/_border-radius.scss

@@ -0,0 +1,21 @@
+@each $name, $radius in $border-radiuses {
+  @include border-radius-util('.rounded#{$name}') {
+    border-radius: $radius;
+  }
+  @include border-radius-util('.rounded-top#{$name}') {
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+  }
+  @include border-radius-util('.rounded-right#{$name}') {
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+  @include border-radius-util('.rounded-bottom#{$name}') {
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
+  }
+  @include border-radius-util('.rounded-left#{$name}') {
+    border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+  }
+}

data/core/scss/utilities/_border.scss

@@ -0,0 +1,13 @@
+@each $name, $width in $border-widths {
+  .border#{$name}         { border: $width solid $border-color !important; }
+  .border-top#{$name}     { border-top: $width solid $border-color !important; }
+  .border-right#{$name}   { border-right: $width solid $border-color !important; }
+  .border-bottom#{$name}  { border-bottom: $width solid $border-color !important; }
+  .border-left#{$name}    { border-left: $width solid $border-color !important; }
+}
+
+@each $name, $color in $all-colors {
+  @include border-color-util('.border-#{$name}') {
+    border-color: $color !important;
+  }
+}

data/core/scss/utilities/_color.scss

@@ -0,0 +1,9 @@
+@each $name, $color in $all-colors {
+  @include color-util('.text-#{$name}') {
+    color: $color;
+  }
+}
+
+@include color-util('.text-muted') {
+  color: $gray-600;
+}

data/core/scss/utilities/_display.scss

@@ -0,0 +1,7 @@
+@each $prefix in $breakpoints {
+  @each $display in $display-type {
+    .d-#{$prefix}#{$display} {
+      display: $display;
+    }
+  }
+}

data/core/scss/utilities/_sizing.scss

@@ -0,0 +1,31 @@
+@each $prefix in $breakpoints {
+  @each $name, $property in $sizing-types {
+    @include sizing-util('.max-#{$name}-#{$prefix}full') {
+      max-#{$property}: 100%;
+      -premailer-#{$property}: 100%;
+      #{$property}: 100%;
+    }
+    @each $size, $value in $sizing {
+      @include sizing-util('.max-#{$name}-#{$prefix}#{$size}') {
+        max-#{$property}: $value;
+        -premailer-#{$property}: strip-unit($value);
+        #{$property}: 100%;
+      }
+    }
+  }
+}
+
+@each $prefix in $breakpoints {
+  @each $name, $property in $sizing-types {
+    @include sizing-util('.#{$name}-#{$prefix}full') {
+      -premailer-#{$property}: 100%;
+      #{$property}: 100%;
+    }
+    @each $size, $value in $sizing {
+      @include sizing-util('.#{$name}-#{$prefix}#{$size}') {
+        -premailer-#{$property}: strip-unit($value);
+        #{$property}: $value;
+      }
+    }
+  }
+}

data/core/scss/utilities/_spacing.scss

@@ -0,0 +1,18 @@
+// Padding Util
+@each $prefix in $breakpoints {
+  @each $size, $value in $spacers {
+    @include padding-group($prefix, $size, $value);
+  }
+}
+
+// Spacing Util
+@each $prefix in $breakpoints {
+  @each $size, $value in $spacers {
+    @include spacer-util('.s-#{$prefix}#{$size}') {
+      font-size: $value;
+      line-height: $value;
+      height: $value;
+      -premailer-height: strip-unit($value);
+    }
+  }
+}

data/core/scss/utilities/_text-decoration.scss

@@ -0,0 +1,9 @@
+.underline {
+  text-decoration: underline;
+}
+.line-through {
+  text-decoration: line-through;
+}
+.no-underline {
+  text-decoration: none;
+}

data/core/scss/utilities/_typography.scss

@@ -0,0 +1,48 @@
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  margin: 0;
+  padding-top: $headings-margin-top;
+  padding-bottom: $headings-margin-bottom;
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+  color: $headings-color;
+  text-align: left;
+  vertical-align: baseline;
+}
+
+@each $name, $size in $headings {
+  h#{$name}, .h#{$name} {
+    font-size: $size;
+    line-height: $size * $headings-line-height;
+  }
+}
+
+@each $name, $size in $font-size {
+  .text-#{$name} {
+    font-size: $size;
+    line-height: $size * $headings-line-height;
+  }
+}
+
+@each $name, $size in $line-height {
+  .lh-#{$name} {
+    line-height: $size;
+  }
+}
+
+@for $n from 1 through 9 {
+  @include font-weight-util('.fw-#{$n * 100}') {
+    font-weight: #{$n * 100} !important;
+  }
+}
+
+@each $align in $text-align {
+  @include text-align-util('.text-#{$align}') {
+    text-align: $align !important;
+  }
+}
+
+p {
+  width: 100%;
+  margin: 0;
+}

data/core/scss/utilities/_valign.scss

@@ -0,0 +1,5 @@
+@each $align in $vertical-align {
+  @include valign-util('.valign-#{$align}') {
+    vertical-align: $align !important;
+  }
+}

data/core/templates/body.html.erb

@@ -1,4 +1,4 @@
-<table valign="top" class="<%= classes %>">
+<table class="<%= classes %>" valign="top" role="presentation">
   <tbody>
     <tr>
       <td valign="top">

data/core/templates/container.html.erb

@@ -1,14 +1,14 @@
-<table class="<%= classes %>">
+<table class="<%= classes %>" role="presentation">
   <tbody>
     <tr>
       <td align="center">
         <!--[if (gte mso 9)|(IE)]>
-          <table align="center">
+          <table align="center" role="presentation">
             <tbody>
               <tr>
                 <td width="600">
         <![endif]-->
-        <table align="center">
+        <table align="center" role="presentation">
           <tbody>
             <tr>
               <td>

data/core/templates/table-left.html.erb

@@ -1,4 +1,4 @@
-<table class="<%= classes %>" align="left">
+<table class="<%= classes %>" align="left" role="presentation">
   <tbody>
     <tr>
       <td>

data/core/templates/table-to-tbody.html.erb

@@ -0,0 +1,5 @@
+<table class="<%= classes %>" role="presentation">
+  <tbody>
+    <%= contents %>
+  </tbody>
+</table>

data/core/templates/table-to-tr.html.erb

@@ -0,0 +1,7 @@
+<table class="<%= classes %>" role="presentation">
+  <tbody>
+    <tr>
+      <%= contents %>
+    </tr>
+  </tbody>
+</table>

data/core/templates/table.html.erb

@@ -1,4 +1,4 @@
-<table class="<%= classes %>">
+<table class="<%= classes %>" role="presentation">
   <tbody>
     <tr>
       <td>

data/core/templates/td.html.erb

@@ -0,0 +1,3 @@
+<td class="<%= classes %>">
+  <%= contents %>
+</td>

data/core/templates/tr.html.erb

@@ -0,0 +1,5 @@
+<tr>
+  <td>
+    <%= contents %>
+  </td>
+</tr>

data/lib/bootstrap-email.rb

@@ -1,230 +1,28 @@
 require 'nokogiri'
 require 'erb'
 require 'ostruct'
-require 'action_mailer'
 require 'premailer'
-require 'premailer/rails'
-require 'rails'
+require 'sassc'
+require 'digest/sha1'
+require 'css_parser'
 
-module BootstrapEmail
-  class Compiler
-    def initialize(mail)
-      @mail = mail
-      @source = mail.html_part || mail
-      update_doc(@source.body.raw_source)
-    end
+begin
+  require 'rails'
+rescue LoadError; end
 
-    def update_doc(source)
-      @doc = Nokogiri::HTML(source)
-    end
-
-    def perform_full_compile
-      compile_html!
-      inline_css!
-      inject_head!
-      update_mailer!
-    end
-
-    def compile_html!
-      button
-      badge
-      alert
-      card
-      hr
-      container
-      grid
-      align
-      padding
-      margin
-      spacer
-      table
-      body
-    end
-
-    def inline_css!
-      @source.body = @doc.to_html
-      @mail = Premailer::Rails::Hook.perform(@mail)
-      @mail.header[:skip_premailer] = true
-      update_doc(@mail.html_part.body.raw_source)
-    end
-
-    def inject_head!
-      @doc.at_css('head').add_child(bootstrap_email_head)
-    end
-
-    def update_mailer!
-      @mail.html_part.body = @doc.to_html
-      @mail
-    end
-
-    private
-
-    def bootstrap_email_head
-      engine = defined?(SassC::Engine).nil? ? Sass::Engine : SassC::Engine
-      html_string = <<-HEREDOC
-        <style type="text/css">
-          #{engine.new(File.open(File.expand_path('../core/head.scss', __dir__)).read, syntax: :scss, style: :compressed, cache: false, read_cache: false).render}
-        </style>
-      HEREDOC
-      html_string
-    end
-
-    def template(file, locals_hash = {})
-      namespace = OpenStruct.new(locals_hash)
-      template_html = File.open(File.expand_path("../core/templates/#{file}.html.erb", __dir__)).read
-      ERB.new(template_html).result(namespace.instance_eval { binding })
-    end
-
-    def each_node(css_lookup, &blk)
-      # sort by youngest child and traverse backwards up the tree
-      @doc.css(css_lookup).sort_by { |n| n.ancestors.size }.reverse!.each(&blk)
-    end
-
-    def button
-      each_node('.btn') do |node| # move all classes up and remove all classes from the element
-        node.replace(template('table', classes: node['class'], contents: node.delete('class') && node.to_html))
-      end
-    end
-
-    def badge
-      each_node('.badge') do |node| # move all classes up and remove all classes from the element
-        node.replace(template('table-left', classes: node['class'], contents: node.delete('class') && node.to_html))
-      end
-    end
-
-    def alert
-      each_node('.alert') do |node| # move all classes up and remove all classes from the element
-        node.replace(template('table', classes: node['class'], contents: node.delete('class') && node.to_html))
-      end
-    end
-
-    def align
-      each_node('.float-left') do |node|
-        align_helper(node, /float-left/, 'left')
-      end
-      each_node('.mx-auto') do |node|
-        align_helper(node, /mx-auto/, 'center')
-      end
-      each_node('.float-right') do |node|
-        align_helper(node, /float-right/, 'right')
-      end
-    end
-
-    def align_helper(node, klass, template)
-      if node.name != 'table' # if it is already on a table, set the proprieties on the current table
-        node['class'] = node['class'].sub(klass, '')
-        node.replace(template("align-#{template}", contents: node.to_html))
-      else
-        node['align'] = template
-      end
-    end
-
-    def card
-      each_node('.card') do |node| # move all classes up and remove all classes from element
-        node.replace(template('table', classes: node['class'], contents: node.delete('class') && node.to_html))
-      end
-      each_node('.card-body') do |node| # move all classes up and remove all classes from element
-        node.replace(template('table', classes: node['class'], contents: node.delete('class') && node.to_html))
-      end
-    end
-
-    def hr
-      each_node('hr') do |node| # drop hr in place of current
-        node.replace(template('hr', classes: "hr #{node['class']}"))
-      end
-    end
-
-    def container
-      each_node('.container') do |node|
-        node.replace(template('container', classes: node['class'], contents: node.inner_html))
-      end
-      each_node('.container-fluid') do |node|
-        node.replace(template('table', classes: node['class'], contents: node.inner_html))
-      end
-    end
-
-    def grid
-      each_node('.row') do |node|
-        node.replace(template('row', classes: node['class'], contents: node.inner_html))
-      end
-      each_node('*[class*=col]') do |node|
-        node.replace(template('col', classes: node['class'], contents: node.inner_html))
-      end
-    end
-
-    def padding
-      each_node('*[class*=p-], *[class*=pt-], *[class*=pr-], *[class*=pb-], *[class*=pl-], *[class*=px-], *[class*=py-]') do |node|
-        next unless node.name != 'table' # if it is already on a table, set the padding on the table, else wrap the content in a table
-
-        padding_regex = /(p[trblxy]?-\d)/
-        classes = node['class'].scan(padding_regex).join(' ')
-        node['class'] = node['class'].gsub(padding_regex, '')
-        node.replace(template('table', classes: classes, contents: node.to_html))
-      end
-    end
-
-    def margin
-      each_node('*[class*=my-], *[class*=mt-], *[class*=mb-]') do |node|
-        top_class = node['class'][/m[ty]{1}-(lg-)?(\d)/]
-        bottom_class = node['class'][/m[by]{1}-(lg-)?(\d)/]
-        node['class'] = node['class'].gsub(/(m[tby]{1}-(lg-)?\d)/, '')
-        html = ''
-        if top_class
-          html += template('div', classes: "s-#{top_class.gsub(/m[ty]{1}-/, '')}", contents: nil)
-        end
-        html += node.to_html
-        if bottom_class
-          html += template('div', classes: "s-#{bottom_class.gsub(/m[by]{1}-/, '')}", contents: nil)
-        end
-        node.replace(html)
-      end
-    end
-
-    def spacer
-      spacers = {
-        '0' => 0,
-        '1' => (16 * 0.25),
-        '2' => (16 * 0.5),
-        '3' => 16,
-        '4' => (16 * 1.5),
-        '5' => (16 * 3)
-      }
-      each_node('*[class*=s-]') do |node|
-        temp = Nokogiri::HTML::DocumentFragment.parse(template('table', classes: node['class'] + ' w-100', contents: '&nbsp;'))
-        temp.at_css('td')['height'] = spacers[node['class'].gsub(/s-/, '')].to_i
-        node.replace(temp)
-      end
-    end
-
-    def table
-      @doc.css('table').each do |node|
-        # border="0" cellpadding="0" cellspacing="0"
-        node['border'] = 0
-        node['cellpadding'] = 0
-        node['cellspacing'] = 0
-      end
-    end
-
-    def body
-      @doc.css('body').each do |node|
-        node.replace('<body>' + preview_text.to_s + template('body', classes: "#{node['class']} body", contents: node.inner_html.to_s) + '</body>')
-      end
-    end
-
-    def preview_text
-      preview_node = @doc.at_css('preview')
-      return if preview_node.blank?
-
-      # apply spacing after the text max of 100 characters so it doesn't show body text
-      preview_node.content += '&nbsp;' * [(100 - preview_node.content.length.to_i), 0].max
-      node = template('div', classes: 'preview', contents: preview_node.content)
-      preview_node.remove
-      node
-    end
-  end
+if defined?(Rails)
+  require 'action_mailer'
 end
 
-require 'bootstrap-email/premailer_railtie'
-require 'bootstrap-email/action_mailer'
-require 'bootstrap-email/engine'
-require 'bootstrap-email/version'
+require_relative 'bootstrap-email/initialize'
+require_relative 'bootstrap-email/erb'
+require_relative 'bootstrap-email/compiler'
+require_relative 'bootstrap-email/sass_cache'
+require_relative 'bootstrap-email/version'
+require_relative 'bootstrap-email/components/base'
+Dir[File.join(__dir__, 'bootstrap-email/components', '*.rb')].each { |file| require_relative file }
+
+if defined?(Rails)
+  require_relative 'bootstrap-email/rails/action_mailer'
+  require_relative 'bootstrap-email/rails/engine'
+end