@plaudit/webpack-extensions 2.44.4 → 2.44.6

package/build/wordpress-scripts-wrapper/BlockJSONManagingPlugin.d.ts

@@ -33,4 +33,9 @@ export default class BlockJSONManagingPlugin implements WebpackPluginInstance {
     private registerBlockJsonProcessor;
     private static normalizeRenderTemplate;
     private static getSyncs;
+    private static makeSync;
+    private static getAssetDetails;
+    private static getAssetDataAccountingForCSS;
+    private static findFirstChunkFileWithExtension;
+    private static getChunkFilesByRuntimeName;
 }

package/build/wordpress-scripts-wrapper/BlockJSONManagingPlugin.js

@@ -169,20 +169,20 @@ class BlockJSONManagingPlugin {
         if (value.startsWith("file:")) {
             const sourceDir = BlockJSONManagingPlugin.blockJSONAssetSourceDirs.get(name) ?? node_path_1.default.dirname(name);
             const inputPath = node_path_1.default.normalize(node_path_1.default.join(sourceDir, value.substring(5)));
-            const outputAndAdditionalFiles = BlockJSONManagingPlugin.blockJsonToEntrypointsMap.get(name)?.get(inputPath);
-            if (outputAndAdditionalFiles !== undefined) {
-                const { output, additionalFiles } = outputAndAdditionalFiles;
+            const outputAndDerivedFiles = BlockJSONManagingPlugin.blockJsonToEntrypointsMap.get(name)?.get(inputPath);
+            if (outputAndDerivedFiles !== undefined) {
+                const { entryMeta, derivedFiles } = outputAndDerivedFiles;
                 const prefix = value.startsWith("./", 5) ? "./" : "";
-                const relativePath = node_path_1.default.relative(node_path_1.default.dirname(name), output.path);
-                const res = [`file:${prefix}${relativePath}`, output.hash];
-                if (BlockJSONManagingPlugin.styleExtensionPattern.test(output.path)) {
+                const relativePath = node_path_1.default.relative(node_path_1.default.dirname(name), entryMeta.path);
+                const res = [`file:${prefix}${relativePath}`, entryMeta.hash];
+                if (BlockJSONManagingPlugin.styleExtensionPattern.test(entryMeta.path)) {
                     return [res,
-                        additionalFiles.filter(additionalFile => !BlockJSONManagingPlugin.scriptExtensionPattern.test(additionalFile))
-                            .map(additionalFile => `file:./${node_path_1.default.relative(node_path_1.default.dirname(name), additionalFile)}`)
+                        derivedFiles.filter(derivedFile => !BlockJSONManagingPlugin.scriptExtensionPattern.test(derivedFile))
+                            .map(derivedFile => `file:./${node_path_1.default.relative(node_path_1.default.dirname(name), derivedFile)}`)
                     ];
                 }
                 else {
-                    return [res, additionalFiles.map(additionalFile => `file:./${node_path_1.default.relative(node_path_1.default.dirname(name), additionalFile)}`)];
+                    return [res, derivedFiles.map(derivedFile => `file:./${node_path_1.default.relative(node_path_1.default.dirname(name), derivedFile)}`)];
                 }
             }
         }
@@ -294,19 +294,16 @@ class BlockJSONManagingPlugin {
                         continue;
                     }
                     const entrypointChunk = entrypoint.getEntrypointChunk();
-                    const additionalFiles = [];
-                    for (const entrypointChunkFile of entrypointChunk.files) {
-                        if (!entrypointChunkFile.endsWith(".asset.php") && entrypointChunkFile !== destPath) {
-                            additionalFiles.push(entrypointChunkFile);
-                        }
-                    }
+                    const derivedFiles = entrypointChunk.name
+                        ? BlockJSONManagingPlugin.getChunkFilesByRuntimeName(entrypointChunk.name, compilation).filter(file => file !== destPath)
+                        : [...entrypointChunk.files].filter(file => !file.endsWith(".asset.php") && file !== destPath);
                     const entryMeta = { hash: entrypointChunk.hash ?? destPath, path: destPath };
                     const currentEntrypoints = BlockJSONManagingPlugin.blockJsonToEntrypointsMap.get(name);
                     if (currentEntrypoints) {
-                        currentEntrypoints.set(srcPath, { output: entryMeta, additionalFiles });
+                        currentEntrypoints.set(srcPath, { entryMeta, derivedFiles });
                     }
                     else {
-                        BlockJSONManagingPlugin.blockJsonToEntrypointsMap.set(name, new Map([[srcPath, { output: entryMeta, additionalFiles }]]));
+                        BlockJSONManagingPlugin.blockJsonToEntrypointsMap.set(name, new Map([[srcPath, { entryMeta, derivedFiles }]]));
                     }
                 }
             }
@@ -379,34 +376,47 @@ class BlockJSONManagingPlugin {
             const blockDirConfigs = Object.entries(blockDirConfigData).sort(([a], [b]) => a.localeCompare(b));
             const rawAssetDataSource = compilation.assets["assets.json"]?.source();
             if (typeof rawAssetDataSource === 'string') {
+                const derivedFilesMap = new Map();
+                for (const epMap of BlockJSONManagingPlugin.blockJsonToEntrypointsMap.values()) { // For each block.json file's entry point map
+                    for (const epMapValue of epMap.values()) { // For each recorded entry point
+                        const progenitorFile = epMapValue.entryMeta.path;
+                        for (const derivedFile of epMapValue.derivedFiles) { // For each derived (non-auxiliary) file generated by that entry point
+                            derivedFilesMap.set(derivedFile, progenitorFile); // Record a mapping from each derived file to its progenitor
+                        }
+                    }
+                }
+                const rawAssetData = JSON.parse(rawAssetDataSource);
+                for (const chunk of compilation.chunks) {
+                    if (compilation.chunkGraph.getChunkModulesIterableBySourceType(chunk, 'css/mini-extract')) {
+                        const output = BlockJSONManagingPlugin.findFirstChunkFileWithExtension(chunk, ".css");
+                        if (output) {
+                            rawAssetData[output] = { dependencies: [], version: chunk.contentHash['css/mini-extract'] ?? chunk.hash ?? "" };
+                        }
+                    }
+                }
                 const scriptHandles = {};
                 const styleHandles = {};
-                const additionalFilesMap = new Map([...BlockJSONManagingPlugin.blockJsonToEntrypointsMap.values()] // Extract the recorded block.json files into an array
-                    .flatMap(epMap => [...epMap.values()]) // Extract the recorded entrypoints for all block.json files into a single array
-                    .flatMap(epMapValue => {
-                    return epMapValue.additionalFiles.map(af => [af, epMapValue.output.path]); // Pair each additionalFile with its progenitor
-                }) // Flatten the per-entrypoint [additionalFile, progenitor] pairs into a single array
-                );
-                const rawAssetData = JSON.parse(rawAssetDataSource);
-                const usedHandles = {};
+                const usedHandles = { css: {}, js: {} };
                 for (const [blockFolder, config] of blockDirConfigs) {
                     for (const mappableKey of BlockJSONManagingPlugin.mappableKeys) {
                         const cfg = config[mappableKey];
                         if (cfg) {
                             if (Array.isArray(cfg)) {
                                 for (let i = 0; i < cfg.length; i++) {
-                                    const assetDetails = getAssetDetails(blockFolder, cfg[i], rawAssetData, additionalFilesMap, mappableKey, usedHandles);
+                                    const assetDetails = BlockJSONManagingPlugin
+                                        .getAssetDetails(blockFolder, cfg[i], rawAssetData, derivedFilesMap, mappableKey, usedHandles);
                                     if (assetDetails) {
-                                        (assetDetails[0] ? styleHandles : scriptHandles)[assetDetails[1]] = assetDetails[2];
-                                        cfg[i] = assetDetails[1];
+                                        (assetDetails.isCss ? styleHandles : scriptHandles)[assetDetails.handle] = assetDetails.handleData;
+                                        cfg[i] = assetDetails.handle;
                                     }
                                 }
                             }
                             else {
-                                const assetDetails = getAssetDetails(blockFolder, cfg, rawAssetData, additionalFilesMap, mappableKey, usedHandles);
+                                const assetDetails = BlockJSONManagingPlugin
+                                    .getAssetDetails(blockFolder, cfg, rawAssetData, derivedFilesMap, mappableKey, usedHandles);
                                 if (assetDetails) {
-                                    (assetDetails[0] ? styleHandles : scriptHandles)[assetDetails[1]] = assetDetails[2];
-                                    config[mappableKey] = assetDetails[1];
+                                    (assetDetails.isCss ? styleHandles : scriptHandles)[assetDetails.handle] = assetDetails.handleData;
+                                    config[mappableKey] = assetDetails.handle;
                                 }
                             }
                         }
@@ -488,56 +498,90 @@ class BlockJSONManagingPlugin {
         if (res) {
             return res;
         }
-        BlockJSONManagingPlugin.blockJsonAssetKeyReadinessMapping.set(name, { nonModule: makeSync(), module: makeSync() });
+        BlockJSONManagingPlugin.blockJsonAssetKeyReadinessMapping.set(name, { nonModule: BlockJSONManagingPlugin.makeSync(), module: BlockJSONManagingPlugin.makeSync() });
         return BlockJSONManagingPlugin.blockJsonAssetKeyReadinessMapping.get(name);
     }
-}
-exports.default = BlockJSONManagingPlugin;
-function makeSync() {
-    const res = { done: false };
-    res.sync = new Promise((resolve, reject) => {
-        res.resolve = (v) => resolve(v);
-        res.reject = () => reject();
-    });
-    return res;
-}
-function getAssetDetails(blockFolder, asset, rawAssetData, additionalFilesMap, mappableKey, usedHandles) {
-    if (!asset.startsWith("file:./")) {
-        return undefined;
-    }
-    const src = `${blockFolder}/${asset.substring(7)}`;
-    const isCss = src.endsWith(".css");
-    let assetData;
-    const lookupSrc = additionalFilesMap.get(src);
-    if (lookupSrc) {
-        const tempAssetData = getAssetDataAccountingForCSS(lookupSrc, rawAssetData);
-        assetData = tempAssetData ? { ...tempAssetData, dependencies: [] } : undefined;
+    static makeSync() {
+        const res = { done: false };
+        res.sync = new Promise((resolve, reject) => {
+            res.resolve = (v) => resolve(v);
+            res.reject = () => reject();
+        });
+        return res;
     }
-    else {
-        assetData = getAssetDataAccountingForCSS(src, rawAssetData);
+    static getAssetDetails(blockFolder, asset, rawAssetData, derivedFilesMap, mappableKey, usedHandles) {
+        if (!asset.startsWith("file:./")) {
+            return undefined;
+        }
+        const src = `${blockFolder}/${asset.substring(7)}`;
+        const isCss = src.endsWith(".css");
+        let assetData;
+        if (rawAssetData[src]) {
+            assetData = rawAssetData[src];
+        }
+        else {
+            const progenitorSrc = derivedFilesMap.get(src);
+            if (progenitorSrc) {
+                const tempAssetData = BlockJSONManagingPlugin.getAssetDataAccountingForCSS(progenitorSrc, rawAssetData);
+                if (tempAssetData) {
+                    assetData = progenitorSrc.endsWith(".css") === isCss
+                        ? tempAssetData
+                        : { ...tempAssetData, dependencies: [] }; // derived files cannot inherit dependencies from their progenitors if they are of a different type
+                }
+                else {
+                    assetData = undefined;
+                }
+                assetData = tempAssetData ? { ...tempAssetData, dependencies: [] } : undefined;
+            }
+            else {
+                assetData = BlockJSONManagingPlugin.getAssetDataAccountingForCSS(src, rawAssetData);
+            }
+        }
+        if (!assetData) {
+            return undefined;
+        }
+        let handle = src.substring(0, src.length - (isCss ? 4 : 3));
+        if (usedHandles[isCss ? 'css' : 'js'][handle] !== undefined) {
+            handle += "-" + (++usedHandles[isCss ? 'css' : 'js'][handle]);
+        }
+        else {
+            usedHandles[isCss ? 'css' : 'js'][handle] = 0;
+        }
+        const rest = isCss || mappableKey.startsWith("editor")
+            ? [assetData.dependencies, assetData.version]
+            : [assetData.dependencies, assetData.version, { strategy: 'defer' }];
+        return { isCss, handle, handleData: { src, rest } };
     }
-    if (!assetData) {
+    static getAssetDataAccountingForCSS(src, rawAssetData) {
+        if (rawAssetData[src]) {
+            return rawAssetData[src];
+        }
+        if (src.endsWith(".css")) {
+            return rawAssetData[src.substring(0, src.length - 3) + "js"] // A simple style dependency that isn't named "style"
+                ?? rawAssetData[src.substring(0, src.length - 3).replace("style-style", "style") + "js"]; // A simple style dependency that IS named style
+        }
         return undefined;
     }
-    let handle = src.substring(0, src.length - (isCss ? 4 : 3));
-    if (usedHandles[handle] !== undefined) {
-        handle += "-" + (++usedHandles[handle]);
-    }
-    else {
-        usedHandles[handle] = 0;
-    }
-    return [
-        isCss, handle,
-        { src, rest: isCss || mappableKey.startsWith("editor") ? [assetData.dependencies, assetData.version] : [assetData.dependencies, assetData.version, { strategy: 'defer' }] }
-    ];
-}
-function getAssetDataAccountingForCSS(src, rawAssetData) {
-    if (rawAssetData[src]) {
-        return rawAssetData[src];
+    static findFirstChunkFileWithExtension(chunk, extension) {
+        for (const file of chunk.files) {
+            if (file.endsWith(extension)) {
+                return file;
+            }
+        }
+        return undefined;
     }
-    if (src.endsWith(".css")) {
-        return rawAssetData[src.substring(0, src.length - 3) + "js"] // A simple style dependency that isn't named "style"
-            ?? rawAssetData[src.substring(0, src.length - 3).replace("style-style", "style") + "js"]; // A simple style dependency that IS named style
+    static getChunkFilesByRuntimeName(runtimeName, compilation) {
+        const files = new Set();
+        for (const chunk of compilation.chunks) {
+            if (typeof chunk.runtime === 'string' ? chunk.runtime === runtimeName : chunk.runtime?.has(runtimeName)) {
+                for (const file of chunk.files) {
+                    if (!file.endsWith(".asset.php")) {
+                        files.add(file);
+                    }
+                }
+            }
+        }
+        return [...files];
     }
-    return undefined;
 }
+exports.default = BlockJSONManagingPlugin;

package/build/wordpress-scripts-wrapper.js

@@ -279,7 +279,20 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
         }
         const copyFiles = srcIsDirectory && src !== dest;
         const plugins = webpackConfig.plugins?.filter(v => !!v)
-            .filter(plugin => plugin.constructor.name !== 'RtlCssPlugin') ?? [];
+            .filter(plugin => plugin.constructor.name !== 'RtlCssPlugin')
+            .map(plugin => {
+            if (plugin.constructor.name === 'MiniCssExtractPlugin') {
+                return new plugin.constructor({
+                    filename(pd) {
+                        const name = pd.chunk?.name?.replaceAll(/__[a-zA-Z0-9]+__/g, ""); // This removes the prefix that the cache group adds
+                        return name ? `${name}.css` : "[name].css";
+                    },
+                    layer: ""
+                });
+            }
+            return plugin;
+        })
+            ?? [];
         if (process.env["NO_TS_CHECKER"] !== "true") {
             const include = (Array.isArray(srcRoot) ? srcRoot : [srcRoot])
                 .filter(sr => node_path_1.default.extname(sr).length === 0 || scriptOrStyleTest(sr, scriptExtension) === "script")
@@ -513,6 +526,26 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
                 publicPath: publicPath,
                 library: outputLibrary
             },
+            optimization: {
+                ...webpackConfig.optimization,
+                splitChunks: {
+                    ...(webpackConfig.optimization?.splitChunks || {}),
+                    cacheGroups: {
+                        style: {
+                            // This is a flagrant abuse of cache groups, but it fixes a persistent problem wherein the dependencies and versions of scripts and styles were bleeding into each-other
+                            type: 'css/mini-extract',
+                            chunks: 'all',
+                            enforce: true,
+                            name(_, chunks, cacheGroupKey) {
+                                const chunkName = chunks.find(chunk => chunk.name)?.name;
+                                // We use "__${cacheGroupKey}__" instead of "${cacheGroupKey}-" to make it easier to remove when generating the filename
+                                return `${node_path_1.default.dirname(chunkName)}/__${cacheGroupKey}__${node_path_1.default.basename(chunkName)}`;
+                            }
+                        },
+                        default: false
+                    }
+                }
+            },
             module: {
                 ...webpackConfig.module,
                 rules: fixedRules

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@plaudit/webpack-extensions",
-	"version": "2.44.4",
+	"version": "2.44.6",
 	"license": "UNLICENSED",
 	"scripts": {
 		"prepublishOnly": "rm -rf build && mkdir build && tsc",
@@ -45,7 +45,6 @@
 		"clean-webpack-plugin": "^4.0.0",
 		"copy-webpack-plugin": "^10.2.4",
 		"cssnano": "^6.1.2",
-		"eslint": "^8.57.1",
 		"eslint-plugin-jsdoc": "^48.11.0",
 		"fork-ts-checker-webpack-plugin": "^9.1.0",
 		"http-proxy-middleware": "^3.0.5",