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