fix: serializing big strings in sourceMap

Author: cap-Bernardito

package-lock.json

@@ -57,6 +57,7 @@
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
+    "bootstrap": "^4.5.3",
     "cross-env": "^7.0.2",
     "css-loader": "^5.0.1",
     "del": "^6.0.0",

package.json

@@ -685,7 +685,7 @@ class MiniCssExtractPlugin {
             new SourceMapSource(
               content,
               m.readableIdentifier(requestShortener),
-              m.sourceMap
+              m.sourceMap.toString()
             )
           );
         } else {

src/index.js

@@ -239,7 +239,10 @@ export function pitch(request) {
             context: module.context,
             content: Buffer.from(content),
             media,
-            sourceMap,
+            sourceMap: sourceMap
+              ? Buffer.from(JSON.stringify(sourceMap))
+              : // eslint-disable-next-line no-undefined
+                undefined,
           };
         });
       }

src/loader.js

@@ -89,6 +89,10 @@ describe('TestCases', () => {
 
   clearDirectory(outputDirectory);
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   for (const directory of tests) {
     if (directory === 'auxiliaryAssets' && webpack.version[0] === '4') {
       // eslint-disable-next-line no-continue
@@ -98,6 +102,23 @@ describe('TestCases', () => {
     if (!/^(\.|_)/.test(directory)) {
       // eslint-disable-next-line no-loop-func
       it(`${directory} should compile to the expected result`, (done) => {
+        if (directory !== 'serializingBigStrings') {
+          const originalRegister = webpack.util.serialization.register;
+
+          webpack.util.serialization.register = jest
+            .fn()
+            .mockImplementation((...args) => {
+              if (args[1].startsWith('mini-css-extract-plugin')) {
+                // eslint-disable-next-line no-param-reassign
+                args[1] = args[1].replace(/dist/, 'src');
+
+                return originalRegister(...args);
+              }
+
+              return originalRegister(...args);
+            });
+        }
+
         const directoryForCase = path.resolve(casesDirectory, directory);
         const outputDirectoryForCase = path.resolve(outputDirectory, directory);
         // eslint-disable-next-line import/no-dynamic-require, global-require
@@ -128,6 +149,26 @@ describe('TestCases', () => {
             done(err);
             return;
           }
+
+          // const logs = stats.compilation.logging.get("webpack.cache.PackFileCacheStrategy")
+          // //
+          // console.log(logs)
+
+          // console.log(stats.compilation.logging.keys())
+
+          // [
+          //   'webpack.Compiler',
+          //     'webpack.ResolverCachePlugin',
+          //     'webpack.FlagDependencyExportsPlugin',
+          //     'webpack.Compilation',
+          //     'webpack.SideEffectsFlagPlugin',
+          //     'webpack.buildChunkGraph',
+          //     'webpack.SplitChunksPlugin',
+          //     'webpack.FileSystemInfo'
+          // ].forEach(key => {
+          //   console.log(stats.compilation.logging.get(key))
+          // })
+
           if (stats.hasErrors()) {
             done(new Error(stats.toString()));
             return;

test/TestCases.test.js

@@ -0,0 +1,35 @@
+import Self from '../../../src/index';
+
+module.exports = {
+  cache: { type: 'filesystem' },
+  entry: 'bootstrap/dist/css/bootstrap.css',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          Self.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+
+  plugins: [
+    new Self(),
+    {
+      apply(compiler) {
+        compiler.hooks.infrastructureLog.tap('test', (origin, type, args) => {
+          if (type === 'warn' || type === 'error') {
+            throw new Error(`<${type}> [${origin}] ${args.toString()}`);
+          }
+        });
+      },
+    },
+  ],
+};