Skip to content

Commit 7019cb0

Browse files
cap-Bernarditocap-Bernardito
committed
feat: sources import with new URL (#1297)
1 parent 79f4c8f commit 7019cb0

20 files changed

+1451
-996
lines changed

‎README.md

+5-33
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`
@@ -1243,29 +1239,13 @@ module.exports = {
12431239
};
12441240
```
12451241

1246-
**For webpack v4:**
1242+
### Extract
12471243

1248-
**webpack.config.js**
1244+
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.
12491245

1250-
```js
1251-
module.exports = {
1252-
module: {
1253-
rules: [
1254-
{
1255-
test: /\.css$/i,
1256-
use: ["style-loader", "css-loader"],
1257-
},
1258-
{
1259-
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
1260-
loader: "url-loader",
1261-
options: {
1262-
limit: 8192,
1263-
},
1264-
},
1265-
],
1266-
},
1267-
};
1268-
```
1246+
- This can be achieved by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract the CSS when running in production mode.
1247+
1248+
- As an alternative, if seeking better development performance and css outputs that mimic production. [extract-css-chunks-webpack-plugin](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin) offers a hot module reload friendly, extended version of mini-css-extract-plugin. HMR real CSS files in dev, works like mini-css in non-dev
12691249

12701250
### Pure CSS, CSS modules and PostCSS
12711251

@@ -1308,14 +1288,6 @@ module.exports = {
13081288
// More information here https://webpack.js.org/guides/asset-modules/
13091289
type: "asset",
13101290
},
1311-
// For webpack v4
1312-
// {
1313-
// test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
1314-
// loader: "url-loader",
1315-
// options: {
1316-
// limit: 8192,
1317-
// },
1318-
// },
13191291
],
13201292
},
13211293
};

‎src/index.js

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

190190
if (options.modules.exportOnlyLocals !== true) {
191191
imports.unshift({
192+
type: "api_import",
192193
importName: "___CSS_LOADER_API_IMPORT___",
193194
url: stringifyRequest(this, require.resolve("./runtime/api")),
194195
});
195196

196197
if (options.sourceMap) {
197198
imports.unshift({
199+
type: "api_sourcemap_import",
198200
importName: "___CSS_LOADER_API_SOURCEMAP_IMPORT___",
199201
url: stringifyRequest(
200202
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
@@ -218,6 +218,7 @@ const plugin = (options = {}) => {
218218
urlToNameMap.set(newUrl, importName);
219219

220220
options.imports.push({
221+
type: "rule_import",
221222
importName,
222223
url: options.urlHandler(newUrl),
223224
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
@@ -651,15 +651,18 @@ function getImportCode(imports, options) {
651651
let code = "";
652652

653653
for (const item of imports) {
654-
const { importName, url, icss } = item;
654+
const { importName, url, icss, type } = item;
655655

656656
if (options.esModule) {
657657
if (icss && options.modules.namedExport) {
658658
code += `import ${
659659
options.modules.exportOnlyLocals ? "" : `${importName}, `
660660
}* as ${importName}_NAMED___ from ${url};\n`;
661661
} else {
662-
code += `import ${importName} from ${url};\n`;
662+
code +=
663+
type === "url"
664+
? `var ${importName} = new URL(${url}, import.meta.url);\n`
665+
: `import ${importName} from ${url};\n`;
663666
}
664667
} else {
665668
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___);
@@ -129,7 +129,7 @@ Array [
129129
130130
.class {
131131
color: red;
132-
background: url(/webpack/public/path/img.png);
132+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
133133
}
134134
",
135135
"",
@@ -146,7 +146,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
146146
import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
147147
import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
148148
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
149-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
149+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
150150
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
151151
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
152152
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -178,7 +178,7 @@ Array [
178178
179179
.oFwPvuANP2XsfGir7HPVz {
180180
color: red;
181-
background: url(/webpack/public/path/img.png);
181+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
182182
}
183183
",
184184
"",
@@ -195,7 +195,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
195195
import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
196196
import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
197197
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
198-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
198+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
199199
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
200200
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
201201
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -227,7 +227,7 @@ Array [
227227
228228
.oFwPvuANP2XsfGir7HPVz {
229229
color: red;
230-
background: url(/webpack/public/path/img.png);
230+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
231231
}
232232
",
233233
"",
@@ -244,7 +244,7 @@ exports[`"esModule" option should work with a value equal to "true": module 1`]
244244
import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
245245
import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
246246
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
247-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
247+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
248248
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
249249
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
250250
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -273,7 +273,7 @@ Array [
273273
274274
.class {
275275
color: red;
276-
background: url(/webpack/public/path/img.png);
276+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
277277
}
278278
",
279279
"",

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

+11-11
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_17___ from \\"-!../../../src/index.js??ruleS
436436
import ___CSS_LOADER_AT_RULE_IMPORT_18___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./something.css?foo=2&bar=1\\";
437437
import ___CSS_LOADER_AT_RULE_IMPORT_19___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./my.scss\\";
438438
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
439-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
439+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
440440
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
441441
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (orientation:landscape)\\");
442442
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___, \\"(min-width: 100px)\\");
@@ -618,7 +618,7 @@ Array [
618618
Array [
619619
"../../src/index.js??ruleSet[1].rules[0].use[0]!./import/url.css",
620620
".background-imported {
621-
background: url(/webpack/public/path/img.png);
621+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
622622
}
623623
",
624624
"",
@@ -817,7 +817,7 @@ Array [
817817
}
818818
819819
.background {
820-
background: url(/webpack/public/path/img.png);
820+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
821821
}
822822
823823
@import url(./test.css);
@@ -989,7 +989,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_23___ from \\"-!../../../src/index.js??ruleS
989989
import ___CSS_LOADER_AT_RULE_IMPORT_24___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./something.css?foo=2&bar=1\\";
990990
import ___CSS_LOADER_AT_RULE_IMPORT_25___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./my.scss\\";
991991
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
992-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
992+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
993993
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
994994
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
995995
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
@@ -1345,7 +1345,7 @@ Array [
13451345
Array [
13461346
"../../src/index.js??ruleSet[1].rules[0].use[0]!./import/url.css",
13471347
".background-imported {
1348-
background: url(/webpack/public/path/img.png);
1348+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
13491349
}
13501350
",
13511351
"",
@@ -1766,7 +1766,7 @@ Array [
17661766
}
17671767
17681768
.background {
1769-
background: url(/webpack/public/path/img.png);
1769+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
17701770
}
17711771
@import nourl(test.css);
17721772
@import '\\\\
@@ -1900,7 +1900,7 @@ exports[`"import" option should work with a value equal to "false": module 1`] =
19001900
"// Imports
19011901
import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
19021902
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
1903-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
1903+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
19041904
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
19051905
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
19061906
// Module
@@ -1979,7 +1979,7 @@ Array [
19791979
@import url('./url.css');
19801980
19811981
.background {
1982-
background: url(/webpack/public/path/img.png);
1982+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
19831983
}
19841984
19851985
@import url(./test.css);
@@ -2109,7 +2109,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_23___ from \\"-!../../../src/index.js??ruleS
21092109
import ___CSS_LOADER_AT_RULE_IMPORT_24___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./something.css?foo=2&bar=1\\";
21102110
import ___CSS_LOADER_AT_RULE_IMPORT_25___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./my.scss\\";
21112111
import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
2112-
import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
2112+
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
21132113
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
21142114
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
21152115
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
@@ -2465,7 +2465,7 @@ Array [
24652465
Array [
24662466
"../../src/index.js??ruleSet[1].rules[0].use[0]!./import/url.css",
24672467
".background-imported {
2468-
background: url(/webpack/public/path/img.png);
2468+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
24692469
}
24702470
",
24712471
"",
@@ -2886,7 +2886,7 @@ Array [
28862886
}
28872887
28882888
.background {
2889-
background: url(/webpack/public/path/img.png);
2889+
background: url(replaced_file_protocol_/webpack/public/path/img.png);
28902890
}
28912891
@import nourl(test.css);
28922892
@import '\\\\

0 commit comments

Comments
 (0)