feat: remove type text/css from style and link element (#399)

webpack-contrib · Jul 30, 2019 · b0187d6 · b0187d6
1 parent 31e70f3
commit b0187d6
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 87 deletions.
diff --git a/src/runtime/addStyleUrl.js b/src/runtime/addStyleUrl.js
@@ -20,7 +20,6 @@ module.exports = function addStyleUrl(url, options) {
   const link = document.createElement('link');
 
   link.rel = 'stylesheet';
-  link.type = 'text/css';
   link.href = url;
 
   Object.keys(options.attributes).forEach((key) => {

diff --git a/src/runtime/addStyles.js b/src/runtime/addStyles.js
@@ -194,10 +194,6 @@ function listToStyles(list, options) {
 function insertStyleElement(options) {
   var style = document.createElement('style');
 
-  if (options.attributes.type === undefined) {
-    options.attributes.type = 'text/css';
-  }
-
   if (options.attributes.nonce === undefined) {
     var nonce =
       typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;

diff --git a/test/__snapshots__/attributes-option.test.js.snap b/test/__snapshots__/attributes-option.test.js.snap
@@ -4,7 +4,7 @@ exports[`attributes option should add attributes to tag ("injectType" option is
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\" id=\\"style-tag-id\\"></head>
+<link rel=\\"stylesheet\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\" id=\\"style-tag-id\\"></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>
@@ -22,7 +22,7 @@ exports[`attributes option should add attributes to tag ("injectType" option is
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style id=\\"style-tag-id\\" type=\\"text/css\\">body {
+<style id=\\"style-tag-id\\">body {
   color: red;
 }
 </style></head>
@@ -43,7 +43,7 @@ exports[`attributes option should add attributes to tag ("injectType" option is
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style id=\\"style-tag-id\\" type=\\"text/css\\">h1 {
+<style id=\\"style-tag-id\\">h1 {
   color: blue;
 }
 </style></head>
@@ -64,7 +64,7 @@ exports[`attributes option should add nonce attribute #2: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\" nonce=\\"12345678\\">body {
+<style nonce=\\"12345678\\">body {
   color: red;
 }
 </style></head>
@@ -85,7 +85,7 @@ exports[`attributes option should add nonce attribute: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\" nonce=\\"12345678\\">body {
+<style nonce=\\"12345678\\">body {
   color: red;
 }
 </style></head>
@@ -106,7 +106,7 @@ exports[`attributes option should override/add default type attribute to tag ("i
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link rel=\\"stylesheet\\" type=\\"text/less\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\"></head>
+<link rel=\\"stylesheet\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\" type=\\"text/less\\"></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>

diff --git a/test/__snapshots__/base-option.test.js.snap b/test/__snapshots__/base-option.test.js.snap
@@ -4,7 +4,7 @@ exports[`base option should work: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">body {
+<style>body {
   color: red;
 }
 </style></head>

diff --git a/test/__snapshots__/insert-option.test.js.snap b/test/__snapshots__/insert-option.test.js.snap
@@ -3,7 +3,7 @@
 exports[`insert option should insert styles before "#existing-style" id: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
-  <style type=\\"text/css\\">body {
+  <style>body {
   color: red;
 }
 </style><style id=\\"existing-style\\">.existing { color: yellow }</style>
@@ -24,7 +24,7 @@ exports[`insert option should insert styles before "#existing-style" id: warning
 exports[`insert option should insert styles before exists styles: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
-  <style type=\\"text/css\\">body {
+  <style>body {
   color: red;
 }
 </style><style id=\\"existing-style\\">.existing { color: yellow }</style>
@@ -46,7 +46,7 @@ exports[`insert option should insert styles in bottom when not specified: DOM 1`
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">body {
+<style>body {
   color: red;
 }
 </style></head>
@@ -67,7 +67,7 @@ exports[`insert option should insert styles in bottom when selector was not foun
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">body {
+<style>body {
   color: red;
 }
 </style></head>
@@ -88,7 +88,7 @@ exports[`insert option should insert styles in bottom: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">body {
+<style>body {
   color: red;
 }
 </style></head>
@@ -116,7 +116,7 @@ exports[`insert option should insert styles in runtime created element: DOM 1`]
   <iframe class=\\"iframeTarget\\"></iframe>
 
 
-<div id=\\"test-shadow\\"><style type=\\"text/css\\">body {
+<div id=\\"test-shadow\\"><style>body {
   color: red;
 }
 </style></div></body></html>"
@@ -127,7 +127,7 @@ exports[`insert option should insert styles in runtime created element: errors 1
 exports[`insert option should insert styles in runtime created element: warnings 1`] = `Array []`;
 
 exports[`insert option should insert styles in top: DOM 1`] = `
-"<!DOCTYPE html><html><head><style type=\\"text/css\\">body {
+"<!DOCTYPE html><html><head><style>body {
   color: red;
 }
 </style>
@@ -164,7 +164,7 @@ exports[`insert option should insert styles into target when target is iframe: D
 exports[`insert option should insert styles into target when target is iframe: errors 1`] = `Array []`;
 
 exports[`insert option should insert styles into target when target is iframe: iframe head 1`] = `
-"<style type=\\"text/css\\">body {
+"<style>body {
   color: red;
 }
 </style>"
@@ -179,7 +179,7 @@ exports[`insert option should insert styles into target: DOM 1`] = `
 </head>
 <body>
   <h1>Body</h1>
-  <div class=\\"target\\"><style type=\\"text/css\\">body {
+  <div class=\\"target\\"><style>body {
   color: red;
 }
 </style></div>

diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
@@ -4,7 +4,7 @@ exports[`loader should work ("injectType" option is "linkTag"): DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\"></head>
+<link rel=\\"stylesheet\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\"></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>
@@ -22,7 +22,7 @@ exports[`loader should work ("injectType" option is "styleTag"): DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">body {
+<style>body {
   color: red;
 }
 </style></head>
@@ -43,7 +43,7 @@ exports[`loader should work ("injectType" option is "useableStyleTag"): DOM 1`]
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">h1 {
+<style>h1 {
   color: blue;
 }
 </style></head>
@@ -64,7 +64,7 @@ exports[`loader should work for useable inject type and negative ref: DOM 1`] =
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">body {
+<style>body {
   color: red;
 }
 </style></head>
@@ -85,7 +85,7 @@ exports[`loader should work with css modules ("injectType" option is "linkTag"):
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"c0991b068ef7e388f9ad3ad2b823d126.css\\"></head>
+<link rel=\\"stylesheet\\" href=\\"c0991b068ef7e388f9ad3ad2b823d126.css\\"></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>
@@ -103,10 +103,10 @@ exports[`loader should work with css modules ("injectType" option is "styleTag")
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">.css-modules-local-scoped-className_2SS6AUo {
+<style>.css-modules-local-scoped-className_2SS6AUo {
   background: red;
 }
-</style><style type=\\"text/css\\">.css-modules-myClassName_29qd4Wo {
+</style><style>.css-modules-myClassName_29qd4Wo {
   background: red;
 }
 
@@ -131,10 +131,10 @@ exports[`loader should work with css modules ("injectType" option is "useableSty
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">.css-modules-local-scoped-className_2SS6AUo {
+<style>.css-modules-local-scoped-className_2SS6AUo {
   background: red;
 }
-</style><style type=\\"text/css\\">.css-modules-myClassName_29qd4Wo {
+</style><style>.css-modules-myClassName_29qd4Wo {
   background: red;
 }
 

diff --git a/test/__snapshots__/singleton-option.test.js.snap b/test/__snapshots__/singleton-option.test.js.snap
@@ -4,10 +4,10 @@ exports[`singleton option false: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">.class-one {
+<style>.class-one {
   color: red;
 }
-</style><style type=\\"text/css\\">.class-two {
+</style><style>.class-two {
   color: red;
 }
 </style></head>
@@ -28,10 +28,10 @@ exports[`singleton option not specified: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">.class-one {
+<style>.class-one {
   color: red;
 }
-</style><style type=\\"text/css\\">.class-two {
+</style><style>.class-two {
   color: red;
 }
 </style></head>
@@ -52,7 +52,7 @@ exports[`singleton option true: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">.class-one {
+<style>.class-one {
   color: red;
 }
 .class-two {

diff --git a/test/__snapshots__/sourceMap-option.test.js.snap b/test/__snapshots__/sourceMap-option.test.js.snap
@@ -4,7 +4,7 @@ exports[`sourceMap option false: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">body {
+<style>body {
   color: red;
 }
 </style></head>
@@ -25,7 +25,7 @@ exports[`sourceMap option not specified: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">body {
+<style>body {
   color: red;
 }
 </style></head>
@@ -46,7 +46,7 @@ exports[`sourceMap option true, but previous loader do not generate source map:
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">body {
+<style>body {
   color: red;
 }
 </style></head>
@@ -67,7 +67,7 @@ exports[`sourceMap option true: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style type=\\"text/css\\">body {
+<style>body {
   color: red;
 }