diff --git a/package-lock.json b/package-lock.json index 0caeacad..05331150 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2253,9 +2253,9 @@ } }, "@types/eslint": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.4.tgz", - "integrity": "sha512-YCY4kzHMsHoyKspQH+nwSe+70Kep7Vjt2X+dZe5Vs2vkRudqtoFoUIv1RlJmZB8Hbp7McneupoZij4PadxsK5Q==", + "version": "7.2.6", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz", + "integrity": "sha512-I+1sYH+NPQ3/tVqCeUSBwTE/0heyvtXqpIopUUArlBm0Kpocb8FbMa3AZ/ASKIFpN3rnEx932TTXDbt9OXsNDw==", "dev": true, "requires": { "@types/estree": "*", @@ -5747,9 +5747,9 @@ } }, "enhanced-resolve": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.3.1.tgz", - "integrity": "sha512-G1XD3MRGrGfNcf6Hg0LVZG7GIKcYkbfHa5QMxt1HDUTdYoXH0JR1xXyg+MaKLF73E9A27uWNVxvFivNRYeUB6w==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.4.0.tgz", + "integrity": "sha512-ZmqfWURB2lConOBM1JdCVfPyMRv5RdKWktLXO6123p97ovVm2CLBgw9t5MBj3jJWA6eHyOeIws9iJQoGFR4euQ==", "dev": true, "requires": { "graceful-fs": "^4.2.4", @@ -13920,9 +13920,9 @@ } }, "terser": { - "version": "5.3.8", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.3.8.tgz", - "integrity": "sha512-zVotuHoIfnYjtlurOouTazciEfL7V38QMAOhGqpXDEg6yT13cF4+fEP9b0rrCEQTn+tT46uxgFsTZzhygk+CzQ==", + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz", + "integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==", "dev": true, "requires": { "commander": "^2.20.0", @@ -13959,12 +13959,12 @@ }, "dependencies": { "p-limit": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.0.2.tgz", - "integrity": "sha512-iwqZSOoWIW+Ew4kAGUlN16J4M7OB3ysMLSZtnhmqx7njIHFPlxWBX8xo3lVTyFVq6mI/lL9qt2IsN1sHwaxJkg==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", "dev": true, "requires": { - "p-try": "^2.0.0" + "yocto-queue": "^0.1.0" } } } @@ -14521,9 +14521,9 @@ "dev": true }, "webpack": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.4.0.tgz", - "integrity": "sha512-udpYTyqz8toTTdaOsL2QKPLeZLt2IEm9qY7yTXuFEQhKu5bk0yQD9BtAdVQksmz4jFbbWOiWmm3NHarO0zr/ng==", + "version": "5.9.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.9.0.tgz", + "integrity": "sha512-YnnqIV/uAS5ZrNpctSv378qV7HmbJ74DL+XfvMxzbX1bV9e7eeT6eEWU4wuUw33CNr/HspBh7R/xQlVjTEyAeA==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.0", @@ -14546,7 +14546,7 @@ "neo-async": "^2.6.2", "pkg-dir": "^4.2.0", "schema-utils": "^3.0.0", - "tapable": "^2.0.0", + "tapable": "^2.1.1", "terser-webpack-plugin": "^5.0.3", "watchpack": "^2.0.0", "webpack-sources": "^2.1.1" @@ -15405,6 +15405,12 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz", "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==", "dev": true + }, + "yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", + "dev": true } } } diff --git a/package.json b/package.json index 2fc0143d..ff87e780 100644 --- a/package.json +++ b/package.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" }, diff --git a/src/CssDependency.js b/src/CssDependency.js index 8620de50..e4869ba1 100644 --- a/src/CssDependency.js +++ b/src/CssDependency.js @@ -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; diff --git a/src/CssModule.js b/src/CssModule.js index 3bdac2d9..b552a085 100644 --- a/src/CssModule.js +++ b/src/CssModule.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); diff --git a/src/loader.js b/src/loader.js index b31a9f92..bff3e867 100644 --- a/src/loader.js +++ b/src/loader.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) { diff --git a/test/TestCases.test.js b/test/TestCases.test.js index 44b3ec5d..16308165 100644 --- a/test/TestCases.test.js +++ b/test/TestCases.test.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) => { diff --git a/test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-815babffe97b00a1f30b.woff2 b/test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-815babffe97b00a1f30b.woff2 new file mode 100644 index 00000000..ddca5526 --- /dev/null +++ b/test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-815babffe97b00a1f30b.woff2 @@ -0,0 +1 @@ +auxiliaryAssets-815babffe97b00a1f30b.woff2 \ No newline at end of file diff --git a/test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-a0de923c946d4ccb38b0.ttf b/test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-a0de923c946d4ccb38b0.ttf new file mode 100644 index 00000000..16502c45 --- /dev/null +++ b/test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-a0de923c946d4ccb38b0.ttf @@ -0,0 +1 @@ +auxiliaryAssets-a0de923c946d4ccb38b0.ttf \ No newline at end of file diff --git a/test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-d4c409dfe110747b1763.woff b/test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-d4c409dfe110747b1763.woff new file mode 100644 index 00000000..deeb500c --- /dev/null +++ b/test/cases/auxiliaryAssets/expected/webpack-5/auxiliaryAssets-d4c409dfe110747b1763.woff @@ -0,0 +1 @@ +auxiliaryAssets-d4c409dfe110747b1763.woff \ No newline at end of file diff --git a/test/cases/auxiliaryAssets/fonts.css b/test/cases/auxiliaryAssets/fonts.css new file mode 100644 index 00000000..954a9a05 --- /dev/null +++ b/test/cases/auxiliaryAssets/fonts.css @@ -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'); +} diff --git a/test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.ttf b/test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.ttf new file mode 100644 index 00000000..a22188ee Binary files /dev/null and b/test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.ttf differ diff --git a/test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.woff b/test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.woff new file mode 100644 index 00000000..96663f07 Binary files /dev/null and b/test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.woff differ diff --git a/test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.woff2 b/test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.woff2 new file mode 100644 index 00000000..52c5845a Binary files /dev/null and b/test/cases/auxiliaryAssets/fonts/roboto-v18-latin-300.woff2 differ diff --git a/test/cases/auxiliaryAssets/index.js b/test/cases/auxiliaryAssets/index.js new file mode 100644 index 00000000..1028876f --- /dev/null +++ b/test/cases/auxiliaryAssets/index.js @@ -0,0 +1 @@ +import './fonts.css'; diff --git a/test/cases/auxiliaryAssets/webpack.config.js b/test/cases/auxiliaryAssets/webpack.config.js new file mode 100644 index 00000000..0324534a --- /dev/null +++ b/test/cases/auxiliaryAssets/webpack.config.js @@ -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(), + ], +}; diff --git a/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5/common.js b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5/common.js index ca8cd495..af6ce383 100644 --- a/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5/common.js +++ b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5/common.js @@ -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); -; + /***/ }), diff --git a/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5/entry1.js b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5/entry1.js index 2aa64fc3..26432b0c 100644 --- a/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5/entry1.js +++ b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5/entry1.js @@ -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); -; + /***/ }), diff --git a/test/cases/dependOn/expected/webpack-5/common.js b/test/cases/dependOn/expected/webpack-5/common.js index 5c07a194..cdb5168b 100644 --- a/test/cases/dependOn/expected/webpack-5/common.js +++ b/test/cases/dependOn/expected/webpack-5/common.js @@ -6,7 +6,7 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _styleB_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); -; + /***/ }), diff --git a/test/cases/dependOn/expected/webpack-5/entry1.js b/test/cases/dependOn/expected/webpack-5/entry1.js index eef28dab..841a5515 100644 --- a/test/cases/dependOn/expected/webpack-5/entry1.js +++ b/test/cases/dependOn/expected/webpack-5/entry1.js @@ -7,7 +7,7 @@ "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _styleA_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3); -; + /***/ }), diff --git a/test/cases/es-module-concatenation-modules/expected/webpack-5/main.js b/test/cases/es-module-concatenation-modules/expected/webpack-5/main.js index 3c2e6a9a..33aac9a8 100644 --- a/test/cases/es-module-concatenation-modules/expected/webpack-5/main.js +++ b/test/cases/es-module-concatenation-modules/expected/webpack-5/main.js @@ -37,18 +37,18 @@ __webpack_require__.d(index_namespaceObject, { "c": () => c }); -// CONCATENATED MODULE: ./a.css +;// CONCATENATED MODULE: ./a.css // extracted by mini-css-extract-plugin const a = "foo__a"; -// CONCATENATED MODULE: ./b.css +;// CONCATENATED MODULE: ./b.css // extracted by mini-css-extract-plugin const b = "foo__b"; -// CONCATENATED MODULE: ./c.css +;// CONCATENATED MODULE: ./c.css // extracted by mini-css-extract-plugin const c = "foo__c"; -// CONCATENATED MODULE: ./index.js +;// CONCATENATED MODULE: ./index.js /* eslint-disable import/no-namespace */ -; + diff --git a/test/cases/es-module-concatenation/expected/webpack-5/main.js b/test/cases/es-module-concatenation/expected/webpack-5/main.js index 7e515fa0..8130cc45 100644 --- a/test/cases/es-module-concatenation/expected/webpack-5/main.js +++ b/test/cases/es-module-concatenation/expected/webpack-5/main.js @@ -7,17 +7,17 @@ // ESM COMPAT FLAG __webpack_require__.r(__webpack_exports__); -// CONCATENATED MODULE: ./a.css +;// CONCATENATED MODULE: ./a.css // extracted by mini-css-extract-plugin -// CONCATENATED MODULE: ./b.css +;// CONCATENATED MODULE: ./b.css // extracted by mini-css-extract-plugin -// CONCATENATED MODULE: ./c.css +;// CONCATENATED MODULE: ./c.css // extracted by mini-css-extract-plugin -// CONCATENATED MODULE: ./index.js -; +;// CONCATENATED MODULE: ./index.js + diff --git a/test/cases/es-named-export/expected/webpack-5/main.js b/test/cases/es-named-export/expected/webpack-5/main.js index 2a8af9e7..b239496d 100644 --- a/test/cases/es-named-export/expected/webpack-5/main.js +++ b/test/cases/es-named-export/expected/webpack-5/main.js @@ -6,7 +6,7 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); -; + // eslint-disable-next-line no-console console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__.default, aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.aClass, bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.bClass, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass }); diff --git a/test/cases/hmr/expected/webpack-5/main.js b/test/cases/hmr/expected/webpack-5/main.js index 1e9f0d42..f0075868 100644 --- a/test/cases/hmr/expected/webpack-5/main.js +++ b/test/cases/hmr/expected/webpack-5/main.js @@ -356,7 +356,7 @@ module.exports = function (urlString) { /******/ /******/ /* webpack/runtime/get update manifest filename */ /******/ (() => { -/******/ __webpack_require__.hmrF = () => "" + __webpack_require__.h() + ".hot-update.json"; +/******/ __webpack_require__.hmrF = () => "main." + __webpack_require__.h() + ".hot-update.json"; /******/ })(); /******/ /******/ /* webpack/runtime/getFullHash */ @@ -458,6 +458,7 @@ module.exports = function (urlString) { /******/ var currentUpdateApplyHandlers; /******/ var queuedInvalidatedModules; /******/ +/******/ // eslint-disable-next-line no-unused-vars /******/ __webpack_require__.hmrD = currentModuleData; /******/ /******/ __webpack_require__.i.push(function (options) {