fix: reserve custom attrs in script and style tag

gwuhaolin · Jul 6, 2017 · 00b33fd · 00b33fd
1 parent 3503c73
commit 00b33fd
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 18 deletions.
diff --git a/demo/extract-css/dist/index.html b/demo/extract-css/dist/index.html
@@ -4,7 +4,7 @@
 <head>
 	<meta charset="UTF-8">
 	<link rel="stylesheet" href="1.css">
-	<style>/*2.css*/
+	<style rel="stylesheet">/*2.css*/
 body {
 	background-color: rebeccapurple;
 }</style>

diff --git a/demo/issue6/dist/home.html b/demo/issue6/dist/home.html
@@ -4,7 +4,7 @@
 <head>
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<meta charset="UTF-8">
-	<style>body {
+	<style rel="stylesheet">body {
 	background-color: red;
 }</style>
 	<!--polyfill chunk 是用户自己配置的 不是 AutoWebPlugin 生成的，所以需要自己注入-->

diff --git a/demo/issue6/dist/login.html b/demo/issue6/dist/login.html
@@ -4,7 +4,7 @@
 <head>
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<meta charset="UTF-8">
-	<style>body {
+	<style rel="stylesheet">body {
 	background-color: blue;
 }</style>
 	<!--polyfill chunk 是用户自己配置的 不是 AutoWebPlugin 生成的，所以需要自己注入-->

diff --git a/demo/issue6/dist/signup.html b/demo/issue6/dist/signup.html
@@ -4,7 +4,7 @@
 <head>
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<meta charset="UTF-8">
-	<style>body {
+	<style rel="stylesheet">body {
 	background-color: yellow;
 }</style>
 	<!--polyfill chunk 是用户自己配置的 不是 AutoWebPlugin 生成的，所以需要自己注入-->

diff --git a/demo/use-template-complier/dist/a.html b/demo/use-template-complier/dist/a.html
@@ -3,7 +3,7 @@
 <html lang="zh-cn">
 <head>
 	<meta charset="UTF-8">
-	<style>body {
+	<style rel="stylesheet">body {
     background-color: rebeccapurple;
 }</style>
 	<title>a</title>

diff --git a/demo/use-template-complier/dist/b.html b/demo/use-template-complier/dist/b.html
@@ -3,7 +3,7 @@
 <html lang="zh-cn">
 <head>
 	<meta charset="UTF-8">
-	<style>body {
+	<style rel="stylesheet">body {
     background-color: rebeccapurple;
 }</style>
 	<title>b</title>

diff --git a/demo/use-template/dist/index.html b/demo/use-template/dist/index.html
@@ -6,11 +6,11 @@
 	<!--load a chunk file config and output in webpack-->
 	<script src="B.js"></script>
 	<!--load a local reset style file direct without local var webpack-->
-	<style>body {
+	<style rel="stylesheet">body {
     background-color: rebeccapurple;
 }</style>
 	<!--load a local google analyze file direct without local var webpack-->
-	<script src="google-analyze.js"></script>
+	<script async="" data-group="123" src="google-analyze.js"></script>
 </head>
 <body>
 <script src="A.js"></script>

diff --git a/demo/use-template/template.html b/demo/use-template/template.html
@@ -7,7 +7,7 @@
 	<!--load a local reset style file direct without local var webpack-->
 	<link rel="stylesheet" href="./reset.min.css?_inline">
 	<!--load a local google analyze file direct without local var webpack-->
-	<script src="./google-analyze.js"></script>
+	<script async data-group="123" src="./google-analyze.js"></script>
 </head>
 <body>
 <!--SCRIPT-->

diff --git a/lib/Resource.js b/lib/Resource.js
@@ -176,12 +176,14 @@ class Resource {
 						newNodes.push(util.mockScriptNode({
 							content: fileContent,
 							parentNode,
+							attrs: this.node.attrs,
 						}));
 					} else {
 						// load this javascript file with src
 						newNodes.push(util.mockScriptNode({
 							src: resourceRelative2HTMLPath,
 							parentNode,
+							attrs: this.node.attrs,
 						}));
 					}
 				}
@@ -193,12 +195,14 @@ class Resource {
 						newNodes.push(util.mockStyleNode({
 							content: fileContent,
 							parentNode,
+							attrs: this.node.attrs,
 						}));
 					} else {
 						// load this style file with src
 						newNodes.push(util.mockStyleNode({
 							href: resourceRelative2HTMLPath,
 							parentNode,
+							attrs: this.node.attrs,
 						}));
 					}
 				}

diff --git a/lib/util.js b/lib/util.js
@@ -107,32 +107,63 @@ function replaceNodesWithNodes(oldNodes, newNodes = []) {
 	childNodes.splice(index, 0, ...newNodes);
 }
 
+function assignParse5Attrs(attrsTo, attrsFrom) {
+	attrsFrom.forEach((attrFrom) => {
+		const index = attrsTo.findIndex((attrTo) => {
+			return attrTo.name === attrFrom.name;
+		});
+		if (index >= 0) {
+			if (attrFrom.value === undefined) {
+				// remove value's undefined attr
+				attrsTo.splice(index, 1);
+			} else {
+				attrsTo[index].value = attrFrom.value;
+			}
+		} else {
+			attrsTo.push(attrFrom);
+		}
+	});
+	return attrsTo;
+}
+
 /**
  * mock a script node for parse5
  * @param options
+ *
  * options.src {string}
  *      script tag's src attr
+ *
  * options.content {string}
  *      script tag's javascript content
+ *
  * options.parentNode {parse5.Node}
  *      script node's parentNode
+ *
+ * options.attrs {array}
+ *      script node's attrs
+ *
  * @returns {*}
  */
 function mockScriptNode(options) {
-	const { src, content, parentNode } = options;
+	const { src, content, parentNode, attrs = [] } = options;
 	if (typeof src === 'string') {
 		return {
 			nodeName: 'script',
 			tagName: 'script',
 			parentNode,
-			attrs: [{ name: 'src', value: src }]
+			attrs: assignParse5Attrs(attrs, [
+				{ name: 'src', value: src }
+			]),
 		};
 	} else if (typeof content === 'string') {
 		const scriptNode = {
 			nodeName: 'script',
 			tagName: 'script',
 			parentNode,
-			attrs: []
+			attrs: assignParse5Attrs(attrs, [
+				// remove src attr
+				{ name: 'src', value: undefined }
+			]),
 		};
 		const textNode = {
 			nodeName: '#text',
@@ -147,32 +178,42 @@ function mockScriptNode(options) {
 /**
  * mock a script node for parse5
  * @param options
+ *
  * options.href {string}
  *      style link tag's href attr
+ *
  * options.content {string}
  *      style tag's javascript content
+ *
  * options.parentNode {parse5.Node}
  *      style node's parentNode
+ *
+ * options.attrs {array}
+ *      style node's attrs
+ *
  * @returns {*}
  */
 function mockStyleNode(options) {
-	const { href, content, parentNode } = options;
+	const { href, content, parentNode, attrs = [] } = options;
 	if (typeof href === 'string') {
 		return {
 			nodeName: 'link',
 			tagName: 'link',
 			parentNode,
-			attrs: [
+			attrs: assignParse5Attrs(attrs, [
 				{ name: 'rel', value: 'stylesheet' },
 				{ name: 'href', value: href },
-			]
+			])
 		};
 	} else if (typeof content === 'string') {
 		const styleNode = {
 			nodeName: 'style',
 			tagName: 'style',
 			parentNode,
-			attrs: []
+			attrs: assignParse5Attrs(attrs, [
+				// remove href attr
+				{ name: 'href', value: undefined },
+			])
 		};
 		const textNode = {
 			nodeName: '#text',
@@ -262,7 +303,7 @@ function urlRelative(from, to) {
 	const fromUrl = url.parse(from);
 	const toUrl = url.parse(to);
 
-	if (fromUrl.host !== toUrl.host || fromUrl.protocol!==toUrl.protocol) {
+	if (fromUrl.host !== toUrl.host || fromUrl.protocol !== toUrl.protocol) {
 		return to;
 	}
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "web-webpack-plugin",
-	"version": "1.8.2",
+	"version": "1.8.3",
 	"description": "web plugin for webpack, alternatives for html-webpack-plugin, use HTML as entry",
 	"keywords": [
 		"webpack",