Skip to content

Commit e9ac2f3

Browse files
cap-Bernarditocap-Bernardito
authored
feat: sources import with new URL (#1297)
1 parent 899a4e3 commit e9ac2f3

23 files changed

+1465
-1018
lines changed

‎README.md

-36
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,6 @@ module.exports = {
5050
};
5151
```
5252

53-
**Only for webpack v4:**
54-
55-
Good loaders for requiring your assets are the [file-loader](https://github.com/webpack/file-loader) and the [url-loader](https://github.com/webpack/url-loader) which you should specify in your config (see [below](https://github.com/webpack-contrib/css-loader#assets)).
56-
5753
And run `webpack` via your preferred method.
5854

5955
### `toString`
@@ -1212,30 +1208,6 @@ module.exports = {
12121208
};
12131209
```
12141210

1215-
**For webpack v4:**
1216-
1217-
**webpack.config.js**
1218-
1219-
```js
1220-
module.exports = {
1221-
module: {
1222-
rules: [
1223-
{
1224-
test: /\.css$/i,
1225-
use: ["style-loader", "css-loader"],
1226-
},
1227-
{
1228-
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
1229-
loader: "url-loader",
1230-
options: {
1231-
limit: 8192,
1232-
},
1233-
},
1234-
],
1235-
},
1236-
};
1237-
```
1238-
12391211
### Extract
12401212

12411213
For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
@@ -1285,14 +1257,6 @@ module.exports = {
12851257
// More information here https://webpack.js.org/guides/asset-modules/
12861258
type: "asset",
12871259
},
1288-
// For webpack v4
1289-
// {
1290-
// test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
1291-
// loader: "url-loader",
1292-
// options: {
1293-
// limit: 8192,
1294-
// },
1295-
// },
12961260
],
12971261
},
12981262
};

‎package-lock.json

+16-16
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
"less-loader": "^7.1.0",
7676
"lint-staged": "^10.5.4",
7777
"memfs": "^3.2.2",
78-
"mini-css-extract-plugin": "^1.4.1",
78+
"mini-css-extract-plugin": "^1.6.0",
7979
"npm-run-all": "^4.1.5",
8080
"postcss-loader": "^4.0.4",
8181
"postcss-preset-env": "^6.7.0",
@@ -88,7 +88,7 @@
8888
"stylus": "^0.54.8",
8989
"stylus-loader": "^4.3.0",
9090
"url-loader": "^4.1.1",
91-
"webpack": "^5.34.0"
91+
"webpack": "^5.36.2"
9292
},
9393
"keywords": [
9494
"webpack",

‎src/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -187,12 +187,14 @@ export default async function loader(content, map, meta) {
187187

188188
if (options.modules.exportOnlyLocals !== true) {
189189
imports.unshift({
190+
type: "api_import",
190191
importName: "___CSS_LOADER_API_IMPORT___",
191192
url: stringifyRequest(this, require.resolve("./runtime/api")),
192193
});
193194

194195
if (options.sourceMap) {
195196
imports.unshift({
197+
type: "api_sourcemap_import",
196198
importName: "___CSS_LOADER_API_SOURCEMAP_IMPORT___",
197199
url: stringifyRequest(
198200
this,

‎src/plugins/postcss-icss-parser.js

+1
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const plugin = (options = {}) => {
7070
imports.set(importKey, importName);
7171

7272
options.imports.push({
73+
type: "icss_import",
7374
importName,
7475
url: options.urlHandler(newUrl),
7576
icss: true,

‎src/plugins/postcss-import-parser.js

+1
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,7 @@ const plugin = (options = {}) => {
223223
urlToNameMap.set(newUrl, importName);
224224

225225
options.imports.push({
226+
type: "rule_import",
226227
importName,
227228
url: options.urlHandler(newUrl),
228229
index,

‎src/plugins/postcss-url-parser.js

+2
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,7 @@ const plugin = (options = {}) => {
337337

338338
if (!hasUrlImportHelper) {
339339
options.imports.push({
340+
type: "get_url_import",
340341
importName: "___CSS_LOADER_GET_URL_IMPORT___",
341342
url: options.urlHandler(
342343
require.resolve("../runtime/getUrl.js")
@@ -356,6 +357,7 @@ const plugin = (options = {}) => {
356357
urlToNameMap.set(newUrl, importName);
357358

358359
options.imports.push({
360+
type: "url",
359361
importName,
360362
url: options.urlHandler(newUrl),
361363
index,

‎src/runtime/getUrl.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ module.exports = (url, options) => {
44
options = {};
55
}
66

7-
// eslint-disable-next-line no-underscore-dangle, no-param-reassign
8-
url = url && url.__esModule ? url.default : url;
9-
10-
if (typeof url !== "string") {
7+
if (!url) {
118
return url;
129
}
1310

11+
// eslint-disable-next-line no-underscore-dangle, no-param-reassign
12+
url = String(url.__esModule ? url.default : url);
13+
1414
// If url is already wrapped in quotes, remove them
1515
if (/^['"].*['"]$/.test(url)) {
1616
// eslint-disable-next-line no-param-reassign
@@ -24,7 +24,7 @@ module.exports = (url, options) => {
2424

2525
// Should url be wrapped?
2626
// See https://drafts.csswg.org/css-values-3/#urls
27-
if (/["'() \t\n]/.test(url) || options.needQuotes) {
27+
if (/["'() \t\n]|(%20)/.test(url) || options.needQuotes) {
2828
return `"${url.replace(/"/g, '\\"').replace(/\n/g, "\\n")}"`;
2929
}
3030

‎src/utils.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -589,15 +589,18 @@ function getImportCode(imports, options) {
589589
let code = "";
590590

591591
for (const item of imports) {
592-
const { importName, url, icss } = item;
592+
const { importName, url, icss, type } = item;
593593

594594
if (options.esModule) {
595595
if (icss && options.modules.namedExport) {
596596
code += `import ${
597597
options.modules.exportOnlyLocals ? "" : `${importName}, `
598598
}* as ${importName}_NAMED___ from ${url};\n`;
599599
} else {
600-
code += `import ${importName} from ${url};\n`;
600+
code +=
601+
type === "url"
602+
? `var ${importName} = new URL(${url}, import.meta.url);\n`
603+
: `import ${importName} from ${url};\n`;
601604
}
602605
} else {
603606
code += `var ${importName} = require(${url});\n`;

‎test/__snapshots__/esModule-option.test.js.snap

+10-10
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`"esModule" option should work when not specified: module 1`] = `
77
import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
88
import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
99
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
10-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
10+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
1111
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
1212
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
1313
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -36,7 +36,7 @@ Array [
3636
3737
.class {
3838
color: red;
39-
background: url(/webpack/public/path/img.png);
39+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
4040
}
4141
",
4242
"",
@@ -99,7 +99,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
9999
import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
100100
import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
101101
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
102-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
102+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
103103
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
104104
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
105105
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -128,7 +128,7 @@ Array [
128128
129129
.class {
130130
color: red;
131-
background: url(/webpack/public/path/img.png);
131+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
132132
}
133133
",
134134
"",
@@ -145,7 +145,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
145145
import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
146146
import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
147147
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
148-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
148+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
149149
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
150150
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
151151
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -177,7 +177,7 @@ Array [
177177
178178
.oFwPvuANP2XsfGir7HPVz {
179179
color: red;
180-
background: url(/webpack/public/path/img.png);
180+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
181181
}
182182
",
183183
"",
@@ -194,7 +194,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
194194
import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
195195
import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
196196
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
197-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
197+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
198198
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
199199
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
200200
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -226,7 +226,7 @@ Array [
226226
227227
.oFwPvuANP2XsfGir7HPVz {
228228
color: red;
229-
background: url(/webpack/public/path/img.png);
229+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
230230
}
231231
",
232232
"",
@@ -243,7 +243,7 @@ exports[`"esModule" option should work with a value equal to "true": module 1`]
243243
import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
244244
import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
245245
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
246-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
246+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
247247
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
248248
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
249249
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -272,7 +272,7 @@ Array [
272272
273273
.class {
274274
color: red;
275-
background: url(/webpack/public/path/img.png);
275+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
276276
}
277277
",
278278
"",

0 commit comments

Comments
 (0)