Merge pull request #3690 from curbengh/sri-css

feat(css_helper): add support for custom attributes

Author: curbengh

lib/plugins/helper/css.js

@@ -1,15 +1,46 @@
 'use strict';
 
+const { htmlTag } = require('hexo-util');
+const url_for = require('./url_for');
+
+const flatten = function(arr, result = []) {
+  for (const i in arr) {
+    const value = arr[i];
+    if (Array.isArray(value)) {
+      flatten(value, result);
+    } else {
+      result.push(value);
+    }
+  }
+  return result;
+};
+
 function cssHelper(...args) {
-  return args.reduce((result, path, i) => {
-    if (i) result += '\n';
+  let result = '\n';
+  let items = args;
+
+  if (!Array.isArray(args)) {
+    items = [args];
+  }
+
+  items = flatten(items);
 
-    if (Array.isArray(path)) {
-      return result + Reflect.apply(cssHelper, this, path);
+  items.forEach(item => {
+    // Old syntax
+    if (typeof item === 'string' || item instanceof String) {
+      let path = item;
+      if (!path.endsWith('.css')) {
+        path += '.css';
+      }
+      result += `<link rel="stylesheet" href="${this.url_for(path)}">\n`;
+    } else {
+      // New syntax
+      item.href = url_for.call(this, item.href);
+      if (!item.href.endsWith('.css')) item.href += '.css';
+      result += htmlTag('link', { rel: 'stylesheet', ...item }) + '\n';
     }
-    if (!path.includes('?') && !path.endsWith('.css')) path += '.css';
-    return `${result}<link rel="stylesheet" href="${this.url_for(path)}">`;
-  }, '');
+  });
+  return result;
 }
 
 module.exports = cssHelper;

test/scripts/helpers/css.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const cheerio = require('cheerio');
+
 describe('css', () => {
   const Hexo = require('../../../lib/hexo');
   const hexo = new Hexo(__dirname);
@@ -12,14 +14,22 @@ describe('css', () => {
 
   const css = require('../../../lib/plugins/helper/css').bind(ctx);
 
-  function assertResult(result) {
-    let expected = '';
+  function assertResult(result, expected) {
+    const $ = cheerio.load(result);
 
-    for (let i = 1, len = arguments.length; i < len; i++) {
-      expected += '<link rel="stylesheet" href="' + arguments[i] + '">\n';
+    if (!Array.isArray(expected)) {
+      expected = [expected];
     }
 
-    result.should.eql(expected.trim());
+    expected.forEach((item, index) => {
+      if (typeof item === 'string' || item instanceof String) {
+        $('link').eq(index).attr('href').should.eql(item);
+      } else {
+        for (const attribute in item) {
+          $('link').eq(index).attr(attribute).should.eql(item[attribute]);
+        }
+      }
+    });
   }
 
   it('a string', () => {
@@ -30,18 +40,36 @@ describe('css', () => {
   });
 
   it('an array', () => {
-    assertResult(css(['foo', 'bar', 'baz']), '/foo.css', '/bar.css', '/baz.css');
+    assertResult(css(['foo', 'bar', 'baz']), ['/foo.css', '/bar.css', '/baz.css']);
   });
 
   it('multiple strings', () => {
-    assertResult(css('foo', 'bar', 'baz'), '/foo.css', '/bar.css', '/baz.css');
+    assertResult(css('foo', 'bar', 'baz'), ['/foo.css', '/bar.css', '/baz.css']);
   });
 
   it('multiple arrays', () => {
-    assertResult(css(['foo', 'bar'], ['baz']), '/foo.css', '/bar.css', '/baz.css');
+    assertResult(css(['foo', 'bar'], ['baz']), ['/foo.css', '/bar.css', '/baz.css']);
   });
 
   it('mixed', () => {
-    assertResult(css(['foo', 'bar'], 'baz'), '/foo.css', '/bar.css', '/baz.css');
+    assertResult(css(['foo', 'bar'], 'baz'), ['/foo.css', '/bar.css', '/baz.css']);
+  });
+
+  it('an object', () => {
+    assertResult(css({href: 'script.css'}), {href: '/script.css'});
+    assertResult(css({href: '/script.css'}), {href: '/script.css'});
+    assertResult(css({href: '/script.css', foo: 'bar'}), {href: '/script.css', foo: 'bar'});
+  });
+
+  it('mulitple objects', () => {
+    assertResult(css({href: '/foo.css'}, {href: '/bar.css'}), [{href: '/foo.css'}, {href: '/bar.css'}]);
+    assertResult(css({href: '/aaa.css', bbb: 'ccc'}, {href: '/ddd.css', eee: 'fff'}),
+      [{href: '/aaa.css', bbb: 'ccc'}, {href: '/ddd.css', eee: 'fff'}]);
+  });
+
+  it('an array of objects', () => {
+    assertResult(css([{href: '/foo.css'}, {href: '/bar.css'}]), [{href: '/foo.css'}, {href: '/bar.css'}]);
+    assertResult(css([{href: '/aaa.css', bbb: 'ccc'}, {href: '/ddd.css', eee: 'fff'}]),
+      [{href: '/aaa.css', bbb: 'ccc'}, {href: '/ddd.css', eee: 'fff'}]);
   });
 });