Adding support for the noPathPrefixPatterns option

4front · Mar 16, 2016 · d8c8d11 · d8c8d11
1 parent 2bed276
commit d8c8d11
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ fs.createReadStream('./views/index.html')
 
 ## Features
 ### Prepend prefix to asset URLs
-Prepend a string to all `src` and link `href` attributes. Canonical use case is repointing assets to a CDN. If the `assetPathPrefix` option is set to "//cdnhost.com/dir" then:
+Prepend a string to all `src` and link `href` attributes. Canonical use case is repointing assets to a CDN. If the `assetPathPrefix` option is set to "//cdnhost.com/assets" then:
 
 ~~~html
 <script src="/js/app.js"></script>
@@ -36,8 +36,19 @@ Prepend a string to all `src` and link `href` attributes. Canonical use case is
 becomes:
 
 ~~~html
-<script src="//cdnhost.com/dir/js/app.js"></script>
-<img src="//cdnhost.com/dir/images/logo.gif">
+<script src="//cdnhost.com/assets/js/app.js"></script>
+<img src="//cdnhost.com/assets/images/logo.gif">
+~~~
+
+You can prevent this behavior for specific assets by providing a list of glob patterns to the `noPathPrefixPatterns` option. The value of the each asset path, i.e. `/images/logo.gif` is evaluated against each pattern using [minimatch](https://www.npmjs.com/package/minimatch).
+
+For example if you wanted all `.jpg` files in the images directory to be left alone, you'd do this:
+
+~~~js
+htmlprep({
+  assetPathPrefix: '//cdhhost.com/assets',
+  noPathPrefixPatterns: ['/images/*.jpg']
+});
 ~~~
 
 ### Build-specific blocks

diff --git a/lib/attribute-modifier.js b/lib/attribute-modifier.js
@@ -1,11 +1,14 @@
 var _ = require('lodash');
+var minimatch = require('minimatch');
 
 var absoluteUrlRe = /^http[s]?:\/\//i;
 var validSrcAttributeTags = ['iframe', 'img', 'script', 'audio', 'video', 'embed', 'input'];
 var linkRelAttributeUrlValues = ['alternate', 'help', 'license', 'next', 'prev', 'search'];
 var inlineCssUrlRe = /url\(["']?(.*?)["']?\)/;
 
 module.exports = function(options) {
+  _.defaults(options, {noPathPrefixPatterns: []});
+
   var customAttribute = require('./custom-attribute')(options.attrPrefix);
 
   return function(tagName, attribs) {
@@ -58,6 +61,14 @@ module.exports = function(options) {
   };
 
   function prependAssetPath(assetPath) {
+    // Don't prepend the asset path to any path that matches
+    // one of the noAssetPathPrefixes patterns.
+    for (var i = 0; i < options.noPathPrefixPatterns.length; i++) {
+      if (minimatch(assetPath, options.noPathPrefixPatterns[i])) {
+        return assetPath;
+      }
+    }
+
     // If this is an embedded image, leave it.
     if (assetPath.slice(0, 5) === 'data:') return assetPath;
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "htmlprep",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "High-performance streaming HTML pre-processor designed to run in middleware.",
   "main": "index.js",
   "scripts": {
@@ -34,6 +34,7 @@
     "entities": "^1.1.1",
     "glob": "^7.0.3",
     "lodash": "^4.6.1",
+    "minimatch": "^3.0.0",
     "readable-stream": "^2.0.5",
     "through2": "^2.0.1"
   },

diff --git a/test/attributes.js b/test/attributes.js
@@ -1,3 +1,4 @@
+/* eslint max-len: 0 */
 var assert = require('assert');
 var run = require('./run');
 
@@ -288,4 +289,20 @@ describe('htmlprep attributes', function() {
       done();
     });
   });
+
+  it('does not prepend assets paths based on noAssetPathPrefixes', function(done) {
+    var html = '<html><div style="background-image:url(/img/bg.jpg)"></div><img src="logo.jpg"/></html>';
+
+    var opts = {
+      noPathPrefixPatterns: ['/img/*.jpg'],
+      assetPathPrefix: '//cdn.net/'
+    };
+
+    run(html, opts, function(err, output) {
+      if (err) return done(err);
+
+      assert.equal(output, '<html><div style="background-image:url(/img/bg.jpg)"></div><img src="//cdn.net/logo.jpg"/></html>');
+      done();
+    });
+  });
 });