Add juice.codeBlocks

+ v4 release
+ updates deps

Author: jrit

History.md

@@ -1,3 +1,10 @@
+4.0.0 / 2016-11-17
+==================
+
+* deps: update web-resource-inliner and cross-spawn
+* engine: specify support as node 4.2+
+* feat: add option `codeBlocks` to support general exclusion of fenced code, like EJS, HBS, etc. 
+
 3.0.1 / 2016-10-06
 ==================
 

README.md

@@ -48,19 +48,32 @@ Juice is exposed as a standard module, and from CLI with a smaller set of option
 
 All juice methods take an options object that can contain any of these properties, though not every method uses all of these:
 
- * `extraCss` - extra css to apply to the file. Defaults to `""`.
- * `applyStyleTags` - whether to inline styles in `<style></style>` Defaults to `true`.
- * `removeStyleTags` - whether to remove the original `<style></style>` tags after (possibly) inlining the css from them. Defaults to `true`.
- * `preserveMediaQueries` - preserves all media queries (and contained styles) within `<style></style>` tags as a refinement when `removeStyleTags` is `true`. Other styles are removed. Defaults to `true`.
- * `preserveFontFaces` - preserves all `@font-face` within `<style></style>` tags as a refinement when `removeStyleTags` is `true`. Other styles are removed. Defaults to `true`.
- * `insertPreservedExtraCss` - whether to insert into the document any preserved `@media` or `@font-face` content from `extraCss` when using `preserveMediaQueries` or `preserveFontFaces`. When `true` order of preference to append the `<style>` element is into `head`, then `body`, then at the end of the document. When a `string` the value is treated as a CSS/jQuery/cheerio selector, and when found, the `<style>` tag will be appended to the end of the first match. Defaults to `true`.
- * `applyWidthAttributes` - whether to use any CSS pixel widths to create `width` attributes on elements set in `juice.widthElements`. Defaults to `true`.
- * `applyHeightAttributes` - whether to use any CSS pixel heights to create `height` attributes on elements set in `juice.heightElements`. Defaults to `true`.
- * `applyAttributesTableElements` - whether to create attributes for styles in `juice.styleToAttribute` on elements set in `juice.tableElements`. Defaults to `true`.
- * `webResources` - An options object that will be passed to [web-resource-inliner](https://www.npmjs.com/package/web-resource-inliner) for juice functions that will get remote resources (`juiceResources` and `juiceFile`). Defaults to `{}`.
- * `inlinePseudoElements` - Whether to insert pseudo elements (`::before` and `::after`) as `<span>` into the DOM. *Note*: Inserting pseudo elements will modify the DOM and may conflict with CSS selectors elsewhere on the page (e.g., `:last-child`).
- * `xmlMode` - whether to output XML/XHTML with all tags closed. Note that the input *must* also be valid XML/XHTML or you will get undesirable results. Defaults to `false`.
- * `preserveImportant` - preserves `!important` in values. Defaults to `false`.
+* `applyAttributesTableElements` - whether to create attributes for styles in `juice.styleToAttribute` on elements set in `juice.tableElements`. Defaults to `true`.
+
+* `applyHeightAttributes` - whether to use any CSS pixel heights to create `height` attributes on elements set in `juice.heightElements`. Defaults to `true`.
+
+* `applyStyleTags` - whether to inline styles in `<style></style>` Defaults to `true`.
+
+* `applyWidthAttributes` - whether to use any CSS pixel widths to create `width` attributes on elements set in `juice.widthElements`. Defaults to `true`.
+
+* `extraCss` - extra css to apply to the file. Defaults to `""`.
+
+* `insertPreservedExtraCss` - whether to insert into the document any preserved `@media` or `@font-face` content from `extraCss` when using `preserveMediaQueries` or `preserveFontFaces`. When `true` order of preference to append the `<style>` element is into `head`, then `body`, then at the end of the document. When a `string` the value is treated as a CSS/jQuery/cheerio selector, and when found, the `<style>` tag will be appended to the end of the first match. Defaults to `true`.
+
+* `inlinePseudoElements` - Whether to insert pseudo elements (`::before` and `::after`) as `<span>` into the DOM. *Note*: Inserting pseudo elements will modify the DOM and may conflict with CSS selectors elsewhere on the page (e.g., `:last-child`).
+
+* `preserveFontFaces` - preserves all `@font-face` within `<style></style>` tags as a refinement when `removeStyleTags` is `true`. Other styles are removed. Defaults to `true`.
+
+* `preserveImportant` - preserves `!important` in values. Defaults to `false`.
+
+* `preserveMediaQueries` - preserves all media queries (and contained styles) within `<style></style>` tags as a refinement when `removeStyleTags` is `true`. Other styles are removed. Defaults to `true`.
+
+* `removeStyleTags` - whether to remove the original `<style></style>` tags after (possibly) inlining the css from them. Defaults to `true`.
+
+* `webResources` - An options object that will be passed to [web-resource-inliner](https://www.npmjs.com/package/web-resource-inliner) for juice functions that will get remote resources (`juiceResources` and `juiceFile`). Defaults to `{}`.
+
+* `xmlMode` - whether to output XML/XHTML with all tags closed. Note that the input *must* also be valid XML/XHTML or you will get undesirable results. Defaults to `false`.
+
 
 ### Methods
 
@@ -118,6 +131,10 @@ Given a cheerio instance and css, this modifies the cheerio instance so that the
 
 ### Global settings
 
+#### juice.codeBlocks
+
+An object where each value has a `start` and `end` to specify fenced code blocks that should be ignored during parsing and inlining. For example, Handlebars (hbs) templates are `{start: '{{', end: '}}'}`. `codeBlocks` can fix problems where otherwise juice might interpret code like `<=` as HTML, when it is meant to be template language code.
+
 #### juice.ignoredPseudos
 
 Array of ignored pseudo-selectors such as 'hover' and 'active'.

client.js

@@ -20,7 +20,7 @@ var juiceDocument = function(html, options) {
   return juiceClient.juiceDocument(html, options);
 }
 
-juiceClient.inlineContent = function (html, css, options) {
+juiceClient.inlineContent = function(html, css, options) {
   return cheerio(html, { xmlMode: options && options.xmlMode}, juiceClient.inlineDocument, [css, options]);
 };
 

index.js

@@ -35,6 +35,8 @@ juice.juiceFile = juiceFile;
 juice.juiceResources = juiceResources;
 juice.inlineExternal = inlineExternal;
 
+juice.codeBlocks = cheerio.codeBlocks;
+
 function juiceFile(filePath, options, callback) {
   // set default options
   fs.readFile(filePath, 'utf8', function(err, content) {

lib/cheerio.js

@@ -12,24 +12,34 @@ var cheerioLoad = function(html, options) {
   return cheerio.load(html,options);
 };
 
-var encodeEJS = function(html) {
-  return html.replace(/<%((.|\s)*?)%>/g, function(match, subMatch) {
-    return '<!--EJS <%' + subMatch + '%> -->';
+var encodeCodeBlocks = function(html) {
+  var blocks = module.exports.codeBlocks;
+  Object.keys(blocks).forEach((key) => {
+    var re = new RegExp(blocks[key].start + '((.|\\s)*?)' + blocks[key].end, 'g');
+    html = html.replace(re, function(match, subMatch) {
+      return '<!--' + key + ' ' + blocks[key].start + subMatch + blocks[key].end + ' -->';
+    });
   });
+  return html;
 };
 
-var decodeEJS = function(html) {
-  return html.replace(/<!--EJS <%((.|\s)*?)%> -->/g, function(match, subMatch) {
-    return '<%' + subMatch + '%>';
+var decodeCodeBlocks = function(html) {
+  var blocks = module.exports.codeBlocks;
+  Object.keys(blocks).forEach((key) => {
+    var re = new RegExp('<!--' + key + ' ' + blocks[key].start + '((.|\\s)*?)' + blocks[key].end + ' -->', 'g');
+    html = html.replace(re, function(match, subMatch) {
+      return blocks[key].start + subMatch + blocks[key].end;
+    });
   });
+  return html;
 };
 
 var encodeEntities = function(html) {
-  return encodeEJS(html);
+  return encodeCodeBlocks(html);
 };
 
 var decodeEntities = function(html) {
-  return decodeEJS(html);
+  return decodeCodeBlocks(html);
 };
 
 /**
@@ -52,3 +62,8 @@ module.exports = function(html, options, callback, callbackExtraArguments) {
   }
   return decodeEntities(doc.html());
 };
+
+module.exports.codeBlocks = {
+  EJS: { start: '<%', end: '%>' },
+  HBS: { start: '{{', end: '}}' }
+};

lib/inline.js

@@ -26,7 +26,7 @@ function inlineDocument($, css, options) {
   var rules = utils.parseCSS(css);
   var editedElements = [];
   var styleAttributeName = 'style';
-  
+
   if (options.styleAttributeName) {
     styleAttributeName = options.styleAttributeName;
   }
@@ -149,7 +149,7 @@ function inlineDocument($, css, options) {
             var value = style[i].value;
             var important = style[i].value.match(/!important$/) !== null;
             if (important && !options.preserveImportant) value = value.replace(/\s*!important$/, '');
-            // adds line number and column number for the properties as "additionalPriority" to the 
+            // adds line number and column number for the properties as "additionalPriority" to the
             // properties because in CSS the position directly affect the priority.
             var additionalPriority = [style[i].position.start.line, style[i].position.start.col];
             var prop = new utils.Property(name, value, selector, important ? 2 : 0, additionalPriority);
@@ -356,4 +356,4 @@ function extractCssFromDocument($, options) {
 
 return juiceClient;
 
-};
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "juice",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "Inlines css into html source",
   "bin": "bin/juice",
   "main": "index.js",
@@ -34,22 +34,22 @@
     }
   ],
   "engines": {
-    "node": ">=4.0.0"
+    "node": ">=4.2.0"
   },
   "types": "juice.d.ts",
   "dependencies": {
     "cheerio": "^0.22.0",
     "commander": "2.9.0",
-    "cross-spawn": "^4.0.0",
-    "mensch": "^0.3.3",
+    "cross-spawn": "^5.0.1",
     "deep-extend": "^0.4.0",
+    "mensch": "^0.3.3",
     "slick": "1.12.2",
-    "web-resource-inliner": "3.0.0"
+    "web-resource-inliner": "^4.0.0"
   },
   "devDependencies": {
     "batch": "0.5.3",
-    "mocha": "1.21.4",
-    "should": "4.0.4",
+    "mocha": "^3.1.2",
+    "should": "^11.1.1",
     "typescript": "^2.0.3"
   },
   "repository": {

test/cases/hbs.css

@@ -0,0 +1,4 @@
+body,
+p {
+  color: red;
+}

test/cases/hbs.html

@@ -0,0 +1,3 @@
+<body>
+{{#if `age <= 40`}}<p>Young</p>{{/if}}
+</body>

test/cases/hbs.out

@@ -0,0 +1,3 @@
+<body style="color: red;">
+{{#if `age <= 40`}}<p style="color: red;">Young</p>{{/if}}
+</body>