Added support for removing HTML selectors

jonkemp · Feb 8, 2015 · 3faf40f · 3faf40f
1 parent 179f4b9
commit 3faf40f
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 0 deletions.
diff --git a/index.js b/index.js
@@ -47,6 +47,7 @@ module.exports = function (html, options, callback) {
             removeLinkTags: true,
             preserveMediaQueries: false,
             applyWidthAttributes: false,
+            removeHtmlSelectors: false,
         }, options);
 
     inlineContent(html, opt, function (err, content) {

diff --git a/lib/inline-css.js b/lib/inline-css.js
@@ -110,12 +110,28 @@ module.exports = function (html, css, options) {
         }
     }
 
+    function removeHtmlSelectors(el) {
+        var selectors = ['class', 'id'];
+
+        selectors.forEach(function(selector) {
+          var attribute = $(el).attr(selector);
+
+          if (typeof attribute !== 'undefined') {
+            $(el).removeAttr(selector);
+          }
+        });
+    }
+
     rules.forEach(handleRule);
     editedElements.forEach(setStyleAttrs);
 
     if (options && options.applyWidthAttributes) {
         editedElements.forEach(setWidthAttrs);
     }
 
+    if (options && options.removeHtmlSelectors) {
+        editedElements.forEach(removeHtmlSelectors);
+    }
+
     return $.html();
 };
diff --git a/test/expected/remove-html-selectors.html b/test/expected/remove-html-selectors.html
@@ -0,0 +1,4 @@
+<html><body>
+<div style="color: red; display: inline-block; font-size: 12px; width: 100%;">Test</div>
+<div style="color: red; display: inline-block; font-size: 12px; width: 100%;">Test</div>
+</body></html>
diff --git a/test/fixtures/remove-html-selectors.css b/test/fixtures/remove-html-selectors.css
@@ -0,0 +1,9 @@
+.myClass {
+  color: red;
+  font-size: 12px;
+}
+
+#myId {
+  display: inline-block;
+  width: 100%;
+}
diff --git a/test/fixtures/remove-html-selectors.html b/test/fixtures/remove-html-selectors.html
@@ -0,0 +1,4 @@
+<html><link rel="stylesheet" href="remove-html-selectors.css"/><body>
+<div id="myId" class="myClass">Test</div>
+<div id="myId" class="myClass">Test</div>
+</body></html>
diff --git a/test/main.js b/test/main.js
@@ -205,4 +205,12 @@ describe('inline-css', function() {
         };
         compare(path.join('test', 'fixtures', 'template.ejs'), path.join('test', 'fixtures', 'template.ejs'), options, done);
     });
+
+    it('Should inline css in edge case and remove html selectors', function(done) {
+      var options = {
+        removeHtmlSelectors: true
+      };
+      compare(path.join('test', 'fixtures', 'remove-html-selectors.html'), path.join('test', 'expected', 'remove-html-selectors.html'), options, done);
+    });
+
 });