styleguidist
diff --git a/‎README.md‎
Lines changed: 20 additions & 6 deletions b/‎README.md‎
Lines changed: 20 additions & 6 deletions
diff --git a/‎__snapshots__/test.js.snap‎
Lines changed: 8 additions & 8 deletions b/‎__snapshots__/test.js.snap‎
Lines changed: 8 additions & 8 deletions
diff --git a/‎index.js‎
Lines changed: 16 additions & 10 deletions b/‎index.js‎
Lines changed: 16 additions & 10 deletions
@@ -25,15 +25,22 @@ const config = {
       context: {
         title: 'Webpack demo',
         // Optional, defaults to `{ lang: 'en' }`
-        htmlAttributes: { lang: 'en' },
+        htmlAttributes: {
+          lang: 'en'
+        },
         // Optional, any additional HTML attached within <head>
         head: '',
         // Optional, any additional HTML attached within <body>
         body: '',
         // Optional
-        cssAttributes: { rel: 'preload' },
+        cssAttributes: {
+          rel: 'preload',
+          as: 'style'
+        },
         // Optional
-        jsAttributes: { defer: 'defer' }
+        jsAttributes: {
+          defer: true
+        }
       },
       // Optional, use this for choosing chunks to include to your page.
       // See the expanded example below.
@@ -113,9 +120,16 @@ const config = {
       // `context` is available in `template` below
       context: {
         title: 'Webpack demo',
-        htmlAttributes: { lang: 'en' },
-        cssAttributes: { rel: 'preload' },
-        jsAttributes: { defer: 'defer' }
+        htmlAttributes: {
+          lang: 'en'
+        },
+        cssAttributes: {
+          rel: 'preload',
+          as: 'style'
+        },
+        jsAttributes: {
+          defer: true
+        }
       },
       template: ({
         css,
 
@@ -30,7 +30,7 @@ exports[`additional head 1`] = `
 
 exports[`custom async template 1`] = `"<div>Pizza</div>"`;
 
-exports[`custom chunks 1`] = `
+exports[`custom attributes 1`] = `
 "<!DOCTYPE html>
   <html lang=\\"en\\">
     <head>
@@ -39,12 +39,12 @@ exports[`custom chunks 1`] = `
       
     </head>
     <body>
-      <script src=\\"runtime~index.js\\"></script><script src=\\"index.js\\"></script>
+      <script src=\\"runtime~main.js\\" defer></script><script src=\\"main.js\\" defer></script>
     </body>
   </html>"
 `;
 
-exports[`custom chunks 2`] = `
+exports[`custom chunks 1`] = `
 "<!DOCTYPE html>
   <html lang=\\"en\\">
     <head>
@@ -53,12 +53,12 @@ exports[`custom chunks 2`] = `
       
     </head>
     <body>
-      <script src=\\"runtime~another.js\\"></script><script src=\\"another.js\\"></script>
+      <script src=\\"runtime~index.js\\"></script><script src=\\"index.js\\"></script>
     </body>
   </html>"
 `;
 
-exports[`custom filename 1`] = `
+exports[`custom chunks 2`] = `
 "<!DOCTYPE html>
   <html lang=\\"en\\">
     <head>
@@ -67,12 +67,12 @@ exports[`custom filename 1`] = `
       
     </head>
     <body>
-      <script src=\\"runtime~main.js\\"></script><script src=\\"main.js\\"></script>
+      <script src=\\"runtime~another.js\\"></script><script src=\\"another.js\\"></script>
     </body>
   </html>"
 `;
 
-exports[`custom js attribute 1`] = `
+exports[`custom filename 1`] = `
 "<!DOCTYPE html>
   <html lang=\\"en\\">
     <head>
@@ -81,7 +81,7 @@ exports[`custom js attribute 1`] = `
       
     </head>
     <body>
-      <script src=\\"runtime~main.js\\" defer=\\"defer\\"></script><script src=\\"main.js\\" defer=\\"defer\\"></script>
+      <script src=\\"runtime~main.js\\"></script><script src=\\"main.js\\"></script>
     </body>
   </html>"
 `;
 
@@ -112,17 +112,16 @@ function defaultTemplate({
   </html>`;
 }
 
-function generateCSSReferences({
-	files = [],
-	publicPath = '',
-	attributes = {},
-}) {
-	attributes = generateAttributes(attributes);
+function generateCSSReferences({ files = [], publicPath, attributes = {} }) {
+	const allAttributes = {
+		...attributes,
+		rel: 'rel' in attributes ? attributes.rel : 'stylesheet',
+	};
+
+	attributes = generateAttributes(allAttributes);
 
 	return files
-		.map(
-			file => `<link href="${publicPath}${file}" rel="stylesheet"${attributes}>`
-		)
+		.map(file => `<link href="${publicPath}${file}"${attributes}>`)
 		.join('');
 }
 
@@ -147,7 +146,14 @@ function generateAttributes(attributes = {}) {
 
 	return (
 		' ' +
-		attributes.map(attribute => `${attribute[0]}="${attribute[1]}"`).join(' ')
+		attributes
+			.map(attr => {
+				if (attr[1] === true) {
+					return attr[0];
+				}
+				return `${attr[0]}="${attr[1]}"`;
+			})
+			.join(' ')
 	);
 }