Skip to content

Commit

Permalink
feat: remove type text/css from style and link element (#399)
Browse files Browse the repository at this point in the history
  • Loading branch information
@evilebottnawi
evilebottnawi committed Jul 30, 2019
1 parent 31e70f3 commit b0187d6
Show file tree
Hide file tree
Showing 10 changed files with 82 additions and 87 deletions.
1 change: 0 additions & 1 deletion src/runtime/addStyleUrl.js
View file
Expand Up @@ -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) => {
Expand Down
4 changes: 0 additions & 4 deletions src/runtime/addStyles.js
View file
Expand Up @@ -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;
Expand Down
12 changes: 6 additions & 6 deletions test/__snapshots__/attributes-option.test.js.snap
View file
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion test/__snapshots__/base-option.test.js.snap
View file
Expand Up @@ -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>
Expand Down
18 changes: 9 additions & 9 deletions test/__snapshots__/insert-option.test.js.snap
View file
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>"
Expand All @@ -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>
Expand Down Expand Up @@ -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>"
Expand All @@ -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>
Expand Down
18 changes: 9 additions & 9 deletions test/__snapshots__/loader.test.js.snap
View file
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand Down
10 changes: 5 additions & 5 deletions test/__snapshots__/singleton-option.test.js.snap
View file
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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 {
Expand Down
8 changes: 4 additions & 4 deletions test/__snapshots__/sourceMap-option.test.js.snap
View file
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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;
}
Expand Down

0 comments on commit b0187d6

Please sign in to comment.