Merge pull request #352 from hansottowirtz/support-htmlparser2

Support htmlparser2
Automattic · Jul 8, 2020 · ec41c65 · ec41c65
2 parents f55f820 + 4be7b64
commit ec41c65
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git a/lib/inline.js b/lib/inline.js
@@ -344,7 +344,10 @@ function getStylesData($, options) {
   var styleDataList, styleData, styleElement;
   stylesList.each(function() {
     styleElement = this;
-    styleDataList = styleElement.childNodes;
+    // the API for Cheerio using parse5 (default) and htmlparser2 are slightly different
+    // detect this by checking if .childNodes exist (as opposed to .children)
+    var usingParse5 = !!styleElement.childNodes;
+    styleDataList = usingParse5 ? styleElement.childNodes : styleElement.children;
     if (styleDataList.length !== 1) {
       if (options.removeStyleTags) {
         $(styleElement).remove();
@@ -356,14 +359,19 @@ function getStylesData($, options) {
       results.push(styleData);
     }
     if (options.removeStyleTags && $(styleElement).attr('data-embed') === undefined) {
-      var preservedText = utils.getPreservedText(styleElement.childNodes[0].nodeValue, {
+      var text = usingParse5 ? styleElement.childNodes[0].nodeValue : styleElement.children[0].data;
+      var preservedText = utils.getPreservedText(text, {
         mediaQueries: options.preserveMediaQueries,
         fontFaces: options.preserveFontFaces,
         keyFrames: options.preserveKeyFrames,
         pseudos: options.preservePseudos
       }, juiceClient.ignoredPseudos);
       if (preservedText) {
-        styleElement.childNodes[0].nodeValue = preservedText;
+        if (usingParse5) {
+          styleElement.childNodes[0].nodeValue = preservedText;
+        } else {
+          styleElement.children[0].data = preservedText;
+        }
       } else {
         $(styleElement).remove();
       }

diff --git a/test/run.js b/test/run.js
@@ -5,6 +5,8 @@ var utils = require('../lib/utils');
 var basename = require('path').basename;
 var fs = require('fs');
 var assert = require('assert');
+var cheerio = require('cheerio');
+var htmlparser2 = require('htmlparser2');
 
 
 /**
@@ -25,6 +27,16 @@ it('juice(html)', function() {
   assert.equal(utils.normalizeLineEndings(actual.trim()), utils.normalizeLineEndings(expected.trim()));
 });
 
+it('juice(document) with htmlparser2', function() {
+  var dom = htmlparser2.parseDOM('<style>div{color:red;}</style><div/>');
+  var $ = cheerio.load(dom);
+
+  var expected = '<div style="color: red;"></div>';
+  juice.juiceDocument($);
+  var actual = $.html();
+  assert.equal(utils.normalizeLineEndings(actual.trim()), utils.normalizeLineEndings(expected.trim()));
+});
+
 var optionFiles = fs.readdirSync(__dirname + '/cases/juice-content');
 
 optionFiles.forEach(function(file) {

diff --git a/test/typescript/juice-tests.ts b/test/typescript/juice-tests.ts
@@ -4,6 +4,7 @@
 
 import juice = require('../../');
 import cheerio = require('cheerio');
+import htmlparser2 = require('htmlparser2');
 
 const sample = '<style>div{class: red;}</style><div></div>';
 const someHtml = '<h1 class="x">yo</h1>';
@@ -46,7 +47,10 @@ const allWebResourceOptions = {
   },
 };
 
-const cheerio$ = cheerio.load('<h1>test</h1>');
+const someMoreHtml = '<h1>test</h1>';
+const cheerio$ = cheerio.load(someMoreHtml);
+const htmlparser2dom = htmlparser2.parseDOM(someMoreHtml);
+const cheerioHtmlparser2$ = cheerio.load(htmlparser2dom);
 
 const x: string = juice(someHtml, {});
 
@@ -145,6 +149,11 @@ const c6 = juice.juiceDocument(
   cheerio$,
 );
 
+const c7 = juice.juiceDocument(
+  cheerioHtmlparser2$,
+  noOptions
+);
+
 juice.inlineContent(someHtml, someCss, noOptions);
 
 juice.inlineContent(someHtml, someCss, mostOptions);
@@ -165,6 +174,8 @@ juice.inlineDocument(cheerio$, someCss, someWebResourceOptions);
 
 juice.inlineDocument(cheerio$, someCss, allWebResourceOptions);
 
+juice.inlineDocument(cheerioHtmlparser2$, someCss, noOptions);
+
 // Global settings
 
 juice.codeBlocks['HBS'] = { start: '{{', end: '}}' };