fix: publicPath auto (#771)

BREAKING CHANGE: trailing slash at is no longer automatically added for the `publicPath` option, you need added them in configuration, i.e. `publicPath: "/public-path"` should be `publicPath: "/public-path/"`

Author: cap-Bernardito

src/index.js

@@ -2,8 +2,14 @@
 
 import { validate } from 'schema-utils';
 
+import { getUndoPath } from 'webpack/lib/util/identifier';
+
 import schema from './plugin-options.json';
-import { MODULE_TYPE, compareModulesByIdentifier } from './utils';
+import {
+  MODULE_TYPE,
+  AUTO_PUBLIC_PATH,
+  compareModulesByIdentifier,
+} from './utils';
 
 export const pluginName = 'mini-css-extract-plugin';
 export const pluginSymbol = Symbol(pluginName);
@@ -433,7 +439,12 @@ class MiniCssExtractPlugin {
                 compilation,
                 chunk,
                 renderedModules,
-                compilation.runtimeTemplate.requestShortener
+                compilation.runtimeTemplate.requestShortener,
+                filenameTemplate,
+                {
+                  contentHashType: MODULE_TYPE,
+                  chunk,
+                }
               ),
             filenameTemplate,
             pathOptions: {
@@ -915,7 +926,15 @@ class MiniCssExtractPlugin {
     return usedModules;
   }
 
-  renderContentAsset(compiler, compilation, chunk, modules, requestShortener) {
+  renderContentAsset(
+    compiler,
+    compilation,
+    chunk,
+    modules,
+    requestShortener,
+    filenameTemplate,
+    pathData
+  ) {
     const usedModules = this.sortModules(
       compilation,
       chunk,
@@ -948,6 +967,15 @@ class MiniCssExtractPlugin {
           source.add(`@media ${m.media} {\n`);
         }
 
+        const { path: filename } = compilation.getPathWithInfo(
+          filenameTemplate,
+          pathData
+        );
+
+        const undoPath = getUndoPath(filename, compiler.outputPath, false);
+
+        content = content.replace(new RegExp(AUTO_PUBLIC_PATH, 'g'), undoPath);
+
         if (m.sourceMap) {
           source.add(
             new SourceMapSource(

src/loader.js

@@ -3,7 +3,7 @@ import path from 'path';
 import loaderUtils from 'loader-utils';
 import { validate } from 'schema-utils';
 
-import { findModuleById, evalModuleCode } from './utils';
+import { findModuleById, evalModuleCode, AUTO_PUBLIC_PATH } from './utils';
 import schema from './loader-options.json';
 
 import MiniCssExtractPlugin, { pluginName, pluginSymbol } from './index';
@@ -174,18 +174,18 @@ export function pitch(request) {
     return callback(null, resultSource);
   };
 
-  const publicPath =
-    typeof options.publicPath === 'string'
-      ? options.publicPath === 'auto'
-        ? ''
-        : options.publicPath === '' || options.publicPath.endsWith('/')
-        ? options.publicPath
-        : `${options.publicPath}/`
-      : typeof options.publicPath === 'function'
-      ? options.publicPath(this.resourcePath, this.rootContext)
-      : this._compilation.outputOptions.publicPath === 'auto'
-      ? ''
-      : this._compilation.outputOptions.publicPath;
+  let { publicPath } = this._compilation.outputOptions;
+
+  if (typeof options.publicPath === 'string') {
+    // eslint-disable-next-line prefer-destructuring
+    publicPath = options.publicPath;
+  } else if (typeof options.publicPath === 'function') {
+    publicPath = options.publicPath(this.resourcePath, this.rootContext);
+  }
+
+  if (publicPath === 'auto') {
+    publicPath = AUTO_PUBLIC_PATH;
+  }
 
   if (optionsFromPlugin.experimentalUseImportModule) {
     if (!this.importModule) {
@@ -300,8 +300,6 @@ export function pitch(request) {
         compilation.assets[childFilename] &&
         compilation.assets[childFilename].source();
 
-      // console.log(source);
-
       // Remove all chunk assets
       compilation.chunks.forEach((chunk) => {
         chunk.files.forEach((file) => {

src/utils.js

@@ -1,6 +1,7 @@
 import NativeModule from 'module';
 
 const MODULE_TYPE = 'css/mini-extract';
+const AUTO_PUBLIC_PATH = '__MINI_CSS_EXTRACT_PLUGIN_PUBLIC_PATH__';
 
 function findModuleById(compilation, id) {
   const { modules, chunkGraph } = compilation;
@@ -51,6 +52,7 @@ function compareModulesByIdentifier(a, b) {
 
 export {
   MODULE_TYPE,
+  AUTO_PUBLIC_PATH,
   findModuleById,
   evalModuleCode,
   compareModulesByIdentifier,

test/cases/new-url-with-public-path/webpack.config.js

@@ -13,7 +13,7 @@ module.exports = {
           {
             loader: Self.loader,
             options: {
-              publicPath: 'public',
+              publicPath: 'public/',
             },
           },
           './mockLoader',

test/cases/publicpath-auto-2/expected/assets/img/react.svg

@@ -0,0 +1,20 @@
+.a {
+  background-image: url(../same_root.svg);
+}
+
+.b {
+  background-image: url(../styles/same_dir.svg);
+}
+
+.c {
+  background-image: url(../styles/nested/nested_dir.svg);
+}
+
+.d {
+  background-image: url(../../outer.svg);
+}
+
+.e {
+  background-image: url(../assets/img/react.svg);
+}
+