bootstrap-email 1.3.1 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0af8d16392d189b851cad1448686b2fda2a322b61c0b98553090394a598d0b32
-  data.tar.gz: '009e81f356b5f8519113b32f44b1c82cac62692b1bf035b2449da4dea46e60a0'
+  metadata.gz: 04e71823407d63e303e4b0e02f8ba43ed5969a3b6156f4076de8953db61e9522
+  data.tar.gz: 2e88e162a938d9a785ef315cfc450425ca29f8d7f2725f99a7e8b1dde3986ac4
 SHA512:
-  metadata.gz: 2f2f9702d22b020da0968896dd7e3134a716c450492569fd3597676e4ad8305c340ba7abc26bd93b6d0b78b5f60de70a0d7bca2b0f310ccd15c73763e0bc3ca2
-  data.tar.gz: fd7db09c66be97a4082768c8b66025f714932dc356bac007033bb7f7a333d722d45caac63818cfca54344c23cf74bbd882045fc8cfeb11e2fef50217799a34a3
+  metadata.gz: f049857967b4afb28a04651661013f858b9892c204bda978f1b52b02489ea9b3e1cedb24445301f32b7c02a2fb15f53572cbd049388f0b7cede467ac932f393b
+  data.tar.gz: f9992f886d948d9f433c017202849a5895bce4c42d76759c9cac798240168b0a6dddddeed04d4c19cf402d760fd5f0ecf37431b836250471477fa10cb484f24c

data/VERSION

@@ -1 +1 @@
-1.3.1
+1.4.0

data/core/bootstrap-email.scss

@@ -1,9 +1,5 @@
-@import 'scss/functions';
-@import 'scss/colors';
+@import 'scss/helpers';
 @import 'scss/variables';
-@import 'scss/utilities';
-@import 'scss/selectors_for_utils';
-@import 'scss/helper_groups';
 @import 'scss/reboot_email';
 
 @import 'scss/components/alert';

data/core/bootstrap-head.scss

@@ -1,73 +1,23 @@
 //
 // This file will be placed in the head of the document and will not be inlined
 //
-@import 'scss/functions';
-@import 'scss/colors';
+@import 'scss/helpers';
 @import 'scss/variables';
-@import 'scss/utilities';
-@import 'scss/selectors_for_utils';
-@import 'scss/helper_groups';
 
-// Force base font in Outlook
-body, table, td {
-  font-family: $font-family-base !important;
-}
-
-// Forces Outlook.com to display emails at full width
-.ExternalClass {
-  width: 100%;
-}
-
-// Forces Outlook.com to display normal line spacing, here is more on that: http://www.emailonacid.com/forum/viewthread/43/
-.ExternalClass,
-.ExternalClass p,
-.ExternalClass span,
-.ExternalClass font,
-.ExternalClass td,
-.ExternalClass div {
-  line-height: 150%;
-}
-
-// Prevent Windows 10 Mail from underlining links. Styles for underlined links should be inlined
-a {
-  text-decoration: none;
-}
-
-// Inherit text color so color can be set on the body and inherited by children
-* {
-  color: inherit;
-}
-
-// Fix link colors set on automatic detection such as email addresses and phone numbers
-a[x-apple-data-detectors],
-u + #body a,
-#MessageViewBody a {
-  color: inherit;
-  text-decoration: none;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-}
-
-// Use a better rendering method when resizing images in Outlook IE.
-img {
-  -ms-interpolation-mode: bicubic;
-}
-
-// Prevent Outlook from adding extra spacing to tables.
-table:not([class^=s-]) {
-  font-family: $font-family-base;
-  mso-table-lspace: 0pt;
-  mso-table-rspace: 0pt;
-  border-spacing: 0px;
-  border-collapse: collapse;
-  td {
-    border-spacing: 0px;
-    border-collapse: collapse;
+@if $font-faces {
+  @each $font-face in $font-faces {
+    // @font-face has the least quirks in email clients: https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts
+    @font-face {
+      font-family: map-get($font-face, "font-family");
+      font-style: map-get($font-face, "font-style");
+      font-weight: map-get($font-face, "font-weight");
+      src: map-get($font-face, "src");
+    }
   }
 }
 
+@import 'scss/reboot_head';
+
 /*! allow_purge_after */
 
 @media screen and (max-width: 600px) {

data/core/scss/_helpers.scss

@@ -0,0 +1,3 @@
+@import 'helpers/functions';
+@import 'helpers/mixins';
+@import 'helpers/selectors_for_utils';

data/core/scss/_reboot_head.scss

@@ -0,0 +1,59 @@
+// Force base font in Outlook
+body, table, td {
+  font-family: $font-family-base !important;
+}
+
+// Forces Outlook.com to display emails at full width
+.ExternalClass {
+  width: 100%;
+}
+
+// Forces Outlook.com to display normal line spacing, here is more on that: http://www.emailonacid.com/forum/viewthread/43/
+.ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+  line-height: 150%;
+}
+
+// Prevent Windows 10 Mail from underlining links. Styles for underlined links should be inlined
+a {
+  text-decoration: none;
+}
+
+// Inherit text color so color can be set on the body and inherited by children
+* {
+  color: inherit;
+}
+
+// Fix link colors set on automatic detection such as email addresses and phone numbers
+a[x-apple-data-detectors],
+u + #body a,
+#MessageViewBody a {
+  color: inherit;
+  text-decoration: none;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+// Use a better rendering method when resizing images in Outlook IE.
+img {
+  -ms-interpolation-mode: bicubic;
+}
+
+// Prevent Outlook from adding extra spacing to tables.
+table:not([class^=s-]) {
+  font-family: $font-family-base;
+  mso-table-lspace: 0pt;
+  mso-table-rspace: 0pt;
+  border-spacing: 0px;
+  border-collapse: collapse;
+  td {
+    border-spacing: 0px;
+    border-collapse: collapse;
+  }
+}

data/core/scss/_variables.scss

@@ -1,52 +1,7 @@
-$font-size-base: 16px !default;
-$font-weight-base: normal !default;
-$font-family-sans-serif: Helvetica, Arial, sans-serif !default;
-$font-family-base: $font-family-sans-serif !default;
-$border-width: 1px !default;
-$line-height-base: 1.5 !default;
-$headings-line-height: 1.2 !default;
-$headings-margin-top:         0 !default;
-$headings-margin-bottom:      0 !default;
-$headings-font-family:        null !default;
-$headings-font-weight:        500 !default;
-$headings-color:              null !default;
-
-$border-color: $gray-300 !default;
-
-$border-radius-sm: 3px !default;
-$border-radius: 6px !default;
-$border-radius-lg: 9px !default;
-$border-radius-xl: 12px !default;
-$border-radius-pill: 9999px !default;
-
-$table-accent-bg: #f2f2f2 !default;
-$table-background-color: null !default;
-$table-border-color: $border-color !default;
-$table-border-width: $border-width !default;
-
-$body-color: $black !default;
-$body-bg: $white !default;
-
-$btn-padding-y:               8px !default;
-$btn-padding-x:               12px !default;
-$btn-font-family:             $font-family-base !default;
-$btn-font-size:               $font-size-base !default;
-$btn-line-height:             1.25 * $btn-font-size !default;
-
-$btn-padding-y-sm:            0.25 * $btn-font-size !default;
-$btn-padding-x-sm:            0.5 * $btn-font-size !default;
-$btn-font-size-sm:            0.875 * $btn-font-size !default;
-$btn-line-height-sm:          $btn-line-height * 0.875 !default;
-
-$btn-padding-y-lg:            0.5 * $btn-font-size !default;
-$btn-padding-x-lg:            $btn-font-size !default;
-$btn-font-size-lg:            1.25 * $btn-font-size !default;
-$btn-line-height-lg:          $btn-line-height * 1.25 !default;
-
-$btn-border-width:            $border-width !default;
-$btn-font-weight:             $font-weight-base !default;
-$btn-border-radius:           $border-radius !default;
-$btn-border-radius-lg:        $border-radius-lg !default;
-$btn-border-radius-sm:        $border-radius-sm !default;
-
-$link-color:                  $primary !default;
+@import 'variables/colors';
+@import 'variables/body';
+@import 'variables/typography';
+@import 'variables/borders';
+@import 'variables/tables';
+@import 'variables/buttons';
+@import 'variables/utilities';

data/core/scss/components/_button.scss

@@ -21,30 +21,14 @@
   white-space: nowrap;
 }
 
-@each $name, $color in $all-colors {
-  @if $name != "transparent" {
-    .btn-#{$name} td {
-      background-color: $color;
-    }
-    .btn-#{$name} td a {
-      background-color: $color;
-      @include color-contrast($color);
-      border-color: $color;
-    }
+@each $name, $theme in $btn-themes {
+  .btn-#{$name} td {
+    background-color: map-get($theme, "background-color");
   }
-}
-
-@each $name, $color in $all-colors {
-  @if $name != "transparent" {
-    .btn-outline-#{$name} td {
-      background-color: transparent;
-      border-color: $color;
-    }
-    .btn-outline-#{$name} td a {
-      background-color: transparent;
-      border-color: $color;
-      color: $color;
-    }
+  .btn-#{$name} td a {
+    background-color: map-get($theme, "background-color");
+    color: map-get($theme, "color");
+    border-color: map-get($theme, "border-color");
   }
 }
 

data/core/scss/{_functions.scss → helpers/_functions.scss}

@@ -1,4 +1,4 @@
-@mixin color-contrast($color) {
+@function color-contrast($color) {
   $r: red($color);
   $g: green($color);
   $b: blue($color);
@@ -6,9 +6,9 @@
   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
 
   @if ($yiq >= 150) {
-    color: #111111;
+    @return #111111;
   } @else {
-    color: $white;
+    @return $white;
   }
 }
 

data/core/scss/variables/_body.scss

@@ -0,0 +1,2 @@
+$body-color: $black !default;
+$body-bg: $white !default;

data/core/scss/variables/_borders.scss

@@ -0,0 +1,6 @@
+$border-color:       $gray-300 !default;
+$border-width:       1px !default;
+$border-radius-sm:   3px !default;
+$border-radius:      6px !default;
+$border-radius-lg:   9px !default;
+$border-radius-pill: 9999px !default;

data/core/scss/variables/_buttons.scss

@@ -0,0 +1,47 @@
+$btn-padding-y:               8px !default;
+$btn-padding-x:               12px !default;
+$btn-font-family:             $font-family-base !default;
+$btn-font-size:               $font-size-base !default;
+$btn-line-height:             1.25 * $btn-font-size !default;
+
+$btn-padding-y-sm:            0.25 * $btn-font-size !default;
+$btn-padding-x-sm:            0.5 * $btn-font-size !default;
+$btn-font-size-sm:            0.875 * $btn-font-size !default;
+$btn-line-height-sm:          $btn-line-height * 0.875 !default;
+
+$btn-padding-y-lg:            0.5 * $btn-font-size !default;
+$btn-padding-x-lg:            $btn-font-size !default;
+$btn-font-size-lg:            1.25 * $btn-font-size !default;
+$btn-line-height-lg:          $btn-line-height * 1.25 !default;
+
+$btn-border-width:            $border-width !default;
+$btn-font-weight:             $font-weight-base !default;
+$btn-border-radius:           $border-radius !default;
+$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius-sm:        $border-radius-sm !default;
+
+
+/** Button Theme Structure Example
+ *
+ * $btn-themes: (
+ *   "primary": (
+ *     "background-color": blue,
+ *     "color": white,
+ *     "border-color": blue
+ *   ),
+ *   "outline-primary": (
+ *     "background-color": transparent,
+ *     "color": blue,
+ *     "border-color": blue
+ *   )
+ * )
+*/
+$tmp-btn-themes: ();
+@each $name, $color in $all-colors {
+  @if $name != "transparent" {
+    $tmp-btn-themes: map-merge($tmp-btn-themes, ($name: ("background-color": $color, "color": color-contrast($color), "border-color": $color)));
+    $tmp-btn-themes: map-merge($tmp-btn-themes, ("outline-#{$name}": ("background-color": transparent, "color": $color, "border-color": $color)));
+  }
+}
+
+$btn-themes: $tmp-btn-themes !default;

data/core/scss/variables/_tables.scss

@@ -0,0 +1,4 @@
+$table-accent-bg:        #f2f2f2 !default;
+$table-background-color: null !default;
+$table-border-color:     $border-color !default;
+$table-border-width:     $border-width !default;

data/core/scss/variables/_typography.scss

@@ -0,0 +1,26 @@
+$font-size-base:         16px !default;
+$font-weight-base:       normal !default;
+$line-height-base:       1.5 !default;
+$headings-line-height:   1.2 !default;
+$headings-margin-top:    0 !default;
+$headings-margin-bottom: 0 !default;
+$headings-font-family:   null !default;
+$headings-font-weight:   500 !default;
+$headings-color:         null !default;
+$link-color:             $primary !default;
+
+/*
+**** Override the following variables to customize font or add web font ie: Google Fonts ****
+*/
+$font-family-base:       Helvetica, Arial, sans-serif !default;
+$font-faces:             null !default;
+// Example below:
+// $font-family-base: 'Anton', Helvetica, Arial, sans-serif;
+// $font-faces: (
+//   (
+//     "font-family": 'Anton',
+//     "font-style": normal,
+//     "font-weight": 400,
+//     "src": url(https://fonts.gstatic.com/s/anton/v23/1Ptgg87LROyAm3Kz-C8CSKlv.woff2) format('woff2')
+//   ),
+// );

data/lib/bootstrap-email/converters/head_style.rb

@@ -20,6 +20,7 @@ module BootstrapEmail
 
       def purged_css_from_head
         default, custom = BootstrapEmail::SassCache.compile('bootstrap-head', @config).split('/*! allow_purge_after */')
+        custom ||= ''
         # 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

data/lib/bootstrap-email/converters/support_url_tokens.rb

@@ -4,13 +4,15 @@ module BootstrapEmail
   module Converter
     class SupportUrlTokens < Base
       OPEN_BRACKETS = CGI.escape('{{').freeze
+      OPEN_PERCENT = (CGI.escape('{') + '%').freeze
       CLOSE_BRACKETS = CGI.escape('}}').freeze
+      CLOSE_PERCENT = ('%' + CGI.escape('}')).freeze
 
       def self.replace(html)
-        regex = /((href|src)=("|'))(.*?((#{Regexp.quote(OPEN_BRACKETS)}).*?(#{Regexp.quote(CLOSE_BRACKETS)})).*?)("|')/
+        regex = /((href|src)=("|'))(.*?((#{Regexp.quote(OPEN_BRACKETS)}|#{Regexp.quote(OPEN_PERCENT)}).*?(#{Regexp.quote(CLOSE_BRACKETS)}|#{Regexp.quote(CLOSE_PERCENT)})).*?)("|')/
         return unless regex.match?(html)
 
-        inner_regex = /((#{Regexp.quote(OPEN_BRACKETS)}).*?(#{Regexp.quote(CLOSE_BRACKETS)}))/
+        inner_regex = /((#{Regexp.quote(OPEN_BRACKETS)}|#{Regexp.quote(OPEN_PERCENT)}).*?(#{Regexp.quote(CLOSE_BRACKETS)}|#{Regexp.quote(CLOSE_PERCENT)}))/
 
         html.gsub!(regex) do |_match|
           start_text = Regexp.last_match(1)

data/lib/bootstrap-email/sass_cache.rb

@@ -22,8 +22,18 @@ module BootstrapEmail
 
     def compile
       cache_path = "#{cache_dir}/#{checksum}/#{type}.css"
-      compile_and_cache_scss(cache_path) unless cached?(cache_path)
-      File.read(cache_path)
+      lock_path = "#{cache_dir}/#{checksum}/#{type}.css.lock"
+      FileUtils.mkdir_p("#{cache_dir}/#{checksum}") unless File.directory?("#{cache_dir}/#{checksum}")
+
+      File.open(lock_path, File::RDWR | File::CREAT) do |lock_file|
+        lock_file.flock(File::LOCK_EX)
+
+        if cached?(cache_path)
+          File.read(cache_path)
+        else
+          compile_and_cache_scss(cache_path)
+        end
+      end
     end
 
     private
@@ -55,9 +65,9 @@ module BootstrapEmail
     def compile_and_cache_scss(cache_path)
       file = sass_config || File.read("#{file_path}.scss")
       css = SassC::Engine.new(file, style: style).render
-      FileUtils.mkdir_p("#{cache_dir}/#{checksum}") unless File.directory?("#{cache_dir}/#{checksum}")
       File.write(cache_path, css)
       puts "New css file cached for #{type}" if config.sass_log_enabled?
+      css
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap-email
 version: !ruby/object:Gem::Version
-  version: 1.3.1
+  version: 1.4.0
 platform: ruby
 authors:
 - Stuart Yamartino
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-07-11 00:00:00.000000000 Z
+date: 2023-01-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: htmlbeautifier
@@ -78,12 +78,9 @@ files:
 - core/bootstrap-email.scss
 - core/bootstrap-head.scss
 - core/layout.html.erb
-- core/scss/_colors.scss
-- core/scss/_functions.scss
-- core/scss/_helper_groups.scss
+- core/scss/_helpers.scss
 - core/scss/_reboot_email.scss
-- core/scss/_selectors_for_utils.scss
-- core/scss/_utilities.scss
+- core/scss/_reboot_head.scss
 - core/scss/_variables.scss
 - core/scss/components/_alert.scss
 - core/scss/components/_badge.scss
@@ -96,6 +93,9 @@ files:
 - core/scss/components/_preview.scss
 - core/scss/components/_stack.scss
 - core/scss/components/_table.scss
+- core/scss/helpers/_functions.scss
+- core/scss/helpers/_mixins.scss
+- core/scss/helpers/_selectors_for_utils.scss
 - core/scss/utilities/_background.scss
 - core/scss/utilities/_border-radius.scss
 - core/scss/utilities/_border.scss
@@ -106,6 +106,13 @@ files:
 - core/scss/utilities/_text-decoration.scss
 - core/scss/utilities/_typography.scss
 - core/scss/utilities/_valign.scss
+- core/scss/variables/_body.scss
+- core/scss/variables/_borders.scss
+- core/scss/variables/_buttons.scss
+- core/scss/variables/_colors.scss
+- core/scss/variables/_tables.scss
+- core/scss/variables/_typography.scss
+- core/scss/variables/_utilities.scss
 - core/templates/body.html
 - core/templates/container.html
 - core/templates/div.html