refactor: code

Author: cap-Bernardito

src/plugins/postcss-icss-parser.js

@@ -70,6 +70,7 @@ const plugin = (options = {}) => {
           imports.set(importKey, importName);
 
           options.imports.push({
+            type: "import",
             importName,
             url: options.urlHandler(newUrl),
             icss: true,

src/plugins/postcss-import-parser.js

@@ -223,6 +223,7 @@ const plugin = (options = {}) => {
               urlToNameMap.set(newUrl, importName);
 
               options.imports.push({
+                type: "import",
                 importName,
                 url: options.urlHandler(newUrl),
                 index,

src/plugins/postcss-url-parser.js

@@ -337,6 +337,7 @@ const plugin = (options = {}) => {
 
             if (!hasUrlImportHelper) {
               options.imports.push({
+                type: "import",
                 importName: "___CSS_LOADER_GET_URL_IMPORT___",
                 url: options.urlHandler(
                   require.resolve("../runtime/getUrl.js")
@@ -356,7 +357,7 @@ const plugin = (options = {}) => {
               urlToNameMap.set(newUrl, importName);
 
               options.imports.push({
-                type: "asset",
+                type: "url",
                 importName,
                 url: options.urlHandler(newUrl),
                 index,

src/runtime/getUrl.js

@@ -4,7 +4,7 @@ module.exports = (url, options) => {
     options = {};
   }
 
-  if (!url || typeof url === "boolean") {
+  if (!url) {
     return url;
   }
 

src/utils.js

@@ -592,21 +592,35 @@ function getImportCode(imports, options) {
     const { importName, url, icss, type } = item;
 
     if (options.esModule) {
+      if (type === "url") {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
       if (icss && options.modules.namedExport) {
         code += `import ${
           options.modules.exportOnlyLocals ? "" : `${importName}, `
         }* as ${importName}_NAMED___ from ${url};\n`;
       } else {
-        code +=
-          type === "asset"
-            ? `var ${importName} = new URL(${url}, import.meta.url);\n`
-            : `import ${importName} from ${url};\n`;
+        code += `import ${importName} from ${url};\n`;
       }
     } else {
       code += `var ${importName} = require(${url});\n`;
     }
   }
 
+  for (const item of imports) {
+    const { importName, url, icss, type } = item;
+
+    if (
+      type === "url" &&
+      options.esModule &&
+      !(icss && options.modules.namedExport)
+    ) {
+      code += `var ${importName} = new URL(${url}, import.meta.url);\n`;
+    }
+  }
+
   return code ? `// Imports\n${code}` : "";
 }
 

test/fixtures/url/MCEP.js

@@ -0,0 +1 @@
+import './url.css';

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`escape should escape url 1`] = `true`;
+exports[`escape should escape url 1`] = `"true"`;
 
 exports[`escape should escape url 2`] = `null`;
 

test/url-option.test.js

@@ -1,13 +1,16 @@
 import fs from "fs";
 import path from "path";
 
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+
 import {
   compile,
   getCompiler,
   getErrors,
   getExecutedCode,
   getModuleSource,
   getWarnings,
+  readAsset,
 } from "./helpers/index";
 
 describe('"url" option', () => {
@@ -295,4 +298,51 @@ describe('"url" option', () => {
     expect(getWarnings(stats)).toMatchSnapshot("warnings");
     expect(getErrors(stats, true)).toMatchSnapshot("errors");
   });
+
+  // Todo uncomment test when in MiniCssExtractPlugin will be applied fix for new URL syntax
+  it.skip("should work with mini-css-extract-plugin", async () => {
+    const compiler = getCompiler(
+      "./url/MCEP.js",
+      {},
+      {
+        module: {
+          rules: [
+            {
+              test: /\.css$/i,
+              use: [
+                {
+                  loader: MiniCssExtractPlugin.loader,
+                  options: {
+                    esModule: true,
+                  },
+                },
+                {
+                  loader: path.resolve(__dirname, "../src"),
+                  options: {
+                    esModule: true,
+                  },
+                },
+              ],
+            },
+            {
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,
+              type: "asset/resource",
+            },
+          ],
+        },
+        plugins: [
+          new MiniCssExtractPlugin({
+            filename: "[name].css",
+            chunkFilename: "[id].css",
+          }),
+        ],
+      }
+    );
+    const stats = await compile(compiler);
+
+    expect(readAsset("main.css", compiler, stats)).toMatchSnapshot("css");
+    expect(getModuleSource("./url/url.css", stats)).toMatchSnapshot("module");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
 });