diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +# Revision history for mjml + +## 0.1.0.0 -- 2026-10-31 + +* First version. diff --git a/LICENSE b/LICENSE new file mode 100644 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 Kronor + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 --- /dev/null +++ b/README.md @@ -0,0 +1,67 @@ +# mjml + +Render [MJML](https://mjml.io) responsive email templates to HTML from Haskell, +without Node.js. + +MJML describes an email with a few components (sections, columns, text, +images, buttons) and compiles them to the nested tables, inline styles and +Outlook conditional comments that render the same in every mail client, with +columns that stack on phones. This package is a port of the reference +JavaScript implementation and produces the same HTML as MJML 5. To write +templates in Haskell with compile-time checks, see +[`mjml-hamlet`](https://github.com/kronor-io/mjml/tree/main/mjml-hamlet); for a full example with screenshots, see the +[repository README](https://github.com/kronor-io/mjml#readme). + +```haskell +import Data.Text.IO qualified as T +import Text.Mjml (defaultOptions, renderText) + +main :: IO () +main = + either print T.putStrLn $ + renderText defaultOptions + "\ + \ \ + \ \ + \ \ + \ Your order is on its way\ + \ Track it\ + \ \ + \ \ + \ \ + \" +``` + +## Escaping + +Like MJML, the renderer copies attribute values and the content of ending tags +(`mj-text`, `mj-button`, `mj-raw`, …) into the output as they are: they are +HTML source, not text. Escape anything that comes from user data before putting +it into a document. + +## Compatibility + +The output is compared with MJML 5.4.1 for the 155 documents in +`test/fixtures`. The comparison ignores whitespace, attribute order and the +order of CSS declarations, and nothing else. + +Not supported yet: + +* `mj-include`, which MJML also ignores unless asked to read files; +* inlining `` (the style is kept in the head); +* `mj-html-attributes`; +* minification and beautification. + +## Updating the fixtures + +The expected HTML is regenerated with the reference implementation: + +```sh +npm ci --prefix scripts +node scripts/update-fixtures.mjs +``` + +## License + +MIT. The fixture inputs come from [mrml](https://github.com/jdrouet/mrml), +also MIT; see `test/fixtures/NOTICE.md`. diff --git a/bench/Main.hs b/bench/Main.hs new file mode 100644 --- /dev/null +++ b/bench/Main.hs @@ -0,0 +1,72 @@ +-- | Rendering time for a typical email, and how it grows with the number of +-- rows and with the size of the text in a single element. Each pair of sizes +-- is 4× apart, so linear code takes about 4× as long for the larger one. +module Main (main) where + +import Data.Text (Text) +import Data.Text qualified as T +import Test.Tasty.Bench + +import Text.Mjml (defaultOptions, parseText, renderText) + + +main :: IO () +main = + defaultMain + [ bench "typical order confirmation" (nf render (rows 10)) + , bgroup + "rows" + [ bench "100" (nf render (rows 100)) + , bench "400" (nf render (rows 400)) + ] + , bgroup + "text content" + [ bench "50 KB" (nf render (bigText 50)) + , bench "200 KB" (nf render (bigText 200)) + ] + , bgroup + "parse only, text content" + [ bench "50 KB" (nf parse (bigText 50)) + , bench "200 KB" (nf parse (bigText 200)) + ] + ] + where + render = either (error . show) id . renderText defaultOptions + parse = either (error . show) (const ()) . parseText defaultOptions + + +-- | A receipt with a header, one grouped two-column row per item, a total and +-- a button. +rows :: Int -> Text +rows n = + T.concat $ + [ "Order" + , "" + , "" + , "" + , "Thanks!" + , "We have received your order." + ] + <> concat + [ [ "" + , "2 × Item number " + , T.pack (show i) + , "€18.00" + , "" + ] + | i <- [1 .. n] + ] + <> [ "" + , "" + , "Total €43.00" + , "Track your parcel" + , "" + ] + + +-- | One text element holding roughly this many kilobytes of HTML. +bigText :: Int -> Text +bigText kb = + "" + <> T.replicate (kb * 1024 `div` 64) "

Lorem ipsum dolor sit amet, consectetur adipiscing.

" + <> "" diff --git a/mjml.cabal b/mjml.cabal new file mode 100644 --- /dev/null +++ b/mjml.cabal @@ -0,0 +1,104 @@ +cabal-version: 3.0 +name: mjml +version: 0.1.0.0 +synopsis: Render MJML responsive email templates to HTML +description: + A Haskell implementation of the MJML email framework. It renders MJML + documents to the same HTML that the reference JavaScript implementation + produces, without Node.js at runtime. +license: MIT +license-file: LICENSE +author: José Lorenzo Rodríguez +maintainer: lorenzo@kronor.io +copyright: 2026 Kronor +category: Text, Web, Email +build-type: Simple +extra-doc-files: CHANGELOG.md + README.md +extra-source-files: test/fixtures/*.mjml + test/fixtures/*.html +tested-with: GHC ==9.10.3 || ==9.12.4 || ==9.14.1 + +common warnings + ghc-options: -Wall -Wcompat -Widentities -Wincomplete-record-updates + -Wincomplete-uni-patterns -Wredundant-constraints + +library + import: warnings + hs-source-dirs: src + default-language: GHC2021 + default-extensions: + OverloadedStrings + LambdaCase + MultiWayIf + DerivingStrategies + OverloadedRecordDot + DuplicateRecordFields + exposed-modules: + Text.Mjml + Text.Mjml.Node + Text.Mjml.Parser + Text.Mjml.Render + Text.Mjml.Js + Text.Mjml.Schema + other-modules: + Text.Mjml.Component.Accordion + Text.Mjml.Component.Body + Text.Mjml.Component.Button + Text.Mjml.Component.Carousel + Text.Mjml.Component.Column + Text.Mjml.Component.Divider + Text.Mjml.Component.Group + Text.Mjml.Component.Head + Text.Mjml.Component.Hero + Text.Mjml.Component.Image + Text.Mjml.Component.Navbar + Text.Mjml.Component.Raw + Text.Mjml.Component.Section + Text.Mjml.Component.Social + Text.Mjml.Component.Spacer + Text.Mjml.Component.Table + Text.Mjml.Component.Text + Text.Mjml.Component.Wrapper + Text.Mjml.Components + Text.Mjml.Skeleton + build-depends: + base >=4.20 && <5 + , containers >=0.6 && <0.9 + , text >=2.0 && <2.2 + , text-builder-linear >=0.1.3 && <0.2 + , transformers >=0.6 && <0.7 + +test-suite fixtures + import: warnings + type: exitcode-stdio-1.0 + hs-source-dirs: test + main-is: Main.hs + other-modules: HtmlCompare + default-language: GHC2021 + default-extensions: + OverloadedStrings + LambdaCase + DerivingStrategies + build-depends: + base + , containers + , directory >=1.3 && <1.4 + , filepath >=1.4 && <1.6 + , mjml + , text + +benchmark render + import: warnings + type: exitcode-stdio-1.0 + hs-source-dirs: bench + main-is: Main.hs + default-language: GHC2021 + default-extensions: + OverloadedStrings + ghc-options: -rtsopts + build-depends: + base + , mjml + , tasty-bench >=0.3 && <0.6 + , text diff --git a/src/Text/Mjml.hs b/src/Text/Mjml.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml.hs @@ -0,0 +1,98 @@ +-- | Render MJML documents to HTML. +-- +-- > renderText defaultOptions "Hello" +module Text.Mjml ( + -- * Rendering + renderText, + renderNode, + Options (..), + defaultOptions, + MjmlError (..), + -- * Documents + Node (..), + parseText, + -- * Components + Registry, + defaultRegistry, + endingTagNames, +) where + +import Data.Text (Text) +import Data.Text qualified as T +import Data.Text.Builder.Linear (runBuilder) + +import Text.Mjml.Component.Head (handleHead) +import Text.Mjml.Components (defaultRegistry, endingTagNames) +import Text.Mjml.Node (Node (..)) +import Text.Mjml.Parser (ParseError (..), parseMjml) +import Text.Mjml.Render +import Text.Mjml.Skeleton (skeleton) + + +data Options = Options + { components :: Registry + , webFonts :: [(Text, Text)] + -- ^ Web fonts imported when a @font-family@ in the output names them. + } + + +defaultOptions :: Options +defaultOptions = + Options + { components = defaultRegistry + , webFonts = + [ ("Open Sans", "https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700") + , ("Droid Sans", "https://fonts.googleapis.com/css?family=Droid+Sans:300,400,500,700") + , ("Lato", "https://fonts.googleapis.com/css?family=Lato:300,400,500,700") + , ("Roboto", "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700") + , ("Ubuntu", "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700") + ] + } + + +newtype MjmlError = MjmlError Text + deriving stock (Show, Eq) + + +parseText :: Options -> Text -> Either MjmlError Node +parseText opts src = case parseMjml (endingTagNames opts.components) src of + Left (ParseError e) -> Left (MjmlError e) + Right n -> Right n + + +renderText :: Options -> Text -> Either MjmlError Text +renderText opts src = parseText opts src >>= renderNode opts + + +-- | Render a parsed document, rooted at @mjml@. +renderNode :: Options -> Node -> Either MjmlError Text +renderNode opts root + | tagName root /= "mjml" = Left (MjmlError "Malformed MJML. Check that your structure is correct and enclosed in tags.") + | otherwise = case [c | c <- children root, tagName c == "mj-body"] of + [] -> Left (MjmlError "Malformed MJML. Check that your structure is correct and enclosed in tags.") + body : _ -> + let rootAttr k = lookup k (attributes root) + g0 = + (initialGlobalData opts.webFonts) + { lang = nonEmptyOr "und" (rootAttr "lang") + , dir = nonEmptyOr "auto" (rootAttr "dir") + , forceOWADesktop = rootAttr "owa" == Just "desktop" + } + go = do + mapM_ handleHead [c | c <- take 1 [h | h <- children root, tagName h == "mj-head"]] + mi <- instantiate opts.components "" [] rootProps [] body + maybe (pure "") render mi + (content', gd) = runR go g0 + beforeDoctype = + [ T.strip (content c) + | c <- children root + , tagName c == "mj-raw" + , lookup "position" (attributes c) == Just "file-start" + ] + prefix = if null beforeDoctype then "" else T.intercalate "\n" beforeDoctype <> "\n" + in Right (runBuilder (skeleton gd prefix (runBuilder content'))) + where + nonEmptyOr d = \case + Just v | not (T.null v) -> v + _ -> d + rootProps = Props 0 True True 1 1 [] diff --git a/src/Text/Mjml/Component/Accordion.hs b/src/Text/Mjml/Component/Accordion.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Accordion.hs @@ -0,0 +1,375 @@ +-- | @mj-accordion@ and its parts: @mj-accordion-element@, +-- @mj-accordion-title@ and @mj-accordion-text@. +module Text.Mjml.Component.Accordion ( + mjAccordion, + mjAccordionElement, + mjAccordionTitle, + mjAccordionText, +) where + +import Data.List (intersperse) +import Data.Map.Strict qualified as Map +import Data.Text (Text) +import Data.Text qualified as T + +import Text.Mjml.Component.Section (setContext) +import Text.Mjml.Node (Node (..), element) +import Text.Mjml.Render + + +-- | The attributes an accordion and each element hand down to their children. +childrenAttrNames :: [Text] +childrenAttrNames = + [ "border" + , "icon-align" + , "icon-width" + , "icon-height" + , "icon-position" + , "icon-wrapped-url" + , "icon-wrapped-alt" + , "icon-unwrapped-url" + , "icon-unwrapped-alt" + ] + + +childrenAttr :: Self -> Attrs +childrenAttr s = [(k, v) | k <- childrenAttrNames, Just v <- [attr s k]] + + +iconAttributes :: [(Text, Text)] +iconAttributes = + [ ("icon-align", "enum(top,middle,bottom)") + , ("icon-width", "unit(px,%)") + , ("icon-height", "unit(px,%)") + , ("icon-wrapped-url", "string") + , ("icon-wrapped-alt", "string") + , ("icon-unwrapped-url", "string") + , ("icon-unwrapped-alt", "string") + , ("icon-position", "enum(left,right)") + ] + + +paddingAttributes :: [(Text, Text)] +paddingAttributes = + [ ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("padding", "unit(px,%){1,4}") + ] + + +mjAccordion :: Component +mjAccordion = + (defComponent "mj-accordion" build') + { allowedAttributes = + [ ("container-background-color", "color") + , ("border", "string") + , ("font-family", "string") + ] + <> iconAttributes + <> paddingAttributes + , defaults = + [ ("border", "2px solid black") + , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif") + , ("icon-align", "middle") + , ("icon-wrapped-url", "https://i.imgur.com/bIXv1bk.png") + , ("icon-wrapped-alt", "+") + , ("icon-unwrapped-url", "https://i.imgur.com/w4uTygT.png") + , ("icon-unwrapped-alt", "-") + , ("icon-position", "right") + , ("icon-height", "32px") + , ("icon-width", "32px") + , ("padding", "10px 25px") + ] + , componentHeadStyle = Just (const accordionHeadStyle) + } + where + build' s = + let inst = + (defInstance s (render' inst)) + { getStyles = \case + "table" -> + [ style "width" "100%" + , style "border-collapse" "collapse" + , ("border", attr s "border") + , style "border-bottom" "none" + , ("font-family", attr s "font-family") + ] + _ -> [] + , childContext = setContext [("accordionFontFamily", attr s "font-family")] (context s) + } + in inst + + render' inst = do + kids <- renderChildren inst defChildOptions {childAttributes = childrenAttr (self inst)} + pure $ + mconcat + [ "" + , kids + , "" + ] + + +accordionHeadStyle :: Text +accordionHeadStyle = + T.unlines + [ "noinput.mj-accordion-checkbox { display:block!important; }" + , "@media yahoo, only screen and (min-width:0) {" + , " .mj-accordion-element { display:block; }" + , " .mj-accordion-checkbox[type=\"checkbox\"], .mj-accordion-less { display:none!important; }" + , " .mj-accordion-checkbox[type=\"checkbox\"] + * .mj-accordion-title { cursor:pointer; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; user-select:none; }" + , " .mj-accordion-checkbox[type=\"checkbox\"] + * .mj-accordion-content { overflow:hidden; display:none; }" + , " .mj-accordion-checkbox[type=\"checkbox\"] + * .mj-accordion-more { display:block!important; }" + , " .mj-accordion-checkbox:checked + * .mj-accordion-content { display:block; }" + , " .mj-accordion-checkbox:checked + * .mj-accordion-more { display:none!important; }" + , " .mj-accordion-checkbox:checked + * .mj-accordion-less { display:block!important; }" + , "}" + , ".moz-text-html input.mj-accordion-checkbox + * .mj-accordion-title { cursor: auto; touch-action: auto; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }" + , ".moz-text-html input.mj-accordion-checkbox + * .mj-accordion-content { overflow: hidden; display: block; }" + , ".moz-text-html input.mj-accordion-checkbox + * .mj-accordion-ico { display: none; }" + , "@goodbye { @gmail }" + ] + + +mjAccordionElement :: Component +mjAccordionElement = + (defComponent "mj-accordion-element" build') + { allowedAttributes = + [ ("background-color", "color") + , ("border", "string") + , ("font-family", "string") + ] + <> iconAttributes + } + where + build' s = + let inst = + (defInstance s (render' inst)) + { getStyles = \case + "td" -> [style "padding" "0px", ("background-color", attr s "background-color")] + "label" -> [style "font-size" "13px", ("font-family", attr s "font-family")] + "input" -> [style "display" "none"] + _ -> [] + , childContext = setContext [("elementFontFamily", attr s "font-family")] (context s) + } + in inst + + -- handleMissingChildren: a title or text left out is rendered empty, built + -- outside the tree with only the inherited attributes. + handleMissingChildren inst = do + let s = self inst + kids = children (node s) + inherited = childrenAttr s + has t = any ((== t) . tagName) kids + standalone c = + render . build c $ + Self + { attrs = defaults c `merge` inherited + , attrIndex = Map.fromList (defaults c `merge` inherited) + , props = Props 0 True True 0 0 [] + , context = childContext inst + , node = element (name c) [] [] + , registry = registry s + , component = c + , mjClassScope = mjClassScope s + } + title <- if has "mj-accordion-title" then pure [] else (: []) <$> standalone mjAccordionTitle + body <- renderChildren inst defChildOptions {childAttributes = inherited} + text <- if has "mj-accordion-text" then pure [] else (: []) <$> standalone mjAccordionText + pure (mconcat (intersperse "\n" (title <> [body] <> text))) + + render' inst = do + let s = self inst + inner <- handleMissingChildren inst + pure $ + mconcat + [ "" + , conditionalTag True $ + " htmlAttributes + inst + [ ("class", AV "mj-accordion-checkbox") + , ("type", AV "checkbox") + , ("style", AStyleOf "input") + ] + <> " />" + , "
" + , inner + , "
" + ] + + +-- | @resolveFontFamily@: the element's own @font-family@ when it set one, +-- otherwise the enclosing element's, otherwise the accordion's. +-- +-- MJML checks the attributes written on the element itself, so an +-- @mj-attributes@ default does not count as the element's own choice. +resolveFontFamily :: Self -> Maybe Text +resolveFontFamily s + | any ((== "font-family") . fst) (attributes (node s)) = attr s "font-family" + | truthy (ctx s "elementFontFamily") = ctx s "elementFontFamily" + | truthy (ctx s "accordionFontFamily") = ctx s "accordionFontFamily" + | otherwise = Nothing + + +mjAccordionTitle :: Component +mjAccordionTitle = + (defComponent "mj-accordion-title" build') + { endingTag = True + , allowedAttributes = + [ ("background-color", "color") + , ("color", "color") + , ("font-size", "unit(px)") + , ("font-family", "string") + , ("font-weight", "string") + ] + <> paddingAttributes + , defaults = [("font-size", "13px"), ("padding", "16px")] + } + where + build' s = + let inst = + (defInstance s (pure rendered)) + { getStyles = \case + "td" -> + [ style "width" "100%" + , ("background-color", attr s "background-color") + , ("color", attr s "color") + , ("font-size", attr s "font-size") + , ("font-family", resolveFontFamily s) + , ("font-weight", attr s "font-weight") + , ("padding", attr s "padding") + , ("padding-bottom", attr s "padding-bottom") + , ("padding-left", attr s "padding-left") + , ("padding-right", attr s "padding-right") + , ("padding-top", attr s "padding-top") + ] + "table" -> [style "width" "100%", ("border-bottom", attr s "border")] + "td2" -> + [ style "padding" "16px" + , ("background", attr s "background-color") + , ("vertical-align", attr s "icon-align") + ] + "img" -> + [ style "display" "none" + , ("width", attr s "icon-width") + , ("height", attr s "icon-height") + ] + _ -> [] + } + renderTitle = + " htmlAttributes inst [("class", maybe ANone AV (attr s "css-class")), ("style", AStyleOf "td")] + <> ">" + <> fromText (getContent s) + <> "" + renderIcons = + conditionalTag True $ + mconcat + [ "" + ] + elements = + if attr s "icon-position" == Just "right" + then [renderTitle, renderIcons] + else [renderIcons, renderTitle] + rendered = + mconcat + [ "" + , mconcat (intersperse "\n" elements) + , "" + ] + in inst + + +mjAccordionText :: Component +mjAccordionText = + (defComponent "mj-accordion-text" build') + { endingTag = True + , allowedAttributes = + [ ("background-color", "color") + , ("font-size", "unit(px)") + , ("font-family", "string") + , ("font-weight", "string") + , ("letter-spacing", "unitWithNegative(px,em)") + , ("line-height", "unit(px,%,)") + , ("color", "color") + ] + <> paddingAttributes + , defaults = [("font-size", "13px"), ("line-height", "1"), ("padding", "16px")] + } + where + build' s = + let inst = + (defInstance s (pure rendered)) + { getStyles = \case + "td" -> + [ ("background", attr s "background-color") + , ("font-size", attr s "font-size") + , ("font-family", resolveFontFamily s) + , ("font-weight", attr s "font-weight") + , ("letter-spacing", attr s "letter-spacing") + , ("line-height", attr s "line-height") + , ("color", attr s "color") + , ("padding", attr s "padding") + , ("padding-bottom", attr s "padding-bottom") + , ("padding-left", attr s "padding-left") + , ("padding-right", attr s "padding-right") + , ("padding-top", attr s "padding-top") + ] + "table" -> [style "width" "100%", ("border-bottom", attr s "border")] + _ -> [] + } + rendered = + mconcat + [ "" + , fromText (getContent s) + , "" + ] + in inst diff --git a/src/Text/Mjml/Component/Body.hs b/src/Text/Mjml/Component/Body.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Body.hs @@ -0,0 +1,72 @@ +-- | @mj-body@. +module Text.Mjml.Component.Body ( + mjBody, +) where + +import Control.Monad.Trans.State.Strict (get) +import Data.Text qualified as T + +import Text.Mjml.Render + + +mjBody :: Component +mjBody = + (defComponent "mj-body" build') + { allowedAttributes = + [ ("width", "unit(px)") + , ("background-color", "color") + , ("id", "string") + ] + , defaults = [("width", "600px")] + } + where + build' s = + let inst = + (defInstance s (render' inst)) + { getStyles = \case + "body" -> bodyStyles + "div" -> bodyStyles + _ -> [] + , childContext = merge (context s) [("containerWidth", attrOr s "width" "")] + } + in inst + where + bodyStyles = + [ style "word-spacing" "normal" + , ("background-color", attr s "background-color") + ] + + render' inst = do + let s = self inst + g <- get + kids <- renderChildren inst defChildOptions + let previewHtml + | T.null (preview g) = "" + | otherwise = + "
" + <> fromText (preview g) + <> "
" + pure $ + mconcat + [ "" + , previewHtml + , " [ ("aria-roledescription", AV "email") + , ("role", AV "article") + , ("lang", AV (lang g)) + , ("dir", AV (dir g)) + , ("style", AStyleOf "div") + ] + , ">" + , kids + , "" + ] diff --git a/src/Text/Mjml/Component/Button.hs b/src/Text/Mjml/Component/Button.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Button.hs @@ -0,0 +1,167 @@ +-- | @mj-button@. +module Text.Mjml.Component.Button ( + mjButton, +) where + + +import Text.Mjml.Js (showNumber) +import Text.Mjml.Render + + +mjButton :: Component +mjButton = + (defComponent "mj-button" build') + { endingTag = True + , allowedAttributes = + [ ("align", "enum(left,center,right)") + , ("background-color", "color") + , ("border-bottom", "string") + , ("border-left", "string") + , ("border-radius", "string") + , ("border-right", "string") + , ("border-top", "string") + , ("border", "string") + , ("color", "color") + , ("container-background-color", "color") + , ("font-family", "string") + , ("font-size", "unit(px)") + , ("font-style", "string") + , ("font-weight", "string") + , ("height", "unit(px,%)") + , ("href", "string") + , ("name", "string") + , ("title", "string") + , ("inner-padding", "unit(px,%){1,4}") + , ("letter-spacing", "unitWithNegative(px,em)") + , ("line-height", "unit(px,%,)") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("padding", "unit(px,%){1,4}") + , ("rel", "string") + , ("target", "string") + , ("text-decoration", "string") + , ("text-transform", "string") + , ("vertical-align", "enum(top,bottom,middle)") + , ("text-align", "enum(left,right,center)") + , ("width", "unit(px,%)") + ] + , defaults = + [ ("align", "center") + , ("background-color", "#414141") + , ("border", "none") + , ("border-radius", "3px") + , ("color", "#ffffff") + , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif") + , ("font-size", "13px") + , ("font-weight", "normal") + , ("inner-padding", "10px 25px") + , ("line-height", "120%") + , ("padding", "10px 25px") + , ("target", "_blank") + , ("text-decoration", "none") + , ("text-transform", "none") + , ("vertical-align", "middle") + ] + } + + +build' :: Self -> Instance +build' s = inst + where + inst = (defInstance s (pure rendered)) {getStyles = stylesFor} + + stylesFor = \case + "table" -> + [ style "border-collapse" "separate" + , ("width", attr s "width") + , style "line-height" "100%" + ] + "td" -> + [ ("border", attr s "border") + , ("border-bottom", attr s "border-bottom") + , ("border-left", attr s "border-left") + , ("border-radius", attr s "border-radius") + , ("border-right", attr s "border-right") + , ("border-top", attr s "border-top") + , style "cursor" "auto" + , ("font-style", attr s "font-style") + , ("height", attr s "height") + , ("mso-padding-alt", attr s "inner-padding") + , ("text-align", attr s "text-align") + , ("background", attr s "background-color") + ] + "content" -> + [ style "display" "inline-block" + , ("width", calculateAWidth (attr s "width")) + , ("background", attr s "background-color") + , ("color", attr s "color") + , ("font-family", attr s "font-family") + , ("font-size", attr s "font-size") + , ("font-style", attr s "font-style") + , ("font-weight", attr s "font-weight") + , ("line-height", attr s "line-height") + , ("letter-spacing", attr s "letter-spacing") + , style "margin" "0" + , ("text-decoration", attr s "text-decoration") + , ("text-transform", attr s "text-transform") + , ("padding", attr s "inner-padding") + , style "mso-padding-alt" "0px" + , ("border-radius", attr s "border-radius") + ] + _ -> [] + + calculateAWidth = \case + Just width + | truthy (Just width) -> + let (parsed, unit) = widthParser True width + innerPaddings = shorthandValue s "inner-padding" "left" + shorthandValue s "inner-padding" "right" + in if unit /= "px" + then Nothing + else Just (showNumber (parsed - innerPaddings - borders (boxWidths s)) <> "px") + _ -> Nothing + + tag = if truthy (attr s "href") then "a" else "p" + + rendered = + mconcat + [ " ANone + v -> maybe ANone AV v + ) + , ("role", AV "presentation") + , ("style", AStyleOf "td") + , ("valign", maybe ANone AV (attr s "vertical-align")) + ] + , "><" + , tag + , htmlAttributes + inst + [ ("href", maybe ANone AV (attr s "href")) + , ("name", maybe ANone AV (attr s "name")) + , ("rel", maybe ANone AV (attr s "rel")) + , ("title", maybe ANone AV (attr s "title")) + , ("style", AStyleOf "content") + , ("target", if tag == "a" then maybe ANone AV (attr s "target") else ANone) + ] + , ">" + , fromText (getContent s) + , "" + ] diff --git a/src/Text/Mjml/Component/Carousel.hs b/src/Text/Mjml/Component/Carousel.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Carousel.hs @@ -0,0 +1,444 @@ +-- | @mj-carousel@ and @mj-carousel-image@. +module Text.Mjml.Component.Carousel ( + mjCarousel, + mjCarouselImage, +) where + +import Data.Maybe (fromMaybe) +import Data.Text (Text) +import Data.Text qualified as T + +import Text.Mjml.Component.Section (setContext) +import Text.Mjml.Js (parseIntJs, showNumber) +import Text.Mjml.Node (Node (..)) +import Text.Mjml.Render + + +-- | The identifier MJML draws at random in the carousel's constructor, kept +-- in the instance's props. +carouselIdKey :: Text +carouselIdKey = "mj-carousel-id" + + +-- | Which of the image's methods the carousel is calling: MJML renders the +-- same children three times, through @renderRadio@, @renderThumbnail@ and +-- @render@. +imageModeKey :: Text +imageModeKey = "mj-carousel-render" + + +tshow :: Int -> Text +tshow = T.pack . show + + +mjCarousel :: Component +mjCarousel = + (defComponent "mj-carousel" build') + { allowedAttributes = + [ ("align", "enum(left,center,right)") + , ("border-radius", "string") + , ("container-background-color", "color") + , ("icon-width", "unit(px,%)") + , ("left-icon", "string") + , ("padding", "unit(px,%){1,4}") + , ("padding-top", "unit(px,%)") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("right-icon", "string") + , ("thumbnails", "enum(visible,hidden,supported)") + , ("tb-border", "string") + , ("tb-border-radius", "string") + , ("tb-hover-border-color", "color") + , ("tb-selected-border-color", "color") + , ("tb-width", "unit(px,%)") + ] + , defaults = + [ ("align", "center") + , ("border-radius", "6px") + , ("icon-width", "44px") + , ("left-icon", "https://i.imgur.com/xTh3hln.png") + , ("right-icon", "https://i.imgur.com/os7o9kz.png") + , ("thumbnails", "visible") + , ("tb-border", "2px solid transparent") + , ("tb-border-radius", "6px") + , ("tb-hover-border-color", "#fead0d") + , ("tb-selected-border-color", "#ccc") + ] + , prepare = \s -> do + i <- nextId + pure s {props = (props s) {extra = merge (extra (props s)) [(carouselIdKey, i)]}} + } + where + build' s = inst + where + carouselId = fromMaybe "" (lookup carouselIdKey (extra (props s))) + kids = children (node s) + len = length kids + a = attrOr s + + inst = + (defInstance s render') + { getStyles = \case + "carousel.div" -> + [ style "display" "table" + , style "width" "100%" + , style "table-layout" "fixed" + , style "text-align" "center" + , style "font-size" "0px" + ] + "carousel.table" -> + [ style "caption-side" "top" + , style "display" "table-caption" + , style "table-layout" "fixed" + , style "width" "100%" + ] + "images.td" -> [style "padding" "0px"] + "controls.div" -> [style "display" "none", style "mso-hide" "all"] + "controls.img" -> + [style "display" "block", ("width", attr s "icon-width"), style "height" "auto"] + "controls.td" -> + [ style "font-size" "0px" + , style "display" "none" + , style "mso-hide" "all" + , style "padding" "0px" + ] + _ -> [] + , childContext = setContext [("thumbnails", attr s "thumbnails")] (context s) + , instanceHeadStyle = Just (const headStyle') + } + + -- With no parent width in the context MJML's division is NaN, which + -- lodash's min skips, so the default is always 110px. + thumbnailsWidth + | len == 0 = "0" + | otherwise = case attr s "tb-width" of + Just w | truthy (Just w) -> w + _ -> "110px" + + modeOptions mode = defChildOptions {childProps = [(imageModeKey, mode)]} + + generateRadios = + renderChildren + inst + (modeOptions "radio") {childAttributes = [("carouselId", carouselId)]} + + generateThumbnails + | a "thumbnails" "" `notElem` ["visible", "supported"] = pure "" + | otherwise = + renderChildren + inst + (modeOptions "thumbnail") + { childAttributes = + [ ("tb-border", a "tb-border" "") + , ("tb-border-radius", a "tb-border-radius" "") + , ("tb-width", thumbnailsWidth) + , ("carouselId", carouselId) + ] + } + + generateControls direction icon = + mconcat + [ " carouselId <> "-icons-cell")) + , ("style", AStyleOf "controls.td") + ] + , "> direction <> "-icons")) + , ("style", AStyleOf "controls.div") + ] + , ">" + , mconcat + [ mconcat + [ " carouselId <> "-radio-" <> tshow i)) + , ("class", AV ("mj-carousel-" <> direction <> " mj-carousel-" <> direction <> "-" <> tshow i)) + ] + , ">" + ] + | i <- [1 .. len] + ] + , "" + ] + + generateImages = do + images <- renderChildren inst defChildOptions {childAttributes = borderRadius} + pure $ + mconcat + [ "" + , images + , "" + ] + + borderRadius = [("border-radius", a "border-radius" "")] + + generateCarousel = do + images <- generateImages + pure $ + mconcat + [ "" + , generateControls "previous" (attr s "left-icon") + , images + , generateControls "next" (attr s "right-icon") + , "" + ] + + renderFallback = case kids of + [] -> pure "" + k : _ -> + msoConditionalTag False + <$> renderChildren inst defChildOptions {childNodes = Just [k], childAttributes = borderRadius} + + render' = do + radios <- generateRadios + thumbnails <- generateThumbnails + carousel <- generateCarousel + fallback <- renderFallback + pure $ + msoConditionalTag + True + ( mconcat + [ "" + , radios + , " carouselId <> "-content")) + , ("style", AStyleOf "carousel.div") + ] + , ">" + , thumbnails + , carousel + , "" + ] + ) + <> fallback + + -- componentHeadStyle + headStyle' + | len == 0 = "" + | otherwise = carouselCss <> "\n" <> fallbackCss + cid = carouselId + rep str n = T.replicate (max 0 n) str + range = [0 .. len - 1] + selectorList f = T.intercalate "," (map f range) + carouselCss = + T.unlines + [ ".mj-carousel { -webkit-user-select: none; -moz-user-select: none; user-select: none; }" + , ".mj-carousel-" <> cid <> "-icons-cell { display: table-cell !important; width: " <> a "icon-width" "" <> " !important; }" + , ".mj-carousel-radio, .mj-carousel-next, .mj-carousel-previous { display: none !important; }" + , ".mj-carousel-thumbnail, .mj-carousel-next, .mj-carousel-previous { touch-action: manipulation; }" + , selectorList (\i -> ".mj-carousel-" <> cid <> "-radio:checked " <> rep "+ * " i <> "+ .mj-carousel-content .mj-carousel-image") + <> " { display: none !important; }" + , selectorList (\i -> radioChecked i <> "+ .mj-carousel-content .mj-carousel-image-" <> tshow (i + 1)) + <> " { display: block !important; }" + , ".mj-carousel-previous-icons,\n.mj-carousel-next-icons,\n" + <> selectorList (\i -> radioChecked i <> "+ .mj-carousel-content .mj-carousel-next-" <> tshow ((i + (1 `mod` len) + len) `mod` len + 1)) + <> ",\n" + <> selectorList (\i -> radioChecked i <> "+ .mj-carousel-content .mj-carousel-previous-" <> tshow ((i - (1 `mod` len) + len) `mod` len + 1)) + <> " { display: block !important; }" + , selectorList (\i -> radioChecked i <> "+ .mj-carousel-content .mj-carousel-" <> cid <> "-thumbnail-" <> tshow (i + 1)) + <> " { border-color: " + <> a "tb-selected-border-color" "" + <> " !important; }" + , selectorList (\i -> radioChecked i <> "+ .mj-carousel-content .mj-carousel-" <> cid <> "-thumbnail\n ") + <> " { display: inline-block !important; }" + , ".mj-carousel-image img + div, .mj-carousel-thumbnail img + div { display: none !important; }" + , selectorList (\i -> ".mj-carousel-" <> cid <> "-thumbnail:hover " <> rep "+ * " (len - i - 1) <> "+ .mj-carousel-main .mj-carousel-image") + <> " { display: none !important; }" + , ".mj-carousel-thumbnail:hover { border-color: " <> a "tb-hover-border-color" "" <> " !important; }" + , selectorList (\i -> ".mj-carousel-" <> cid <> "-thumbnail-" <> tshow (i + 1) <> ":hover " <> rep "+ * " (len - i - 1) <> "+ .mj-carousel-main .mj-carousel-image-" <> tshow (i + 1)) + <> " { display: block !important; }" + ] + radioChecked i = ".mj-carousel-" <> cid <> "-radio-" <> tshow (i + 1) <> ":checked " <> rep "+ * " (len - i - 1) + fallbackCss = + T.unlines + [ ".mj-carousel noinput { display:block !important; }" + , ".mj-carousel noinput .mj-carousel-image-1 { display: block !important; }" + , ".mj-carousel noinput .mj-carousel-arrows, .mj-carousel noinput .mj-carousel-thumbnails { display: none !important; }" + , "[owa] .mj-carousel-thumbnail { display: none !important; }" + , "@media screen yahoo {" + , ".mj-carousel-" <> cid <> "-icons-cell, .mj-carousel-previous-icons, .mj-carousel-next-icons { display: none !important; }" + , ".mj-carousel-" <> cid <> "-radio-1:checked " <> rep "+ *" (len - 1) <> "+ .mj-carousel-content .mj-carousel-" <> cid <> "-thumbnail-1 { border-color: transparent; }" + , "}" + ] + + +mjCarouselImage :: Component +mjCarouselImage = + (defComponent "mj-carousel-image" build') + { endingTag = True + , allowedAttributes = + [ ("alt", "string") + , ("href", "string") + , ("rel", "string") + , ("target", "string") + , ("title", "string") + , ("src", "string") + , ("thumbnails-src", "string") + , ("border-radius", "string") + , ("tb-border", "string") + , ("tb-border-radius", "string") + ] + , defaults = [("alt", ""), ("target", "_blank")] + } + where + build' s = inst + where + p = props s + i = index p + imgIndex = tshow (i + 1) + containerWidth = fromMaybe "" (ctx s "containerWidth") + carouselId = attrOr s "carouselId" "" + opt k = maybe ANone AV (attr s k) + + hasThumbnailsSupported = + let thumbnails = case attr s "thumbnails" of + Just t | truthy (Just t) -> Just t + _ -> ctx s "thumbnails" + in thumbnails == Just "supported" + + inst = + (defInstance s render') + { getStyles = \case + "images.img" -> + [ ("border-radius", attr s "border-radius") + , style "display" "block" + , style "width" containerWidth + , style "max-width" "100%" + , style "height" "auto" + ] + "images.firstImageDiv" -> [] + "images.otherImageDiv" -> [style "display" "none", style "mso-hide" "all"] + "radio.input" -> [style "display" "none", style "mso-hide" "all"] + "thumbnails.a" -> + [ ("border", attr s "tb-border") + , ("border-radius", attr s "tb-border-radius") + , style "display" (if hasThumbnailsSupported then "none" else "inline-block") + , style "overflow" "hidden" + , ("width", attr s "tb-width") + ] + "thumbnails.img" -> [style "display" "block", style "width" "100%", style "height" "auto"] + _ -> [] + } + + render' = pure $ case lookup imageModeKey (extra p) of + Just "radio" -> renderRadio + Just "thumbnail" -> renderThumbnail + _ -> renderImage + + renderThumbnail = + mconcat + [ " imgIndex)) + , ("target", opt "target") + , ( "class" + , AV + ( "mj-carousel-thumbnail mj-carousel-" + <> carouselId + <> "-thumbnail mj-carousel-" + <> carouselId + <> "-thumbnail-" + <> imgIndex + <> " " + <> suffixCssClasses (attr s "css-class") "thumbnail" + ) + ) + ] + , "> carouselId <> "-radio-" <> imgIndex))] + , "> AV t + _ -> opt "src" + ) + , ("alt", opt "alt") + , ("width", AV (showNumber (parseIntJs (attrOr s "tb-width" "")))) + ] + , " />" + ] + + renderRadio = + " htmlAttributes + inst + [ ("class", AV ("mj-carousel-radio mj-carousel-" <> carouselId <> "-radio mj-carousel-" <> carouselId <> "-radio-" <> imgIndex)) + , ("checked", if i == 0 then AV "checked" else ANone) + , ("type", AV "radio") + , ("name", AV ("mj-carousel-radio-" <> carouselId)) + , ("id", AV ("mj-carousel-" <> carouselId <> "-radio-" <> imgIndex)) + , ("style", AStyleOf "radio.input") + ] + <> " />" + + renderImage = + let image = + " htmlAttributes + inst + [ ("title", opt "title") + , ("src", opt "src") + , ("alt", opt "alt") + , ("style", AStyleOf "images.img") + , ("width", AV (showNumber (parseIntJs containerWidth))) + , ("border", AV "0") + ] + <> " />" + cssClass = attrOr s "css-class" "" + in mconcat + [ " imgIndex <> " " <> cssClass)) + , ("style", AStyleOf (if i == 0 then "images.firstImageDiv" else "images.otherImageDiv")) + ] + , ">" + , case attr s "href" of + Just href + | truthy (Just href) -> + " htmlAttributes inst [("href", AV href), ("rel", opt "rel"), ("target", AV "_blank")] + <> ">" + <> image + <> "" + _ -> image + , "" + ] diff --git a/src/Text/Mjml/Component/Column.hs b/src/Text/Mjml/Component/Column.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Column.hs @@ -0,0 +1,358 @@ +-- | @mj-column@. +module Text.Mjml.Component.Column ( + mjColumn, +) where + +import Data.Maybe (fromMaybe, isJust) +import Data.Text (Text) +import Data.Text qualified as T + +import Text.Mjml.Component.Section (setContext) +import Text.Mjml.Js (parseFloatJs, parseIntJs, roundJs, showNumber, toFixedNumber) +import Text.Mjml.Render + + +mjColumn :: Component +mjColumn = + (defComponent "mj-column" build') + { allowedAttributes = + [ ("background-color", "color") + , ("border", "string") + , ("border-bottom", "string") + , ("border-left", "string") + , ("border-radius", "string") + , ("border-right", "string") + , ("border-top", "string") + , ("direction", "enum(ltr,rtl)") + , ("inner-background-color", "color") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("inner-border", "string") + , ("inner-border-bottom", "string") + , ("inner-border-left", "string") + , ("inner-border-radius", "string") + , ("inner-border-right", "string") + , ("inner-border-top", "string") + , ("padding", "unit(px,%){1,4}") + , ("vertical-align", "enum(top,bottom,middle)") + , ("width", "unit(px,%)") + ] + , defaults = [("direction", "ltr"), ("vertical-align", "top")] + } + + +normalizeUnitValue :: Double -> Double +normalizeUnitValue = toFixedNumber 6 + + +normalizePxValue :: Double -> Double +normalizePxValue = roundJs + + +formatPadding :: Double -> Double -> Double -> Double -> Text -> Text +formatPadding t r b l unit + | unit == "px" = T.unwords [showNumber (normalizePxValue x) <> "px" | x <- [t, r, b, l]] + | otherwise = T.unwords [showNumber (normalizeUnitValue x) <> unit | x <- [t, r, b, l]] + + +build' :: Self -> Instance +build' s = inst + where + p = props s + inst = + (defInstance s renderColumnOuter) + { getStyles = stylesFor + , childContext = setContext [("containerWidth", Just childWidth)] (context s) + } + + containerWidth = fromMaybe "" (ctx s "containerWidth") + isInGroup = truthy (ctx s "isInGroup") + direction = ctx s "direction" + + -- getChildContext + childWidth = + let bw = boxWidths s + innerBorders = borderValue s (Just "left") "inner-border" + borderValue s (Just "right") "inner-border" + allPaddings = paddings bw + borders bw + innerBorders + width = case attr s "width" of + Just w | truthy (Just w) -> w + _ -> showNumber (parseFloatJs containerWidth / fromIntegral (nonRawSiblings p)) <> "px" + (parsed, unit) = widthParser False width + in if unit == "%" + then showNumber (parseFloatJs containerWidth * parsed / 100 - allPaddings) <> "px" + else showNumber (parsed - allPaddings) <> "px" + + hasBorderRadius = nonEmpty (attr s "border-radius") + hasInnerBorderRadius = nonEmpty (attr s "inner-border-radius") + nonEmpty = \case + Just v -> not (T.null v) + Nothing -> False + + tableStyle = + [ ("background-color", attr s "background-color") + , ("border", attr s "border") + , ("border-bottom", attr s "border-bottom") + , ("border-left", attr s "border-left") + , ("border-radius", attr s "border-radius") + , ("border-right", attr s "border-right") + , ("border-top", attr s "border-top") + , ("vertical-align", attr s "vertical-align") + ] + `merge` [style "border-collapse" "separate" | hasBorderRadius] + + stylesFor = \case + "div" -> + [ style "font-size" "0px" + , style "text-align" "left" + , ("direction", attr s "direction") + , style "display" "inline-block" + , ("vertical-align", attr s "vertical-align") + , style "width" mobileWidth + ] + `merge` mobileGutterStyles + "table" -> + ( if hasGutter + then + [ ("background-color", attr s "inner-background-color") + , ("border", attr s "inner-border") + , ("border-bottom", attr s "inner-border-bottom") + , ("border-left", attr s "inner-border-left") + , ("border-radius", attr s "inner-border-radius") + , ("border-right", attr s "inner-border-right") + , ("border-top", attr s "inner-border-top") + ] + else tableStyle + ) + `merge` [style "border-collapse" "separate" | hasInnerBorderRadius] + "tdOutlook" -> + [("vertical-align", attr s "vertical-align"), style "width" widthAsPixel] + `merge` outlookGutterStyles + "gutter" -> + tableStyle + `merge` [ ("padding", attr s "padding") + , ("padding-top", attr s "padding-top") + , ("padding-right", attr s "padding-right") + , ("padding-bottom", attr s "padding-bottom") + , ("padding-left", attr s "padding-left") + ] + _ -> [] + + mobileWidth + | attr s "mobileWidth" /= Just "mobileWidth" = "100%" + | isInGroup && hasColumnGutter = + let (parsed, unit) = desktopWidth + in if unit == "%" + then showNumber parsed <> "%" + else showNumber (normalizeUnitValue (parsed / parseIntJs containerWidth * 100)) <> "%" + | otherwise = case attr s "width" of + Nothing -> showNumber (fromInteger (truncate (100 / fromIntegral (nonRawSiblings p) :: Double))) <> "%" + Just width -> + let (parsed, unit) = widthParser False width + in if unit == "%" + then width + else showNumber (normalizeUnitValue (parsed / parseIntJs containerWidth * 100)) <> "%" + + widthAsPixel = + let (parsed, unit) = widthParser False (parsedWidthString) + in if unit == "%" + then showNumber (normalizePxValue (parseFloatJs containerWidth * parsed / 100)) <> "px" + else showNumber (normalizePxValue parsed) <> "px" + + parsedWidth = + let width = case attr s "width" of + Just w | truthy (Just w) -> w + _ -> showNumber (100 / fromIntegral (nonRawSiblings p)) <> "%" + in widthParser False width + + parsedWidthString = let (v, u) = parsedWidth in showNumber v <> u + + hasColumnGutter = nonEmpty (ctx s "gutter") + + desktopWidth = + let (parsed, unit) = parsedWidth + in if not hasColumnGutter + then (if unit == "px" then normalizePxValue parsed else parsed, unit) + else + let gutter = normalizedGutterValue unit + siblings = fromIntegral (sibling p) + reduction = gutter * (siblings - 1) / siblings + reduced = max 0 (normalizeUnitValue (parsed - reduction)) + in if unit == "px" + then + let floorWidth = fromInteger (floor reduced) + fractional = reduced - floorWidth + extraPixels = max 0 (min siblings (roundJs (siblings * fractional))) + in (floorWidth + (if fromIntegral (index p) < extraPixels then 1 else 0), unit) + else (reduced, unit) + + normalizedGutterValue targetUnit = case ctx s "gutter" of + Just g + | truthy (Just g) -> + let (parsed, unit) = widthParser False g + in if + | unit == targetUnit -> parsed + | targetUnit == "%" && unit == "px" -> parsed / parseFloatJs containerWidth * 100 + | targetUnit == "px" && unit == "%" -> parseFloatJs containerWidth * parsed / 100 + | otherwise -> parsed + _ -> 0 + + desktopUnit = snd parsedWidth + + desktopGutterClassName = + let gutterUnit = desktopUnit + gutter = normalizedGutterValue gutterUnit + unitToken = if gutterUnit == "%" then "per" else gutterUnit + directionToken = if direction == Just "rtl" then "-rtl" else "" + normalized = if gutterUnit == "px" then normalizePxValue gutter else gutter + gutterToken = T.replace "." "-" (showNumber (normalizeUnitValue normalized)) + in mconcat + [ "mj-column-gutter-" + , T.pack (show (sibling p)) + , "-" + , T.pack (show (index p + 1)) + , "-" + , unitToken + , "-" + , gutterToken + , directionToken + ] + + desktopPaddingValues unit = + let gutter = normalizedGutterValue unit + normalized = if unit == "px" then normalizePxValue gutter else gutter + isPx = unit == "px" + halfLeading = if isPx then fromInteger (ceiling (normalized / 2)) else normalized / 2 + halfTrailing = if isPx then fromInteger (floor (normalized / 2)) else normalized / 2 + in if + | sibling p == 1 -> (0, 0, 0, 0) + | direction == Just "rtl" -> + (0, if isFirst p then 0 else halfTrailing, 0, if isLast p then 0 else halfLeading) + | otherwise -> + (0, if isLast p then 0 else halfLeading, 0, if isFirst p then 0 else halfTrailing) + + desktopPadding = + let (t, r, b, l) = desktopPaddingValues desktopUnit in formatPadding t r b l desktopUnit + + mobilePadding = + let half = normalizedGutterValue "%" / 2 + in formatPadding + (if isFirst p then 0 else half) + 0 + (if isLast p then 0 else half) + 0 + "%" + + mobileGutterStyles + | not hasColumnGutter = [] + | isInGroup = [style "padding" desktopPadding] + | otherwise = [style "padding" mobilePadding] + + outlookGutterStyles + | not hasColumnGutter = [] + | otherwise = let (t, r, b, l) = desktopPaddingValues "px" in [style "padding" (formatPadding t r b l "px")] + + hasGutter = any (isJust . attr s) ["padding", "padding-bottom", "padding-left", "padding-right", "padding-top"] + + columnClass = do + let (parsed, unit) = if hasColumnGutter then desktopWidth else parsedWidth + normalized = if unit == "px" then normalizePxValue parsed else parsed + classNb = T.replace "." "-" (showNumber normalized) + className = case unit of + "%" -> "mj-column-per-" <> classNb + _ -> "mj-column-px-" <> classNb + addMediaQuery className (Just (showNumber normalized, unit)) Nothing + if hasColumnGutter && not isInGroup + then addMediaQuery desktopGutterClassName Nothing (Just desktopPadding) + else pure () + pure className + + renderColumn = do + kids <- + renderChildren + inst + defChildOptions + { renderer = \c -> + if rawElement (component (self c)) + then render c + else do + body <- render c + let cs = self c + pure $ + mconcat + [ "" + , body + , "" + ] + } + pure $ + mconcat + [ "" + , kids + , "" + ] + + renderGutter = do + col <- renderColumn + pure $ + mconcat + [ " [("style", AStyles [style "border-collapse" "separate"]) | hasBorderRadius] + , ">" + , col + , "" + ] + + renderColumnOuter = do + defaultClass <- columnClass + let classesName = + T.unwords $ + [defaultClass] + <> [desktopGutterClassName | hasColumnGutter] + <> ["mj-outlook-group-fix"] + <> [c | Just c <- [attr s "css-class"], truthy (Just c)] + body <- if hasGutter then renderGutter else renderColumn + pure $ + " htmlAttributes inst [("class", AV classesName), ("style", AStyleOf "div")] + <> ">" + <> body + <> "" diff --git a/src/Text/Mjml/Component/Divider.hs b/src/Text/Mjml/Component/Divider.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Divider.hs @@ -0,0 +1,96 @@ +-- | @mj-divider@. +module Text.Mjml.Component.Divider ( + mjDivider, +) where + +import Data.Maybe (fromMaybe) +import Data.Text (Text) +import Data.Text qualified as T + +import Text.Mjml.Js (parseIntJs, showNumber) +import Text.Mjml.Render + + +mjDivider :: Component +mjDivider = + (defComponent "mj-divider" build') + { allowedAttributes = + [ ("border-color", "color") + , ("border-style", "string") + , ("border-width", "unit(px)") + , ("container-background-color", "color") + , ("padding", "unit(px,%){1,4}") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("width", "unit(px,%)") + , ("align", "enum(left,center,right)") + ] + , defaults = + [ ("border-color", "#000000") + , ("border-style", "solid") + , ("border-width", "4px") + , ("padding", "10px 25px") + , ("width", "100%") + , ("align", "center") + ] + } + + +build' :: Self -> Instance +build' s = inst + where + inst = (defInstance s (pure rendered)) {getStyles = stylesFor} + + computeAlign = case attr s "align" of + Just "left" -> "0px" + Just "right" -> "0px 0px 0px auto" + _ -> "0px auto" + + p = + [ style "border-top" (T.intercalate " " [fromMaybe "" (attr s ("border-" <> a)) | a <- ["style", "width", "color"]]) + , style "font-size" "1px" + , style "margin" computeAlign + , ("width", attr s "width") + ] + + stylesFor = \case + "p" -> p + "outlook" -> p `merge` [style "width" outlookWidth] + _ -> [] + + outlookWidth :: Text + outlookWidth = + let containerWidth = fromMaybe "" (ctx s "containerWidth") + paddingSize = shorthandValue s "padding" "left" + shorthandValue s "padding" "right" + width = fromMaybe "" (attr s "width") + (parsed, unit) = widthParser True width + in case unit of + "%" -> + let effectiveWidth = parseIntJs containerWidth - paddingSize + percentMultiplier = parseIntJs (showNumber parsed) / 100 + in showNumber (effectiveWidth * percentMultiplier) <> "px" + "px" -> width + _ -> showNumber (parseIntJs containerWidth - paddingSize) <> "px" + + rendered = + mconcat + [ "

" + , startConditionalTag + , " " + , endConditionalTag + ] diff --git a/src/Text/Mjml/Component/Group.hs b/src/Text/Mjml/Component/Group.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Group.hs @@ -0,0 +1,179 @@ +-- | @mj-group@: columns that stay side by side on mobile. +module Text.Mjml.Component.Group ( + mjGroup, +) where + +import Data.Maybe (fromMaybe) +import Data.Text qualified as T + +import Text.Mjml.Component.Section (setContext) +import Text.Mjml.Js (parseFloatJs, parseIntJs, showNumber) +import Text.Mjml.Node (Node (..)) +import Text.Mjml.Render + + +mjGroup :: Component +mjGroup = + (defComponent "mj-group" build') + { allowedAttributes = + [ ("background-color", "color") + , ("direction", "enum(ltr,rtl)") + , ("vertical-align", "enum(top,bottom,middle)") + , ("width", "unit(px,%)") + ] + , defaults = [("direction", "ltr")] + } + + +build' :: Self -> Instance +build' s = inst + where + p = props s + inst = + (defInstance s renderGroup) + { getStyles = stylesFor + , childContext = childCtx + } + + containerWidth = fromMaybe "" (ctx s "containerWidth") + + groupWidth = + let paddingSize = shorthandValue s "padding" "left" + shorthandValue s "padding" "right" + width = case attr s "width" of + Just w | truthy (Just w) -> w + _ -> showNumber (parseFloatJs containerWidth / fromIntegral (nonRawSiblings p)) <> "px" + (parsed, unit) = widthParser False width + in if unit == "%" + then showNumber (parseFloatJs containerWidth * parsed / 100 - paddingSize) <> "px" + else showNumber (parsed - paddingSize) <> "px" + + childCtx = + setContext + [ ("containerWidth", Just groupWidth) + , ("nonRawSiblings", Just (T.pack (show (length (children (node s)))))) + , ("isInGroup", Just "true") + , ("direction", attr s "direction") + ] + (context s) + + stylesFor = \case + "div" -> + [ style "font-size" "0" + , style "line-height" "0" + , style "text-align" "left" + , style "display" "inline-block" + , style "width" "100%" + , ("direction", attr s "direction") + , ("vertical-align", attr s "vertical-align") + , ("background-color", attr s "background-color") + ] + "tdOutlook" -> + [ ("vertical-align", attr s "vertical-align") + , style "width" widthAsPixel + ] + _ -> [] + + parsedWidth = + let width = case attr s "width" of + Just w | truthy (Just w) -> w + _ -> showNumber (100 / fromIntegral (nonRawSiblings p)) <> "%" + in widthParser False width + + widthAsPixel = + let (v, u) = parsedWidth + (parsed, unit) = widthParser False (showNumber v <> u) + in if unit == "%" + then showNumber (parseFloatJs containerWidth * parsed / 100) <> "px" + else showNumber parsed <> "px" + + columnClass = do + let (parsed, unit) = parsedWidth + nb = showNumber (parseIntJs (showNumber parsed)) + className = case unit of + "%" -> "mj-column-per-" <> nb + _ -> "mj-column-px-" <> nb + addMediaQuery className (Just (showNumber parsed, unit)) Nothing + pure className + + -- The Outlook cell width for a child: a column's pixel width, or its + -- width attribute. + elementWidth = \case + Nothing -> showNumber (parseIntJs containerWidth / parseIntJs (T.pack (show (nonRawSiblings p)))) <> "px" + Just width -> + let (parsed, unit) = widthParser False width + in if unit == "%" + -- MJML divides by the group width string, which is not a number. + then showNumber (100 * parsed / (0 / 0)) <> "px" + else showNumber parsed <> unit + + childWidth c + | name (component (self c)) == "mj-column" = lookup "width" (getStyles c "tdOutlook") >>= id + | otherwise = attr (self c) "width" + + renderGroup = do + cls <- columnClass + let classesName = + T.unwords $ + [cls, "mj-outlook-group-fix"] + <> [c | Just c <- [attr s "css-class"], truthy (Just c)] + kids <- + renderChildren + inst + defChildOptions + { childAttributes = [("mobileWidth", "mobileWidth")] + , renderer = \c -> + if rawElement (component (self c)) + then render c + else do + body <- render c + let width = case childWidth c of + Just w | not (T.null w) -> Just w + _ -> Nothing + pure $ + mconcat + [ startConditionalTag + , "" + , endConditionalTag + , body + , startConditionalTag + , "" + , endConditionalTag + ] + } + let bgcolor = case attr s "background-color" of + Just "none" -> ANone + v -> maybe ANone AV v + pure $ + mconcat + [ "" + , startConditionalTag + , "" + , endConditionalTag + , kids + , startConditionalTag + , "" + , endConditionalTag + , "" + ] diff --git a/src/Text/Mjml/Component/Head.hs b/src/Text/Mjml/Component/Head.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Head.hs @@ -0,0 +1,64 @@ +-- | The @mj-head@ elements. None of them render anything in place: each +-- records something in 'GlobalData' for the skeleton and the body to use. +module Text.Mjml.Component.Head ( + handleHead, +) where + +import Control.Monad.Trans.State.Strict (modify') +import Data.Map.Strict qualified as Map +import Data.Maybe (fromMaybe) +import Data.Text qualified as T + +import Text.Mjml.Node (Node (..)) +import Text.Mjml.Render + + +-- | @mj-head@'s handler: run each child's handler in order. +handleHead :: Node -> R () +handleHead headNode = mapM_ one (children headNode) + where + one n = case tagName n of + "mj-attributes" -> mapM_ attribute (children n) + "mj-breakpoint" -> + mapM_ (\w -> modify' (\g -> g {breakpoint = w})) (lookup "width" (attributes n)) + "mj-font" -> + let fname = fromMaybe "" (lookup "name" (attributes n)) + href = fromMaybe "" (lookup "href" (attributes n)) + in modify' (\g -> g {fonts = merge (fonts g) [(fname, href)]}) + "mj-preview" -> modify' (\g -> g {preview = T.strip (content n)}) + "mj-title" -> modify' (\g -> g {title = T.strip (content n)}) + "mj-style" + | lookup "inline" (attributes n) == Just "inline" -> + modify' (\g -> g {inlineStyle = inlineStyle g <> [T.strip (content n)]}) + | otherwise -> modify' (\g -> g {styles = styles g <> [T.strip (content n)]}) + "mj-raw" -> modify' (\g -> g {headRaw = headRaw g <> [T.strip (content n)]}) + "mj-html-attributes" -> mapM_ selector (children n) + _ -> pure () + + attribute n = case tagName n of + "mj-class" -> + let cname = fromMaybe "" (lookup "name" (attributes n)) + values = filter ((/= "name") . fst) (attributes n) + perTag = foldl' (\acc c -> merge acc [(tagName c, attributes c)]) [] (children n) + in modify' $ \g -> + g + { classes = Map.insertWith (flip merge) cname values (classes g) + , classesDefault = + Map.insertWith Map.union cname (Map.fromList perTag) (classesDefault g) + } + tag -> + modify' $ \g -> + g {defaultAttributes = Map.insertWith (flip merge) tag (attributes n) (defaultAttributes g)} + + selector n + | tagName n == "mj-selector" + , Just path <- lookup "path" (attributes n) = + let custom = + [ (k, T.strip (content c)) + | c <- children n + , tagName c == "mj-html-attribute" + , Just k <- [lookup "name" (attributes c)] + , not (T.null k) + ] + in modify' (\g -> g {htmlAttributes' = merge (htmlAttributes' g) [(path, custom)]}) + | otherwise = pure () diff --git a/src/Text/Mjml/Component/Hero.hs b/src/Text/Mjml/Component/Hero.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Hero.hs @@ -0,0 +1,315 @@ +-- | @mj-hero@. +module Text.Mjml.Component.Hero ( + mjHero, +) where + +import Data.Maybe (fromMaybe) +import Data.Text qualified as T + +import Text.Mjml.Component.Section (setContext) +import Text.Mjml.Js (parseFloatJs, parseIntJs, roundJs, showNumber) +import Text.Mjml.Render + + +mjHero :: Component +mjHero = + (defComponent "mj-hero" build') + { allowedAttributes = + [ ("mode", "string") + , ("height", "unit(px,%)") + , ("background-url", "string") + , ("background-width", "unit(px,%)") + , ("background-height", "unit(px,%)") + , ("background-position", "string") + , ("border-radius", "string") + , ("inner-background-color", "color") + , ("inner-padding", "unit(px,%){1,4}") + , ("inner-padding-top", "unit(px,%)") + , ("inner-padding-left", "unit(px,%)") + , ("inner-padding-right", "unit(px,%)") + , ("inner-padding-bottom", "unit(px,%)") + , ("padding", "unit(px,%){1,4}") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("background-color", "color") + , ("vertical-align", "enum(top,bottom,middle)") + ] + , -- MJML also lists null defaults for background-url and the + -- directional paddings, which is the same as leaving them out. + defaults = + [ ("mode", "fixed-height") + , ("height", "0px") + , ("background-position", "center center") + , ("padding", "0px") + , ("background-color", "#ffffff") + , ("vertical-align", "top") + ] + } + + +build' :: Self -> Instance +build' s = inst + where + inst = + (defInstance s renderHero) + { getStyles = stylesFor + , childContext = setContext [("containerWidth", Just currentContainerWidth)] (context s) + } + + containerWidth = fromMaybe "" (ctx s "containerWidth") + + currentContainerWidth = + let paddingSize = shorthandValue s "padding" "left" + shorthandValue s "padding" "right" + in showNumber (parseFloatJs containerWidth - paddingSize) <> "px" + + background = + T.intercalate " " . filter (not . T.null) $ + [fromMaybe "" (attr s "background-color")] + <> if truthy (attr s "background-url") + then + [ "url('" <> fromMaybe "" (attr s "background-url") <> "')" + , "no-repeat" + , fromMaybe "" (attr s "background-position") <> " / cover" + ] + else [] + + stylesFor = \case + "div" -> [style "margin" "0 auto", style "max-width" containerWidth] + "table" -> [style "width" "100%"] + "tr" -> [style "vertical-align" "top"] + "td-fluid" -> + let ratio = + roundJs + ( parseIntJs (fromMaybe "" (attr s "background-height")) + / parseIntJs (fromMaybe "" (attr s "background-width")) + * 100 + ) + in [ style "width" "0.01%" + , style "padding-bottom" (showNumber ratio <> "%") + , style "mso-padding-bottom-alt" "0" + ] + "outlook-table" -> [style "width" containerWidth] + "outlook-td" -> + [ style "line-height" "0" + , style "font-size" "0" + , style "mso-line-height-rule" "exactly" + ] + "outlook-inner-table" -> [style "width" currentContainerWidth] + "outlook-image" -> + [ style "border" "0" + , ("height", attr s "background-height") + , style "mso-position-horizontal" "center" + , style "position" "absolute" + , style "top" "0" + , style "width" (case attr s "background-width" of + Just w | truthy (Just w) -> w + _ -> containerWidth) + , style "z-index" "-3" + ] + "outlook-inner-td" -> + [ ("background-color", attr s "inner-background-color") + , ("padding", attr s "inner-padding") + , ("padding-top", attr s "inner-padding-top") + , ("padding-left", attr s "inner-padding-left") + , ("padding-right", attr s "inner-padding-right") + , ("padding-bottom", attr s "inner-padding-bottom") + ] + "inner-div" -> + [ ("background-color", attr s "inner-background-color") + , ("float", attr s "align") + , style "margin" "0px auto" + , ("width", attr s "width") + , ("padding", attr s "inner-padding") + , ("padding-top", attr s "inner-padding-top") + , ("padding-left", attr s "inner-padding-left") + , ("padding-right", attr s "inner-padding-right") + , ("padding-bottom", attr s "inner-padding-bottom") + ] + "inner-table" -> [style "width" "100%", style "margin" "0px"] + _ -> [] + + renderContent = do + kids <- + renderChildren + inst + defChildOptions + { renderer = \c -> + if rawElement (component (self c)) + then render c + else do + body <- render c + let cs = self c + pure $ + mconcat + [ "" + , body + , "" + ] + } + let innerTable = + htmlAttributes + inst + [ ("border", AV "0") + , ("cellpadding", AV "0") + , ("cellspacing", AV "0") + , ("role", AV "presentation") + , ("style", AStyleOf "inner-table") + ] + pure $ + mconcat + [ startConditionalTag + , "" + , endConditionalTag + , "" + , kids + , "" + , startConditionalTag + , "" + , endConditionalTag + ] + + commonStyle = + [ style "background" background + , ("background-position", attr s "background-position") + , style "background-repeat" "no-repeat" + , ("border-radius", attr s "border-radius") + , ("padding", attr s "padding") + , ("padding-top", attr s "padding-top") + , ("padding-left", attr s "padding-left") + , ("padding-right", attr s "padding-right") + , ("padding-bottom", attr s "padding-bottom") + , ("vertical-align", attr s "vertical-align") + ] + + backgroundAttr = ("background", maybe ANone AV (attr s "background-url")) + + renderMode = do + body <- renderContent + pure $ case attr s "mode" of + Just "fluid-height" -> + let magicTd = " htmlAttributes inst [("style", AStyleOf "td-fluid")] <> " />" + in mconcat + [ magicTd + , "" + , body + , "" + , magicTd + ] + _ -> + let height = + parseIntJs (fromMaybe "" (attr s "height")) + - shorthandValue s "padding" "top" + - shorthandValue s "padding" "bottom" + in mconcat + [ " "px")])) + , ("height", AV (showNumber height)) + ] + , ">" + , body + , "" + ] + + renderHero = do + mode <- renderMode + pure $ + mconcat + [ startConditionalTag + , "" + , endConditionalTag + , "" + , mode + , "" + , startConditionalTag + , "" + , endConditionalTag + ] diff --git a/src/Text/Mjml/Component/Image.hs b/src/Text/Mjml/Component/Image.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Image.hs @@ -0,0 +1,185 @@ +-- | @mj-image@. +module Text.Mjml.Component.Image ( + mjImage, +) where + +import Data.Char (isDigit) +import Data.Text (Text) +import Data.Text qualified as T + +import Text.Mjml.Js (parseIntJs, showNumber) +import Text.Mjml.Render + + +mjImage :: Component +mjImage = + (defComponent "mj-image" build') + { allowedAttributes = + [ ("alt", "string") + , ("href", "string") + , ("name", "string") + , ("src", "string") + , ("srcset", "string") + , ("sizes", "string") + , ("title", "string") + , ("rel", "string") + , ("align", "enum(left,center,right)") + , ("border", "string") + , ("border-bottom", "string") + , ("border-left", "string") + , ("border-right", "string") + , ("border-top", "string") + , ("border-radius", "string") + , ("container-background-color", "color") + , ("fluid-on-mobile", "boolean") + , ("padding", "unit(px,%){1,4}") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("target", "string") + , ("width", "unit(px)") + , ("height", "unit(px,auto)") + , ("max-height", "unit(px,%)") + , ("font-size", "unit(px)") + , ("usemap", "string") + ] + , defaults = + [ ("alt", "") + , ("align", "center") + , ("border", "0") + , ("height", "auto") + , ("padding", "10px 25px") + , ("target", "_blank") + , ("font-size", "13px") + ] + , componentHeadStyle = Just headStyle' + } + + +headStyle' :: Text -> Text +headStyle' bp = + mconcat + [ "@media only screen and (max-width:" + , makeLowerBreakpoint bp + , ") {\ntable.mj-full-width-mobile { width: 100% !important; }\ntd.mj-full-width-mobile { width: auto !important; }\n}" + ] + + +-- | @makeLowerBreakpoint@: one pixel below the breakpoint. +makeLowerBreakpoint :: Text -> Text +makeLowerBreakpoint bp = + let digits = T.takeWhile isDigit (T.dropWhile (not . isDigit) bp) + in if T.null digits + then bp + else showNumber (parseIntJs digits - 1) <> "px" + + +build' :: Self -> Instance +build' s = inst + where + inst = + (defInstance s (pure rendered)) + { getStyles = stylesFor + } + + fullWidth = attr s "full-width" == Just "full-width" + fluid = truthy (attr s "fluid-on-mobile") + + -- getContentWidth + contentWidth = + let width = case attr s "width" of + Just w | truthy (Just w) -> parseIntJs w + _ -> 1 / 0 + in min (box (boxWidths s)) width + + stylesFor = \case + "img" -> + [ ("border", attr s "border") + , ("border-left", attr s "border-left") + , ("border-right", attr s "border-right") + , ("border-top", attr s "border-top") + , ("border-bottom", attr s "border-bottom") + , ("border-radius", attr s "border-radius") + , style "display" "block" + , style "outline" "none" + , style "text-decoration" "none" + , ("height", attr s "height") + , ("max-height", attr s "max-height") + , ("min-width", if fullWidth then Just "100%" else Nothing) + , style "width" "100%" + , ("max-width", if fullWidth then Just "100%" else Nothing) + , ("font-size", attr s "font-size") + ] + "td" -> [("width", if fullWidth then Nothing else Just parsedWidthUnit)] + "table" -> + [ ("min-width", if fullWidth then Just "100%" else Nothing) + , ("max-width", if fullWidth then Just "100%" else Nothing) + , ("width", if fullWidth then Just parsedWidthUnit else Nothing) + , style "border-collapse" "collapse" + , style "border-spacing" "0px" + ] + _ -> [] + + parsedWidthUnit = + let (parsed, unit) = widthParser True (showNumber contentWidth) + in showNumber parsed <> unit + + renderImage = + let img = + " htmlAttributes inst + ( [ ("alt", maybe ANone AV (attr s "alt")) + , ("src", maybe ANone AV (attr s "src")) + , ("srcset", maybe ANone AV (attr s "srcset")) + , ("sizes", maybe ANone AV (attr s "sizes")) + , ("style", AStyleOf "img") + , ("title", maybe ANone AV (attr s "title")) + , ("width", AV (showNumber contentWidth)) + , ("usemap", maybe ANone AV (attr s "usemap")) + ] + <> case attr s "height" of + Just h + | truthy (Just h) -> + [("height", AV (if h == "auto" then h else showNumber (parseIntJs h)))] + _ -> [] + ) + <> " />" + in if truthy (attr s "href") + then + mconcat + [ "" + , img + , "" + ] + else img + + fluidClass = if fluid then AV "mj-full-width-mobile" else ANone + + rendered = + mconcat + [ "" + , renderImage + , "" + ] diff --git a/src/Text/Mjml/Component/Navbar.hs b/src/Text/Mjml/Component/Navbar.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Navbar.hs @@ -0,0 +1,281 @@ +-- | @mj-navbar@ and @mj-navbar-link@. +module Text.Mjml.Component.Navbar ( + mjNavbar, + mjNavbarLink, +) where + +import Data.Char (isDigit) +import Data.Maybe (fromMaybe) +import Data.Text (Text) +import Data.Text qualified as T + +import Text.Mjml.Render + + +mjNavbar :: Component +mjNavbar = + (defComponent "mj-navbar" buildNavbar) + { allowedAttributes = + [ ("align", "enum(left,center,right)") + , ("base-url", "string") + , ("hamburger", "string") + , ("ico-align", "enum(left,center,right)") + , ("ico-open", "string") + , ("ico-close", "string") + , ("ico-color", "color") + , ("ico-font-size", "unit(px,%)") + , ("ico-font-family", "string") + , ("ico-text-transform", "string") + , ("ico-padding", "unit(px,%){1,4}") + , ("ico-padding-left", "unit(px,%)") + , ("ico-padding-top", "unit(px,%)") + , ("ico-padding-right", "unit(px,%)") + , ("ico-padding-bottom", "unit(px,%)") + , ("padding", "unit(px,%){1,4}") + , ("padding-left", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-bottom", "unit(px,%)") + , ("ico-text-decoration", "string") + , ("ico-line-height", "unit(px,%,)") + ] + , -- MJML also lists null defaults for base-url and hamburger. + defaults = + [ ("align", "center") + , ("ico-align", "center") + , ("ico-open", "☰") + , ("ico-close", "⊗") + , ("ico-color", "#000000") + , ("ico-font-size", "30px") + , ("ico-font-family", "Ubuntu, Helvetica, Arial, sans-serif") + , ("ico-text-transform", "uppercase") + , ("ico-padding", "10px") + , ("ico-text-decoration", "none") + , ("ico-line-height", "30px") + ] + , componentHeadStyle = Just navbarHeadStyle + } + + +navbarHeadStyle :: Text -> Text +navbarHeadStyle bp = + mconcat + [ "noinput.mj-menu-checkbox { display:block!important; max-height:none!important; visibility:visible!important; }\n" + , "@media only screen and (max-width:" + , makeLowerBreakpoint bp + , ") {\n" + , ".mj-menu-checkbox[type=\"checkbox\"] ~ .mj-inline-links { display:none!important; }\n" + , ".mj-menu-checkbox[type=\"checkbox\"]:checked ~ .mj-inline-links,\n" + , ".mj-menu-checkbox[type=\"checkbox\"] ~ .mj-menu-trigger { display:block!important; max-width:none!important; max-height:none!important; font-size:inherit!important; }\n" + , ".mj-menu-checkbox[type=\"checkbox\"] ~ .mj-inline-links > a { display:block!important; }\n" + , ".mj-menu-checkbox[type=\"checkbox\"]:checked ~ .mj-menu-trigger .mj-menu-icon-close { display:block!important; }\n" + , ".mj-menu-checkbox[type=\"checkbox\"]:checked ~ .mj-menu-trigger .mj-menu-icon-open { display:none!important; }\n" + , "}\n" + ] + + +-- | @makeLowerBreakpoint@: one pixel below the first number in the +-- breakpoint. +makeLowerBreakpoint :: Text -> Text +makeLowerBreakpoint bp = + let digits = T.takeWhile isDigit (T.dropWhile (not . isDigit) bp) + in if T.null digits + then bp + else T.pack (show (read (T.unpack digits) - 1 :: Integer)) <> "px" + + +buildNavbar :: Self -> Instance +buildNavbar s = inst + where + inst = (defInstance s renderNavbar) {getStyles = stylesFor} + + stylesFor = \case + "div" -> [("align", attr s "align"), style "width" "100%"] + "label" -> + [ style "display" "block" + , style "cursor" "pointer" + , style "mso-hide" "all" + , style "-moz-user-select" "none" + , style "user-select" "none" + , ("color", attr s "ico-color") + , ("font-size", attr s "ico-font-size") + , ("font-family", attr s "ico-font-family") + , ("text-transform", attr s "ico-text-transform") + , ("text-decoration", attr s "ico-text-decoration") + , ("line-height", attr s "ico-line-height") + , ("padding", attr s "ico-padding") + , ("padding-top", attr s "ico-padding-top") + , ("padding-right", attr s "ico-padding-right") + , ("padding-bottom", attr s "ico-padding-bottom") + , ("padding-left", attr s "ico-padding-left") + ] + "trigger" -> + [ style "display" "none" + , style "max-height" "0px" + , style "max-width" "0px" + , style "font-size" "0px" + , style "overflow" "hidden" + ] + "icoOpen" -> [style "mso-hide" "all"] + "icoClose" -> [style "display" "none", style "mso-hide" "all"] + _ -> [] + + renderHamburger = do + labelKey <- nextId + pure $ + mconcat + [ msoConditionalTag True $ + " fromText labelKey + <> "\" class=\"mj-menu-checkbox\" style=\"display:none !important; max-height:0; visibility:hidden;\" />" + , "" + , fromText (fromMaybe "" (attr s "ico-open")) + , "" + , fromText (fromMaybe "" (attr s "ico-close")) + , "" + ] + + renderNavbar = do + hamburger <- if attr s "hamburger" == Just "hamburger" then renderHamburger else pure "" + kids <- + renderChildren + inst + defChildOptions {childAttributes = [("navbarBaseUrl", v) | Just v <- [attr s "base-url"]]} + pure $ + mconcat + [ hamburger + , -- MJML passes the result of htmlAttributes('div') as the style, + -- which resolves to no styles at all. + "" + , conditionalTag False $ + " fromText (fromMaybe "" (attr s "align")) + <> "\">" + , kids + , conditionalTag False "
" + , "" + ] + + +mjNavbarLink :: Component +mjNavbarLink = + (defComponent "mj-navbar-link" buildLink) + { endingTag = True + , allowedAttributes = + [ ("color", "color") + , ("font-family", "string") + , ("font-size", "unit(px)") + , ("font-style", "string") + , ("font-weight", "string") + , ("href", "string") + , ("name", "string") + , ("target", "string") + , ("rel", "string") + , ("letter-spacing", "unitWithNegative(px,em)") + , ("line-height", "unit(px,%,)") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("padding", "unit(px,%){1,4}") + , ("text-decoration", "string") + , ("text-transform", "string") + ] + , defaults = + [ ("color", "#000000") + , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif") + , ("font-size", "13px") + , ("font-weight", "normal") + , ("line-height", "22px") + , ("padding", "15px 10px") + , ("target", "_blank") + , ("text-decoration", "none") + , ("text-transform", "uppercase") + ] + } + + +buildLink :: Self -> Instance +buildLink s = inst + where + inst = (defInstance s (pure rendered)) {getStyles = stylesFor} + + paddings = + [ ("padding", attr s "padding") + , ("padding-top", attr s "padding-top") + , ("padding-left", attr s "padding-left") + , ("padding-right", attr s "padding-right") + , ("padding-bottom", attr s "padding-bottom") + ] + + stylesFor = \case + "a" -> + [ style "display" "inline-block" + , ("color", attr s "color") + , ("font-family", attr s "font-family") + , ("font-size", attr s "font-size") + , ("font-style", attr s "font-style") + , ("font-weight", attr s "font-weight") + , ("letter-spacing", attr s "letter-spacing") + , ("line-height", attr s "line-height") + , ("text-decoration", attr s "text-decoration") + , ("text-transform", attr s "text-transform") + ] + <> paddings + "td" -> paddings + _ -> [] + + link = case attr s "navbarBaseUrl" of + Just base | truthy (Just base) -> Just (base <> fromMaybe "undefined" (attr s "href")) + _ -> attr s "href" + + cssClass = case attr s "css-class" of + Just c | truthy (Just c) -> " " <> c + _ -> "" + + renderContent = + mconcat + [ " cssClass)) + , ("href", maybe ANone AV link) + , ("rel", maybe ANone AV (attr s "rel")) + , ("target", maybe ANone AV (attr s "target")) + , ("name", maybe ANone AV (attr s "name")) + , ("style", AStyleOf "a") + ] + , ">" + , fromText (getContent s) + , "" + ] + + rendered = + mconcat + [ conditionalTag False $ + " htmlAttributes + inst + [ ("style", AStyleOf "td") + , ("class", AV (suffixCssClasses (attr s "css-class") "outlook")) + ] + <> ">" + , renderContent + , conditionalTag False "" + ] diff --git a/src/Text/Mjml/Component/Raw.hs b/src/Text/Mjml/Component/Raw.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Raw.hs @@ -0,0 +1,15 @@ +-- | @mj-raw@: content copied into the output untouched. +module Text.Mjml.Component.Raw ( + mjRaw, +) where + +import Text.Mjml.Render + + +mjRaw :: Component +mjRaw = + (defComponent "mj-raw" (\s -> defInstance s (pure (fromText (getContent s))))) + { endingTag = True + , rawElement = True + , allowedAttributes = [("position", "enum(file-start)")] + } diff --git a/src/Text/Mjml/Component/Section.hs b/src/Text/Mjml/Component/Section.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Section.hs @@ -0,0 +1,397 @@ +-- | @mj-section@, and the rendering @mj-wrapper@ shares with it. +module Text.Mjml.Component.Section ( + mjSection, + sectionAllowedAttributes, + sectionDefaults, + SectionParts (..), + sectionParts, + setContext, +) where + +import Data.Maybe (fromMaybe, isJust) +import Data.Text (Text) +import Data.Text qualified as T + +import Text.Mjml.Js (parseIntJs, showNumber) +import Text.Mjml.Render + + +mjSection :: Component +mjSection = + (defComponent "mj-section" build') + { allowedAttributes = sectionAllowedAttributes + , defaults = sectionDefaults + } + where + build' s = let parts = sectionParts s (renderWrappedChildren parts) in instanceOf parts + + renderWrappedChildren parts = do + kids <- + renderChildren + (instanceOf parts) + defChildOptions + { renderer = \c -> + if rawElement (component (self c)) + then render c + else do + body <- render c + pure $ + mconcat + [ startConditionalTag + , "" + , endConditionalTag + , body + , startConditionalTag + , "" + , endConditionalTag + ] + } + pure (startConditionalTag <> "" <> endConditionalTag <> kids <> startConditionalTag <> "" <> endConditionalTag) + + +sectionAllowedAttributes :: [(Text, Text)] +sectionAllowedAttributes = + [ ("background-color", "color") + , ("background-url", "string") + , ("background-repeat", "enum(repeat,no-repeat)") + , ("background-size", "string") + , ("background-position", "string") + , ("background-position-x", "string") + , ("background-position-y", "string") + , ("border", "string") + , ("border-bottom", "string") + , ("border-left", "string") + , ("border-radius", "string") + , ("border-right", "string") + , ("border-top", "string") + , ("direction", "enum(ltr,rtl)") + , ("full-width", "enum(full-width,false,)") + , ("gutter", "unit(px,%)") + , ("padding", "unit(px,%){1,4}") + , ("padding-top", "unit(px,%)") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("text-align", "enum(left,center,right)") + , ("text-padding", "unit(px,%){1,4}") + ] + + +sectionDefaults :: Attrs +sectionDefaults = + [ ("background-repeat", "repeat") + , ("background-size", "auto") + , ("background-position", "top center") + , ("direction", "ltr") + , ("padding", "20px 0") + , ("text-align", "center") + , ("text-padding", "4px 4px 4px 0") + ] + + +-- | Set context keys the way a JavaScript spread does: 'Nothing' is +-- @undefined@, which removes the parent's value. +setContext :: [(Text, Maybe Text)] -> Attrs -> Attrs +setContext kvs base = foldl step base kvs + where + step acc (k, Just v) = merge acc [(k, v)] + step acc (k, Nothing) = filter ((/= k) . fst) acc + + +-- | The methods of MJML's section class, so @mj-wrapper@ can reuse them with +-- its own children. +data SectionParts = SectionParts + { instanceOf :: Instance + , isFullWidth :: Bool + , hasBackground :: Bool + , renderBefore :: Builder + , renderAfter :: Builder + , renderSection :: R Builder + , renderWithBackground :: Builder -> Builder + } + + +sectionParts :: Self -> R Builder -> SectionParts +sectionParts s wrappedChildren = parts + where + parts = + SectionParts + { instanceOf = inst + , isFullWidth = fullWidth + , hasBackground = hasBg + , renderBefore = before + , renderAfter = after + , renderSection = section + , renderWithBackground = withBackground + } + + inst = + (defInstance s (if fullWidth then renderFull else renderSimple)) + { getStyles = stylesFor + , childContext = + setContext + [ ("containerWidth", Just (showNumber (box (boxWidths s)) <> "px")) + , ("gap", attr s "gap") + , ("gutter", attr s "gutter") + , ("direction", attr s "direction") + ] + (context s) + } + + containerWidth = fromMaybe "" (ctx s "containerWidth") + fullWidth = attr s "full-width" == Just "full-width" + hasBorderRadius = case attr s "border-radius" of + Just v -> not (T.null v) + Nothing -> False + isFirstSection = index (props s) == 0 + hasBg = isJust (attr s "background-url") + hasGap = case ctx s "gap" of + Just g -> not (T.null g) + Nothing -> False + gap = ctx s "gap" + + background + | truthy (attr s "background-url") = + [ style "background" backgroundValue + , style "background-position" backgroundString + , ("background-repeat", attr s "background-repeat") + , ("background-size", attr s "background-size") + ] + | otherwise = + [ ("background", attr s "background-color") + , ("background-color", attr s "background-color") + ] + + stylesFor = \case + "tableFullwidth" -> (if fullWidth then background else []) `merge` [style "width" "100%"] + "table" -> + (if fullWidth then [] else background) + `merge` [style "width" "100%"] + `merge` [style "border-collapse" "separate" | hasBorderRadius] + "td" -> + [ ("border", attr s "border") + , ("border-bottom", attr s "border-bottom") + , ("border-left", attr s "border-left") + , ("border-right", attr s "border-right") + , ("border-top", attr s "border-top") + , ("border-radius", attr s "border-radius") + , ("direction", attr s "direction") + , style "font-size" "0px" + , ("padding", attr s "padding") + , ("padding-bottom", attr s "padding-bottom") + , ("padding-left", attr s "padding-left") + , ("padding-right", attr s "padding-right") + , ("padding-top", attr s "padding-top") + , ("text-align", attr s "text-align") + ] + "div" -> + (if fullWidth then [] else background) + `merge` [ style "margin" "0px auto" + , style "max-width" containerWidth + , ("border-radius", attr s "border-radius") + ] + `merge` [style "overflow" "hidden" | hasBorderRadius] + `merge` [("margin-top", if isFirstSection then Nothing else gap)] + "innerDiv" -> [style "line-height" "0", style "font-size" "0"] + _ -> [] + + backgroundValue = + T.intercalate " " . filter (not . T.null) $ + [fromMaybe "" (attr s "background-color")] + <> if hasBg + then + [ "url('" <> fromMaybe "" (attr s "background-url") <> "')" + , backgroundString + , "/ " <> fromMaybe "" (attr s "background-size") + , fromMaybe "" (attr s "background-repeat") + ] + else [] + + backgroundString = let (x, y) = backgroundPosition in x <> " " <> y + + backgroundPosition = + let (x, y) = parseBackgroundPosition + in (orElse (attr s "background-position-x") x, orElse (attr s "background-position-y") y) + where + orElse v d = case v of + Just t | not (T.null t) -> t + _ -> d + + parseBackgroundPosition = case T.splitOn " " (fromMaybe "" (attr s "background-position")) of + [v] + | v `elem` ["top", "bottom"] -> ("center", v) + | otherwise -> (v, "center") + [v1, v2] + | v1 `elem` ["top", "bottom"] || (v1 == "center" && v2 `elem` ["left", "right"]) -> (v2, v1) + | otherwise -> (v1, v2) + _ -> ("center", "top") + + before = + mconcat + [ startConditionalTag + , " [ ("bgcolor", AV c) + | not hasGap + , Just c <- [attr s "background-color"] + , truthy (Just c) + ] + , ">" + , endConditionalTag + ] + + after = startConditionalTag <> "" <> endConditionalTag + + section = do + kids <- wrappedChildren + pure $ + mconcat + [ "" + , if hasBg then " htmlAttributes inst [("style", AStyleOf "innerDiv")] <> ">" else "" + , "" + , startConditionalTag + , "" + , endConditionalTag + , kids + , startConditionalTag + , "
" + , endConditionalTag + , "" + , if hasBg then "" else "" + , "" + ] + + withBackground body = + let isPercentage t = case T.breakOnEnd "%" t of + (pre, "") | Just (num, '%') <- T.unsnoc pre -> isDecimal num + _ -> False + isDecimal t = case T.splitOn "." t of + [a] -> not (T.null a) && T.all (`elem` ['0' .. '9']) a + [a, b] -> not (T.null a) && not (T.null b) && T.all (`elem` ['0' .. '9']) (a <> b) + _ -> False + (rawX, rawY) = backgroundPosition + bgPosX = case rawX of + "left" -> "0%" + "center" -> "50%" + "right" -> "100%" + v -> if isPercentage v then v else "50%" + bgPosY = case rawY of + "top" -> "0%" + "center" -> "50%" + "bottom" -> "100%" + v -> if isPercentage v then v else "0%" + repeat' = attr s "background-repeat" == Just "repeat" + coordinate isX = + let pos = if isX then bgPosX else bgPosY + in if isPercentage pos + then + let decimal = parseIntJs (T.dropEnd 1 pos) / 100 + v = if repeat' then decimal else (-50 + decimal * 100) / 100 + in (showNumber v, showNumber v) + else + if repeat' + then if isX then ("0.5", "0.5") else ("0", "0") + else if isX then ("0", "0") else ("-0.5", "-0.5") + size = fromMaybe "" (attr s "background-size") + vSize + | size == "cover" || size == "contain" = + [("size", AV "1,1"), ("aspect", AV (if size == "cover" then "atleast" else "atmost"))] + | size /= "auto" = case T.splitOn " " size of + [_] -> [("size", AV size), ("aspect", AV "atmost")] + ps -> [("size", AV (T.intercalate "," ps))] + | otherwise = [] + ((vOriginX, vPosX), (vOriginY, vPosY)) + | size == "auto" = (("0.5", "0.5"), ("0", "0")) + | otherwise = (coordinate True, coordinate False) + vmlType + | size == "auto" = "tile" + | attr s "background-repeat" == Just "no-repeat" = "frame" + | otherwise = "tile" + in mconcat + [ startConditionalTag + , " ", " <> vOriginY)) + , ("position", AV (vPosX <> ", " <> vPosY)) + , ("src", maybe ANone AV (attr s "background-url")) + , ("color", maybe ANone AV (attr s "background-color")) + , ("type", AV vmlType) + ] + <> vSize + , " />" + , endConditionalTag + , body + , startConditionalTag + , "" + , endConditionalTag + ] + + renderFull = do + sec <- section + let inner = before <> sec <> after + body = if hasBg then withBackground inner else inner + pure $ + mconcat + [ "" + , body + , "" + ] + + renderSimple = do + sec <- section + pure (before <> (if hasBg then withBackground sec else sec) <> after) diff --git a/src/Text/Mjml/Component/Social.hs b/src/Text/Mjml/Component/Social.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Social.hs @@ -0,0 +1,381 @@ +-- | @mj-social@ and @mj-social-element@. +module Text.Mjml.Component.Social ( + mjSocial, + mjSocialElement, +) where + +import Data.Maybe (fromMaybe) +import Data.Text (Text) +import Data.Text qualified as T + +import Text.Mjml.Js (parseIntJs, showNumber) +import Text.Mjml.Render + + +mjSocial :: Component +mjSocial = + (defComponent "mj-social" build') + { allowedAttributes = + [ ("align", "enum(left,right,center)") + , ("border", "string") + , ("border-radius", "string") + , ("container-background-color", "color") + , ("color", "color") + , ("font-family", "string") + , ("font-size", "unit(px)") + , ("font-style", "string") + , ("font-weight", "string") + , ("icon-size", "unit(px,%)") + , ("icon-height", "unit(px,%)") + , ("icon-padding", "unit(px,%){1,4}") + , ("inner-padding", "unit(px,%){1,4}") + , ("line-height", "unit(px,%,)") + , ("mode", "enum(horizontal,vertical)") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("padding", "unit(px,%){1,4}") + , ("table-layout", "enum(auto,fixed)") + , ("text-padding", "unit(px,%){1,4}") + , ("text-decoration", "string") + , ("vertical-align", "enum(top,bottom,middle)") + ] + , defaults = + [ ("align", "center") + , ("border-radius", "3px") + , ("color", "#333333") + , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif") + , ("font-size", "13px") + , ("icon-size", "20px") + , ("line-height", "22px") + , ("mode", "horizontal") + , ("padding", "10px 25px") + , ("text-decoration", "none") + ] + } + where + build' s = inst + where + inst = + (defInstance s render') + { getStyles = \case + "tableVertical" -> [style "margin" "0px"] + _ -> [] + } + + render' = + if attr s "mode" == Just "horizontal" then renderHorizontal else renderVertical + + socialElementAttributes = + [("padding", p) | Just p <- [attr s "inner-padding"], truthy (Just p)] + `merge` [ (k, v) + | k <- + [ "border" + , "border-radius" + , "color" + , "font-family" + , "font-size" + , "font-weight" + , "font-style" + , "icon-size" + , "icon-height" + , "icon-padding" + , "text-padding" + , "line-height" + , "text-decoration" + ] + , Just v <- [attr s k] + ] + + renderHorizontal = do + kids <- + renderChildren + inst + defChildOptions + { childAttributes = socialElementAttributes + , renderer = \c -> + if rawElement (component (self c)) + then render c + else do + body <- render c + pure $ + mconcat + [ startConditionalTag + , "" + , endConditionalTag + , "" + , body + , "" + , startConditionalTag + , "" + , endConditionalTag + ] + } + pure $ + mconcat + [ startConditionalTag + , "" + , endConditionalTag + , kids + , startConditionalTag + , "" + , endConditionalTag + ] + + renderVertical = do + kids <- renderChildren inst defChildOptions {childAttributes = socialElementAttributes} + pure $ + mconcat + [ "" + , kids + , "" + ] + + +imgBaseUrl :: Text +imgBaseUrl = "https://www.mailjet.com/images/theme/v1/icons/ico-social/" + + +-- | The networks MJML knows by name, each also available as @NAME-noshare@, +-- which links to the URL as given instead of through a share page. +socialNetworks :: [(Text, Attrs)] +socialNetworks = base <> [(k <> "-noshare", merge v [("share-url", "[[URL]]")]) | (k, v) <- base] + where + base = + [ ("facebook", [("share-url", "https://www.facebook.com/sharer/sharer.php?u=[[URL]]"), ("background-color", "#3b5998"), ("src", imgBaseUrl <> "facebook.png")]) + , ("twitter", [("share-url", "https://twitter.com/intent/tweet?url=[[URL]]"), ("background-color", "#55acee"), ("src", imgBaseUrl <> "twitter.png")]) + , ("x", [("share-url", "https://twitter.com/intent/tweet?url=[[URL]]"), ("background-color", "#000000"), ("src", imgBaseUrl <> "twitter-x.png")]) + , ("google", [("share-url", "https://plus.google.com/share?url=[[URL]]"), ("background-color", "#dc4e41"), ("src", imgBaseUrl <> "google-plus.png")]) + , ("pinterest", [("share-url", "https://pinterest.com/pin/create/button/?url=[[URL]]&media=&description="), ("background-color", "#bd081c"), ("src", imgBaseUrl <> "pinterest.png")]) + , ("linkedin", [("share-url", "https://www.linkedin.com/shareArticle?mini=true&url=[[URL]]&title=&summary=&source="), ("background-color", "#0077b5"), ("src", imgBaseUrl <> "linkedin.png")]) + , ("instagram", [("background-color", "#3f729b"), ("src", imgBaseUrl <> "instagram.png")]) + , ("web", [("src", imgBaseUrl <> "web.png"), ("background-color", "#4BADE9")]) + , ("snapchat", [("src", imgBaseUrl <> "snapchat.png"), ("background-color", "#FFFA54")]) + , ("youtube", [("src", imgBaseUrl <> "youtube.png"), ("background-color", "#EB3323")]) + , ("tumblr", [("src", imgBaseUrl <> "tumblr.png"), ("share-url", "https://www.tumblr.com/widgets/share/tool?canonicalUrl=[[URL]]"), ("background-color", "#344356")]) + , ("github", [("src", imgBaseUrl <> "github.png"), ("background-color", "#000000")]) + , ("xing", [("src", imgBaseUrl <> "xing.png"), ("share-url", "https://www.xing.com/app/user?op=share&url=[[URL]]"), ("background-color", "#296366")]) + , ("vimeo", [("src", imgBaseUrl <> "vimeo.png"), ("background-color", "#53B4E7")]) + , ("medium", [("src", imgBaseUrl <> "medium.png"), ("background-color", "#000000")]) + , ("soundcloud", [("src", imgBaseUrl <> "soundcloud.png"), ("background-color", "#EF7F31")]) + , ("dribbble", [("src", imgBaseUrl <> "dribbble.png"), ("background-color", "#D95988")]) + ] + + +mjSocialElement :: Component +mjSocialElement = + (defComponent "mj-social-element" build') + { endingTag = True + , allowedAttributes = + [ ("align", "enum(left,center,right)") + , ("icon-position", "enum(left,right)") + , ("background-color", "color") + , ("color", "color") + , ("border", "string") + , ("border-radius", "string") + , ("font-family", "string") + , ("font-size", "unit(px)") + , ("font-style", "string") + , ("font-weight", "string") + , ("href", "string") + , ("icon-size", "unit(px,%)") + , ("icon-height", "unit(px,%)") + , ("icon-padding", "unit(px,%){1,4}") + , ("line-height", "unit(px,%,)") + , ("name", "string") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("padding", "unit(px,%){1,4}") + , ("text-padding", "unit(px,%){1,4}") + , ("rel", "string") + , ("src", "string") + , ("srcset", "string") + , ("sizes", "string") + , ("alt", "string") + , ("title", "string") + , ("target", "string") + , ("text-decoration", "string") + , ("vertical-align", "enum(top,middle,bottom)") + ] + , defaults = + [ ("alt", "") + , ("align", "left") + , ("icon-position", "left") + , ("color", "#000") + , ("border", "0") + , ("border-radius", "3px") + , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif") + , ("font-size", "13px") + , ("line-height", "1") + , ("padding", "4px") + , ("text-padding", "4px 4px 4px 0") + , ("target", "_blank") + , ("text-decoration", "none") + , ("vertical-align", "middle") + ] + } + where + build' s = inst + where + inst = (defInstance s (pure rendered)) {getStyles = stylesFor} + + network = fromMaybe [] (attr s "name" >>= \n -> lookup n socialNetworks) + + -- getSocialAttributes + href = case attr s "href" of + Just h + | truthy (Just h) + , Just shareUrl <- lookup "share-url" network + , truthy (Just shareUrl) -> + let (before, after) = T.breakOn "[[URL]]" shareUrl + in Just (if T.null after then shareUrl else before <> h <> T.drop 7 after) + other -> other + social k = case attr s k of + Just v | truthy (Just v) -> Just v + _ -> lookup k network + iconSize = social "icon-size" + iconHeight = social "icon-height" + backgroundColor = social "background-color" + src = social "src" + srcset = social "srcset" + sizes = social "sizes" + + stylesFor = \case + "td" -> + [ ("padding", attr s "padding") + , ("padding-top", attr s "padding-top") + , ("padding-right", attr s "padding-right") + , ("padding-bottom", attr s "padding-bottom") + , ("padding-left", attr s "padding-left") + , ("vertical-align", attr s "vertical-align") + ] + "table" -> + [ ("background", backgroundColor) + , ("border-radius", attr s "border-radius") + , ("width", iconSize) + ] + "icon" -> + [ ("padding", attr s "icon-padding") + , style "font-size" "0" + , ("height", if truthy iconHeight then iconHeight else iconSize) + , style "vertical-align" "middle" + , ("width", iconSize) + ] + "img" -> + [ ("border", attr s "border") + , ("border-radius", attr s "border-radius") + , style "display" "block" + ] + "tdText" -> + [ style "vertical-align" "middle" + , ("padding", attr s "text-padding") + , ("text-align", attr s "align") + ] + "text" -> + [ ("color", attr s "color") + , ("font-size", attr s "font-size") + , ("font-weight", attr s "font-weight") + , ("font-style", attr s "font-style") + , ("font-family", attr s "font-family") + , ("line-height", attr s "line-height") + , ("text-decoration", attr s "text-decoration") + ] + _ -> [] + + hasLink = truthy (attr s "href") + opt = maybe ANone AV + + linkAttrs extra = + [("href", opt href)] + <> extra + <> [("rel", opt (attr s "rel")), ("target", opt (attr s "target"))] + + makeIcon = + mconcat + [ "" + , if hasLink then " htmlAttributes inst (linkAttrs []) <> ">" else "" + , "" + , if hasLink then "" else "" + , "" + ] + + makeContent + | T.null (getContent s) = "" + | otherwise = + mconcat + [ "" + , if hasLink + then " htmlAttributes inst (linkAttrs [("style", AStyleOf "text")]) <> ">" + else " htmlAttributes inst [("style", AStyleOf "text")] <> ">" + , fromText (getContent s) + , if hasLink then "" else "" + , "" + ] + + rendered = + mconcat + [ "" + , if attr s "icon-position" == Just "left" + then makeIcon <> " " <> makeContent + else makeContent <> " " <> makeIcon + , "" + ] diff --git a/src/Text/Mjml/Component/Spacer.hs b/src/Text/Mjml/Component/Spacer.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Spacer.hs @@ -0,0 +1,36 @@ +-- | @mj-spacer@. +module Text.Mjml.Component.Spacer ( + mjSpacer, +) where + +import Text.Mjml.Render + + +mjSpacer :: Component +mjSpacer = + (defComponent "mj-spacer" build') + { allowedAttributes = + [ ("border", "string") + , ("border-bottom", "string") + , ("border-left", "string") + , ("border-right", "string") + , ("border-top", "string") + , ("container-background-color", "color") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("padding", "unit(px,%){1,4}") + , ("height", "unit(px,%)") + ] + , defaults = [("height", "20px")] + } + where + build' s = + let inst = + (defInstance s (pure (" htmlAttributes inst [("style", AStyleOf "div")] <> "> "))) + { getStyles = \case + "div" -> [("height", attr s "height"), ("line-height", attr s "height")] + _ -> [] + } + in inst diff --git a/src/Text/Mjml/Component/Table.hs b/src/Text/Mjml/Component/Table.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Table.hs @@ -0,0 +1,100 @@ +-- | @mj-table@. +module Text.Mjml.Component.Table ( + mjTable, +) where + +import Data.Char (isDigit) +import Data.Maybe (fromMaybe) +import Data.Text qualified as T + +import Text.Mjml.Js (parseFloatJs, showNumber) +import Text.Mjml.Render + + +mjTable :: Component +mjTable = + (defComponent "mj-table" build') + { endingTag = True + , allowedAttributes = + [ ("align", "enum(left,right,center)") + , ("border", "string") + , ("cellpadding", "integer") + , ("cellspacing", "integer") + , ("container-background-color", "color") + , ("color", "color") + , ("font-family", "string") + , ("font-size", "unit(px)") + , ("font-weight", "string") + , ("line-height", "unit(px,%,)") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("padding", "unit(px,%){1,4}") + , ("role", "enum(none,presentation)") + , ("table-layout", "enum(auto,fixed,initial,inherit)") + , ("vertical-align", "enum(top,bottom,middle)") + , ("width", "unit(px,%,auto)") + ] + , defaults = + [ ("align", "left") + , ("border", "none") + , ("cellpadding", "0") + , ("cellspacing", "0") + , ("color", "#000000") + , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif") + , ("font-size", "13px") + , ("line-height", "22px") + , ("padding", "10px 25px") + , ("table-layout", "auto") + , ("width", "100%") + ] + } + + +build' :: Self -> Instance +build' s = inst + where + inst = (defInstance s (pure rendered)) {getStyles = stylesFor} + + hasCellspacing = + let raw = fromMaybe "undefined" (attr s "cellspacing") + n = parseFloatJs (T.filter (\c -> isDigit c || c == '.') raw) + in not (isNaN n) && n > 0 + + stylesFor = \case + "table" -> + [ ("color", attr s "color") + , ("font-family", attr s "font-family") + , ("font-size", attr s "font-size") + , ("line-height", attr s "line-height") + , ("table-layout", attr s "table-layout") + , ("width", attr s "width") + , ("border", attr s "border") + ] + `merge` [style "border-collapse" "separate" | hasCellspacing] + _ -> [] + + width = case attr s "width" of + Just "auto" -> "auto" + w -> + let raw = fromMaybe "" w + (parsed, unit) = widthParser True raw + in if unit == "%" then raw else showNumber parsed + + rendered = + mconcat + [ "" + , fromText (getContent s) + , "" + ] diff --git a/src/Text/Mjml/Component/Text.hs b/src/Text/Mjml/Component/Text.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Text.hs @@ -0,0 +1,79 @@ +-- | @mj-text@. +module Text.Mjml.Component.Text ( + mjText, +) where + + +import Text.Mjml.Render + + +mjText :: Component +mjText = + (defComponent "mj-text" build') + { endingTag = True + , allowedAttributes = + [ ("align", "enum(left,right,center,justify)") + , ("background-color", "color") + , ("color", "color") + , ("container-background-color", "color") + , ("font-family", "string") + , ("font-size", "unit(px)") + , ("font-style", "string") + , ("font-weight", "string") + , ("height", "unit(px,%)") + , ("letter-spacing", "unitWithNegative(px,em)") + , ("line-height", "unit(px,%,)") + , ("padding-bottom", "unit(px,%)") + , ("padding-left", "unit(px,%)") + , ("padding-right", "unit(px,%)") + , ("padding-top", "unit(px,%)") + , ("padding", "unit(px,%){1,4}") + , ("text-decoration", "string") + , ("text-transform", "string") + , ("vertical-align", "enum(top,bottom,middle)") + ] + , defaults = + [ ("align", "left") + , ("color", "#000000") + , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif") + , ("font-size", "13px") + , ("line-height", "1") + , ("padding", "10px 25px") + ] + } + where + build' s = + let inst = + (defInstance s (pure rendered)) + { getStyles = \case + "text" -> + [ ("font-family", attr s "font-family") + , ("font-size", attr s "font-size") + , ("font-style", attr s "font-style") + , ("font-weight", attr s "font-weight") + , ("letter-spacing", attr s "letter-spacing") + , ("line-height", attr s "line-height") + , ("text-align", attr s "align") + , ("text-decoration", attr s "text-decoration") + , ("text-transform", attr s "text-transform") + , ("color", attr s "color") + , ("height", attr s "height") + ] + _ -> [] + } + renderContent = " htmlAttributes inst [("style", AStyleOf "text")] <> ">" <> fromText (getContent s) <> "" + rendered = case attr s "height" of + Just h + | truthy (Just h) -> + mconcat + [ conditionalTag False $ + "
fromText h + <> "\" style=\"vertical-align:top;height:" + <> fromText h + <> ";\">" + , renderContent + , conditionalTag False "
" + ] + _ -> renderContent + in inst diff --git a/src/Text/Mjml/Component/Wrapper.hs b/src/Text/Mjml/Component/Wrapper.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Component/Wrapper.hs @@ -0,0 +1,50 @@ +-- | @mj-wrapper@: a section whose children are sections, each in its own +-- Outlook row. +module Text.Mjml.Component.Wrapper ( + mjWrapper, +) where + +import Data.Maybe (fromMaybe) + +import Text.Mjml.Component.Section (SectionParts (..), sectionAllowedAttributes, sectionDefaults, sectionParts) +import Text.Mjml.Render + + +mjWrapper :: Component +mjWrapper = + (defComponent "mj-wrapper" build') + { allowedAttributes = sectionAllowedAttributes <> [("gap", "unit(px)")] + , defaults = sectionDefaults + } + where + build' s = let parts = sectionParts s (renderWrappedChildren parts) in instanceOf parts + + renderWrappedChildren parts = + let s = self (instanceOf parts) + containerWidth = fromMaybe "" (ctx s "containerWidth") + in renderChildren + (instanceOf parts) + defChildOptions + { renderer = \c -> + if rawElement (component (self c)) + then render c + else do + body <- render c + pure $ + mconcat + [ startConditionalTag + , "" + , endConditionalTag + , body + , startConditionalTag + , "" + , endConditionalTag + ] + } diff --git a/src/Text/Mjml/Components.hs b/src/Text/Mjml/Components.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Components.hs @@ -0,0 +1,69 @@ +-- | The components MJML ships with. +module Text.Mjml.Components ( + defaultRegistry, + endingTagNames, +) where + +import Data.Map.Strict qualified as Map +import Data.Set (Set) +import Data.Set qualified as Set +import Data.Text (Text) + +import Text.Mjml.Component.Accordion (mjAccordion, mjAccordionElement, mjAccordionText, mjAccordionTitle) +import Text.Mjml.Component.Body (mjBody) +import Text.Mjml.Component.Button (mjButton) +import Text.Mjml.Component.Carousel (mjCarousel, mjCarouselImage) +import Text.Mjml.Component.Column (mjColumn) +import Text.Mjml.Component.Divider (mjDivider) +import Text.Mjml.Component.Group (mjGroup) +import Text.Mjml.Component.Hero (mjHero) +import Text.Mjml.Component.Image (mjImage) +import Text.Mjml.Component.Navbar (mjNavbar, mjNavbarLink) +import Text.Mjml.Component.Raw (mjRaw) +import Text.Mjml.Component.Section (mjSection) +import Text.Mjml.Component.Social (mjSocial, mjSocialElement) +import Text.Mjml.Component.Spacer (mjSpacer) +import Text.Mjml.Component.Table (mjTable) +import Text.Mjml.Component.Text (mjText) +import Text.Mjml.Component.Wrapper (mjWrapper) +import Text.Mjml.Render (Component (..), Registry) + + +defaultRegistry :: Registry +defaultRegistry = + Map.fromList + [ (name c, c) + | c <- + [ mjBody + , mjColumn + , mjGroup + , mjRaw + , mjSection + , mjText + , mjWrapper + , mjSocial + , mjSocialElement + , mjImage + , mjButton + , mjDivider + , mjSpacer + , mjTable + , mjHero + , mjNavbar + , mjNavbarLink + , mjAccordion + , mjAccordionElement + , mjAccordionText + , mjAccordionTitle + , mjCarousel + , mjCarouselImage + ] + ] + + +-- | Tags whose content is raw HTML. The head's ending tags are listed here +-- because the head is not rendered through the registry. +endingTagNames :: Registry -> Set Text +endingTagNames reg = + Set.fromList (map name (filter endingTag (Map.elems reg))) + <> Set.fromList ["mj-title", "mj-preview", "mj-style", "mj-breakpoint", "mj-html-attribute"] diff --git a/src/Text/Mjml/Js.hs b/src/Text/Mjml/Js.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Js.hs @@ -0,0 +1,128 @@ +-- | The handful of JavaScript number semantics MJML's output depends on. +-- +-- MJML computes widths with JavaScript numbers and prints them through +-- template strings, so class names such as @mj-column-per-33-333333333333336@ +-- and widths such as @300px@ are whatever @Number.prototype.toString@, +-- @parseInt@ and @parseFloat@ make of the arithmetic. Reproducing those +-- functions exactly is what lets this implementation emit the same HTML. +module Text.Mjml.Js ( + showNumber, + parseIntJs, + parseFloatJs, + toFixedNumber, + roundJs, + isNaNJs, +) where + +import Data.Char (isDigit, isSpace) +import Data.Ratio ((%)) +import Data.Text (Text) +import Data.Text qualified as T +import Numeric (floatToDigits) + + +-- | @String(x)@ for a JavaScript number. +showNumber :: Double -> Text +showNumber x + | isNaN x = "NaN" + | isInfinite x = if x > 0 then "Infinity" else "-Infinity" + | x == 0 = "0" + | x < 0 = "-" <> showNumber (negate x) + | x < 1e21 && x == fromInteger (truncate x) = T.pack (show (truncate x :: Integer)) + | otherwise = + let (ds, n) = floatToDigits 10 x + k = length ds + digits = T.pack (map toDigitChar ds) + in if + | k <= n && n <= 21 -> digits <> T.replicate (n - k) "0" + | 0 < n && n <= 21 -> T.take n digits <> "." <> T.drop n digits + | -6 < n && n <= 0 -> "0." <> T.replicate (negate n) "0" <> digits + | otherwise -> + let e = n - 1 + sign = if e < 0 then "-" else "+" + mantissa = + if k == 1 + then digits + else T.take 1 digits <> "." <> T.drop 1 digits + in mantissa <> "e" <> sign <> T.pack (show (abs e)) + where + toDigitChar d = toEnum (fromEnum '0' + d) + + +-- | @parseInt(s, 10)@. 'NaN' when no digits lead the string. +parseIntJs :: Text -> Double +parseIntJs input = + let s = T.dropWhile isSpace input + (sign, rest) = splitSign s + ds = T.takeWhile isDigit rest + in if T.null ds + then 0 / 0 + else sign * fromInteger (decimalValue ds) + + +-- | @parseFloat(s)@. 'NaN' when no number leads the string. +parseFloatJs :: Text -> Double +parseFloatJs input = + let s = T.dropWhile isSpace input + (sign, rest) = splitSign s + intPart = T.takeWhile isDigit rest + afterInt = T.drop (T.length intPart) rest + (fracPart, afterFrac) = case T.uncons afterInt of + Just ('.', r) -> let f = T.takeWhile isDigit r in (f, T.drop (T.length f) r) + _ -> ("", afterInt) + expPart = case T.uncons afterFrac of + Just (e, r) + | e == 'e' || e == 'E' -> + let (esign, r') = splitSign r + eds = T.takeWhile isDigit r' + in if T.null eds then Nothing else Just (round esign * decimalValue eds) + _ -> Nothing + in if T.null intPart && T.null fracPart + then 0 / 0 + else + let mantissa = + decimalValue intPart * 10 ^ T.length fracPart + decimalValue fracPart + scale = toInteger (T.length fracPart) - maybe 0 id expPart + value = + if scale >= 0 + then mantissa % (10 ^ scale) + else (mantissa * 10 ^ negate scale) % 1 + in sign * fromRational value + + +-- | The value of a run of decimal digits. +decimalValue :: Text -> Integer +decimalValue = T.foldl' (\acc c -> acc * 10 + toInteger (fromEnum c - fromEnum '0')) 0 + + +splitSign :: Text -> (Double, Text) +splitSign s = case T.uncons s of + Just ('-', r) -> (-1, r) + Just ('+', r) -> (1, r) + _ -> (1, s) + + +-- | @Number(x.toFixed(digits))@: round to a fixed number of decimals the way +-- JavaScript does (ties go to the larger value), then read the result back as +-- a number. +toFixedNumber :: Int -> Double -> Double +toFixedNumber digits x + | isNaN x || isInfinite x = x + | otherwise = + let scale = 10 ^ digits :: Integer + exact = toRational x * fromInteger scale + n = floor (exact + 1 / 2) :: Integer + in fromRational (n % scale) + + +-- | @Math.round(x)@: halves round towards positive infinity. +roundJs :: Double -> Double +roundJs x + | isNaN x || isInfinite x = x + | otherwise = + let r = fromInteger (floor x) + in if x - r >= 0.5 then r + 1 else r + + +isNaNJs :: Double -> Bool +isNaNJs = isNaN diff --git a/src/Text/Mjml/Node.hs b/src/Text/Mjml/Node.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Node.hs @@ -0,0 +1,39 @@ +-- | An MJML document as a tree, in the shape MJML's own parser produces. +module Text.Mjml.Node ( + Node (..), + element, + comment, + lookupAttr, +) where + +import Data.Text (Text) + + +-- | One element of an MJML document. +-- +-- Attribute values and 'content' are kept as source text, exactly as MJML +-- keeps them: they are copied into the output unescaped. Anything built from +-- untrusted data must be escaped before it is put here. +data Node = Node + { tagName :: Text + , attributes :: [(Text, Text)] + -- ^ In source order. + , children :: [Node] + , content :: Text + -- ^ The raw inner HTML of an ending tag (@mj-text@, @mj-button@, …), or + -- the trimmed text of any other element. + } + deriving stock (Show, Eq) + + +element :: Text -> [(Text, Text)] -> [Node] -> Node +element name attrs kids = Node name attrs kids "" + + +-- | A comment, which MJML carries through the body as an @mj-raw@. +comment :: Text -> Node +comment body = Node "mj-raw" [] [] ("") + + +lookupAttr :: Text -> Node -> Maybe Text +lookupAttr name = lookup name . attributes diff --git a/src/Text/Mjml/Parser.hs b/src/Text/Mjml/Parser.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Parser.hs @@ -0,0 +1,184 @@ +-- | MJML's XML syntax, read the way @mjml-parser-xml@ reads it. +-- +-- That parser is htmlparser2 in HTML mode with entity decoding off, so this is +-- not an XML parser: tag names are lower-cased, attribute values are kept +-- verbatim, and the body of an /ending tag/ (@mj-text@, @mj-button@, …) is not +-- parsed at all but kept as the raw source between its tags. +module Text.Mjml.Parser ( + parseMjml, + ParseError (..), +) where + +import Data.Char (isAlpha, isSpace, toLower) +import Data.Set (Set) +import Data.Set qualified as Set +import Data.Text (Text) +import Data.Text qualified as T +import Data.Text.Unsafe (lengthWord8, takeWord8) + +import Text.Mjml.Node (Node (..), comment) + + +newtype ParseError = ParseError Text + deriving stock (Show, Eq) + + +data Token + = TOpen Text [(Text, Text)] Bool + -- ^ Name, attributes, self-closing. + | TClose Text + | TText Text + | TComment Text + | TOther + deriving stock (Show, Eq) + + +-- | Parse a document. The set names the ending tags, whose content is kept as +-- raw HTML instead of being parsed into children. +parseMjml :: Set Text -> Text -> Either ParseError Node +parseMjml endingTags source = + case go source [] Nothing of + Just root -> Right root + Nothing -> Left (ParseError "Parsing failed. Check your mjml.") + where + -- The stack holds open elements with their children reversed. + go :: Text -> [Node] -> Maybe Node -> Maybe Node + go input stack root + | T.null input = finish stack root + | otherwise = + let (tok, rest) = nextToken input + in case tok of + TOpen name attrs selfClosing + | name == "mj-include" -> go rest stack root + | name `Set.member` endingTags -> + let (raw, rest') = + if selfClosing then ("", rest) else scanRaw endingTags name rest + node = Node name attrs [] (T.strip raw) + in attach node rest' stack root + | selfClosing -> attach (Node name attrs [] "") rest stack root + | otherwise -> go rest (Node name attrs [] "" : stack) root + TClose name + | any ((== name) . tagName) stack -> + let (popped, stack') = closeTo name stack + in case stack' of + [] -> go rest [] (root `orElse` Just popped) + _ -> attachClosed popped rest stack' root + | otherwise -> go rest stack root + TText t -> case stack of + cur : more + | not (T.null (T.strip t)) -> + go rest (cur {content = T.strip (content cur <> T.strip t)} : more) root + _ -> go rest stack root + TComment body -> case stack of + cur : more -> go rest (cur {children = comment body : children cur} : more) root + [] -> go rest stack root + TOther -> go rest stack root + + attach node rest stack root = case stack of + cur : more -> go rest (cur {children = node : children cur} : more) root + [] -> go rest [] (root `orElse` Just node) + + attachClosed node rest stack root = case stack of + cur : more -> go rest (cur {children = node : children cur} : more) root + [] -> go rest [] (root `orElse` Just node) + + -- Pop up to and including the named element, folding each popped + -- element into its parent. + closeTo name = \case + top : more + | tagName top == name -> (finalize top, more) + | otherwise -> case more of + parent : more' -> closeTo name (parent {children = finalize top : children parent} : more') + [] -> (finalize top, []) + [] -> (Node name [] [] "", []) + + finish stack root = case stack of + [] -> root + [top] -> root `orElse` Just (finalize top) + top : parent : more -> finish (parent {children = finalize top : children parent} : more) root + + finalize node = node {children = reverse (children node)} + + orElse (Just a) _ = Just a + orElse Nothing b = b + + +-- | Read the raw content of an ending tag up to its matching close tag, +-- returning the content and the input after the close tag. +scanRaw :: Set Text -> Text -> Text -> (Text, Text) +scanRaw endingTags _name input = loop (1 :: Int) input + where + -- The content is the input up to where the closing tag starts; measuring + -- in UTF-8 bytes keeps that constant time per token. + upTo rest = takeWord8 (lengthWord8 input - lengthWord8 rest) input + loop depth rest + | T.null rest = (input, "") + | otherwise = + let (tok, rest') = nextToken rest + in case tok of + TOpen n _ False + | n `Set.member` endingTags -> loop (depth + 1) rest' + TClose n + | n `Set.member` endingTags -> + if depth == 1 + then (upTo rest, rest') + else loop (depth - 1) rest' + _ -> loop depth rest' + + +nextToken :: Text -> (Token, Text) +nextToken input = case T.uncons input of + Just ('<', after) + | "!--" `T.isPrefixOf` after -> + let (body, rest) = T.breakOn "-->" (T.drop 3 after) + in (TComment body, T.drop 3 rest) + | "![CDATA[" `T.isPrefixOf` after -> + let (body, rest) = T.breakOn "]]>" (T.drop 8 after) + in (TText body, T.drop 3 rest) + | Just (c, _) <- T.uncons after, c == '!' || c == '?' -> + let (_, rest) = T.breakOn ">" after in (TOther, T.drop 1 rest) + | Just ('/', afterSlash) <- T.uncons after + , Just (c, _) <- T.uncons afterSlash + , isAlpha c -> + let (name, rest) = T.break (\x -> x == '>' || isSpace x) afterSlash + (_, rest') = T.breakOn ">" rest + in (TClose (T.toLower name), T.drop 1 rest') + | Just (c, _) <- T.uncons after, isAlpha c -> openTag after + _ -> + let (t, rest) = T.break (== '<') input + in if T.null t + then (TText (T.take 1 input), T.drop 1 input) + else (TText t, rest) + + +openTag :: Text -> (Token, Text) +openTag after = + let (name, rest) = T.break (\x -> x == '>' || x == '/' || isSpace x) after + in attrs (T.map toLower name) [] rest + where + attrs name acc s = + let s' = T.dropWhile isSpace s + in case T.uncons s' of + Nothing -> (TOpen name (reverse acc) False, "") + Just ('>', r) -> (TOpen name (reverse acc) False, r) + Just ('/', r) + | Just ('>', r') <- T.uncons (T.dropWhile isSpace r) -> (TOpen name (reverse acc) True, r') + | otherwise -> attrs name acc r + _ -> + let (key, r) = T.break (\x -> x == '=' || x == '>' || x == '/' || isSpace x) s' + r1 = T.dropWhile isSpace r + in case T.uncons r1 of + Just ('=', r2) -> + let r3 = T.dropWhile isSpace r2 + in case T.uncons r3 of + Just (q, r4) + | q == '"' || q == '\'' -> + let (v, r5) = T.break (== q) r4 + in attrs name ((key, v) : acc) (T.drop 1 r5) + _ -> + let (v, r5) = T.break (\x -> x == '>' || isSpace x) r3 + in attrs name ((key, v) : acc) r5 + _ + | T.null key -> attrs name acc (T.drop 1 r1) + | otherwise -> attrs name ((key, "") : acc) r1 + diff --git a/src/Text/Mjml/Render.hs b/src/Text/Mjml/Render.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Render.hs @@ -0,0 +1,577 @@ +-- | The machinery every component renders through: MJML's @BodyComponent@, +-- its attribute resolution, and the document-wide data the head collects. +-- +-- The structure follows @mjml-core@ closely on purpose. Each MJML component +-- is a JavaScript class whose methods read attributes, compute styles and +-- render template strings; here a component is a function from 'Self' (its +-- attributes, position and inherited context) to an 'Instance' holding the +-- same methods as closures. Keeping that shape is what makes a component easy +-- to check line by line against the original. +module Text.Mjml.Render ( + -- * Attributes + Attrs, + merge, + -- * Styles + Style, + Styles, + style, + mergeStyles, + -- * Document data + GlobalData (..), + initialGlobalData, + R, + runR, + addMediaQuery, + addHeadStyle, + addComponentHeadStyle, + nextId, + -- * Components + Component (..), + defComponent, + Registry, + Props (..), + Self (..), + Instance (..), + defInstance, + attr, + attrOr, + truthy, + hasAttr, + getContent, + ctx, + -- * Rendering helpers + Builder, + fromText, + fromChar, + AttrValue (..), + htmlAttributes, + renderStyles, + ChildOptions (..), + defChildOptions, + renderChildren, + instantiate, + -- * Box model + shorthandValue, + borderValue, + BoxWidths (..), + boxWidths, + suffixCssClasses, + conditionalTag, + msoConditionalTag, + startConditionalTag, + endConditionalTag, + startNegationConditionalTag, + endNegationConditionalTag, + startMsoConditionalTag, + startMsoNegationConditionalTag, + widthParser, +) where + +import Control.Monad.Trans.State.Strict (State, get, gets, modify', runState) +import Data.Char (isDigit) +import Data.Map.Strict (Map) +import Data.Map.Strict qualified as Map +import Data.Set qualified as Set +import Data.Maybe (fromMaybe, isJust) +import Data.Text (Text) +import Data.Text qualified as T +import Data.Text.Builder.Linear (Builder, fromChar, fromText) + +import Text.Mjml.Js (parseFloatJs, parseIntJs) +import Text.Mjml.Node (Node (..)) + + +-- | Attributes in JavaScript object order: a key keeps its first position +-- when a later merge overrides its value. +type Attrs = [(Text, Text)] + + +-- | @{...a, ...b}@: later keys override earlier ones in place, new keys +-- are appended. Within @b@ a repeated key keeps its first position and its +-- last value, as in an object literal. +merge :: [(Text, v)] -> [(Text, v)] -> [(Text, v)] +merge a [] = a +merge a b = + [(k, Map.findWithDefault v k later) | (k, v) <- a] + <> appended Set.empty b + where + later = Map.fromList b + earlier = Set.fromList (map fst a) + appended _ [] = [] + appended seen ((k, _) : rest) + | k `Set.member` earlier || k `Set.member` seen = appended seen rest + | otherwise = (k, later Map.! k) : appended (Set.insert k seen) rest + + +-- | One CSS declaration; 'Nothing' values are left out, as MJML drops +-- @undefined@ and @null@. +type Style = (Text, Maybe Text) + + +type Styles = [Style] + + +style :: Text -> Text -> Style +style k v = (k, Just v) + + +mergeStyles :: Styles -> Styles -> Styles +mergeStyles = merge + + +-- | What the head collects and the body adds to while rendering: MJML's +-- @globalData@. +data GlobalData = GlobalData + { breakpoint :: Text + , classes :: Map Text Attrs + , classesDefault :: Map Text (Map Text Attrs) + , defaultAttributes :: Map Text Attrs + , fonts :: [(Text, Text)] + , inlineStyle :: [Text] + , headStyle :: [(Text, Text -> Text)] + , componentsHeadStyle :: [Text -> Text] + , headRaw :: [Text] + , mediaQueries :: [(Text, Text)] + , preview :: Text + , styles :: [Text] + , title :: Text + , forceOWADesktop :: Bool + , lang :: Text + , dir :: Text + , htmlAttributes' :: [(Text, Attrs)] + , idCounter :: Int + } + + +initialGlobalData :: [(Text, Text)] -> GlobalData +initialGlobalData defaultFonts = + GlobalData + { breakpoint = "480px" + , classes = Map.empty + , classesDefault = Map.empty + , defaultAttributes = Map.empty + , fonts = defaultFonts + , inlineStyle = [] + , headStyle = [] + , componentsHeadStyle = [] + , headRaw = [] + , mediaQueries = [] + , preview = "" + , styles = [] + , title = "" + , forceOWADesktop = False + , lang = "und" + , dir = "auto" + , htmlAttributes' = [] + , idCounter = 0 + } + + +type R = State GlobalData + + +runR :: R a -> GlobalData -> (a, GlobalData) +runR = runState + + +addMediaQuery :: Text -> Maybe (Text, Text) -> Maybe Text -> R () +addMediaQuery className widthUnit padding = + let rule = + "{" + <> maybe "" (\(w, u) -> " width:" <> w <> u <> " !important; max-width: " <> w <> u <> ";") widthUnit + <> maybe "" (\p -> " padding: " <> p <> " !important;") padding + <> " }" + in modify' $ \g -> g {mediaQueries = merge (mediaQueries g) [(className, rule)]} + + +addHeadStyle :: Text -> (Text -> Text) -> R () +addHeadStyle name f = modify' $ \g -> g {headStyle = merge (headStyle g) [(name, f)]} + + +addComponentHeadStyle :: (Text -> Text) -> R () +addComponentHeadStyle f = modify' $ \g -> g {componentsHeadStyle = componentsHeadStyle g <> [f]} + + +-- | A fresh identifier where MJML would use a random hex string. +nextId :: R Text +nextId = do + n <- gets idCounter + modify' $ \g -> g {idCounter = n + 1} + let s = T.pack (show n) + pure (T.replicate (16 - T.length s) "0" <> s) + + +-- | A component definition: MJML's component class. +data Component = Component + { name :: Text + , endingTag :: Bool + , rawElement :: Bool + , allowedAttributes :: [(Text, Text)] + -- ^ Attribute names and their MJML type, e.g. @unit(px,%){1,4}@. + , defaults :: Attrs + , componentHeadStyle :: Maybe (Text -> Text) + -- ^ A style block added once per document, given the breakpoint. + , prepare :: Self -> R Self + -- ^ Work MJML does in a component's constructor, such as drawing a + -- random identifier. Runs once per instantiation, before 'build'. + , build :: Self -> Instance + } + + +defComponent :: Text -> (Self -> Instance) -> Component +defComponent n b = + Component + { name = n + , endingTag = False + , rawElement = False + , allowedAttributes = [] + , defaults = [] + , componentHeadStyle = Nothing + , prepare = pure + , build = b + } + + +type Registry = Map Text Component + + +-- | Where a component sits among its siblings. +data Props = Props + { index :: Int + , isFirst :: Bool + , isLast :: Bool + , sibling :: Int + , nonRawSiblings :: Int + , extra :: Attrs + -- ^ Anything else a parent passes down through @props@. + } + + +-- | Everything a component's methods can see: @this@. +data Self = Self + { attrs :: Attrs + , attrIndex :: Map Text Text + -- ^ 'attrs' again, for lookups. + , props :: Props + , context :: Attrs + -- ^ The child context: @containerWidth@, @gutter@ and so on. + , node :: Node + , registry :: Registry + , component :: Component + , mjClassScope :: Text + -- ^ The nearest @mj-class@ above this element, whose per-tag defaults + -- apply to its children. + } + + +data Instance = Instance + { self :: Self + , getStyles :: Text -> Styles + , render :: R Builder + , childContext :: Attrs + , instanceHeadStyle :: Maybe (Text -> Text) + -- ^ A style block this instance adds to the head, given the breakpoint: + -- MJML's @componentHeadStyle@. + } + + +defInstance :: Self -> R Builder -> Instance +defInstance s r = + Instance + { self = s + , getStyles = const [] + , render = r + , childContext = context s + , instanceHeadStyle = Nothing + } + + +attr :: Self -> Text -> Maybe Text +attr s k = Map.lookup k (attrIndex s) + + +attrOr :: Self -> Text -> Text -> Text +attrOr s k d = fromMaybe d (attr s k) + + +-- | JavaScript truthiness of an attribute: present, not empty, and not the +-- string @false@ (which MJML's parser turns into the boolean). +truthy :: Maybe Text -> Bool +truthy = \case + Just v -> not (T.null v) && v /= "false" + Nothing -> False + + +hasAttr :: Self -> Text -> Bool +hasAttr s = isJust . attr s + + +getContent :: Self -> Text +getContent s = T.strip (content (node s)) + + +ctx :: Self -> Text -> Maybe Text +ctx s k = lookup k (context s) + + +data AttrValue + = AV Text + | AStyleOf Text + -- ^ A named group from the component's 'getStyles'. + | AStyles Styles + | ANone + + +-- | @htmlAttributes@: render attributes, leaving out absent ones. +htmlAttributes :: Instance -> [(Text, AttrValue)] -> Builder +htmlAttributes inst = foldMap one + where + one (k, v) = case v of + ANone -> mempty + AV t -> attribute k (fromText t) + AStyleOf groupName -> attribute k (styleBuilder (getStyles inst groupName)) + AStyles ss -> attribute k (styleBuilder ss) + attribute k value = fromChar ' ' <> fromText k <> "=\"" <> value <> fromChar '"' + + +styleBuilder :: Styles -> Builder +styleBuilder = foldMap (\(k, v) -> maybe mempty (\x -> fromText k <> fromChar ':' <> fromText x <> fromChar ';') v) + + +renderStyles :: Styles -> Text +renderStyles = T.concat . map (\(k, v) -> maybe "" (\x -> k <> ":" <> x <> ";") v) + + +data ChildOptions = ChildOptions + { childNodes :: Maybe [Node] + , childAttributes :: Attrs + , childProps :: Attrs + , renderer :: Instance -> R Builder + } + + +defChildOptions :: ChildOptions +defChildOptions = + ChildOptions + { childNodes = Nothing + , childAttributes = [] + , childProps = [] + , renderer = render + } + + +-- | @renderChildren@. +renderChildren :: Instance -> ChildOptions -> R Builder +renderChildren parent opts = do + let s = self parent + kids = fromMaybe (children (node s)) (childNodes opts) + n = length kids + isRaw k = maybe False rawElement (Map.lookup (tagName k) (registry s)) + nonRaw = length (filter (not . isRaw) kids) + outs <- traverse + ( \(i, k) -> do + let p = + Props + { index = i + , isFirst = i == 0 + , isLast = i + 1 == n + , sibling = n + , nonRawSiblings = nonRaw + , extra = childProps opts + } + mi <- instantiate (registry s) (childScope s) (childContext parent) p (childAttributes opts) k + maybe (pure "") (renderer opts) mi + ) + (zip [0 ..] kids) + pure (mconcat outs) + + +childScope :: Self -> Text +childScope s = fromMaybe (mjClassScope s) (lookup "mj-class" (attributes (node s))) + + +-- | @initComponent@: build a component for a node, registering its head +-- style. 'Nothing' for a tag no component handles. +-- +-- The node's own attributes stay as written; @mj-attributes@ defaults and +-- @mj-class@ values are folded in here, as MJML's @applyAttributes@ does +-- before rendering, so that a component can still tell what was written on +-- the element itself. +instantiate :: Registry -> Text -> Attrs -> Props -> Attrs -> Node -> R (Maybe Instance) +instantiate reg scope context' p inherited n = case Map.lookup (tagName n) reg of + Nothing -> pure Nothing + Just c -> do + g <- get + let resolved = resolveAttributes c g scope inherited n + s <- prepare c (Self (Map.toList resolved) resolved p context' n reg c scope) + let inst = build c s + traverse_' (addHeadStyle (name c)) (componentHeadStyle c) + traverse_' addComponentHeadStyle (instanceHeadStyle inst) + pure (Just inst) + where + traverse_' f = maybe (pure ()) f + + +-- | An element's attributes, from the lowest precedence to the highest: the +-- component's defaults, @mj-all@, what the parent passes down, the tag's +-- @mj-attributes@ defaults, its @mj-class@ values, the per-tag defaults of +-- the enclosing @mj-class@, and what is written on the element. The last four +-- are MJML's @applyAttributes@. +resolveAttributes :: Component -> GlobalData -> Text -> Attrs -> Node -> Map Text Text +resolveAttributes c g parentMjClass inherited n = + formatAttributes c $ + Map.unions + [ Map.delete "mj-class" (Map.fromList own) + , fromParentClasses + , fromClasses + , Map.fromList (Map.findWithDefault [] (tagName n) (defaultAttributes g)) + , Map.fromList inherited + , Map.fromList (Map.findWithDefault [] "mj-all" (defaultAttributes g)) + , Map.fromList (defaults c) + ] + where + own = attributes n + -- Later classes win; css-class values accumulate instead. + fromClasses = + foldl' + ( \acc cls -> + let values = Map.fromList (Map.findWithDefault [] cls (classes g)) + joined = case (Map.lookup "css-class" acc, Map.lookup "css-class" values) of + (Just x, Just y) -> Map.singleton "css-class" (x <> " " <> y) + _ -> Map.empty + in Map.unions [joined, values, acc] + ) + Map.empty + (maybe [] (T.splitOn " ") (lookup "mj-class" own)) + fromParentClasses = + foldl' + ( \acc cls -> + Map.union + (maybe Map.empty (Map.fromList . Map.findWithDefault [] (tagName n)) (Map.lookup cls (classesDefault g))) + acc + ) + Map.empty + (T.splitOn " " parentMjClass) + + +-- | MJML's type coercion on declared attributes. Only colours change: a +-- three-digit hex colour is expanded. +formatAttributes :: Component -> Map Text Text -> Map Text Text +formatAttributes c attrMap = + foldl' + (\m (k, ty) -> if "color" `T.isPrefixOf` ty then Map.adjust expandColor k m else m) + attrMap + (allowedAttributes c) + where + expandColor v = case T.unpack v of + ['#', a, b, cc] | all isWord [a, b, cc] -> T.pack ['#', a, a, b, b, cc, cc] + _ -> v + isWord ch = ch == '_' || isDigit ch || ('a' <= ch && ch <= 'z') || ('A' <= ch && ch <= 'Z') + + +-- | @getShorthandAttrValue@: one side of a CSS shorthand such as @padding@. +shorthandValue :: Self -> Text -> Text -> Double +shorthandValue s attribute direction = + case attr s (attribute <> "-" <> direction) of + Just v | not (T.null v) -> parseIntJs v + _ -> case attr s attribute of + Just v | not (T.null v) -> shorthandParser v direction + _ -> 0 + + +shorthandParser :: Text -> Text -> Double +shorthandParser cssValue direction = + let parts = take 4 (T.words cssValue) + pick i = maybe 0 parseIntJs (lookupIndex i parts) + in case length parts of + 2 -> pick (if direction `elem` ["top", "bottom"] then 0 else 1) + 3 -> pick (case direction of "top" -> 0; "bottom" -> 2; _ -> 1) + 4 -> pick (case direction of "top" -> 0; "right" -> 1; "bottom" -> 2; _ -> 3) + _ -> parseIntJs cssValue + where + lookupIndex i xs = if i < length xs then Just (xs !! i) else Nothing + + +-- | @getShorthandBorderValue@: the width of a border shorthand. +borderValue :: Self -> Maybe Text -> Text -> Double +borderValue s direction attribute = + let directional = direction >>= \d -> attr s (attribute <> "-" <> d) + value = case directional of + Just v | truthy (Just v) -> v + _ -> case attr s attribute of + Just v | truthy (Just v) -> v + _ -> "0" + in borderParser value + + +-- | The first run of digits that starts the string or follows a space. +borderParser :: Text -> Double +borderParser border = go (T.unpack border) True + where + go [] _ = 0 + go str@(c : rest) atBoundary + | atBoundary && isDigit c = + let ds = takeWhile isDigit str + n = parseIntJs (T.pack ds) + in if isNaN n || n == 0 then 0 else n + | otherwise = go rest (c == ' ') + + +data BoxWidths = BoxWidths + { totalWidth :: Double + , borders :: Double + , paddings :: Double + , box :: Double + } + + +-- | @getBoxWidths@. +boxWidths :: Self -> BoxWidths +boxWidths s = + let parsed = parseIntJs (fromMaybe "" (ctx s "containerWidth")) + pads = shorthandValue s "padding" "right" + shorthandValue s "padding" "left" + bords = borderValue s (Just "right") "border" + borderValue s (Just "left") "border" + in BoxWidths parsed bords pads (parsed - pads - bords) + + +suffixCssClasses :: Maybe Text -> Text -> Text +suffixCssClasses classes suffix = case classes of + Just c | not (T.null c) -> T.intercalate " " [x <> "-" <> suffix | x <- T.splitOn " " c] + _ -> "" + + +startConditionalTag, endConditionalTag, startNegationConditionalTag, endNegationConditionalTag :: Builder +startConditionalTag = "" +startNegationConditionalTag = "" +endNegationConditionalTag = "" + + +startMsoConditionalTag, startMsoNegationConditionalTag :: Builder +startMsoConditionalTag = "" + + +conditionalTag :: Bool -> Builder -> Builder +conditionalTag negation body = + (if negation then startNegationConditionalTag else startConditionalTag) + <> body + <> (if negation then endNegationConditionalTag else endConditionalTag) + + +msoConditionalTag :: Bool -> Builder -> Builder +msoConditionalTag negation body = + (if negation then startMsoNegationConditionalTag else startMsoConditionalTag) + <> body + <> (if negation then endNegationConditionalTag else endConditionalTag) + + +-- | @widthParser@: the number and unit of a width. With the flag set, +-- percentages are truncated to integers, as MJML does by default. +widthParser :: Bool -> Text -> (Double, Text) +widthParser parseFloatToInt width = + let unit = T.takeWhileEnd (not . isDigit) width + parser = case unit of + "%" | not parseFloatToInt -> parseFloatJs + _ -> parseIntJs + in (parser width, if T.null unit then "px" else unit) diff --git a/src/Text/Mjml/Schema.hs b/src/Text/Mjml/Schema.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Schema.hs @@ -0,0 +1,201 @@ +-- | What MJML's validator knows about a document: which elements may contain +-- which, which attributes each element takes, and what values those accept. +-- +-- The renderer itself never rejects a document, as MJML does not; this module +-- is for tools that want to, such as a compile-time template checker. +module Text.Mjml.Schema ( + allowedChildren, + allowedAttributesOf, + globalAttributes, + checkAttribute, + checkChild, + knownTag, +) where + +import Data.Char (isDigit, toLower) +import Data.Map.Strict (Map) +import Data.Map.Strict qualified as Map +import Data.Text (Text) +import Data.Text qualified as T + +import Text.Mjml.Render (Component (..), Registry) + + +-- | MJML's @dependencies@: the elements each element may contain. 'Nothing' +-- for an element that accepts anything (@mj-attributes@, whose children are +-- tag names). +allowedChildren :: Map Text (Maybe [Text]) +allowedChildren = + Map.fromList + [ ("mjml", Just ["mj-body", "mj-head", "mj-raw"]) + , ("mj-accordion", Just ["mj-accordion-element", "mj-raw"]) + , ("mj-accordion-element", Just ["mj-accordion-title", "mj-accordion-text", "mj-raw"]) + , ("mj-accordion-title", Just []) + , ("mj-accordion-text", Just []) + , ("mj-attributes", Nothing) + , ("mj-body", Just ["mj-raw", "mj-section", "mj-wrapper", "mj-hero"]) + , ("mj-button", Just []) + , ("mj-carousel", Just ["mj-carousel-image"]) + , ("mj-carousel-image", Just []) + , ("mj-column", Just ["mj-accordion", "mj-button", "mj-carousel", "mj-divider", "mj-image", "mj-raw", "mj-social", "mj-spacer", "mj-table", "mj-text", "mj-navbar"]) + , ("mj-html-attribute", Just []) + , ("mj-html-attributes", Just ["mj-selector"]) + , ("mj-divider", Just []) + , ("mj-group", Just ["mj-column", "mj-raw"]) + , ("mj-head", Just ["mj-attributes", "mj-breakpoint", "mj-html-attributes", "mj-font", "mj-preview", "mj-style", "mj-title", "mj-raw"]) + , ("mj-hero", Just ["mj-accordion", "mj-button", "mj-carousel", "mj-divider", "mj-image", "mj-social", "mj-spacer", "mj-table", "mj-text", "mj-navbar", "mj-raw"]) + , ("mj-image", Just []) + , ("mj-navbar", Just ["mj-navbar-link", "mj-raw"]) + , ("mj-raw", Just []) + , ("mj-section", Just ["mj-column", "mj-group", "mj-raw"]) + , ("mj-selector", Just ["mj-html-attribute"]) + , ("mj-social", Just ["mj-social-element", "mj-raw"]) + , ("mj-social-element", Just []) + , ("mj-spacer", Just []) + , ("mj-table", Just []) + , ("mj-text", Just []) + , ("mj-wrapper", Just ["mj-hero", "mj-raw", "mj-section"]) + ] + + +-- | Attributes every element takes. +globalAttributes :: [Text] +globalAttributes = ["mj-class", "css-class"] + + +-- | The head elements are handled outside the component registry. +headAttributes :: Map Text [(Text, Text)] +headAttributes = + Map.fromList + [ ("mjml", [("lang", "string"), ("dir", "string"), ("owa", "string")]) + , ("mj-head", []) + , ("mj-attributes", []) + , ("mj-breakpoint", [("width", "unit(px)")]) + , ("mj-font", [("name", "string"), ("href", "string")]) + , ("mj-preview", []) + , ("mj-style", [("inline", "string")]) + , ("mj-title", []) + , ("mj-html-attributes", []) + , ("mj-selector", [("path", "string")]) + , ("mj-html-attribute", [("name", "string")]) + ] + + +knownTag :: Registry -> Text -> Bool +knownTag reg t = Map.member t reg || Map.member t headAttributes + + +-- | The declared attributes of an element and their types, or 'Nothing' for +-- an unknown element. +allowedAttributesOf :: Registry -> Text -> Maybe [(Text, Text)] +allowedAttributesOf reg t = case Map.lookup t reg of + Just c -> Just (allowedAttributes c) + Nothing -> Map.lookup t headAttributes + + +-- | Check one attribute of an element: 'Nothing' when it is fine, otherwise +-- the reason, worded as MJML's validator words it. +checkAttribute :: Registry -> Text -> Text -> Maybe Text -> Maybe Text +checkAttribute reg tag attrName value = case allowedAttributesOf reg tag of + Nothing -> Nothing + Just allowed + | attrName `elem` globalAttributes -> Nothing + | otherwise -> case lookup attrName allowed of + Nothing -> + Just $ + "Attribute " + <> attrName + <> " is illegal on <" + <> tag + <> ">; it takes " + <> T.intercalate ", " (map fst allowed <> globalAttributes) + Just ty -> value >>= \v -> fmap (\m -> "Attribute " <> attrName <> " " <> m) (checkType ty v) + + +-- | Check that a child may appear inside a parent. +checkChild :: Registry -> Text -> Text -> Maybe Text +checkChild reg parent child + | not (knownTag reg child) = Nothing + | otherwise = case Map.lookup parent allowedChildren of + Just (Just kids) + | child `notElem` kids -> + Just $ + child + <> " cannot be used inside " + <> parent + <> ", only inside: " + <> T.intercalate ", " [p | (p, Just ks) <- Map.toList allowedChildren, child `elem` ks] + _ -> Nothing + + +-- | MJML's attribute types: @color@, @unit(...)@, @enum(...)@, @boolean@, +-- @integer@ and @string@. +checkType :: Text -> Text -> Maybe Text +checkType ty value + | "color" `T.isPrefixOf` ty = + if validColor then Nothing else Just ("has invalid value: " <> value <> " for type Color") + | "unit" `T.isPrefixOf` ty = + if validUnit then Nothing else Just ("has invalid value: " <> value <> " for type Unit, only accepts (" <> T.intercalate ", " units <> ") units and " <> T.intercalate " to " counts <> " value(s)") + | "enum" `T.isPrefixOf` ty = + if value `elem` params then Nothing else Just ("has invalid value: " <> value <> " for type Enum, only accepts " <> T.intercalate ", " params) + | "boolean" `T.isPrefixOf` ty = + if value `elem` ["true", "false"] then Nothing else Just ("has invalid value: " <> value <> " for type Boolean") + | "integer" `T.isPrefixOf` ty = + if T.any isDigit value then Nothing else Just ("has invalid value: " <> value <> " for type Integer") + | otherwise = Nothing + where + params = T.splitOn "," (T.takeWhile (/= ')') (T.drop 1 (T.dropWhile (/= '(') ty))) + units = params + counts = case T.breakOn "{" ty of + (_, rest) | not (T.null rest) -> T.splitOn "," (T.takeWhile (/= '}') (T.drop 1 rest)) + _ -> ["1"] + allowNegative = "unitWithNegative" `T.isPrefixOf` ty + allowAuto = "auto" `elem` units + realUnits = filter (/= "auto") units + + validUnit = + let items = T.splitOn " " (T.dropWhileEnd (== ' ') value) + n = length items + (lo, hi) = case map (read . T.unpack) counts :: [Int] of + [a] -> (a, a) + [a, b] -> (a, b) + _ -> (1, 1) + in n >= lo && n <= hi && all validItem items + validItem item + | item == "0" = True + | allowAuto && item == "auto" = True + | otherwise = + let numeric c = isDigit c || c == ',' || c == '.' || (allowNegative && c == '-') + number = T.takeWhile numeric item + suffix = T.drop (T.length number) item + in not (T.null number) && suffix `elem` realUnits + + lowered = T.map toLower value + validColor = + ("rgba(" `T.isInfixOf` lowered) + || ("rgb(" `T.isInfixOf` lowered) + || hexColor + || lowered `elem` namedColors + hexColor = case T.uncons lowered of + Just ('#', h) -> (T.length h == 3 || T.length h == 6) && T.all (`elem` ("0123456789abcdef" :: String)) h + _ -> False + + +namedColors :: [Text] +namedColors = + T.words + "aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown \ + \burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan \ + \darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid \ + \darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet \ + \deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro \ + \ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo inherit ivory \ + \khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow \ + \lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray \ + \lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine \ + \mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise \ + \mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab \ + \orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru \ + \pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown \ + \seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan \ + \teal thistle tomato transparent turquoise violet wheat white whitesmoke yellow yellowgreen" diff --git a/src/Text/Mjml/Skeleton.hs b/src/Text/Mjml/Skeleton.hs new file mode 100644 --- /dev/null +++ b/src/Text/Mjml/Skeleton.hs @@ -0,0 +1,159 @@ +-- | The document around the rendered body: MJML's @skeleton@ helper and the +-- head blocks it assembles. +module Text.Mjml.Skeleton ( + skeleton, +) where + +import Data.Text (Text) +import Data.Text qualified as T +import Data.Text.Builder.Linear (Builder, fromText) +import Data.Text.Unsafe (lengthWord8) + +import Text.Mjml.Render (GlobalData (..)) + + +-- | The whole document around a rendered body, with Outlook conditionals +-- merged, written into one builder. The text before the doctype comes from +-- @mj-raw position="file-start"@. +skeleton :: GlobalData -> Text -> Text -> Builder +skeleton g beforeDoctype body = + foldMap fromText (outlookChunks (beforeDoctype <> headPart)) + <> foldMap fromText (outlookChunks body) + <> "\n\n" + where + headPart = + T.concat + [ "\n\n\n" + , title g + , "\n\n\n\n" + , "\n" + , "\n" + , "\n" + , "\n" + , "\n" + , fontsTags g body + , mediaQueriesTags g + , styleFromComponents g + , styleFromTags g + , T.intercalate "\n" (headRaw g) + , "\n\n" + ] + + +-- | @buildFontsTags@: import a known font when the rendered body, or an +-- inlined style, names it in a @font-family@. +fontsTags :: GlobalData -> Text -> Text +fontsTags g body = + let used = [url | (fname, url) <- fonts g, usesFont fname] + in if null used + then "" + else + T.concat + [ "\n" + , T.intercalate "\n" [" u <> "\" rel=\"stylesheet\" type=\"text/css\">" | u <- used] + , "\n\n\n" + ] + where + -- MJML matches "[^"]*font-family:[^"]*NAME[^"]*" against the body, + -- ignoring case: some stretch between two quotes names the font after a + -- font-family. That is every "font-family:" with a quote somewhere before + -- it, up to the next quote, which must exist. Inlined styles are matched + -- with font-family:[^;}]*NAME. + families = fromBody <> concatMap fromInline (inlineStyle g) + -- Every "font-family:", in any case, ends in "y:" or "Y:". Searching for + -- those directly finds them all without copying the document. + firstQuote = lengthWord8 (fst (T.breakOn "\"" body)) + fromBody = + [ asciiLower stretch + | needle <- ["y:", "Y:"] + , (before, match) <- T.breakOnAll needle body + , asciiLower (T.takeEnd 10 before) == "font-famil" + , lengthWord8 before > firstQuote + , let (stretch, after) = T.break (== '"') (T.drop 2 match) + , not (T.null after) + ] + fromInline style = + [ asciiLower (T.takeWhile (`notElem` (";}" :: String)) (T.drop 2 match)) + | needle <- ["y:", "Y:"] + , (before, match) <- T.breakOnAll needle style + , asciiLower (T.takeEnd 10 before) == "font-famil" + ] + usesFont fname = any (asciiLower fname `T.isInfixOf`) families + + +-- | Lower-case ASCII letters only. Font names and @font-family@ are ASCII, and +-- unlike 'T.toLower' this never changes the length of the text. +asciiLower :: Text -> Text +asciiLower = T.map (\c -> if c >= 'A' && c <= 'Z' then toEnum (fromEnum c + 32) else c) + + +mediaQueriesTags :: GlobalData -> Text +mediaQueriesTags g + | null (mediaQueries g) = "" + | otherwise = + let grouped prefix = + [ T.intercalate ", " [prefix <> "." <> c | (c, q') <- mediaQueries g, q' == q] <> " " <> q + | q <- unique (map snd (mediaQueries g)) + ] + bp = breakpoint g + in T.concat + [ "\n\n" + , if forceOWADesktop g + then "\n" + else "" + ] + where + unique = foldr (\x acc -> x : filter (/= x) acc) [] + + +styleFromComponents :: GlobalData -> Text +styleFromComponents g = + let fs = componentsHeadStyle g <> map snd (headStyle g) + in if null fs + then "" + else "\n" + + +styleFromTags :: GlobalData -> Text +styleFromTags g + | null (styles g) = "" + | otherwise = "\n" + + +-- | MJML's @mergeOutlookConditionnals@: join an Outlook conditional that +-- closes and immediately reopens. The result is the text in pieces, to be +-- written out without concatenating it first. +outlookChunks :: Text -> [Text] +outlookChunks = go + where + endTag = "" + startTag = "" + Open n as -> "<" <> n <> T.concat [" " <> k <> "=" <> tshow v | (k, v) <- Map.toList as] <> ">" + Close n -> " n <> ">" + TextT t -> "text " <> tshow t + Css rs -> "css " <> tshow rs + + +tshow :: (Show a) => a -> Text +tshow = T.pack . show + + +normalize :: Text -> [Token] +normalize = dropEmptyStyles . mergeConditions . filter nonEmpty . tokenize + where + nonEmpty = \case + TextT t -> not (T.null t) + Comment t -> not (T.null t) + _ -> True + + +-- | Drop @\@ immediately followed by a reopening of the +-- condition it closed. +mergeConditions :: [Token] -> [Token] +mergeConditions = go Nothing + where + go _ [] = [] + go prev (t : rest) = case t of + CondStart c -> t : go (Just c) rest + CondEnd _ -> case rest of + CondStart c : rest' | Just c == prev -> go prev rest' + _ -> t : go Nothing rest + _ -> t : go prev rest + + +dropEmptyStyles :: [Token] -> [Token] +dropEmptyStyles = \case + Open "style" _ : Close "style" : rest -> dropEmptyStyles rest + Open "style" _ : Css [] : Close "style" : rest -> dropEmptyStyles rest + t : rest -> t : dropEmptyStyles rest + [] -> [] + + +tokenize :: Text -> [Token] +tokenize input + | T.null input = [] + | "" `T.isPrefixOf` afterCond + then CondStart (cond <> "]>") : tokenize (T.drop 5 afterCond) + else CondStart (cond <> "]>") : tokenize afterCond + | "" `T.isPrefixOf` input = CondEnd "" : tokenize (T.drop 16 input) + | "" `T.isPrefixOf` input = CondEnd "" : tokenize (T.drop 12 input) + | "" (T.drop 4 input) + in Comment (squash body) : tokenize (T.drop 3 rest) + | "" input in Doctype : tokenize (T.drop 1 rest) + | "" (T.drop 2 input) + in Close (T.toLower (T.strip tagName)) : tokenize (T.drop 1 rest) + | Just ('<', after) <- T.uncons input + , Just (c, _) <- T.uncons after + , c /= ' ' = + let (tag, as, rest) = openTag after + in if tag == "style" + then + let (css, rest') = T.breakOn " Text +squash = T.filter (not . isSpace) + + +openTag :: Text -> (Text, Map.Map Text Text, Text) +openTag after = + let (tagName, rest) = T.break (\x -> x == '>' || x == '/' || isSpace x) after + in attrs (T.map toLower tagName) [] rest + where + attrs n acc s = + let s' = T.dropWhile (\x -> isSpace x || x == '/') s + in case T.uncons s' of + Nothing -> (n, finish acc, "") + Just ('>', r) -> (n, finish acc, r) + _ -> + let (k, r) = T.break (\x -> x == '=' || x == '>' || isSpace x) s' + r1 = T.dropWhile isSpace r + in case T.uncons r1 of + Just ('=', r2) -> + let r3 = T.dropWhile isSpace r2 + in case T.uncons r3 of + Just (q, r4) + | q == '"' || q == '\'' -> + let (v, r5) = T.break (== q) r4 in attrs n ((k, v) : acc) (T.drop 1 r5) + _ -> + let (v, r5) = T.break (\x -> x == '>' || isSpace x) r3 + in attrs n ((k, v) : acc) r5 + _ -> attrs n ((k, "") : acc) r1 + + finish = Map.fromList . map normal . filter keep . reverse + keep (k, v) = not (k `elem` ["class", "style", "alt"] && T.null (T.strip v)) + normal (k, v) + | k == "class" = (k, T.unwords (Set.toList (Set.fromList (T.words v)))) + | k == "style" = (k, T.intercalate ";" (sort (declarations v))) + | otherwise = (k, v) + + +declarations :: Text -> [Text] +declarations v = + [ T.strip prop <> ":" <> T.unwords (T.words val) + | d <- T.splitOn ";" v + , let (prop, rest) = T.breakOn ":" d + , not (T.null rest) + , let val = T.drop 1 rest + ] + + +-- | A stylesheet as a sorted list of normalised rules. A media rule's body is +-- normalised recursively. +cssRules :: Text -> [Text] +cssRules = sort . go . stripComments + where + go t = + let t' = T.strip t + in if T.null t' + then [] + else case T.breakOn "{" t' of + (prelude, rest) + | T.null rest -> + -- A statement such as @import, up to its semicolon. + [T.unwords (T.words s) | s <- T.splitOn ";" prelude, not (T.null (T.strip s))] + | otherwise -> + let (statements, selector) = splitStatements prelude + (body, after) = matching (T.drop 1 rest) + sel = T.unwords (T.words selector) + rule + | "@media" `T.isPrefixOf` sel || "@supports" `T.isPrefixOf` sel = + sel <> "{" <> T.intercalate "" (sort (go body)) <> "}" + | otherwise = + normSelector sel <> "{" <> T.intercalate ";" (sort (declarations body)) <> "}" + in statements <> [rule] <> go after + + -- Statements ending in ';' before a rule's selector (e.g. @import). + splitStatements prelude = + let parts = T.splitOn ";" prelude + in ( [T.unwords (T.words s) | s <- init parts, not (T.null (T.strip s))] + , Prelude.last parts + ) + + normSelector = T.intercalate ", " . map (T.unwords . T.words) . T.splitOn "," + + matching = loop (1 :: Int) "" + where + loop depth acc t = case T.uncons t of + Nothing -> (acc, "") + Just ('{', r) -> loop (depth + 1) (T.snoc acc '{') r + Just ('}', r) + | depth == 1 -> (acc, r) + | otherwise -> loop (depth - 1) (T.snoc acc '}') r + Just (c, r) -> loop depth (T.snoc acc c) r + + stripComments t = case T.breakOn "/*" t of + (a, b) + | T.null b -> a + | otherwise -> a <> stripComments (T.drop 2 (snd (T.breakOn "*/" b))) diff --git a/test/Main.hs b/test/Main.hs new file mode 100644 --- /dev/null +++ b/test/Main.hs @@ -0,0 +1,98 @@ +-- | Render every fixture and compare it with the HTML MJML itself produced. +-- +-- @fixtures/NAME.mjml@ is the input and @fixtures/NAME.html@ MJML 5's output, +-- regenerated by @scripts/update-fixtures.mjs@. Arguments restrict the run to +-- fixtures whose name contains one of them; @--verbose@ prints each result. +module Main (main) where + +import Control.Monad (forM, unless, when) +import Data.Char (isAlphaNum, isAscii) +import Data.List (isInfixOf, isSuffixOf, sort) +import Data.Text (Text) +import Data.Text qualified as T +import Data.Text.IO qualified as T +import System.Directory (doesFileExist, listDirectory) +import System.Environment (getArgs) +import System.Exit (exitFailure) +import System.FilePath (dropExtension, ()) + +import HtmlCompare (compareHtml) +import Text.Mjml (MjmlError (..), defaultOptions, renderText) + + +fixtureDir :: FilePath +fixtureDir = "test/fixtures" + + +main :: IO () +main = do + args <- getArgs + let verbose = "--verbose" `elem` args + filters = filter (/= "--verbose") args + names <- + sort . map dropExtension . filter (".mjml" `isSuffixOf`) <$> listDirectory fixtureDir + let selected = [n | n <- names, null filters || any (`isInfixOf` n) filters] + results <- forM selected $ \n -> do + let html = fixtureDir n <> ".html" + present <- doesFileExist html + if not present + then pure Nothing + else do + source <- T.readFile (fixtureDir n <> ".mjml") + expected <- T.readFile html + let outcome = case renderText defaultOptions source of + Left (MjmlError e) -> Just ("render error: " <> e) + Right out -> compareHtml (normalizeIds expected) (normalizeIds out) + case outcome of + Nothing -> when verbose (putStrLn ("ok " <> n)) + Just why -> do + putStrLn ("FAIL " <> n) + when (verbose || length selected <= 3) (T.putStrLn why) + pure (Just (n, outcome)) + let ran = [r | Just r <- results] + failed = [n | (n, Just _) <- ran] + putStrLn (show (length ran - length failed) <> "/" <> show (length ran) <> " fixtures match MJML") + unless (null failed) exitFailure + + +-- | Generated identifiers are random in MJML; both sides use zeros. +-- +-- As in mrml's fixture script: an identifier a @for@ attribute points at +-- (accordion, navbar) becomes @00000000@ in both its @for@ and its @id@, and a +-- carousel's identifier becomes @00000000@ wherever it names a class or radio. +normalizeIds :: Text -> Text +normalizeIds = normalizeCarouselIds . normalizeForIds + + +normalizeForIds :: Text -> Text +normalizeForIds t = foldr replaceId t ids + where + ids = + [ v + | chunk <- drop 1 (T.splitOn "for=\"" t) + , let v = T.takeWhile (/= '"') chunk + , not (T.null v) + , T.all isAsciiAlphaNum v + ] + replaceId v = + T.replace ("for=\"" <> v <> "\"") "for=\"00000000\"" + . T.replace ("id=\"" <> v <> "\"") "id=\"00000000\"" + + +normalizeCarouselIds :: Text -> Text +normalizeCarouselIds t = foldr replaceId t ids + where + ids = + [ v + | chunk <- drop 1 (T.splitOn "mj-carousel-" t) + , let v = T.takeWhile isAsciiAlphaNum chunk + , T.length v >= 12 && T.length v <= 16 + , T.take 1 (T.drop (T.length v) chunk) == "-" + ] + replaceId v = + T.replace ("mj-carousel-" <> v <> "-") "mj-carousel-00000000-" + . T.replace ("mj-carousel-radio-" <> v) "mj-carousel-radio-00000000" + + +isAsciiAlphaNum :: Char -> Bool +isAsciiAlphaNum c = isAscii c && isAlphaNum c diff --git a/test/fixtures/comment.html b/test/fixtures/comment.html new file mode 100644 --- /dev/null +++ b/test/fixtures/comment.html @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + + + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/comment.mjml b/test/fixtures/comment.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/comment.mjml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/test/fixtures/mj-accordion-attributes-font.html b/test/fixtures/mj-accordion-attributes-font.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-accordion-attributes-font.html @@ -0,0 +1,266 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-accordion-attributes-font.mjml b/test/fixtures/mj-accordion-attributes-font.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-accordion-attributes-font.mjml @@ -0,0 +1,23 @@ + + + + + + + + + + + + Inherits the accordion font + Text + + + Its own font + Text + + + + + + diff --git a/test/fixtures/mj-accordion-font-padding.html b/test/fixtures/mj-accordion-font-padding.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-accordion-font-padding.html @@ -0,0 +1,268 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-accordion-font-padding.mjml b/test/fixtures/mj-accordion-font-padding.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-accordion-font-padding.mjml @@ -0,0 +1,30 @@ + + + + + + + + Why use an accordion? + + + + Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way. + + + + + + How it works + + + + Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once. + + + + + + + + diff --git a/test/fixtures/mj-accordion-icon.html b/test/fixtures/mj-accordion-icon.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-accordion-icon.html @@ -0,0 +1,268 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-accordion-icon.mjml b/test/fixtures/mj-accordion-icon.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-accordion-icon.mjml @@ -0,0 +1,28 @@ + + + + + + + Why use an accordion? + + + Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way. + + + + + + How it works + + + + Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once. + + + + + + + + diff --git a/test/fixtures/mj-accordion-other.html b/test/fixtures/mj-accordion-other.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-accordion-other.html @@ -0,0 +1,260 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-accordion-other.mjml b/test/fixtures/mj-accordion-other.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-accordion-other.mjml @@ -0,0 +1,28 @@ + + + + + + + Why use an accordion? + + + Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way. + + + + + + How it works + + + + Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once. + + + + + + + + diff --git a/test/fixtures/mj-accordion.html b/test/fixtures/mj-accordion.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-accordion.html @@ -0,0 +1,268 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-accordion.mjml b/test/fixtures/mj-accordion.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-accordion.mjml @@ -0,0 +1,26 @@ + + + + + + + Why use an accordion? + + + Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way. + + + + + How it works + + + Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once. + + + + + + + + diff --git a/test/fixtures/mj-attributes.html b/test/fixtures/mj-attributes.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-attributes.html @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
Hello World!
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-attributes.mjml b/test/fixtures/mj-attributes.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-attributes.mjml @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + Hello World! + + + + + diff --git a/test/fixtures/mj-body-background-color.html b/test/fixtures/mj-body-background-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-body-background-color.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + diff --git a/test/fixtures/mj-body-background-color.mjml b/test/fixtures/mj-body-background-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-body-background-color.mjml @@ -0,0 +1,4 @@ + + + + diff --git a/test/fixtures/mj-body-class.html b/test/fixtures/mj-body-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-body-class.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + diff --git a/test/fixtures/mj-body-class.mjml b/test/fixtures/mj-body-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-body-class.mjml @@ -0,0 +1,4 @@ + + + + diff --git a/test/fixtures/mj-body-width.html b/test/fixtures/mj-body-width.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-body-width.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + diff --git a/test/fixtures/mj-body-width.mjml b/test/fixtures/mj-body-width.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-body-width.mjml @@ -0,0 +1,4 @@ + + + + diff --git a/test/fixtures/mj-body.html b/test/fixtures/mj-body.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-body.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + diff --git a/test/fixtures/mj-body.mjml b/test/fixtures/mj-body.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-body.mjml @@ -0,0 +1,5 @@ + + + + + diff --git a/test/fixtures/mj-breakpoint-default.html b/test/fixtures/mj-breakpoint-default.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-breakpoint-default.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
Hello World!
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-breakpoint-default.mjml b/test/fixtures/mj-breakpoint-default.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-breakpoint-default.mjml @@ -0,0 +1,10 @@ + + + + + + Hello World! + + + + diff --git a/test/fixtures/mj-breakpoint-options.html b/test/fixtures/mj-breakpoint-options.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-breakpoint-options.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
Hello World!
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-breakpoint-options.mjml b/test/fixtures/mj-breakpoint-options.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-breakpoint-options.mjml @@ -0,0 +1,10 @@ + + + + + + Hello World! + + + + diff --git a/test/fixtures/mj-breakpoint.html b/test/fixtures/mj-breakpoint.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-breakpoint.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
Hello World!
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-breakpoint.mjml b/test/fixtures/mj-breakpoint.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-breakpoint.mjml @@ -0,0 +1,14 @@ + + + + + + + + + Hello World! + + + + + diff --git a/test/fixtures/mj-button-align.html b/test/fixtures/mj-button-align.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-align.html @@ -0,0 +1,188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-align.mjml b/test/fixtures/mj-button-align.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-align.mjml @@ -0,0 +1,17 @@ + + + + + + Don't click me! + + + Don't click me! + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-background.html b/test/fixtures/mj-button-background.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-background.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-background.mjml b/test/fixtures/mj-button-background.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-background.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-border-radius.html b/test/fixtures/mj-button-border-radius.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-border-radius.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-border-radius.mjml b/test/fixtures/mj-button-border-radius.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-border-radius.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-border.html b/test/fixtures/mj-button-border.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-border.html @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-border.mjml b/test/fixtures/mj-button-border.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-border.mjml @@ -0,0 +1,14 @@ + + + + + + Don't click me! + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-class.html b/test/fixtures/mj-button-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-class.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-class.mjml b/test/fixtures/mj-button-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-class.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-color.html b/test/fixtures/mj-button-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-color.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-color.mjml b/test/fixtures/mj-button-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-color.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-container-background-color.html b/test/fixtures/mj-button-container-background-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-container-background-color.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-container-background-color.mjml b/test/fixtures/mj-button-container-background-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-container-background-color.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-example.html b/test/fixtures/mj-button-example.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-example.html @@ -0,0 +1,128 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-example.mjml b/test/fixtures/mj-button-example.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-example.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-font-family.html b/test/fixtures/mj-button-font-family.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-font-family.html @@ -0,0 +1,128 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-font-family.mjml b/test/fixtures/mj-button-font-family.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-font-family.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-font-size.html b/test/fixtures/mj-button-font-size.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-font-size.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-font-size.mjml b/test/fixtures/mj-button-font-size.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-font-size.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-font-style.html b/test/fixtures/mj-button-font-style.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-font-style.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-font-style.mjml b/test/fixtures/mj-button-font-style.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-font-style.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-font-weight.html b/test/fixtures/mj-button-font-weight.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-font-weight.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-font-weight.mjml b/test/fixtures/mj-button-font-weight.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-font-weight.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-height.html b/test/fixtures/mj-button-height.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-height.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-height.mjml b/test/fixtures/mj-button-height.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-height.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-href.html b/test/fixtures/mj-button-href.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-href.html @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + + + + + +
+ + + + + + + +
+ + Don't click me! + +
+ +
+ + + + + + + +
+ + Don't click me! + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-href.mjml b/test/fixtures/mj-button-href.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-href.mjml @@ -0,0 +1,14 @@ + + + + + + Don't click me! + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-inner-padding.html b/test/fixtures/mj-button-inner-padding.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-inner-padding.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-inner-padding.mjml b/test/fixtures/mj-button-inner-padding.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-inner-padding.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-line-height.html b/test/fixtures/mj-button-line-height.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-line-height.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-line-height.mjml b/test/fixtures/mj-button-line-height.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-line-height.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-padding.html b/test/fixtures/mj-button-padding.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-padding.html @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-padding.mjml b/test/fixtures/mj-button-padding.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-padding.mjml @@ -0,0 +1,14 @@ + + + + + + Don't click me! + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-text-decoration.html b/test/fixtures/mj-button-text-decoration.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-text-decoration.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-text-decoration.mjml b/test/fixtures/mj-button-text-decoration.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-text-decoration.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-text-transform.html b/test/fixtures/mj-button-text-transform.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-text-transform.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-text-transform.mjml b/test/fixtures/mj-button-text-transform.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-text-transform.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-vertical-align.html b/test/fixtures/mj-button-vertical-align.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-vertical-align.html @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-vertical-align.mjml b/test/fixtures/mj-button-vertical-align.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-vertical-align.mjml @@ -0,0 +1,14 @@ + + + + + + Don't click me! + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button-width.html b/test/fixtures/mj-button-width.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-width.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button-width.mjml b/test/fixtures/mj-button-width.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button-width.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-button.html b/test/fixtures/mj-button.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+

+ Don't click me! +

+
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-button.mjml b/test/fixtures/mj-button.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-button.mjml @@ -0,0 +1,11 @@ + + + + + + Don't click me! + + + + + diff --git a/test/fixtures/mj-carousel-align-border-radius-class.html b/test/fixtures/mj-carousel-align-border-radius-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-carousel-align-border-radius-class.html @@ -0,0 +1,206 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-carousel-align-border-radius-class.mjml b/test/fixtures/mj-carousel-align-border-radius-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-carousel-align-border-radius-class.mjml @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/test/fixtures/mj-carousel-icon.html b/test/fixtures/mj-carousel-icon.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-carousel-icon.html @@ -0,0 +1,206 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-carousel-icon.mjml b/test/fixtures/mj-carousel-icon.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-carousel-icon.mjml @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/test/fixtures/mj-carousel-tb.html b/test/fixtures/mj-carousel-tb.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-carousel-tb.html @@ -0,0 +1,206 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-carousel-tb.mjml b/test/fixtures/mj-carousel-tb.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-carousel-tb.mjml @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/test/fixtures/mj-carousel-thumbnails.html b/test/fixtures/mj-carousel-thumbnails.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-carousel-thumbnails.html @@ -0,0 +1,205 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-carousel-thumbnails.mjml b/test/fixtures/mj-carousel-thumbnails.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-carousel-thumbnails.mjml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/test/fixtures/mj-carousel.html b/test/fixtures/mj-carousel.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-carousel.html @@ -0,0 +1,206 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-carousel.mjml b/test/fixtures/mj-carousel.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-carousel.mjml @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/test/fixtures/mj-column-background-color.html b/test/fixtures/mj-column-background-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-background-color.html @@ -0,0 +1,190 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-column-background-color.mjml b/test/fixtures/mj-column-background-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-background-color.mjml @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/test/fixtures/mj-column-border-issue-466.html b/test/fixtures/mj-column-border-issue-466.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-border-issue-466.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + +
+ + + + + + + + + +
+ +
Hello World
+ +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-column-border-issue-466.mjml b/test/fixtures/mj-column-border-issue-466.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-border-issue-466.mjml @@ -0,0 +1,9 @@ + + + + + Hello World + + + + diff --git a/test/fixtures/mj-column-border-radius.html b/test/fixtures/mj-column-border-radius.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-border-radius.html @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-column-border-radius.mjml b/test/fixtures/mj-column-border-radius.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-border-radius.mjml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/test/fixtures/mj-column-border.html b/test/fixtures/mj-column-border.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-border.html @@ -0,0 +1,190 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-column-border.mjml b/test/fixtures/mj-column-border.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-border.mjml @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/test/fixtures/mj-column-class.html b/test/fixtures/mj-column-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-class.html @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-column-class.mjml b/test/fixtures/mj-column-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-class.mjml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/test/fixtures/mj-column-inner-background-color.html b/test/fixtures/mj-column-inner-background-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-inner-background-color.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + +
+ + + + + + + + + +
+ +
Hello World!
+ +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-column-inner-background-color.mjml b/test/fixtures/mj-column-inner-background-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-inner-background-color.mjml @@ -0,0 +1,11 @@ + + + + + + Hello World! + + + + + diff --git a/test/fixtures/mj-column-mobile-width-pixel.html b/test/fixtures/mj-column-mobile-width-pixel.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-mobile-width-pixel.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
Column with pixel width and mobile-width
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-column-mobile-width-pixel.mjml b/test/fixtures/mj-column-mobile-width-pixel.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-mobile-width-pixel.mjml @@ -0,0 +1,9 @@ + + + + + Column with pixel width and mobile-width + + + + diff --git a/test/fixtures/mj-column-padding.html b/test/fixtures/mj-column-padding.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-padding.html @@ -0,0 +1,250 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + +
+ + + + + +
+ +
+ +
+ + + +
+ + + + + + + +
+ + + + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + +
+ + + + + +
+ +
+ +
+ + + +
+ + + + + + + +
+ + + + + +
+ +
+ +
+ + + +
+ + + + + + + +
+ + + + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-column-padding.mjml b/test/fixtures/mj-column-padding.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-padding.mjml @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/test/fixtures/mj-column-vertical-align.html b/test/fixtures/mj-column-vertical-align.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-vertical-align.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-column-vertical-align.mjml b/test/fixtures/mj-column-vertical-align.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-vertical-align.mjml @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/test/fixtures/mj-column-width.html b/test/fixtures/mj-column-width.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-width.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-column-width.mjml b/test/fixtures/mj-column-width.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column-width.mjml @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/test/fixtures/mj-column.html b/test/fixtures/mj-column.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column.html @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + +
+ +
+ + + +
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-column.mjml b/test/fixtures/mj-column.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-column.mjml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/test/fixtures/mj-divider-alignment.html b/test/fixtures/mj-divider-alignment.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-alignment.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + + + + + +
+ +

+

+ + + + +
+ +

+

+ + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-divider-alignment.mjml b/test/fixtures/mj-divider-alignment.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-alignment.mjml @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/test/fixtures/mj-divider-border.html b/test/fixtures/mj-divider-border.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-border.html @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +

+

+ + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-divider-border.mjml b/test/fixtures/mj-divider-border.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-border.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-divider-class.html b/test/fixtures/mj-divider-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-class.html @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +

+

+ + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-divider-class.mjml b/test/fixtures/mj-divider-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-class.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-divider-container-background-color.html b/test/fixtures/mj-divider-container-background-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-container-background-color.html @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +

+

+ + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-divider-container-background-color.mjml b/test/fixtures/mj-divider-container-background-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-container-background-color.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-divider-in-mj-text.html b/test/fixtures/mj-divider-in-mj-text.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-in-mj-text.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-divider-in-mj-text.mjml b/test/fixtures/mj-divider-in-mj-text.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-in-mj-text.mjml @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/test/fixtures/mj-divider-padding.html b/test/fixtures/mj-divider-padding.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-padding.html @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +

+

+ + + + +
+ +
+ + + +
+ + + + + + + + + +
+ +

+

+ + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-divider-padding.mjml b/test/fixtures/mj-divider-padding.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-padding.mjml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/test/fixtures/mj-divider-width.html b/test/fixtures/mj-divider-width.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-width.html @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +

+

+ + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-divider-width.mjml b/test/fixtures/mj-divider-width.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider-width.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-divider.html b/test/fixtures/mj-divider.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider.html @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +

+

+ + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-divider.mjml b/test/fixtures/mj-divider.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-divider.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-font.html b/test/fixtures/mj-font.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-font.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
Hello World!
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-font.mjml b/test/fixtures/mj-font.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-font.mjml @@ -0,0 +1,14 @@ + + + + + + + + + Hello World! + + + + + diff --git a/test/fixtures/mj-group-background-color.html b/test/fixtures/mj-group-background-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group-background-color.html @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + +
+ + + + + + + + + +
+ +

Easy and quick

+ +
+ +
+ + + +
+ + + + + + + + + +
+ +

Responsive

+ +
+ +
+ + +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-group-background-color.mjml b/test/fixtures/mj-group-background-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group-background-color.mjml @@ -0,0 +1,18 @@ + + + + + + +

Easy and quick

+ + + + +

Responsive

+ + + + + + diff --git a/test/fixtures/mj-group-class.html b/test/fixtures/mj-group-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group-class.html @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + +
+ + + + + + + + + +
+ +

Easy and quick

+ +
+ +
+ + + +
+ + + + + + + + + +
+ +

Responsive

+ +
+ +
+ + +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-group-class.mjml b/test/fixtures/mj-group-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group-class.mjml @@ -0,0 +1,18 @@ + + + + + + +

Easy and quick

+ + + + +

Responsive

+ + + + + + diff --git a/test/fixtures/mj-group-direction.html b/test/fixtures/mj-group-direction.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group-direction.html @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + +
+ + + + + + + + + +
+ +

Easy and quick

+ +
+ +
+ + + +
+ + + + + + + + + +
+ +

Responsive

+ +
+ +
+ + +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-group-direction.mjml b/test/fixtures/mj-group-direction.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group-direction.mjml @@ -0,0 +1,18 @@ + + + + + + +

Easy and quick

+ + + + +

Responsive

+ + + + + + diff --git a/test/fixtures/mj-group-vertical-align.html b/test/fixtures/mj-group-vertical-align.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group-vertical-align.html @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + +
+ + + + + + + + + +
+ +

Easy and quick

+ +
+ +
+ + + +
+ + + + + + + + + +
+ +

Responsive

+ +
+ +
+ + +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-group-vertical-align.mjml b/test/fixtures/mj-group-vertical-align.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group-vertical-align.mjml @@ -0,0 +1,18 @@ + + + + + + +

Easy and quick

+ + + + +

Responsive

+ + + + + + diff --git a/test/fixtures/mj-group-width.html b/test/fixtures/mj-group-width.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group-width.html @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + +
+ + + + + + + + + +
+ +

Easy and quick

+ +
+ +
+ + + +
+ + + + + + + + + +
+ +

Responsive

+ +
+ +
+ + +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-group-width.mjml b/test/fixtures/mj-group-width.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group-width.mjml @@ -0,0 +1,18 @@ + + + + + + +

Easy and quick

+ + + + +

Responsive

+ + + + + + diff --git a/test/fixtures/mj-group.html b/test/fixtures/mj-group.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group.html @@ -0,0 +1,218 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + +
+ + + + + + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +

Easy and quick

+

Write less code, save time and code more efficiently with MJML’s semantic syntax.

+ +
+ +
+ + + +
+ + + + + + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +

Responsive

+

MJML is responsive by design on most-popular email clients, even Outlook.

+ +
+ +
+ + +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-group.mjml b/test/fixtures/mj-group.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-group.mjml @@ -0,0 +1,22 @@ + + + + + + + +

Easy and quick

+

Write less code, save time and code more efficiently with MJML’s semantic syntax.

+ + + + + +

Responsive

+

MJML is responsive by design on most-popular email clients, even Outlook.

+ + + + + + diff --git a/test/fixtures/mj-hero-background-color.html b/test/fixtures/mj-hero-background-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-background-color.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + +
+ +
GO TO SPACE
+ +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero-background-color.mjml b/test/fixtures/mj-hero-background-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-background-color.mjml @@ -0,0 +1,9 @@ + + + + + GO TO SPACE + + + + diff --git a/test/fixtures/mj-hero-background-height.html b/test/fixtures/mj-hero-background-height.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-background-height.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + +
+ +
GO TO SPACE
+ +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero-background-height.mjml b/test/fixtures/mj-hero-background-height.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-background-height.mjml @@ -0,0 +1,9 @@ + + + + + GO TO SPACE + + + + diff --git a/test/fixtures/mj-hero-background-position.html b/test/fixtures/mj-hero-background-position.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-background-position.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + +
+ +
GO TO SPACE
+ +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero-background-position.mjml b/test/fixtures/mj-hero-background-position.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-background-position.mjml @@ -0,0 +1,9 @@ + + + + + GO TO SPACE + + + + diff --git a/test/fixtures/mj-hero-background-url.html b/test/fixtures/mj-hero-background-url.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-background-url.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + +
+ +
GO TO SPACE
+ +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero-background-url.mjml b/test/fixtures/mj-hero-background-url.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-background-url.mjml @@ -0,0 +1,9 @@ + + + + + GO TO SPACE + + + + diff --git a/test/fixtures/mj-hero-background-width.html b/test/fixtures/mj-hero-background-width.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-background-width.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + +
+ +
GO TO SPACE
+ +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero-background-width.mjml b/test/fixtures/mj-hero-background-width.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-background-width.mjml @@ -0,0 +1,9 @@ + + + + + GO TO SPACE + + + + diff --git a/test/fixtures/mj-hero-class.html b/test/fixtures/mj-hero-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-class.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + +
+ +
GO TO SPACE
+ +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero-class.mjml b/test/fixtures/mj-hero-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-class.mjml @@ -0,0 +1,9 @@ + + + + + GO TO SPACE + + + + diff --git a/test/fixtures/mj-hero-divider.html b/test/fixtures/mj-hero-divider.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-divider.html @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + +
+ +

+

+ + + + +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero-divider.mjml b/test/fixtures/mj-hero-divider.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-divider.mjml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/test/fixtures/mj-hero-height.html b/test/fixtures/mj-hero-height.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-height.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + +
+ +
GO TO SPACE
+ +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero-height.mjml b/test/fixtures/mj-hero-height.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-height.mjml @@ -0,0 +1,9 @@ + + + + + GO TO SPACE + + + + diff --git a/test/fixtures/mj-hero-mode.html b/test/fixtures/mj-hero-mode.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-mode.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + +
+ +
GO TO SPACE
+ +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero-mode.mjml b/test/fixtures/mj-hero-mode.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-mode.mjml @@ -0,0 +1,18 @@ + + + + + GO TO SPACE + + + + diff --git a/test/fixtures/mj-hero-vertical-align.html b/test/fixtures/mj-hero-vertical-align.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-vertical-align.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + +
+ +
GO TO SPACE
+ +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero-vertical-align.mjml b/test/fixtures/mj-hero-vertical-align.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-vertical-align.mjml @@ -0,0 +1,9 @@ + + + + + GO TO SPACE + + + + diff --git a/test/fixtures/mj-hero-width.html b/test/fixtures/mj-hero-width.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-width.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + +
+ +
GO TO SPACE
+ +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero-width.mjml b/test/fixtures/mj-hero-width.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero-width.mjml @@ -0,0 +1,9 @@ + + + + + GO TO SPACE + + + + diff --git a/test/fixtures/mj-hero.html b/test/fixtures/mj-hero.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero.html @@ -0,0 +1,143 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + + + + +
+ + + + + + + + + + + + +
+ +
GO TO SPACE
+ +
+ + + + + + + +
+ + ORDER YOUR TICKET NOW + +
+ +
+
+
+ + +
+
+ + +
+ + + + diff --git a/test/fixtures/mj-hero.mjml b/test/fixtures/mj-hero.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-hero.mjml @@ -0,0 +1,12 @@ + + + + + GO TO SPACE + + + ORDER YOUR TICKET NOW + + + + diff --git a/test/fixtures/mj-image-align.html b/test/fixtures/mj-image-align.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-align.html @@ -0,0 +1,276 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image-align.mjml b/test/fixtures/mj-image-align.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-align.mjml @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/test/fixtures/mj-image-border-radius.html b/test/fixtures/mj-image-border-radius.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-border-radius.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image-border-radius.mjml b/test/fixtures/mj-image-border-radius.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-border-radius.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-image-border.html b/test/fixtures/mj-image-border.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-border.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image-border.mjml b/test/fixtures/mj-image-border.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-border.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-image-class.html b/test/fixtures/mj-image-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-class.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image-class.mjml b/test/fixtures/mj-image-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-class.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-image-container-background-color.html b/test/fixtures/mj-image-container-background-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-container-background-color.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image-container-background-color.mjml b/test/fixtures/mj-image-container-background-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-container-background-color.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-image-fluid-on-mobile.html b/test/fixtures/mj-image-fluid-on-mobile.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-fluid-on-mobile.html @@ -0,0 +1,174 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + +
+ +
+ + + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image-fluid-on-mobile.mjml b/test/fixtures/mj-image-fluid-on-mobile.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-fluid-on-mobile.mjml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/test/fixtures/mj-image-height.html b/test/fixtures/mj-image-height.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-height.html @@ -0,0 +1,174 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image-height.mjml b/test/fixtures/mj-image-height.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-height.mjml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/test/fixtures/mj-image-href.html b/test/fixtures/mj-image-href.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-href.html @@ -0,0 +1,186 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ +
+ +
+ + + +
+ + + + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image-href.mjml b/test/fixtures/mj-image-href.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-href.mjml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/test/fixtures/mj-image-padding.html b/test/fixtures/mj-image-padding.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-padding.html @@ -0,0 +1,378 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image-padding.mjml b/test/fixtures/mj-image-padding.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-padding.mjml @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/test/fixtures/mj-image-rel.html b/test/fixtures/mj-image-rel.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-rel.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image-rel.mjml b/test/fixtures/mj-image-rel.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-rel.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-image-title.html b/test/fixtures/mj-image-title.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-title.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image-title.mjml b/test/fixtures/mj-image-title.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image-title.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-image.html b/test/fixtures/mj-image.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-image.mjml b/test/fixtures/mj-image.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-image.mjml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/test/fixtures/mj-navbar-align-class.html b/test/fixtures/mj-navbar-align-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-navbar-align-class.html @@ -0,0 +1,161 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + +
+ + + + + + Hello + + + + + + + + About + + + + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-navbar-align-class.mjml b/test/fixtures/mj-navbar-align-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-navbar-align-class.mjml @@ -0,0 +1,12 @@ + + + + + + Hello + About + + + + + diff --git a/test/fixtures/mj-navbar-ico.html b/test/fixtures/mj-navbar-ico.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-navbar-ico.html @@ -0,0 +1,183 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + + + + Hello + + + + + + + + About + + + + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-navbar-ico.mjml b/test/fixtures/mj-navbar-ico.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-navbar-ico.mjml @@ -0,0 +1,12 @@ + + + + + + Hello + About + + + + + diff --git a/test/fixtures/mj-navbar.html b/test/fixtures/mj-navbar.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-navbar.html @@ -0,0 +1,183 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + +
+ + + + + + Hello + + + + + + + + About + + + + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-navbar.mjml b/test/fixtures/mj-navbar.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-navbar.mjml @@ -0,0 +1,12 @@ + + + + + + Hello + About + + + + + diff --git a/test/fixtures/mj-preview.html b/test/fixtures/mj-preview.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-preview.html @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hello MJML
+ +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
Hello World!
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-preview.mjml b/test/fixtures/mj-preview.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-preview.mjml @@ -0,0 +1,14 @@ + + + Hello MJML + + + + + + Hello World! + + + + + diff --git a/test/fixtures/mj-raw-conditional-comment.html b/test/fixtures/mj-raw-conditional-comment.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-raw-conditional-comment.html @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ +
mso
+ general + + general two + + + +
+ +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
After
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-raw-conditional-comment.mjml b/test/fixtures/mj-raw-conditional-comment.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-raw-conditional-comment.mjml @@ -0,0 +1,23 @@ + + + + + + +
mso
+ general + + general two + + + + + + + + + After + + + + diff --git a/test/fixtures/mj-raw-vml-namespace.html b/test/fixtures/mj-raw-vml-namespace.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-raw-vml-namespace.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + diff --git a/test/fixtures/mj-raw-vml-namespace.mjml b/test/fixtures/mj-raw-vml-namespace.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-raw-vml-namespace.mjml @@ -0,0 +1,11 @@ + + + + + + + diff --git a/test/fixtures/mj-raw.html b/test/fixtures/mj-raw.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-raw.html @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + +
+
+ Hello +
+ Something + + + +
+ + + + diff --git a/test/fixtures/mj-raw.mjml b/test/fixtures/mj-raw.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-raw.mjml @@ -0,0 +1,13 @@ + + + +
+ Hello +
+ Something + + + + + + diff --git a/test/fixtures/mj-section-background-color.html b/test/fixtures/mj-section-background-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-background-color.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-section-background-color.mjml b/test/fixtures/mj-section-background-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-background-color.mjml @@ -0,0 +1,6 @@ + + + + + + diff --git a/test/fixtures/mj-section-background-url-full.html b/test/fixtures/mj-section-background-url-full.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-background-url-full.html @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+
+ + + + + + +
+ +
+
+
+ + + + +
+ + + + diff --git a/test/fixtures/mj-section-background-url-full.mjml b/test/fixtures/mj-section-background-url-full.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-background-url-full.mjml @@ -0,0 +1,10 @@ + + + + + + diff --git a/test/fixtures/mj-section-background-url.html b/test/fixtures/mj-section-background-url.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-background-url.html @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+
+ + + + + + +
+ +
+
+
+ + + + +
+ + + + diff --git a/test/fixtures/mj-section-background-url.mjml b/test/fixtures/mj-section-background-url.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-background-url.mjml @@ -0,0 +1,6 @@ + + + + + + diff --git a/test/fixtures/mj-section-body-width.html b/test/fixtures/mj-section-body-width.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-body-width.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-section-body-width.mjml b/test/fixtures/mj-section-body-width.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-body-width.mjml @@ -0,0 +1,5 @@ + + + + + diff --git a/test/fixtures/mj-section-border-radius.html b/test/fixtures/mj-section-border-radius.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-border-radius.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-section-border-radius.mjml b/test/fixtures/mj-section-border-radius.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-border-radius.mjml @@ -0,0 +1,6 @@ + + + + + + diff --git a/test/fixtures/mj-section-border.html b/test/fixtures/mj-section-border.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-border.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-section-border.mjml b/test/fixtures/mj-section-border.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-border.mjml @@ -0,0 +1,12 @@ + + + + + + diff --git a/test/fixtures/mj-section-class.html b/test/fixtures/mj-section-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-class.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-section-class.mjml b/test/fixtures/mj-section-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-class.mjml @@ -0,0 +1,6 @@ + + + + + + diff --git a/test/fixtures/mj-section-direction.html b/test/fixtures/mj-section-direction.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-direction.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-section-direction.mjml b/test/fixtures/mj-section-direction.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-direction.mjml @@ -0,0 +1,6 @@ + + + + + + diff --git a/test/fixtures/mj-section-full-width-background-url.html b/test/fixtures/mj-section-full-width-background-url.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-full-width-background-url.html @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+ + + + +
+
+ + + + + + +
+ +
+
+
+ + + + +
+ +
+ + + + diff --git a/test/fixtures/mj-section-full-width-background-url.mjml b/test/fixtures/mj-section-full-width-background-url.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-full-width-background-url.mjml @@ -0,0 +1,11 @@ + + + + + + diff --git a/test/fixtures/mj-section-full-width.html b/test/fixtures/mj-section-full-width.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-full-width.html @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+ + + + + +
+ + + + + + + +
+ +
+ +
+ + + + + +
+ +
+ + + + diff --git a/test/fixtures/mj-section-full-width.mjml b/test/fixtures/mj-section-full-width.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-full-width.mjml @@ -0,0 +1,6 @@ + + + + + + diff --git a/test/fixtures/mj-section-padding.html b/test/fixtures/mj-section-padding.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-padding.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-section-padding.mjml b/test/fixtures/mj-section-padding.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-padding.mjml @@ -0,0 +1,12 @@ + + + + + + diff --git a/test/fixtures/mj-section-text-align.html b/test/fixtures/mj-section-text-align.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-text-align.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-section-text-align.mjml b/test/fixtures/mj-section-text-align.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section-text-align.mjml @@ -0,0 +1,6 @@ + + + + + + diff --git a/test/fixtures/mj-section.html b/test/fixtures/mj-section.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-section.mjml b/test/fixtures/mj-section.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-section.mjml @@ -0,0 +1,5 @@ + + + + + diff --git a/test/fixtures/mj-social-align.html b/test/fixtures/mj-social-align.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-align.html @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Dribble + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Github + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Google + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-align.mjml b/test/fixtures/mj-social-align.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-align.mjml @@ -0,0 +1,19 @@ + + + + + + + Dribble + + + Github + + + Google + + + + + + diff --git a/test/fixtures/mj-social-border-radius.html b/test/fixtures/mj-social-border-radius.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-border-radius.html @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Instagram + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + LinkedIn + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Medium + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-border-radius.mjml b/test/fixtures/mj-social-border-radius.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-border-radius.mjml @@ -0,0 +1,19 @@ + + + + + + + Instagram + + + LinkedIn + + + Medium + + + + + + diff --git a/test/fixtures/mj-social-class.html b/test/fixtures/mj-social-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-class.html @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Tumblr + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Vimeo + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Web + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-class.mjml b/test/fixtures/mj-social-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-class.mjml @@ -0,0 +1,19 @@ + + + + + + + Tumblr + + + Vimeo + + + Web + + + + + + diff --git a/test/fixtures/mj-social-color.html b/test/fixtures/mj-social-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-color.html @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Pinterest + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Snapchat + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Soundcloud + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-color.mjml b/test/fixtures/mj-social-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-color.mjml @@ -0,0 +1,19 @@ + + + + + + + Pinterest + + + Snapchat + + + Soundcloud + + + + + + diff --git a/test/fixtures/mj-social-container-background-color.html b/test/fixtures/mj-social-container-background-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-container-background-color.html @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Tumblr + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Vimeo + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Web + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-container-background-color.mjml b/test/fixtures/mj-social-container-background-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-container-background-color.mjml @@ -0,0 +1,19 @@ + + + + + + + Tumblr + + + Vimeo + + + Web + + + + + + diff --git a/test/fixtures/mj-social-element-ending.html b/test/fixtures/mj-social-element-ending.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-element-ending.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Share test hi + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-element-ending.mjml b/test/fixtures/mj-social-element-ending.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-element-ending.mjml @@ -0,0 +1,13 @@ + + + + + + + Share test hi + + + + + + diff --git a/test/fixtures/mj-social-font-family.html b/test/fixtures/mj-social-font-family.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-font-family.html @@ -0,0 +1,204 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Youtube + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Other + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-font-family.mjml b/test/fixtures/mj-social-font-family.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-font-family.mjml @@ -0,0 +1,16 @@ + + + + + + + Youtube + + + Other + + + + + + diff --git a/test/fixtures/mj-social-font.html b/test/fixtures/mj-social-font.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-font.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Youtube + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-font.mjml b/test/fixtures/mj-social-font.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-font.mjml @@ -0,0 +1,13 @@ + + + + + + + Youtube + + + + + + diff --git a/test/fixtures/mj-social-icon.html b/test/fixtures/mj-social-icon.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-icon.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Youtube + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-icon.mjml b/test/fixtures/mj-social-icon.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-icon.mjml @@ -0,0 +1,13 @@ + + + + + + + Youtube + + + + + + diff --git a/test/fixtures/mj-social-link.html b/test/fixtures/mj-social-link.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-link.html @@ -0,0 +1,204 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Facebook + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Facebook + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-link.mjml b/test/fixtures/mj-social-link.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-link.mjml @@ -0,0 +1,16 @@ + + + + + + + Facebook + + + Facebook + + + + + + diff --git a/test/fixtures/mj-social-mode.html b/test/fixtures/mj-social-mode.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-mode.html @@ -0,0 +1,194 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Github + +
+ + + + + + +
+ + + +
+ 		+ + Youtube + +
+ + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-mode.mjml b/test/fixtures/mj-social-mode.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-mode.mjml @@ -0,0 +1,16 @@ + + + + + + + Github + + + Youtube + + + + + + diff --git a/test/fixtures/mj-social-padding.html b/test/fixtures/mj-social-padding.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-padding.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Youtube + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-padding.mjml b/test/fixtures/mj-social-padding.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-padding.mjml @@ -0,0 +1,13 @@ + + + + + + + Youtube + + + + + + diff --git a/test/fixtures/mj-social-share-url.html b/test/fixtures/mj-social-share-url.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-share-url.html @@ -0,0 +1,204 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Twitter + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + X + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-share-url.mjml b/test/fixtures/mj-social-share-url.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-share-url.mjml @@ -0,0 +1,16 @@ + + + + + + + Twitter + + + X + + + + + + diff --git a/test/fixtures/mj-social-text.html b/test/fixtures/mj-social-text.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-text.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Youtube + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social-text.mjml b/test/fixtures/mj-social-text.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social-text.mjml @@ -0,0 +1,13 @@ + + + + + + + Youtube + + + + + + diff --git a/test/fixtures/mj-social.html b/test/fixtures/mj-social.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social.html @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Facebook + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + google + +
+ 		+ + Google + +
+ + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ 		+ + Twitter + +
+ + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-social.mjml b/test/fixtures/mj-social.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-social.mjml @@ -0,0 +1,19 @@ + + + + + + + Facebook + + + Google + + + Twitter + + + + + + diff --git a/test/fixtures/mj-spacer.html b/test/fixtures/mj-spacer.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-spacer.html @@ -0,0 +1,290 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
Text
+ +
+ +
 
+ +
+ +
Text
+ +
+ +
 
+ +
+ +
Text
+ +
+ +
 
+ +
+ +
Text
+ +
+ +
 
+ +
+ +
Text
+ +
+ +
 
+ +
+ +
Text
+ +
+ +
 
+ +
+ +
Text
+ +
+ +
 
+ +
+ +
Text
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-spacer.mjml b/test/fixtures/mj-spacer.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-spacer.mjml @@ -0,0 +1,23 @@ + + + + + Text + + Text + + Text + + Text + + Text + + Text + + Text + + Text + + + + diff --git a/test/fixtures/mj-style.html b/test/fixtures/mj-style.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-style.html @@ -0,0 +1,128 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
I'm red and underlined
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-style.mjml b/test/fixtures/mj-style.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-style.mjml @@ -0,0 +1,17 @@ + + + + .red-text div { + color: red !important; + text-decoration: underline !important; + } + + + + + + I'm red and underlined + + + + diff --git a/test/fixtures/mj-table-other.html b/test/fixtures/mj-table-other.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-table-other.html @@ -0,0 +1,133 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + +
YearLanguageInspired from
1995PHPC, Shell Unix
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-table-other.mjml b/test/fixtures/mj-table-other.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-table-other.mjml @@ -0,0 +1,20 @@ + + + + + + + Year + Language + Inspired from + + + 1995 + PHP + C, Shell Unix + + + + + + diff --git a/test/fixtures/mj-table-table.html b/test/fixtures/mj-table-table.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-table-table.html @@ -0,0 +1,133 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + +
YearLanguageInspired from
1995PHPC, Shell Unix
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-table-table.mjml b/test/fixtures/mj-table-table.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-table-table.mjml @@ -0,0 +1,20 @@ + + + + + + + Year + Language + Inspired from + + + 1995 + PHP + C, Shell Unix + + + + + + diff --git a/test/fixtures/mj-table-text.html b/test/fixtures/mj-table-text.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-table-text.html @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + +
YearLanguageInspired from
1995PHPC, Shell Unix
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-table-text.mjml b/test/fixtures/mj-table-text.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-table-text.mjml @@ -0,0 +1,20 @@ + + + + + + + Year + Language + Inspired from + + + 1995 + PHP + C, Shell Unix + + + + + + diff --git a/test/fixtures/mj-table.html b/test/fixtures/mj-table.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-table.html @@ -0,0 +1,133 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + + + +
YearLanguageInspired from
1995PHPC, Shell Unix
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-table.mjml b/test/fixtures/mj-table.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-table.mjml @@ -0,0 +1,20 @@ + + + + + + + Year + Language + Inspired from + + + 1995 + PHP + C, Shell Unix + + + + + + diff --git a/test/fixtures/mj-text-align.html b/test/fixtures/mj-text-align.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-align.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with align
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-align.mjml b/test/fixtures/mj-text-align.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-align.mjml @@ -0,0 +1,11 @@ + + + + + + with align + + + + + diff --git a/test/fixtures/mj-text-class.html b/test/fixtures/mj-text-class.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-class.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with css class
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-class.mjml b/test/fixtures/mj-text-class.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-class.mjml @@ -0,0 +1,11 @@ + + + + + + with css class + + + + + diff --git a/test/fixtures/mj-text-color.html b/test/fixtures/mj-text-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-color.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
coucou
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-color.mjml b/test/fixtures/mj-text-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-color.mjml @@ -0,0 +1,11 @@ + + + + + + coucou + + + + + diff --git a/test/fixtures/mj-text-container-background-color.html b/test/fixtures/mj-text-container-background-color.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-container-background-color.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with container background color
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-container-background-color.mjml b/test/fixtures/mj-text-container-background-color.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-container-background-color.mjml @@ -0,0 +1,11 @@ + + + + + + with container background color + + + + + diff --git a/test/fixtures/mj-text-decoration.html b/test/fixtures/mj-text-decoration.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-decoration.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with text decoration
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-decoration.mjml b/test/fixtures/mj-text-decoration.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-decoration.mjml @@ -0,0 +1,11 @@ + + + + + + with text decoration + + + + + diff --git a/test/fixtures/mj-text-example.html b/test/fixtures/mj-text-example.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-example.html @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +

+ Hey Title! +

+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-example.mjml b/test/fixtures/mj-text-example.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-example.mjml @@ -0,0 +1,13 @@ + + + + + +

+ Hey Title! +

+ + + + + diff --git a/test/fixtures/mj-text-font-family.html b/test/fixtures/mj-text-font-family.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-font-family.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with font family
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-font-family.mjml b/test/fixtures/mj-text-font-family.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-font-family.mjml @@ -0,0 +1,11 @@ + + + + + + with font family + + + + + diff --git a/test/fixtures/mj-text-font-size.html b/test/fixtures/mj-text-font-size.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-font-size.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with font size
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-font-size.mjml b/test/fixtures/mj-text-font-size.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-font-size.mjml @@ -0,0 +1,11 @@ + + + + + + with font size + + + + + diff --git a/test/fixtures/mj-text-font-style.html b/test/fixtures/mj-text-font-style.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-font-style.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with font style
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-font-style.mjml b/test/fixtures/mj-text-font-style.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-font-style.mjml @@ -0,0 +1,11 @@ + + + + + + with font style + + + + + diff --git a/test/fixtures/mj-text-font-weight.html b/test/fixtures/mj-text-font-weight.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-font-weight.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with font weight
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-font-weight.mjml b/test/fixtures/mj-text-font-weight.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-font-weight.mjml @@ -0,0 +1,11 @@ + + + + + + with font weight + + + + + diff --git a/test/fixtures/mj-text-height.html b/test/fixtures/mj-text-height.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-height.html @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ + + + + +
with height
+ + + + + +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-height.mjml b/test/fixtures/mj-text-height.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-height.mjml @@ -0,0 +1,11 @@ + + + + + + with height + + + + + diff --git a/test/fixtures/mj-text-letter-spacing.html b/test/fixtures/mj-text-letter-spacing.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-letter-spacing.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with letter spacing
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-letter-spacing.mjml b/test/fixtures/mj-text-letter-spacing.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-letter-spacing.mjml @@ -0,0 +1,11 @@ + + + + + + with letter spacing + + + + + diff --git a/test/fixtures/mj-text-line-height.html b/test/fixtures/mj-text-line-height.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-line-height.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with line height
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-line-height.mjml b/test/fixtures/mj-text-line-height.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-line-height.mjml @@ -0,0 +1,11 @@ + + + + + + with line height + + + + + diff --git a/test/fixtures/mj-text-padding.html b/test/fixtures/mj-text-padding.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-padding.html @@ -0,0 +1,280 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with padding
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with padding-top
+ +
+ +
+ + + +
+ + + + + + + + + +
+ +
with padding-bottom
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with padding-left
+ +
+ +
+ + + +
+ + + + + + + + + +
+ +
with padding-right
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-padding.mjml b/test/fixtures/mj-text-padding.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-padding.mjml @@ -0,0 +1,35 @@ + + + + + + with padding + + + + + + + with padding-top + + + + + with padding-bottom + + + + + + + with padding-left + + + + + with padding-right + + + + + diff --git a/test/fixtures/mj-text-transform.html b/test/fixtures/mj-text-transform.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-transform.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
with text transform
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text-transform.mjml b/test/fixtures/mj-text-transform.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text-transform.mjml @@ -0,0 +1,11 @@ + + + + + + with text transform + + + + + diff --git a/test/fixtures/mj-text.html b/test/fixtures/mj-text.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text.html @@ -0,0 +1,150 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
First
+ +
+ +
+ + + +
+ + + + + + + + + +
+ +
Second
+ +
+ +
+ + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-text.mjml b/test/fixtures/mj-text.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-text.mjml @@ -0,0 +1,12 @@ + + + + + First + + + Second + + + + diff --git a/test/fixtures/mj-title.html b/test/fixtures/mj-title.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-title.html @@ -0,0 +1,49 @@ + + + + Hello MJML + + + + + + + + + + + + + + + + + +
+ +
+ + + + diff --git a/test/fixtures/mj-title.mjml b/test/fixtures/mj-title.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-title.mjml @@ -0,0 +1,7 @@ + + + Hello MJML + + + + diff --git a/test/fixtures/mj-wrapper-background.html b/test/fixtures/mj-wrapper-background.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper-background.html @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+
+ + + + + + +
+ + + +
+ + + + + + + +
+ +
+ +
+ + + +
+
+
+ + + + +
+ + + + diff --git a/test/fixtures/mj-wrapper-background.mjml b/test/fixtures/mj-wrapper-background.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper-background.mjml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/test/fixtures/mj-wrapper-border.html b/test/fixtures/mj-wrapper-border.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper-border.html @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + + +
+ + + + + + + +
+ +
+ +
+ + + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-wrapper-border.mjml b/test/fixtures/mj-wrapper-border.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper-border.mjml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/test/fixtures/mj-wrapper-full-width-section-background.html b/test/fixtures/mj-wrapper-full-width-section-background.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper-full-width-section-background.html @@ -0,0 +1,210 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + + + + + + + +
+ + + + +
+
+ + + + + + +
+ + +
+ + + + + + + + + +
+ +
Hero section
+ +
+ +
+ + +
+
+
+ + + + +
+ + + + +
+ + + + + + + +
+ + +
+ + + + + + + + + +
+ +
Regular section
+ +
+ +
+ + +
+ +
+ + + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-wrapper-full-width-section-background.mjml b/test/fixtures/mj-wrapper-full-width-section-background.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper-full-width-section-background.mjml @@ -0,0 +1,16 @@ + + + + + + Hero section + + + + + Regular section + + + + + diff --git a/test/fixtures/mj-wrapper-other.html b/test/fixtures/mj-wrapper-other.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper-other.html @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + diff --git a/test/fixtures/mj-wrapper-other.mjml b/test/fixtures/mj-wrapper-other.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper-other.mjml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/test/fixtures/mj-wrapper-padding.html b/test/fixtures/mj-wrapper-padding.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper-padding.html @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + + +
+ + + + + + + +
+ +
+ +
+ + + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-wrapper-padding.mjml b/test/fixtures/mj-wrapper-padding.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper-padding.mjml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/test/fixtures/mj-wrapper.html b/test/fixtures/mj-wrapper.html new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper.html @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + +
+ + + +
+ + + + + + + +
+ +
+ +
+ + + +
+ +
+ + + + + +
+ + + + diff --git a/test/fixtures/mj-wrapper.mjml b/test/fixtures/mj-wrapper.mjml new file mode 100644 --- /dev/null +++ b/test/fixtures/mj-wrapper.mjml @@ -0,0 +1,7 @@ + + + + + + +