diff --git a/packages/mjml-core/src/helpers/skeleton.js b/packages/mjml-core/src/helpers/skeleton.js
index fef3cf148..e780ad840 100644
--- a/packages/mjml-core/src/helpers/skeleton.js
+++ b/packages/mjml-core/src/helpers/skeleton.js
@@ -1,7 +1,8 @@
-import { map, reduce, negate, isNil, isFunction } from 'lodash'
+import { negate, isNil } from 'lodash'
import buildPreview from './preview'
import { buildFontsTags } from './fonts'
import buildMediaQueriesTags from './mediaQueries'
+import { buildStyleFromComponents, buildStyleFromTags } from './styles'
export default function skeleton(options) {
const {
@@ -11,8 +12,8 @@ export default function skeleton(options) {
content = '',
fonts = {},
mediaQueries = {},
- headStyle = [],
- componentsHeadStyle = {},
+ headStyle = {},
+ componentsHeadStyle = [],
headRaw = [],
preview,
title = '',
@@ -59,21 +60,8 @@ export default function skeleton(options) {
${buildFontsTags(content, inlineStyle, fonts)}
${buildMediaQueriesTags(breakpoint, mediaQueries, forceOWADesktop)}
-
-
+ ${buildStyleFromComponents(breakpoint, componentsHeadStyle, headStyle)}
+ ${buildStyleFromTags(breakpoint, style)}
${headRaw.filter(negate(isNil)).join('\n')}
${[...componentsHeadStyles, ...headStyles].reduce(
+ (result, styleFunction) => `${result}\n${styleFunction(breakpoint)}`,
+ '',
+ )}
+ `
+}
+
+export function buildStyleFromTags(breakpoint, styles) {
+ if (styles.length === 0) {
+ return ''
+ }
+
+ return `
+ `
+}
diff --git a/packages/mjml-core/tests/index.js b/packages/mjml-core/tests/index.js
index 447ec71db..e168e0620 100644
--- a/packages/mjml-core/tests/index.js
+++ b/packages/mjml-core/tests/index.js
@@ -2,4 +2,5 @@ require('./jsonToXml-test')
require('./mergeOutlookConditionnals-test')
require('./minifyOutlookConditionnals-test')
require('./shorthandParser-test')
+require('./skeleton-test')
require('./widthParser-test')
diff --git a/packages/mjml-core/tests/skeleton-test.js b/packages/mjml-core/tests/skeleton-test.js
new file mode 100644
index 000000000..ca33b25c1
--- /dev/null
+++ b/packages/mjml-core/tests/skeleton-test.js
@@ -0,0 +1,70 @@
+const chai = require('chai')
+const { load } = require('cheerio')
+const skeleton = require('../lib/helpers/skeleton')
+
+// The conditional style tag for Outlook does not get parsed by cheerio,
+// so each outputStyleCount excludes it
+const testValues = [
+ {
+ options: {},
+ outputStyleCount: 1,
+ },
+ {
+ options: {
+ componentsHeadStyle: [
+ () => '.custom-component-1 .custom-child { background: red; }',
+ ],
+ },
+ outputStyleCount: 2,
+ },
+ {
+ options: {
+ headStyle: {
+ 'custom-component': () =>
+ '.custom-component .custom-child { background: orange; }',
+ },
+ },
+ outputStyleCount: 2,
+ },
+ {
+ options: {
+ componentsHeadStyle: [
+ () => '.custom-component-1 .custom-child { background: yellow; }',
+ ],
+ headStyle: {
+ 'custom-component': () =>
+ '.custom-component .custom-child { background: green; }',
+ },
+ },
+ outputStyleCount: 2,
+ },
+ {
+ options: {
+ style: ['#title { background: blue; }'],
+ },
+ outputStyleCount: 2,
+ },
+ {
+ options: {
+ componentsHeadStyle: [
+ () => '.custom-component-1 .custom-child { background: purple; }',
+ ],
+ headStyle: {
+ 'custom-component': () =>
+ '.custom-component .custom-child { background: black; }',
+ },
+ style: [() => '#title { background: white; }'],
+ },
+ outputStyleCount: 3,
+ },
+]
+
+testValues.forEach((testUnit) => {
+ const { options, outputStyleCount } = testUnit
+
+ const $ = load(skeleton(options))
+
+ chai
+ .expect($('head style').get().length, 'Unexpected number of style tags')
+ .to.equal(outputStyleCount)
+})