allow for async css loading

Author: yoshuawuyts

README.md

@@ -31,6 +31,7 @@ npm install --save create-html
 - `script`
 - `scriptAsync`
 - `css`
+- `cssAsync`
 - `lang`
 - `dir`
 - `head`

cli.js

@@ -14,6 +14,7 @@ var argv = parseArgs(process.argv.slice(2), {
     H: 'head',
     f: 'favicon',
     c: 'css',
+    C: ['css-async', 'cssAsync'],
     s: 'script',
     a: ['script-async', 'scriptAsync'],
     o: 'output',
@@ -23,7 +24,8 @@ var argv = parseArgs(process.argv.slice(2), {
     'output'
   ],
   boolean: [
-    'script-async'
+    'script-async',
+    'css-async'
   ]
 })
 
@@ -36,6 +38,7 @@ Options:
   --script, -s       JavaScript filename, optional
   --script-async, -a Add async attribute to script tag
   --css, -c          CSS filename, optional
+  --css-async, -C    Load CSS asynchronously
   --favicon, -f      Site favicon
   --lang, -l         Language of content
   --dir, -d          Direction of content

index.js

@@ -3,7 +3,11 @@ module.exports = function (opts) {
   var headScript = (opts.script && opts.scriptAsync) ? `<script src="${opts.script}" async></script>` : ''
   var bodyScript = (opts.script && !opts.scriptAsync) ? `<script src="${opts.script}"></script>` : ''
   var favicon = opts.favicon ? `<link rel="icon" href="${opts.favicon}">` : ''
-  var css = opts.css ? `<link rel="stylesheet" href="${opts.css}">` : ''
+  var css = opts.css
+    ? opts.cssAsync
+      ? `<link rel="stylesheet" href="${opts.css}" media="none" onload="if(media!=='all')media='all'">`
+      : `<link rel="stylesheet" href="${opts.css}">`
+    : ''
   var lang = opts.lang || 'en'
   var dir = opts.dir || 'ltr'
   var head = opts.head || ''