fix: missing auxiliary assets (#662)

Author: cap-Bernardito

package-lock.json

@@ -74,7 +74,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.2",
     "standard-version": "^9.0.0",
-    "webpack": "^5.4.0",
+    "webpack": "^5.9.0",
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^3.7.2"
   },

package.json

@@ -14,6 +14,10 @@ class CssDependency extends webpack.Dependency {
     this.media = media;
     this.sourceMap = sourceMap;
     this.context = context;
+    // eslint-disable-next-line no-undefined
+    this.assets = undefined;
+    // eslint-disable-next-line no-undefined
+    this.assetsInfo = undefined;
   }
 
   getResourceIdentifier() {
@@ -34,6 +38,8 @@ class CssDependency extends webpack.Dependency {
     write(this.sourceMap);
     write(this.context);
     write(this.identifierIndex);
+    write(this.assets);
+    write(this.assetsInfo);
 
     super.serialize(context);
   }
@@ -65,6 +71,12 @@ if (webpack.util && webpack.util.serialization) {
           read()
         );
 
+        const assets = read();
+        const assetsInfo = read();
+
+        dep.assets = assets;
+        dep.assetsInfo = assetsInfo;
+
         dep.deserialize(context);
 
         return dep;

src/CssDependency.js

@@ -16,6 +16,8 @@ class CssModule extends webpack.Module {
     content,
     media,
     sourceMap,
+    assets,
+    assetsInfo,
   }) {
     super(MODULE_TYPE, context);
 
@@ -26,7 +28,10 @@ class CssModule extends webpack.Module {
     this.content = content;
     this.media = media;
     this.sourceMap = sourceMap;
-    this.buildInfo = {};
+    this.buildInfo = {
+      assets,
+      assetsInfo,
+    };
     this.buildMeta = {};
   }
 
@@ -107,6 +112,7 @@ class CssModule extends webpack.Module {
     write(this.content);
     write(this.media);
     write(this.sourceMap);
+    write(this.buildInfo);
 
     super.serialize(context);
   }
@@ -128,13 +134,23 @@ if (webpack.util && webpack.util.serialization) {
       deserialize(context) {
         const { read } = context;
 
+        const contextModule = read();
+        const identifier = read();
+        const identifierIndex = read();
+        const content = read();
+        const media = read();
+        const sourceMap = read();
+        const { assets, assetsInfo } = read();
+
         const dep = new CssModule({
-          context: read(),
-          identifier: read(),
-          identifierIndex: read(),
-          content: read(),
-          media: read(),
-          sourceMap: read(),
+          context: contextModule,
+          identifier,
+          identifierIndex,
+          content,
+          media,
+          sourceMap,
+          assets,
+          assetsInfo,
         });
 
         dep.deserialize(context);

src/CssModule.js

@@ -136,19 +136,12 @@ export function pitch(request) {
   const callback = this.async();
 
   childCompiler.runAsChild((err, entries, compilation) => {
-    for (const asset of compilation.getAssets()) {
-      const { buildInfo } = this._module;
-
-      if (!buildInfo.assets) {
-        buildInfo.assets = Object.create(null);
-      }
-
-      if (!buildInfo.assetsInfo) {
-        buildInfo.assetsInfo = new Map();
-      }
+    const assets = Object.create(null);
+    const assetsInfo = new Map();
 
-      buildInfo.assets[asset.name] = asset.source;
-      buildInfo.assetsInfo.set(asset.name, asset.info);
+    for (const asset of compilation.getAssets()) {
+      assets[asset.name] = asset.source;
+      assetsInfo.set(asset.name, asset.info);
     }
 
     const addDependencies = (dependencies) => {
@@ -162,6 +155,8 @@ export function pitch(request) {
 
       const identifierCountMap = new Map();
 
+      let lastDep;
+
       for (const dependency of dependencies) {
         if (!dependency.identifier) {
           // eslint-disable-next-line no-continue
@@ -171,10 +166,15 @@ export function pitch(request) {
         const count = identifierCountMap.get(dependency.identifier) || 0;
 
         this._module.addDependency(
-          new CssDependency(dependency, dependency.context, count)
+          (lastDep = new CssDependency(dependency, dependency.context, count))
         );
         identifierCountMap.set(dependency.identifier, count + 1);
       }
+
+      if (lastDep) {
+        lastDep.assets = assets;
+        lastDep.assetsInfo = assetsInfo;
+      }
     };
 
     if (err) {

src/loader.js

@@ -90,6 +90,11 @@ describe('TestCases', () => {
   clearDirectory(outputDirectory);
 
   for (const directory of tests) {
+    if (directory === 'auxiliaryAssets' && webpack.version[0] === '4') {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
     if (!/^(\.|_)/.test(directory)) {
       // eslint-disable-next-line no-loop-func
       it(`${directory} should compile to the expected result`, (done) => {

test/TestCases.test.js

@@ -0,0 +1 @@
+auxiliaryAssets-815babffe97b00a1f30b.woff2

test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-815babffe97b00a1f30b.woff2

@@ -0,0 +1 @@
+auxiliaryAssets-a0de923c946d4ccb38b0.ttf

test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-a0de923c946d4ccb38b0.ttf

@@ -0,0 +1 @@
+auxiliaryAssets-d4c409dfe110747b1763.woff

test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-d4c409dfe110747b1763.woff

@@ -0,0 +1,10 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Roboto Light'), local('Roboto-Light'),
+    url('fonts/roboto-v18-latin-300.woff2') format('woff2'),
+    url('fonts/roboto-v18-latin-300.woff') format('woff'),
+    url('fonts/roboto-v18-latin-300.ttf') format('truetype');
+}

test/cases/auxiliaryAssets/fonts.css

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

test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.ttf

@@ -0,0 +1,64 @@
+import Self from '../../../src';
+
+class AssetsPlugin {
+  // eslint-disable-next-line class-methods-use-this
+  apply(compiler) {
+    compiler.hooks.emit.tapAsync('AssetsPlugin', (compilation, cb) => {
+      const stats = compilation.getStats().toJson({
+        all: true,
+      });
+
+      const { RawSource } = compiler.webpack.sources;
+
+      for (const file of stats.entrypoints.main.auxiliaryAssets) {
+        const newFile = `auxiliaryAssets-${file.name}`;
+        compilation.emitAsset(newFile, new RawSource(newFile), {});
+      }
+
+      cb();
+    });
+  }
+}
+
+module.exports = {
+  entry: './index.js',
+  mode: 'development',
+  output: {
+    publicPath: '/',
+  },
+  optimization: {
+    sideEffects: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(woff2?|ttf|eot|otf|png|jpe?g|gif|ico|svg|webp)$/,
+        type: 'asset',
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: Self.loader,
+            options: {
+              esModule: true,
+            },
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+      chunkFilename: '[id].[name].css',
+    }),
+    new AssetsPlugin(),
+  ],
+};

test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.woff

@@ -6,7 +6,7 @@
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _styleC_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-;
+
 
 
 /***/ }),
@@ -23,7 +23,7 @@ __webpack_require__.r(__webpack_exports__);
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _styleD_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
-;
+
 
 
 /***/ }),

test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.woff2

@@ -9,7 +9,7 @@
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _styleB_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
-;
+
 
 
 /***/ }),
@@ -28,7 +28,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _styleA_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
-;
+
 
 
 /***/ }),

test/cases/auxiliaryAssets/index.js

@@ -6,7 +6,7 @@
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _styleB_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-;
+
 
 
 /***/ }),

test/cases/auxiliaryAssets/webpack.config.js

@@ -7,7 +7,7 @@
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _styleA_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
-;
+
 
 
 /***/ }),