Skip to content

Commit b0187d6

Browse files
feat: remove type text/css from style and link element (#399)
1 parent 31e70f3 commit b0187d6

10 files changed

+82
-87
lines changed

src/runtime/addStyleUrl.js

-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ module.exports = function addStyleUrl(url, options) {
2020
const link = document.createElement('link');
2121

2222
link.rel = 'stylesheet';
23-
link.type = 'text/css';
2423
link.href = url;
2524

2625
Object.keys(options.attributes).forEach((key) => {

src/runtime/addStyles.js

-4
Original file line numberDiff line numberDiff line change
@@ -194,10 +194,6 @@ function listToStyles(list, options) {
194194
function insertStyleElement(options) {
195195
var style = document.createElement('style');
196196

197-
if (options.attributes.type === undefined) {
198-
options.attributes.type = 'text/css';
199-
}
200-
201197
if (options.attributes.nonce === undefined) {
202198
var nonce =
203199
typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;

test/__snapshots__/attributes-option.test.js.snap

+6-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`attributes option should add attributes to tag ("injectType" option is
44
"<!DOCTYPE html><html><head>
55
<title>style-loader test</title>
66
<style id=\\"existing-style\\">.existing { color: yellow }</style>
7-
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\" id=\\"style-tag-id\\"></head>
7+
<link rel=\\"stylesheet\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\" id=\\"style-tag-id\\"></head>
88
<body>
99
<h1>Body</h1>
1010
<div class=\\"target\\"></div>
@@ -22,7 +22,7 @@ exports[`attributes option should add attributes to tag ("injectType" option is
2222
"<!DOCTYPE html><html><head>
2323
<title>style-loader test</title>
2424
<style id=\\"existing-style\\">.existing { color: yellow }</style>
25-
<style id=\\"style-tag-id\\" type=\\"text/css\\">body {
25+
<style id=\\"style-tag-id\\">body {
2626
color: red;
2727
}
2828
</style></head>
@@ -43,7 +43,7 @@ exports[`attributes option should add attributes to tag ("injectType" option is
4343
"<!DOCTYPE html><html><head>
4444
<title>style-loader test</title>
4545
<style id=\\"existing-style\\">.existing { color: yellow }</style>
46-
<style id=\\"style-tag-id\\" type=\\"text/css\\">h1 {
46+
<style id=\\"style-tag-id\\">h1 {
4747
color: blue;
4848
}
4949
</style></head>
@@ -64,7 +64,7 @@ exports[`attributes option should add nonce attribute #2: DOM 1`] = `
6464
"<!DOCTYPE html><html><head>
6565
<title>style-loader test</title>
6666
<style id=\\"existing-style\\">.existing { color: yellow }</style>
67-
<style type=\\"text/css\\" nonce=\\"12345678\\">body {
67+
<style nonce=\\"12345678\\">body {
6868
color: red;
6969
}
7070
</style></head>
@@ -85,7 +85,7 @@ exports[`attributes option should add nonce attribute: DOM 1`] = `
8585
"<!DOCTYPE html><html><head>
8686
<title>style-loader test</title>
8787
<style id=\\"existing-style\\">.existing { color: yellow }</style>
88-
<style type=\\"text/css\\" nonce=\\"12345678\\">body {
88+
<style nonce=\\"12345678\\">body {
8989
color: red;
9090
}
9191
</style></head>
@@ -106,7 +106,7 @@ exports[`attributes option should override/add default type attribute to tag ("i
106106
"<!DOCTYPE html><html><head>
107107
<title>style-loader test</title>
108108
<style id=\\"existing-style\\">.existing { color: yellow }</style>
109-
<link rel=\\"stylesheet\\" type=\\"text/less\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\"></head>
109+
<link rel=\\"stylesheet\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\" type=\\"text/less\\"></head>
110110
<body>
111111
<h1>Body</h1>
112112
<div class=\\"target\\"></div>

test/__snapshots__/base-option.test.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`base option should work: DOM 1`] = `
44
"<!DOCTYPE html><html><head>
55
<title>style-loader test</title>
66
<style id=\\"existing-style\\">.existing { color: yellow }</style>
7-
<style type=\\"text/css\\">body {
7+
<style>body {
88
color: red;
99
}
1010
</style></head>

test/__snapshots__/insert-option.test.js.snap

+9-9
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`insert option should insert styles before "#existing-style" id: DOM 1`] = `
44
"<!DOCTYPE html><html><head>
55
<title>style-loader test</title>
6-
<style type=\\"text/css\\">body {
6+
<style>body {
77
color: red;
88
}
99
</style><style id=\\"existing-style\\">.existing { color: yellow }</style>
@@ -24,7 +24,7 @@ exports[`insert option should insert styles before "#existing-style" id: warning
2424
exports[`insert option should insert styles before exists styles: DOM 1`] = `
2525
"<!DOCTYPE html><html><head>
2626
<title>style-loader test</title>
27-
<style type=\\"text/css\\">body {
27+
<style>body {
2828
color: red;
2929
}
3030
</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`
4646
"<!DOCTYPE html><html><head>
4747
<title>style-loader test</title>
4848
<style id=\\"existing-style\\">.existing { color: yellow }</style>
49-
<style type=\\"text/css\\">body {
49+
<style>body {
5050
color: red;
5151
}
5252
</style></head>
@@ -67,7 +67,7 @@ exports[`insert option should insert styles in bottom when selector was not foun
6767
"<!DOCTYPE html><html><head>
6868
<title>style-loader test</title>
6969
<style id=\\"existing-style\\">.existing { color: yellow }</style>
70-
<style type=\\"text/css\\">body {
70+
<style>body {
7171
color: red;
7272
}
7373
</style></head>
@@ -88,7 +88,7 @@ exports[`insert option should insert styles in bottom: DOM 1`] = `
8888
"<!DOCTYPE html><html><head>
8989
<title>style-loader test</title>
9090
<style id=\\"existing-style\\">.existing { color: yellow }</style>
91-
<style type=\\"text/css\\">body {
91+
<style>body {
9292
color: red;
9393
}
9494
</style></head>
@@ -116,7 +116,7 @@ exports[`insert option should insert styles in runtime created element: DOM 1`]
116116
<iframe class=\\"iframeTarget\\"></iframe>
117117
118118
119-
<div id=\\"test-shadow\\"><style type=\\"text/css\\">body {
119+
<div id=\\"test-shadow\\"><style>body {
120120
color: red;
121121
}
122122
</style></div></body></html>"
@@ -127,7 +127,7 @@ exports[`insert option should insert styles in runtime created element: errors 1
127127
exports[`insert option should insert styles in runtime created element: warnings 1`] = `Array []`;
128128
129129
exports[`insert option should insert styles in top: DOM 1`] = `
130-
"<!DOCTYPE html><html><head><style type=\\"text/css\\">body {
130+
"<!DOCTYPE html><html><head><style>body {
131131
color: red;
132132
}
133133
</style>
@@ -164,7 +164,7 @@ exports[`insert option should insert styles into target when target is iframe: D
164164
exports[`insert option should insert styles into target when target is iframe: errors 1`] = `Array []`;
165165
166166
exports[`insert option should insert styles into target when target is iframe: iframe head 1`] = `
167-
"<style type=\\"text/css\\">body {
167+
"<style>body {
168168
color: red;
169169
}
170170
</style>"
@@ -179,7 +179,7 @@ exports[`insert option should insert styles into target: DOM 1`] = `
179179
</head>
180180
<body>
181181
<h1>Body</h1>
182-
<div class=\\"target\\"><style type=\\"text/css\\">body {
182+
<div class=\\"target\\"><style>body {
183183
color: red;
184184
}
185185
</style></div>

test/__snapshots__/loader.test.js.snap

+9-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`loader should work ("injectType" option is "linkTag"): DOM 1`] = `
44
"<!DOCTYPE html><html><head>
55
<title>style-loader test</title>
66
<style id=\\"existing-style\\">.existing { color: yellow }</style>
7-
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\"></head>
7+
<link rel=\\"stylesheet\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\"></head>
88
<body>
99
<h1>Body</h1>
1010
<div class=\\"target\\"></div>
@@ -22,7 +22,7 @@ exports[`loader should work ("injectType" option is "styleTag"): DOM 1`] = `
2222
"<!DOCTYPE html><html><head>
2323
<title>style-loader test</title>
2424
<style id=\\"existing-style\\">.existing { color: yellow }</style>
25-
<style type=\\"text/css\\">body {
25+
<style>body {
2626
color: red;
2727
}
2828
</style></head>
@@ -43,7 +43,7 @@ exports[`loader should work ("injectType" option is "useableStyleTag"): DOM 1`]
4343
"<!DOCTYPE html><html><head>
4444
<title>style-loader test</title>
4545
<style id=\\"existing-style\\">.existing { color: yellow }</style>
46-
<style type=\\"text/css\\">h1 {
46+
<style>h1 {
4747
color: blue;
4848
}
4949
</style></head>
@@ -64,7 +64,7 @@ exports[`loader should work for useable inject type and negative ref: DOM 1`] =
6464
"<!DOCTYPE html><html><head>
6565
<title>style-loader test</title>
6666
<style id=\\"existing-style\\">.existing { color: yellow }</style>
67-
<style type=\\"text/css\\">body {
67+
<style>body {
6868
color: red;
6969
}
7070
</style></head>
@@ -85,7 +85,7 @@ exports[`loader should work with css modules ("injectType" option is "linkTag"):
8585
"<!DOCTYPE html><html><head>
8686
<title>style-loader test</title>
8787
<style id=\\"existing-style\\">.existing { color: yellow }</style>
88-
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"c0991b068ef7e388f9ad3ad2b823d126.css\\"></head>
88+
<link rel=\\"stylesheet\\" href=\\"c0991b068ef7e388f9ad3ad2b823d126.css\\"></head>
8989
<body>
9090
<h1>Body</h1>
9191
<div class=\\"target\\"></div>
@@ -103,10 +103,10 @@ exports[`loader should work with css modules ("injectType" option is "styleTag")
103103
"<!DOCTYPE html><html><head>
104104
<title>style-loader test</title>
105105
<style id=\\"existing-style\\">.existing { color: yellow }</style>
106-
<style type=\\"text/css\\">.css-modules-local-scoped-className_2SS6AUo {
106+
<style>.css-modules-local-scoped-className_2SS6AUo {
107107
background: red;
108108
}
109-
</style><style type=\\"text/css\\">.css-modules-myClassName_29qd4Wo {
109+
</style><style>.css-modules-myClassName_29qd4Wo {
110110
background: red;
111111
}
112112
@@ -131,10 +131,10 @@ exports[`loader should work with css modules ("injectType" option is "useableSty
131131
"<!DOCTYPE html><html><head>
132132
<title>style-loader test</title>
133133
<style id=\\"existing-style\\">.existing { color: yellow }</style>
134-
<style type=\\"text/css\\">.css-modules-local-scoped-className_2SS6AUo {
134+
<style>.css-modules-local-scoped-className_2SS6AUo {
135135
background: red;
136136
}
137-
</style><style type=\\"text/css\\">.css-modules-myClassName_29qd4Wo {
137+
</style><style>.css-modules-myClassName_29qd4Wo {
138138
background: red;
139139
}
140140

test/__snapshots__/singleton-option.test.js.snap

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ exports[`singleton option false: DOM 1`] = `
44
"<!DOCTYPE html><html><head>
55
<title>style-loader test</title>
66
<style id=\\"existing-style\\">.existing { color: yellow }</style>
7-
<style type=\\"text/css\\">.class-one {
7+
<style>.class-one {
88
color: red;
99
}
10-
</style><style type=\\"text/css\\">.class-two {
10+
</style><style>.class-two {
1111
color: red;
1212
}
1313
</style></head>
@@ -28,10 +28,10 @@ exports[`singleton option not specified: DOM 1`] = `
2828
"<!DOCTYPE html><html><head>
2929
<title>style-loader test</title>
3030
<style id=\\"existing-style\\">.existing { color: yellow }</style>
31-
<style type=\\"text/css\\">.class-one {
31+
<style>.class-one {
3232
color: red;
3333
}
34-
</style><style type=\\"text/css\\">.class-two {
34+
</style><style>.class-two {
3535
color: red;
3636
}
3737
</style></head>
@@ -52,7 +52,7 @@ exports[`singleton option true: DOM 1`] = `
5252
"<!DOCTYPE html><html><head>
5353
<title>style-loader test</title>
5454
<style id=\\"existing-style\\">.existing { color: yellow }</style>
55-
<style type=\\"text/css\\">.class-one {
55+
<style>.class-one {
5656
color: red;
5757
}
5858
.class-two {

test/__snapshots__/sourceMap-option.test.js.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`sourceMap option false: DOM 1`] = `
44
"<!DOCTYPE html><html><head>
55
<title>style-loader test</title>
66
<style id=\\"existing-style\\">.existing { color: yellow }</style>
7-
<style type=\\"text/css\\">body {
7+
<style>body {
88
color: red;
99
}
1010
</style></head>
@@ -25,7 +25,7 @@ exports[`sourceMap option not specified: DOM 1`] = `
2525
"<!DOCTYPE html><html><head>
2626
<title>style-loader test</title>
2727
<style id=\\"existing-style\\">.existing { color: yellow }</style>
28-
<style type=\\"text/css\\">body {
28+
<style>body {
2929
color: red;
3030
}
3131
</style></head>
@@ -46,7 +46,7 @@ exports[`sourceMap option true, but previous loader do not generate source map:
4646
"<!DOCTYPE html><html><head>
4747
<title>style-loader test</title>
4848
<style id=\\"existing-style\\">.existing { color: yellow }</style>
49-
<style type=\\"text/css\\">body {
49+
<style>body {
5050
color: red;
5151
}
5252
</style></head>
@@ -67,7 +67,7 @@ exports[`sourceMap option true: DOM 1`] = `
6767
"<!DOCTYPE html><html><head>
6868
<title>style-loader test</title>
6969
<style id=\\"existing-style\\">.existing { color: yellow }</style>
70-
<style type=\\"text/css\\">body {
70+
<style>body {
7171
color: red;
7272
}
7373

0 commit comments

Comments
 (0)