Skip to content

Commit 411f8f6

Browse files
refactor: code
1 parent 3007493 commit 411f8f6

File tree

8 files changed

+75
-7
lines changed

8 files changed

+75
-7
lines changed

src/plugins/postcss-icss-parser.js

Lines changed: 1 addition & 0 deletions
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: "import",
7374
importName,
7475
url: options.urlHandler(newUrl),
7576
icss: true,

src/plugins/postcss-import-parser.js

Lines changed: 1 addition & 0 deletions
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: "import",
226227
importName,
227228
url: options.urlHandler(newUrl),
228229
index,

src/plugins/postcss-url-parser.js

Lines changed: 2 additions & 1 deletion
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: "import",
340341
importName: "___CSS_LOADER_GET_URL_IMPORT___",
341342
url: options.urlHandler(
342343
require.resolve("../runtime/getUrl.js")
@@ -356,7 +357,7 @@ const plugin = (options = {}) => {
356357
urlToNameMap.set(newUrl, importName);
357358

358359
options.imports.push({
359-
type: "asset",
360+
type: "url",
360361
importName,
361362
url: options.urlHandler(newUrl),
362363
index,

src/runtime/getUrl.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ module.exports = (url, options) => {
44
options = {};
55
}
66

7-
if (!url || typeof url === "boolean") {
7+
if (!url) {
88
return url;
99
}
1010

src/utils.js

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -592,21 +592,35 @@ function getImportCode(imports, options) {
592592
const { importName, url, icss, type } = item;
593593

594594
if (options.esModule) {
595+
if (type === "url") {
596+
// eslint-disable-next-line no-continue
597+
continue;
598+
}
599+
595600
if (icss && options.modules.namedExport) {
596601
code += `import ${
597602
options.modules.exportOnlyLocals ? "" : `${importName}, `
598603
}* as ${importName}_NAMED___ from ${url};\n`;
599604
} else {
600-
code +=
601-
type === "asset"
602-
? `var ${importName} = new URL(${url}, import.meta.url);\n`
603-
: `import ${importName} from ${url};\n`;
605+
code += `import ${importName} from ${url};\n`;
604606
}
605607
} else {
606608
code += `var ${importName} = require(${url});\n`;
607609
}
608610
}
609611

612+
for (const item of imports) {
613+
const { importName, url, icss, type } = item;
614+
615+
if (
616+
type === "url" &&
617+
options.esModule &&
618+
!(icss && options.modules.namedExport)
619+
) {
620+
code += `var ${importName} = new URL(${url}, import.meta.url);\n`;
621+
}
622+
}
623+
610624
return code ? `// Imports\n${code}` : "";
611625
}
612626

test/fixtures/url/MCEP.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './url.css';

test/runtime/__snapshots__/getUrl.test.js.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`escape should escape url 1`] = `true`;
3+
exports[`escape should escape url 1`] = `"true"`;
44

55
exports[`escape should escape url 2`] = `null`;
66

test/url-option.test.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import fs from "fs";
22
import path from "path";
33

4+
import MiniCssExtractPlugin from "mini-css-extract-plugin";
5+
46
import {
57
compile,
68
getCompiler,
79
getErrors,
810
getExecutedCode,
911
getModuleSource,
1012
getWarnings,
13+
readAsset,
1114
} from "./helpers/index";
1215

1316
describe('"url" option', () => {
@@ -295,4 +298,51 @@ describe('"url" option', () => {
295298
expect(getWarnings(stats)).toMatchSnapshot("warnings");
296299
expect(getErrors(stats, true)).toMatchSnapshot("errors");
297300
});
301+
302+
// Todo uncomment test when in MiniCssExtractPlugin will be applied fix for new URL syntax
303+
it.skip("should work with mini-css-extract-plugin", async () => {
304+
const compiler = getCompiler(
305+
"./url/MCEP.js",
306+
{},
307+
{
308+
module: {
309+
rules: [
310+
{
311+
test: /\.css$/i,
312+
use: [
313+
{
314+
loader: MiniCssExtractPlugin.loader,
315+
options: {
316+
esModule: true,
317+
},
318+
},
319+
{
320+
loader: path.resolve(__dirname, "../src"),
321+
options: {
322+
esModule: true,
323+
},
324+
},
325+
],
326+
},
327+
{
328+
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,
329+
type: "asset/resource",
330+
},
331+
],
332+
},
333+
plugins: [
334+
new MiniCssExtractPlugin({
335+
filename: "[name].css",
336+
chunkFilename: "[id].css",
337+
}),
338+
],
339+
}
340+
);
341+
const stats = await compile(compiler);
342+
343+
expect(readAsset("main.css", compiler, stats)).toMatchSnapshot("css");
344+
expect(getModuleSource("./url/url.css", stats)).toMatchSnapshot("module");
345+
expect(getWarnings(stats)).toMatchSnapshot("warnings");
346+
expect(getErrors(stats)).toMatchSnapshot("errors");
347+
});
298348
});

0 commit comments

Comments
 (0)