refactor: code

Author: cap-Bernardito

README.md

@@ -50,10 +50,6 @@ module.exports = {
 };
 ```
 
-**Only for webpack v4:**
-
-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)).
-
 And run `webpack` via your preferred method.
 
 ### `toString`
@@ -1212,30 +1208,6 @@ module.exports = {
 };
 ```
 
-**For webpack v4:**
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
-        loader: "url-loader",
-        options: {
-          limit: 8192,
-        },
-      },
-    ],
-  },
-};
-```
-
 ### Extract
 
 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 = {
         // More information here https://webpack.js.org/guides/asset-modules/
         type: "asset",
       },
-      // For webpack v4
-      // {
-      //  test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
-      //  loader: "url-loader",
-      //  options: {
-      //    limit: 8192,
-      //  },
-      // },
     ],
   },
 };

src/index.js

@@ -187,12 +187,14 @@ export default async function loader(content, map, meta) {
 
   if (options.modules.exportOnlyLocals !== true) {
     imports.unshift({
+      type: "api_import",
       importName: "___CSS_LOADER_API_IMPORT___",
       url: stringifyRequest(this, require.resolve("./runtime/api")),
     });
 
     if (options.sourceMap) {
       imports.unshift({
+        type: "api_sourcemap_import",
         importName: "___CSS_LOADER_API_SOURCEMAP_IMPORT___",
         url: stringifyRequest(
           this,

src/plugins/postcss-icss-parser.js

@@ -70,6 +70,7 @@ const plugin = (options = {}) => {
           imports.set(importKey, importName);
 
           options.imports.push({
+            type: "icss_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: "rule_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: "get_url_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

@@ -598,7 +598,7 @@ function getImportCode(imports, options) {
         }* as ${importName}_NAMED___ from ${url};\n`;
       } else {
         code +=
-          type === "asset"
+          type === "url"
             ? `var ${importName} = new URL(${url}, import.meta.url);\n`
             : `import ${importName} from ${url};\n`;
       }

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/sourceMap-option.test.js

@@ -498,7 +498,7 @@ describe('"sourceMap" option', () => {
         stats.compilation.assets
       ).find((assetName) => /\.js$/.test(assetName));
 
-      expect(chunkName).toBe("main.fe645cef6147a34cde0b.bundle.js");
+      expect(chunkName).toBe("main.6480a869998e0b381c90.bundle.js");
       expect(
         getModuleSource("fixtures/source-map/basic.css", stats)
       ).toMatchSnapshot("module");

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");
+  });
 });