Allow functions to be added as styles in head (#2377)

Allow functions to be added as styles in head
mjmlio · Nov 24, 2021 · a7fa86e · a7fa86e
1 parent 3abfc67
commit a7fa86e
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 31 deletions.
diff --git a/packages/mjml-core/src/helpers/skeleton.js b/packages/mjml-core/src/helpers/skeleton.js
@@ -1,4 +1,4 @@
-import { reduce, negate, isNil } from 'lodash'
+import { map, reduce, negate, isNil, isFunction } from 'lodash'
 import buildPreview from './preview'
 import { buildFontsTags } from './fonts'
 import buildMediaQueriesTags from './mediaQueries'
@@ -15,7 +15,7 @@ export default function skeleton(options) {
     headRaw = [],
     preview,
     title = '',
-    style,
+    style = [],
     forceOWADesktop,
     inlineStyle,
     lang,
@@ -71,11 +71,9 @@ export default function skeleton(options) {
           '',
         )}
         </style>
-        ${
-          style && style.length > 0
-            ? `<style type="text/css">${style.join('')}</style>`
-            : ''
-        }
+        <style type="text/css">
+        ${map(style, (s) => (isFunction(s) ? s(breakpoint) : s)).join('')}
+        </style>
         ${headRaw.filter(negate(isNil)).join('\n')}
       </head>
       <body style="word-spacing:normal;${

diff --git a/packages/mjml/package.json b/packages/mjml/package.json
@@ -23,7 +23,7 @@
   "scripts": {
     "clean": "rimraf lib",
     "build": "babel src --out-dir lib --root-mode upward",
-    "test": "node ./test/test-html-attributes.js"
+    "test": "node ./test/index.js"
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
@@ -36,6 +36,7 @@
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "chai": "^4.1.1",
+    "chai-spies": "^1.0.0",
     "cheerio": "1.0.0-rc.10",
     "lodash": "^4.17.21",
     "rimraf": "^3.0.2"

diff --git a/packages/mjml/test/test-html-attributes.js → packages/mjml/test/html-attributes.test.js b/packages/mjml/test/test-html-attributes.js → packages/mjml/test/html-attributes.test.js
@@ -1,7 +1,7 @@
-const mjml = require('../lib/index.js')
 const chai = require('chai')
 const cheerio = require('cheerio')
 const { sortBy } = require('lodash')
+const mjml = require('../lib')
 
 const input = `
 <mjml>
@@ -35,23 +35,31 @@ const input = `
 </mjml>
 `
 
-const html = mjml(input).html
+const { html } = mjml(input)
 const $ = cheerio.load(html)
 
 // should put the attributes at the right place
-chai.expect(
-  $('.text div').map(function getAttr() {
-    return $(this).attr('data-id')
-  }).get(),
-  'Custom attributes added on texts',
-).to.eql(['42', '42'])
+chai
+  .expect(
+    $('.text div')
+      .map(function getAttr() {
+        return $(this).attr('data-id')
+      })
+      .get(),
+    'Custom attributes added on texts',
+  )
+  .to.eql(['42', '42'])
 
-chai.expect(
-  $('.image td').map(function getAttr() {
-    return $(this).attr('data-name')
-  }).get(),
-  'Custom attributes added on image',
-).to.eql(['43'])
+chai
+  .expect(
+    $('.image td')
+      .map(function getAttr() {
+        return $(this).attr('data-name')
+      })
+      .get(),
+    'Custom attributes added on image',
+  )
+  .to.eql(['43'])
 
 // should not alter templating syntax, or move the content that is outside any tag (mj-raws)
 const expected = [
@@ -63,14 +71,8 @@ const expected = [
   '{ end if }',
   '{ item + 1 }',
 ]
-const indexes = expected.map(str => html.indexOf(str))
+const indexes = expected.map((str) => html.indexOf(str))
 
-chai.expect(
-  indexes,
-  'Templating syntax unaltered',
-).to.not.include(-1)
+chai.expect(indexes, 'Templating syntax unaltered').to.not.include(-1)
 
-chai.expect(
-  sortBy(indexes),
-  'Mj-raws kept same positions',
-).to.deep.eql(indexes)
+chai.expect(sortBy(indexes), 'Mj-raws kept same positions').to.deep.eql(indexes)
diff --git a/packages/mjml/test/index.js b/packages/mjml/test/index.js
@@ -0,0 +1,2 @@
+require('./html-attributes.test')
+require('./lazy-head-style.test')
diff --git a/packages/mjml/test/lazy-head-style.test.js b/packages/mjml/test/lazy-head-style.test.js
@@ -0,0 +1,46 @@
+const chai = require('chai')
+const spies = require('chai-spies')
+const mjml = require('../lib')
+
+chai.use(spies)
+
+const {
+  HeadComponent,
+  registerComponent,
+} = require('../../mjml-core/lib/index')
+
+const addStyle = chai.spy(
+  (breakpoint) => `
+    @media only screen and (max-width:${breakpoint}) {
+      h1 {
+        font-size: 20px;
+      }
+    }
+  `,
+)
+
+class HeadComponentWithFunctionStyle extends HeadComponent {
+  handler() {
+    const { add } = this.context
+    add('style', addStyle)
+  }
+}
+HeadComponentWithFunctionStyle.componentName = 'mj-head-component-with-function-style'
+HeadComponentWithFunctionStyle.endingTag = true
+HeadComponentWithFunctionStyle.allowedAttributes = {}
+
+
+registerComponent(HeadComponentWithFunctionStyle)
+
+mjml(`
+<mjml>
+  <mj-head>
+    <mj-head-component-with-function-style />
+    <mj-breakpoint width="300px" />
+  </mj-head>
+  <mj-body>
+  </mj-body>
+</mjml>
+`)
+
+chai.expect(addStyle).to.have.been.called.with('300px')
diff --git a/yarn.lock b/yarn.lock
@@ -2824,6 +2824,11 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+chai-spies@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/chai-spies/-/chai-spies-1.0.0.tgz#d16b39336fb316d03abf8c375feb23c0c8bb163d"
+  integrity sha512-elF2ZUczBsFoP07qCfMO/zeggs8pqCf3fZGyK5+2X4AndS8jycZYID91ztD9oQ7d/0tnS963dPkd0frQEThDsg==
+
 chai@^4.1.1:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.4.tgz#b55e655b31e1eac7099be4c08c21964fce2e6c49"