Merge pull request #25 from posthtml/refactor-tags

Author: cossssmin

lib/index.js

@@ -3,75 +3,81 @@ const postcss = require('postcss')
 const merge = require('lodash.merge')
 const isUrl = require('is-url-superb')
 const postcssBaseUrl = require('./plugins/postcss-baseurl.js')
+const defaultTags = {
+  a: {
+    href: true,
+  },
+  area: {
+    href: true,
+  },
+  audio: {
+    src: true,
+  },
+  base: {
+    href: true,
+  },
+  body: {
+    background: true,
+  },
+  embed: {
+    src: true,
+  },
+  iframe: {
+    src: true,
+  },
+  img: {
+    src: true,
+    srcset: true,
+  },
+  input: {
+    src: true,
+  },
+  link: {
+    href: true,
+  },
+  script: {
+    src: true,
+  },
+  source: {
+    src: true,
+    srcset: true,
+  },
+  table: {
+    background: true,
+  },
+  td: {
+    background: true,
+  },
+  th: {
+    background: true,
+  },
+  track: {
+    src: true,
+  },
+  video: {
+    poster: true,
+  },
+}
 
 module.exports = (options = {}) => tree => {
   options.url = options.url || ''
   options.attributes = options.attributes || {}
   options.allTags = options.allTags || false
   options.styleTag = options.styleTag || false
   options.inlineCss = options.inlineCss || false
-  options.tags = options.allTags ? merge({
-    a: {
-      href: true,
-    },
-    area: {
-      href: true,
-    },
-    audio: {
-      src: true,
-    },
-    base: {
-      href: true,
-    },
-    body: {
-      background: true,
-    },
-    embed: {
-      src: true,
-    },
-    iframe: {
-      src: true,
-    },
-    img: {
-      src: true,
-      srcset: true,
-    },
-    input: {
-      src: true,
-    },
-    link: {
-      href: true,
-    },
-    script: {
-      src: true,
-    },
-    source: {
-      src: true,
-      srcset: true,
-    },
-    table: {
-      background: true,
-    },
-    td: {
-      background: true,
-    },
-    th: {
-      background: true,
-    },
-    track: {
-      src: true,
-    },
-    video: {
-      poster: true,
-    },
-  }, options.tags) : options.tags || {}
+  options.tags = options.allTags ? merge(defaultTags, options.tags) : options.tags || {}
 
   const process = node => {
     // Skip if `url` was not provided
     if (options.url && (typeof options.url !== 'string' || options.url === '')) {
       return node
     }
 
+    // Skip if `options.tags` is not an array or object
+    if (!['array', 'object'].includes(typeof options.tags)) {
+      return node
+    }
+
     // Handle embedded stylesheets
     if (node.tag === 'style' && node.content && options.styleTag) {
       node.content = postcss([
@@ -96,7 +102,11 @@ module.exports = (options = {}) => tree => {
     })
 
     // Handle defined HTML tags
-    Object.entries(options.tags).forEach(([tag, attributes]) => {
+    const tags = Array.isArray(options.tags) ?
+      Object.entries(defaultTags).filter(([tag]) => options.tags.includes(tag)) :
+      Object.entries(options.tags)
+
+    tags.forEach(([tag, attributes]) => {
       if (node.tag !== tag) {
         return node
       }

readme.md

@@ -108,14 +108,16 @@ When set to `true`, the plugin will prepend your `url` to all `url()` sources in
 
 ### `tags`
 
-Type: `object`\
-Default: `{/*object with select tags to handle*/}`
+Type: `array|object`\
+Default: [defaultTags](./lib/index.js) (object)
+
+Define a list of tags and their attributes to handle.
 
-An object that defines tags and their attributes to handle.
+When using the `tags` option, the plugin will _only handle those tags_.
 
-When you define tags to handle with the `tags` option, the plugin will _only handle those tags_.
+#### Array `tags`
 
-For example, the `<a>` tag here is not prepended to:
+To replace all known attributes for a list of tags, use the array format:
 
 ```js
 posthtml([
@@ -124,11 +126,43 @@ posthtml([
   .process(
     `<a href="foo/bar.html">
       <img src="img.jpg" srcset="img-HD.jpg 2x,img-xs.jpg 100w">
+    </a>
+    
+    <script src="javascript.js"></script>`, 
+    {
+      tags: ['img', 'script'],
+    }
+  )
+  .then(result => console.log(result.html))
+```
+
+Result:
+
+```html
+<a href="foo/bar.html">
+  <img src="https://example.com/image1.jpg" srcset="https://example.com/image1-HD.jpg 2x, https://example.com/image1-phone.jpg 100w">
+</a>
+
+<script src="https://example.com/javascript.js"></script>
+```
+
+#### Object `tags`
+
+You may use an object for granular control over how specific attributes should be handled:
+
+```js
+posthtml([
+  baseUrl()
+])
+  .process(
+    `<a href="foo/bar.html">
+      <img src="img.jpg" srcset="img-HD.jpg 2x, img-xs.jpg 100w">
     </a>`, 
     {
+      url: 'https://foo.com/',
       tags: {
         img: {
-          src: 'https://foo.com/',
+          src: true,
           srcset: 'https://bar.com/',
         },
       },
@@ -145,6 +179,8 @@ Result:
 </a>
 ```
 
+You may set the value of an attribute to `true` and the plugin will use the `url` option value - we did that above for the `src` attribute.
+
 ### `attributes`
 
 Type: `object`\

test/expected/user-tags.html

@@ -1,3 +1,5 @@
 <a href="foo/bar.html">
-  <img src="https://example.com/image1.jpg" srcset="https://example2.com/image1-HD.jpg 2x, https://example2.com/image1-phone.jpg 100w">
+  <img src="https://example.com/image1.jpg" srcset="https://example.com/image1-HD.jpg 2x, https://example.com/image1-phone.jpg 100w">
 </a>
+
+<script src="https://example.com/javascript.js"></script>

test/fixtures/user-tags.html

@@ -1,3 +1,5 @@
 <a href="foo/bar.html">
   <img src="image1.jpg" srcset="image1-HD.jpg 2x,image1-phone.jpg 100w">
 </a>
+
+<script src="javascript.js"></script>

test/test.js

@@ -21,14 +21,21 @@ const process = (t, name, options, log = false) => {
     .then(html => t.is(html, expected(name).trim()))
 }
 
-test('does nothing if `url` was not provided', t => {
+test('skip if `url` was not provided', t => {
   return process(t, 'no-url', {})
 })
 
-test('does nothing if `url` is not a string', t => {
+test('skip if `url` is not a string', t => {
   return process(t, 'no-url', {url: true})
 })
 
+test('skip if `options.tags` is invalid', t => {
+  return process(t, 'no-url', {
+    url: 'https://example.com',
+    tags: true,
+  })
+})
+
 test('skips absolute urls', t => {
   return process(t, 'absolute-urls')
 })
@@ -84,13 +91,24 @@ test('css urls', t => {
   })
 })
 
-test('applies only to user-defined tags', t => {
+test('user-defined tags (object)', t => {
   return process(t, 'user-tags', {
+    url: 'https://example.com/',
     tags: {
       img: {
+        src: true,
+        srcset: 'https://example.com/',
+      },
+      script: {
         src: 'https://example.com/',
-        srcset: 'https://example2.com/',
       },
     },
   })
 })
+
+test('user-defined tags (array)', t => {
+  return process(t, 'user-tags', {
+    url: 'https://example.com/',
+    tags: ['img', 'script'],
+  })
+})