feat: support tags as array

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
       }

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,23 @@ test('css urls', t => {
   })
 })
 
-test('applies only to user-defined tags', t => {
+test('user-defined tags (object)', t => {
   return process(t, 'user-tags', {
     tags: {
       img: {
         src: 'https://example.com/',
-        srcset: 'https://example2.com/',
+        srcset: 'https://example.com/',
+      },
+      script: {
+        src: 'https://example.com/',
       },
     },
   })
 })
+
+test('user-defined tags (array)', t => {
+  return process(t, 'user-tags', {
+    url: 'https://example.com/',
+    tags: ['img', 'script'],
+  })
+})