gulp-inline-css
gulp-inline-css copied to clipboard
jonkemp
Strips self-closing tags
Running the task on pages with self-closing tags and piping to another directory strips the "closing" part, i.e., <br /> becomes <br>.
Using a modified version of the HTML page you have in the README:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<style>
p { color: red; }
</style>
</head>
<body>
<p>Test<br />Is it still there?</p>
</body>
</html>
Note that the meta tag and the br are self-closing. And run this configuration:
gulp.task('inline', function() {
return gulp.src('./tmp/*.html')
.pipe(inlineCss())
.pipe(gulp.dest('./dist'));;
});
The output is:
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<p style="color: red;">Test<br>Is it still there?</p>
</body>
</html>
I played around with removeStyleTags and removeLinkTags but the problem didn't change.
Any issues with code formatting should be brought up with the juice2 module. Thanks.
https://github.com/andrewrk/juice
This may have changed now that this plugin relies on cheerio.js rather than jsdom.
Here's the solution:
In the node-modules>inline-css>lib folder, manually change the code in the file inline-css.js
From this code
return decodeEntities($.html());
Make one:
return decodeEntities($.xml());
Thank you to sgarbesi: https://github.com/jonkemp/gulp-inline-css/issues/28#issuecomment-159038975
