bootstrap-email 1.0.0.alpha1 → 1.0.0.alpha3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3a661e701ec3f8aa6589c588c9463a3a9fa4b74b1cddbc459632a7cf92a31259
-  data.tar.gz: 5df12d3b814583187580a9b657384192c9f1fe5a16d338558691363cd0fb60a6
+  metadata.gz: f70b6dc2a2d0ebd4dfcdee53c7242e2aa6c7824571d41be81e0518e1516ce03c
+  data.tar.gz: c49e013fd55e2b2f87c204dc8b64ac093149e4d45df5e2d5da809540b2c4b399
 SHA512:
-  metadata.gz: ba4287fac839103ebf7a3fa0a475037993c63c9fae9d28cc96e393e071dc5c8de59df0a147bf6ef0039ed42aa6c8a37fc96a1a019571af89d70abb90076e5c91
-  data.tar.gz: 596260a7a2acbec5d44ad60b84e4f7c43d9fa47d940c48979670e4f1c70ff8c13c0ea0786bc2102c82d71a7f769128df9ba04b60a9686b35f7b53fc87d481030
+  metadata.gz: ab6c6bff12d2787b5962c51ae97983abdd407ccdd77e72a24e62644ff8e16d5a83d33e32ec14e577c9514731038091340c66ba47fd09c645380fc2aab27d42a6
+  data.tar.gz: 74a21957509ea73128b3d13c89dd21e0b6084c1a90efdac8ef4e3238e29e7ad4c10581d480665eacb578dd78c1177d9494e932bb20b841a93960cfb4b1497f8b

data/VERSION

@@ -1 +1 @@
-1.0.0.alpha1
+1.0.0.alpha3

data/core/bootstrap-email.scss

@@ -16,6 +16,7 @@
 @import 'scss/components/image';
 @import 'scss/components/preview';
 @import 'scss/components/table';
+@import 'scss/components/stack';
 
 @import 'scss/utilities/background';
 @import 'scss/utilities/border';
@@ -26,3 +27,4 @@
 @import 'scss/utilities/spacing';
 @import 'scss/utilities/text-decoration';
 @import 'scss/utilities/typography';
+@import 'scss/utilities/valign';

data/core/bootstrap-head.scss

@@ -28,7 +28,7 @@ a {
   text-decoration: none;
 }
 
-// Inhere text color so color can be set on the body and inherited by children
+// Inherit text color so color can be set on the body and inherited by children
 * {
   color: inherit;
 }

data/core/scss/_selectors_for_utils.scss

@@ -98,3 +98,27 @@
     }
   }
 }
+
+//
+// Text align
+//
+@mixin text-align-util($class) {
+  #{$class} {
+    &,
+    & > tbody > tr > td {
+      @content
+    }
+  }
+}
+
+//
+// Vertical align
+//
+@mixin valign-util($class) {
+  #{$class} {
+    &,
+    & > tbody > tr > td {
+      @content
+    }
+  }
+}

data/core/scss/_utilities.scss

@@ -117,9 +117,29 @@ $border-widths: (
 ) !default;
 
 $border-radiuses: (
-  '-sm': 3px,
-  '': 6px,
-  '-lg': 9px,
+  '': 4px,
+  '-none': 0px,
+  '-sm': 2px,
+  '-md': 6px,
+  '-lg': 8px,
   '-xl': 12px,
-  '-0': 0px
+  '-2xl': 16px,
+  '-3xl': 24px,
+  '-full': 9999px
+) !default;
+
+$vertical-align: (
+  top,
+  middle,
+  bottom,
+  baseline,
+  text-top,
+  text-bottom
+) !default;
+
+$text-align: (
+  left,
+  right,
+  center,
+  justify
 ) !default;

data/core/scss/components/_grid.scss

@@ -1,10 +1,13 @@
 table.row {
   table-layout: fixed;
+  -premailer-width: 100%;
   width: 100%;
   & > tbody > tr > td {
     min-height: 1px;
     font-weight: normal;
-    padding-right: 30px;
+    padding-right: 24px;
+    vertical-align: top;
+    text-align: left;
   }
 }
 
@@ -16,18 +19,18 @@ table.row {
 }
 
 @each $space, $value in $spacers {
-  table.row.g-#{$space},
-  table.row.gx-#{$space},
-  table.row.g-lg-#{$space},
-  table.row.gx-lg-#{$space} {
+  table.row.gap-#{$space},
+  table.row.gap-x-#{$space},
+  table.row.gap-lg-#{$space},
+  table.row.gap-x-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} {
+  table.row.gap-#{$space},
+  table.row.gap-y-#{$space},
+  table.row.gap-lg-#{$space},
+  table.row.gap-y-lg-#{$space} {
     & > tbody > tr > td {
       padding-bottom: $value;
     }

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/_sizing.scss

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

data/core/scss/utilities/_typography.scss

@@ -36,16 +36,10 @@ h1, h2, h3, h4, h5, h6,
   }
 }
 
-.text-left {
-  text-align: left !important;
-}
-
-.text-right {
-  text-align: right !important;
-}
-
-.text-center {
-  text-align: center !important;
+@each $align in $text-align {
+  @include text-align-util('.text-#{$align}') {
+    text-align: $align !important;
+  }
 }
 
 p {

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

@@ -0,0 +1,9 @@
+<table class="{{ classes }}" valign="top" role="presentation">
+  <tbody>
+    <tr>
+      <td valign="top">
+        {{ contents }}
+      </td>
+    </tr>
+  </tbody>
+</table>

data/core/templates/{container.html.erb → container.html}

@@ -1,18 +1,18 @@
-<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>
-                <%= contents %>
+                {{ contents }}
               </td>
             </tr>
           </tbody>

data/core/templates/div.html

@@ -0,0 +1,3 @@
+<div class="{{ classes }}">
+  {{ contents }}
+</div>

data/core/templates/table-left.html

@@ -0,0 +1,9 @@
+<table class="{{ classes }}" align="left" role="presentation">
+  <tbody>
+    <tr>
+      <td>
+        {{ contents }}
+      </td>
+    </tr>
+  </tbody>
+</table>

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

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

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

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

data/core/templates/table.html

@@ -0,0 +1,9 @@
+<table class="{{ classes }}" role="presentation">
+  <tbody>
+    <tr>
+      <td>
+        {{ contents }}
+      </td>
+    </tr>
+  </tbody>
+</table>

data/core/templates/td.html

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

data/core/templates/tr.html

@@ -0,0 +1,5 @@
+<tr>
+  <td>
+    {{ contents }}
+  </td>
+</tr>

data/lib/{bootstrap_email.rb → bootstrap-email.rb}

@@ -5,6 +5,7 @@ require 'premailer'
 require 'sassc'
 require 'digest/sha1'
 require 'css_parser'
+require 'fileutils'
 
 begin
   require 'rails'
@@ -15,10 +16,14 @@ if defined?(Rails)
 end
 
 require_relative 'bootstrap-email/initialize'
+require_relative 'bootstrap-email/config'
+require_relative 'bootstrap-email/setup'
+require_relative 'bootstrap-email/erb'
 require_relative 'bootstrap-email/compiler'
 require_relative 'bootstrap-email/sass_cache'
 require_relative 'bootstrap-email/version'
-Dir[File.join(__dir__, 'bootstrap-email/components', '*.rb')].each { |file| require_relative file }
+require_relative 'bootstrap-email/converters/base'
+Dir[File.join(__dir__, 'bootstrap-email/converters', '*.rb')].each { |file| require_relative file }
 
 if defined?(Rails)
   require_relative 'bootstrap-email/rails/action_mailer'

data/lib/bootstrap-email/bootstrap_email_cli.rb

@@ -1,10 +1,9 @@
-require_relative '../bootstrap_email'
+require_relative '../bootstrap-email'
 require 'optparse'
-require 'fileutils'
 
 input = nil
 options = {
-  destination: 'output',
+  destination: 'compiled',
   type: :file
 }
 
@@ -17,7 +16,7 @@ parser = OptionParser.new do |opts|
   opts.separator '  bootstrap-email email.html > out.html'
   opts.separator '  bootstrap-email ./public/index.html'
   opts.separator '  bootstrap-email -s \'<a href="#" class="btn btn-primary">Some Button</a>\''
-  opts.separator '  bootstrap-email -p \'emails/*\' -d emails/output'
+  opts.separator '  bootstrap-email -p \'emails/*\' -d emails/compiled'
   opts.separator '  bootstrap-email -p \'views/emails/*\' -d \'views/compiled_emails\''
   opts.separator '  cat input.html | bootstrap-email'
   opts.separator ''
@@ -37,7 +36,7 @@ parser = OptionParser.new do |opts|
     options[:destination] = v
   end
 
-  opts.on('-c', '--config STRING', String, 'Relative path to SCSS config config file to customize Bootstrap Email.') do |v|
+  opts.on('-c', '--config STRING', String, 'Relative path to ruby config file to customize Bootstrap Email.') do |v|
     options[:config] = File.expand_path(v, Dir.pwd)
   end
 
@@ -76,14 +75,15 @@ if input
 
       puts "Compiling file #{path}"
       compiled = BootstrapEmail::Compiler.new(path, type: :file, options: {config_path: options[:config]}).perform_full_compile
-      FileUtils.mkdir_p("#{Dir.pwd}/#{options[:destination]}")
-      File.write(File.expand_path("#{options[:destination]}/#{path.split('/').last}", Dir.pwd), compiled)
+      destination = options[:destination].chomp('/*')
+      FileUtils.mkdir_p("#{Dir.pwd}/#{destination}")
+      File.write(File.expand_path("#{destination}/#{path.split('/').last}", Dir.pwd), compiled)
     end
   when :file
     path = File.expand_path(input, Dir.pwd)
-    puts BootstrapEmail::Compiler.new(File.join(Dir.pwd, path), type: :file, options: {config_path: options[:config]}).perform_full_compile
+    puts BootstrapEmail::Compiler.new(path, type: :file, options: {config_path: options[:config], sass_log_enabled: false}).perform_full_compile
   when :string
-    puts BootstrapEmail::Compiler.new(input, options: {config_path: options[:config]}).perform_full_compile
+    puts BootstrapEmail::Compiler.new(input, options: {config_path: options[:config], sass_log_enabled: false}).perform_full_compile
   end
 else
   puts opts

data/lib/bootstrap-email/compiler.rb

@@ -3,6 +3,7 @@ module BootstrapEmail
     attr_accessor :type, :doc, :premailer
 
     def initialize(input, type: :string, options: {})
+      BootstrapEmail.load_options(options)
       self.type = type
       case type
       when :rails
@@ -13,23 +14,36 @@ module BootstrapEmail
       when :file
         html = File.read(input)
       end
-      build_premailer_doc(html, options)
+      html = add_layout!(html)
+      sass_load_paths
+      build_premailer_doc(html)
     end
 
     def perform_full_compile
       compile_html!
       inline_css!
-      inject_head!
-      inject_comment!
+      configure_html!
       finalize_document!
     end
 
     private
 
-    def build_premailer_doc(html, options)
-      html = add_layout!(html)
-      SassC.load_paths << File.expand_path('../../core', __dir__)
-      css_string = BootstrapEmail::SassCache.compile('bootstrap-email', config_path: options[:config_path], style: :expanded)
+    def add_layout!(html)
+      document = Nokogiri::HTML(html)
+      return html unless document.at_css('head').nil?
+
+      BootstrapEmail::Erb.template(
+        File.expand_path('../../core/layout.html.erb', __dir__),
+        contents: html
+      )
+    end
+
+    def sass_load_paths
+      SassC.load_paths << BootstrapEmail.config.sass_load_paths
+    end
+
+    def build_premailer_doc(html)
+      css_string = BootstrapEmail::SassCache.compile('bootstrap-email', style: :expanded)
       self.premailer = Premailer.new(
         html,
         with_html_string: true,
@@ -39,80 +53,50 @@ module BootstrapEmail
       self.doc = premailer.doc
     end
 
-    def add_layout!(html)
-      document = Nokogiri::HTML(html)
-      return document.to_html unless document.at_css('head').nil?
+    def compile_html!
+      BootstrapEmail::Converter::Block.build(doc)
 
-      namespace = OpenStruct.new(contents: ERB.new(document.to_html).result)
-      template_html = File.read(File.expand_path('../../core/layout.html.erb', __dir__))
-      ERB.new(template_html).result(namespace.instance_eval { binding })
-    end
+      BootstrapEmail::Converter::Button.build(doc)
+      BootstrapEmail::Converter::Badge.build(doc)
+      BootstrapEmail::Converter::Alert.build(doc)
+      BootstrapEmail::Converter::Card.build(doc)
+      BootstrapEmail::Converter::Hr.build(doc)
+      BootstrapEmail::Converter::Container.build(doc)
+      BootstrapEmail::Converter::Grid.build(doc)
+      BootstrapEmail::Converter::Stack.build(doc)
 
-    def compile_html!
-      BootstrapEmail::Component::Button.build(doc)
-      BootstrapEmail::Component::Badge.build(doc)
-      BootstrapEmail::Component::Alert.build(doc)
-      BootstrapEmail::Component::Card.build(doc)
-      BootstrapEmail::Component::Paragraph.build(doc)
-      BootstrapEmail::Component::Hr.build(doc)
-      BootstrapEmail::Component::Container.build(doc)
-      BootstrapEmail::Component::Grid.build(doc)
-      BootstrapEmail::Component::Align.build(doc)
-      BootstrapEmail::Component::Color.build(doc)
-      BootstrapEmail::Component::Padding.build(doc)
-      BootstrapEmail::Component::Margin.build(doc)
-      BootstrapEmail::Component::Spacing.build(doc)
-      BootstrapEmail::Component::Spacer.build(doc)
-      BootstrapEmail::Component::Table.build(doc)
-      BootstrapEmail::Component::Body.build(doc)
+      BootstrapEmail::Converter::Spacing.build(doc)
+      BootstrapEmail::Converter::Padding.build(doc)
+      BootstrapEmail::Converter::Margin.build(doc)
+      BootstrapEmail::Converter::Spacer.build(doc)
+
+      BootstrapEmail::Converter::Table.build(doc)
+      BootstrapEmail::Converter::Body.build(doc)
+      BootstrapEmail::Converter::Align.build(doc)
+      BootstrapEmail::Converter::Color.build(doc)
+
+      BootstrapEmail::Converter::PreviewText.build(doc)
     end
 
     def inline_css!
       premailer.to_inline_css
     end
 
-    def inject_head!
-      doc.at_css('head').add_child(bootstrap_email_head)
-    end
-
-    def inject_comment!
-      doc.at_css('head').prepend_child(bootstrap_email_comment)
+    def configure_html!
+      BootstrapEmail::Converter::ForceEncoding.build(doc)
+      BootstrapEmail::Converter::HeadStyle.build(doc)
+      BootstrapEmail::Converter::VersionComment.build(doc)
     end
 
     def finalize_document!
+      html = BootstrapEmail::Converter::ForceEncoding.replace(doc.to_html)
       case type
       when :rails
-        (@mail.html_part || @mail).body = doc.to_html
+        (@mail.html_part || @mail).body = html
         @mail
       when :string, :file
-        doc.to_html
-      end
-    end
-
-    def bootstrap_email_head
-      html_string = <<-INLINE
-        <style type="text/css">
-          #{purged_css_from_head}
-        </style>
-      INLINE
-      html_string
-    end
-
-    def bootstrap_email_comment
-      "\n    <!-- Compiled with Bootstrap Email version: #{BootstrapEmail::VERSION} -->"
-    end
-
-    def purged_css_from_head
-      default, custom = BootstrapEmail::SassCache.compile('bootstrap-head').split('/*! allow_purge_after */')
-      # get each CSS declaration
-      custom.scan(/\w*\.[\w\-]*[\s\S\n]+?(?=})}{1}/).each do |group|
-        # get the first class for each comma separated CSS declaration
-        exist = group.scan(/(\.[\w\-]*).*?((,+?)|{+?)/).map(&:first).uniq.any? do |selector|
-          !doc.at_css(selector).nil?
-        end
-        custom.sub!(group, '') unless exist
+        html
       end
-      (default + custom).gsub(/\n\s*\n+/, "\n")
     end
   end
 end