bootstrap-email 0.3.0 → 1.0.0.alpha1

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/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,16 @@
+@each $prefix in $breakpoints {
+  @each $name, $property in $sizing-types {
+    @include sizing-util('.#{$name}-#{$prefix}full') {
+      max-#{$property}: 100%;
+      -premailer-#{$property}: 100%;
+      #{$property}: 100%;
+    }
+    @each $size, $value in $sizing {
+      @include sizing-util('.#{$name}-#{$prefix}#{$size}') {
+        max-#{$property}: $value;
+        -premailer-#{$property}: strip-unit($value);
+        #{$property}: 100%;
+      }
+    }
+  }
+}

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,54 @@
+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;
+  }
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+p {
+  width: 100%;
+  margin: 0;
+}

data/core/templates/col.html.erb

@@ -1,3 +1,3 @@
-<th class="<%= classes %>" align="left" valign="top">
+<td class="<%= classes %>" align="left" valign="top">
   <%= contents %>
-</th>
+</td>

data/core/templates/row.html.erb

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

data/lib/bootstrap-email/bootstrap_email_cli.rb

@@ -0,0 +1,91 @@
+require_relative '../bootstrap_email'
+require 'optparse'
+require 'fileutils'
+
+input = nil
+options = {
+  destination: 'output',
+  type: :file
+}
+
+parser = OptionParser.new do |opts|
+  opts.banner = "Bootstrap 5 stylesheet, compiler, and inliner for responsive and consistent emails with the Bootstrap syntax you know and love.\n\n"
+  opts.define_head 'Usage: bootstrap-email <path> [options]'
+  opts.separator ''
+  opts.separator 'Examples:'
+  opts.separator '  bootstrap-email'
+  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 \'views/emails/*\' -d \'views/compiled_emails\''
+  opts.separator '  cat input.html | bootstrap-email'
+  opts.separator ''
+  opts.separator 'Options:'
+
+  opts.on('-s', '--string STRING', String, 'HTML string to be to be compiled rather than a file.') do |v|
+    input = v
+    options[:type] = :string
+  end
+
+  opts.on('-p', '--pattern STRING', String, 'Specify a pattern of files to compile and save multiple files at once.') do |v|
+    input = v
+    options[:type] = :pattern
+  end
+
+  opts.on('-d', '--destination STRING', String, 'Destination for compiled files (used with the --pattern option).') do |v|
+    options[:destination] = v
+  end
+
+  opts.on('-c', '--config STRING', String, 'Relative path to SCSS config config file to customize Bootstrap Email.') do |v|
+    options[:config] = File.expand_path(v, Dir.pwd)
+  end
+
+  opts.on('-h', '--help', 'Prints this help') do
+    puts opts
+    exit
+  end
+
+  opts.on('-v', '--version', 'Show version') do
+    puts BootstrapEmail::VERSION
+    exit
+  end
+end
+parser.parse!
+
+if input
+  # input already set by pattern
+elsif ARGV.any?
+  # Executed via command line or shell script
+  input = ARGV.shift
+elsif !STDIN.tty?
+  # Called in piped command
+  input = STDIN.read
+  options[:type] = :string
+else
+  # Running just the blank command to compile all files in directory containing .html
+  input = '*.html*'
+  options[:type] = :pattern
+end
+
+if input
+  case options[:type]
+  when :pattern
+    Dir.glob(input, base: Dir.pwd).each do |path|
+      next unless File.file?(path)
+
+      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)
+    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
+  when :string
+    puts BootstrapEmail::Compiler.new(input, options: {config_path: options[:config]}).perform_full_compile
+  end
+else
+  puts opts
+  exit 1
+end

data/lib/bootstrap-email/compiler.rb

@@ -0,0 +1,118 @@
+module BootstrapEmail
+  class Compiler
+    attr_accessor :type, :doc, :premailer
+
+    def initialize(input, type: :string, options: {})
+      self.type = type
+      case type
+      when :rails
+        @mail = input
+        html = (@mail.html_part || @mail).body.raw_source
+      when :string
+        html = input
+      when :file
+        html = File.read(input)
+      end
+      build_premailer_doc(html, options)
+    end
+
+    def perform_full_compile
+      compile_html!
+      inline_css!
+      inject_head!
+      inject_comment!
+      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)
+      self.premailer = Premailer.new(
+        html,
+        with_html_string: true,
+        preserve_reset: false,
+        css_string: css_string
+      )
+      self.doc = premailer.doc
+    end
+
+    def add_layout!(html)
+      document = Nokogiri::HTML(html)
+      return document.to_html unless document.at_css('head').nil?
+
+      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
+
+    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)
+    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)
+    end
+
+    def finalize_document!
+      case type
+      when :rails
+        (@mail.html_part || @mail).body = doc.to_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
+      end
+      (default + custom).gsub(/\n\s*\n+/, "\n")
+    end
+  end
+end

data/lib/bootstrap-email/components/alert.rb

@@ -0,0 +1,11 @@
+module BootstrapEmail
+  module Component
+    class Alert < Base
+      def build
+        each_node('.alert') do |node|
+          node.replace(template('table', classes: node['class'], contents: node.delete('class') && node.to_html))
+        end
+      end
+    end
+  end
+end

data/lib/bootstrap-email/components/align.rb

@@ -0,0 +1,21 @@
+module BootstrapEmail
+  module Component
+    class Align < Base
+      def build
+       ['left', 'center', 'right'].each do |type|
+         each_node(".align-#{type}") do |node|
+           align_helper(node, type)
+         end
+       end
+      end
+
+      def align_helper(node, type)
+        if node.name != 'table'
+          node['class'] = node['class'].sub("align-#{type}", '')
+          node = node.replace(template('table', classes: "align-#{type}", contents: node.to_html))[0]
+        end
+        node['align'] = type
+      end
+    end
+  end
+end

data/lib/bootstrap-email/components/badge.rb

@@ -0,0 +1,11 @@
+module BootstrapEmail
+  module Component
+    class Badge < Base
+      def build
+        each_node('.badge') do |node|
+          node.replace(template('table-left', classes: node['class'], contents: node.delete('class') && node.to_html))
+        end
+      end
+    end
+  end
+end