@plaudit/webpack-extensions 2.29.0 → 2.30.0

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

@@ -1,4 +1,4 @@
-import { type Compiler, type WebpackPluginInstance } from "webpack";
+import { type Compilation, type Compiler, type WebpackPluginInstance } from "webpack";
 export default class BlockJSONManagingPlugin implements WebpackPluginInstance {
     private readonly standaloneBlocks;
     private readonly processingModules;
@@ -7,6 +7,7 @@ export default class BlockJSONManagingPlugin implements WebpackPluginInstance {
     private static readonly blockJSONAssetSources;
     constructor(standaloneBlocks: boolean, processingModules: boolean);
     apply(compiler: Compiler): void;
+    static resolveDestinationBySourceExtension(srcPath: string, entrypoint: Compilation['asyncEntrypoints'][number]): string | undefined;
     static findCommonAncestor(...paths: string[]): string[];
     static findRelativeRouteBetween(path1: string, path2: string): string;
     private static hashThingForAsset;

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const node_crypto_1 = __importDefault(require("node:crypto"));
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
-const php_serializer_1 = __importDefault(require("./php-serializer"));
 const webpack_1 = require("webpack");
+const php_serializer_1 = __importDefault(require("./php-serializer"));
 class BlockJSONManagingPlugin {
     standaloneBlocks;
     processingModules;
@@ -40,9 +40,7 @@ class BlockJSONManagingPlugin {
                                 if (!srcPath) {
                                     continue;
                                 }
-                                const destPath = /m?[jt]sx?$/i.test(node_path_1.default.extname(srcPath))
-                                    ? entrypoint.getFiles().find(file => file.endsWith(".mjs")) ?? entrypoint.getFiles().find(file => file.endsWith(".js"))
-                                    : entrypoint.getFiles().find(file => file.endsWith(".css"));
+                                const destPath = BlockJSONManagingPlugin.resolveDestinationBySourceExtension(srcPath, entrypoint);
                                 if (!destPath) {
                                     continue;
                                 }
@@ -210,6 +208,18 @@ class BlockJSONManagingPlugin {
             });
         });
     }
+    static resolveDestinationBySourceExtension(srcPath, entrypoint) {
+        const extensionMatch = /(m?)[jt]sx?$/i.exec(node_path_1.default.extname(srcPath));
+        if (extensionMatch === null) {
+            return entrypoint.getFiles().find(file => file.endsWith(".css"));
+        }
+        else if (extensionMatch[1]) {
+            return entrypoint.getFiles().find(file => file.endsWith(".mjs")) ?? entrypoint.getFiles().find(file => file.endsWith(".js"));
+        }
+        else {
+            return entrypoint.getFiles().find(file => file.endsWith(".js"));
+        }
+    }
     static findCommonAncestor(...paths) {
         return paths.map(p => node_path_1.default.normalize(p).split(node_path_1.default.sep)).reduce((prior, current) => {
             for (let i = 0, limit = Math.min(prior.length, current.length); i < limit; i++) {

package/build/wordpress-scripts-wrapper.js

@@ -30,9 +30,6 @@ let isInThemeCache = undefined;
 function isInTheme() {
     return isInThemeCache ?? (isInThemeCache = node_fs_1.default.existsSync(node_path_1.default.join(process.cwd(), "theme.json")));
 }
-function isTruthy(value) {
-    return !!value;
-}
 function groupEntrypointsByAssetFile(entrypoints, entrypointNameExtractor) {
     const seenPaths = new Map();
     for (const entrypoint of entrypoints) {
@@ -129,64 +126,86 @@ function testForDuplicatedEntryPaths(config) {
         process.exit(1);
     }
 }
-function replaceDefaultURLProcessing(webpackConfig) {
+function replaceDefaultURLProcessing(rules) {
     const cssLoader = require.resolve('css-loader');
-    if (cssLoader && webpackConfig.module?.rules) {
-        for (const rule of webpackConfig.module.rules) {
-            if (isTruthy(rule) && typeof rule === 'object' && "use" in rule && Array.isArray(rule.use)) {
-                for (const useElement of rule.use) {
-                    if (isTruthy(useElement) && typeof useElement === 'object' && useElement.loader === cssLoader && typeof useElement.options === 'object') {
-                        useElement.options['url'] = {
-                            filter(url) {
-                                return !url.startsWith("/") && !!url.match(/\.(woff|woff2|eot|ttf|otf|png|jpe?g|svg|webp|avif|gif)[^.]*?(\?.*)?/i);
-                            }
-                        };
-                    }
-                }
+    if (cssLoader) {
+        return rules.map(rule => {
+            if (rule && typeof rule === 'object' && "use" in rule && Array.isArray(rule.use)) {
+                return {
+                    ...rule,
+                    use: rule.use.map(useElement => {
+                        if (useElement && typeof useElement === 'object' && useElement.loader === cssLoader && typeof useElement.options === 'object') {
+                            return {
+                                ...useElement,
+                                options: {
+                                    ...useElement.options,
+                                    url: {
+                                        filter(url) {
+                                            return !url.startsWith("/") && !!url.match(/\.(woff|woff2|eot|ttf|otf|png|jpe?g|svg|webp|avif|gif)[^.]*?(\?.*)?/i);
+                                        }
+                                    }
+                                }
+                            };
+                        }
+                        return useElement;
+                    })
+                };
             }
-        }
+            return rule;
+        });
     }
+    return rules;
 }
-function injectPostcssConfigOverrides(webpackConfig, variables, postcssFunctionsConfig, verbose) {
-    if (webpackConfig.module?.rules) {
-        const postcssConfig = (0, static_configs_1.postcssConfigBuilder)(verbose, name => variables(name) ?? (name === 'ENV' ? '' : undefined), postcssFunctionsConfig);
-        return webpackConfig.module.rules.map(rule => {
-            if (isTruthy(rule) && typeof rule === 'object') {
-                if (Array.isArray(rule.use)) {
-                    for (const useItem of rule.use) {
-                        if (isTruthy(useItem) && typeof useItem === 'object' && typeof useItem.options === 'object') {
-                            if (useItem.options["sourceMap"] === false) {
-                                useItem.options["sourceMap"] = true;
+function injectPostcssConfigOverrides(rules, variables, postcssFunctionsConfig, verbose) {
+    const postcssConfig = (0, static_configs_1.postcssConfigBuilder)(verbose, name => variables(name) ?? (name === 'ENV' ? '' : undefined), postcssFunctionsConfig);
+    return rules.map(rule => {
+        if (rule && typeof rule === 'object') {
+            if (Array.isArray(rule.use)) {
+                for (const useItem of rule.use) {
+                    if (useItem && typeof useItem === 'object' && typeof useItem.options === 'object') {
+                        if (useItem.options["sourceMap"] === false) {
+                            useItem.options["sourceMap"] = true;
+                        }
+                        if (useItem.loader?.includes('postcss-loader')) {
+                            if (useItem.options["postcssOptions"]) {
+                                useItem.options["postcssOptions"] = { ...useItem.options["postcssOptions"], ...postcssConfig, sourceMap: true };
                             }
-                            if (useItem.loader?.includes('postcss-loader')) {
-                                if (useItem.options["postcssOptions"]) {
-                                    useItem.options["postcssOptions"] = { ...useItem.options["postcssOptions"], ...postcssConfig, sourceMap: true };
-                                }
-                                else {
-                                    useItem.options["postcssOptions"] = { ...postcssConfig, sourceMap: true };
-                                }
+                            else {
+                                useItem.options["postcssOptions"] = { ...postcssConfig, sourceMap: true };
                             }
                         }
                     }
-                    if (rule.test instanceof RegExp && (rule.test.test("index.ts") || rule.test.test("index.mts"))) { // Then this is the javascript and typescript rule
-                        rule.test = /\.m?[jt]sx?$/; // This hacks in support for mjs and mts files
-                    }
                 }
-                if (rule.type === "asset/inline" && rule.test instanceof RegExp && rule.issuer instanceof RegExp && rule.test.test("test.svg") && rule.issuer.test("test.pcss")) {
-                    rule.type = "asset/resource";
-                    rule.generator = { filename: "images/[name].[hash:8][ext]" };
+                if (rule.test instanceof RegExp && (rule.test.test("index.ts") || rule.test.test("index.mts"))) { // Then this is the javascript and typescript rule
+                    rule.test = /\.m?[jt]sx?$/; // This hacks in support for mjs and mts files
                 }
-                if (typeof rule.generator === 'object') {
-                    const ruleGeneratorFilename = rule.generator["filename"];
-                    if (typeof ruleGeneratorFilename === 'string' && (ruleGeneratorFilename.startsWith("images/") || ruleGeneratorFilename.startsWith("fonts/"))) {
-                        rule.generator["filename"] = `../${ruleGeneratorFilename}`;
-                    }
+            }
+            if (rule.type === "asset/inline" && rule.test instanceof RegExp && rule.issuer instanceof RegExp && rule.test.test("test.svg") && rule.issuer.test("test.pcss")) {
+                rule.type = "asset/resource";
+                rule.generator = { filename: "images/[name].[hash:8][ext]" };
+            }
+            if (typeof rule.generator === 'object') {
+                const ruleGeneratorFilename = rule.generator["filename"];
+                if (typeof ruleGeneratorFilename === 'string' && (ruleGeneratorFilename.startsWith("images/") || ruleGeneratorFilename.startsWith("fonts/"))) {
+                    rule.generator["filename"] = `../${ruleGeneratorFilename}`;
                 }
             }
-            return rule;
-        });
-    }
-    return undefined;
+        }
+        return rule;
+    });
+}
+function injectSupportForInliningSVGsAsStrings(rules) {
+    const svgRLoader = require.resolve('@svgr/webpack');
+    return rules.map(rule => {
+        if (rule && typeof rule === 'object' && "use" in rule && Array.isArray(rule.use) && (rule.use.includes('@svgr/webpack') || rule.use.includes(svgRLoader))) {
+            const { test, issuer, ...reactSpecific } = rule;
+            return { test, issuer, oneOf: [
+                    { type: 'asset/source', resourceQuery: /string/ }, // *.svg?string
+                    reactSpecific
+                ] };
+        }
+        return rule;
+    });
 }
 function parseEntrypointsJSON(dir) {
     const entrypointsJSON = JSON.parse(node_fs_1.default.readFileSync(node_path_1.default.join(dir, 'entrypoints.json'), 'utf8'));
@@ -227,8 +246,13 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
     }
     const { standaloneBlocks, variablesFilePath, verbose, externals } = config;
     let currentVariables = config.currentVariables;
-    replaceDefaultURLProcessing(webpackConfig);
-    const fixedRules = injectPostcssConfigOverrides(webpackConfig, name => currentVariables[name], config.postcss.functions ?? (() => ({})), verbose) ?? [];
+    const fixedRules = [
+        replaceDefaultURLProcessing,
+        (rules) => {
+            return injectPostcssConfigOverrides(rules, name => currentVariables[name], config.postcss.functions ?? (() => ({})), verbose);
+        },
+        injectSupportForInliningSVGsAsStrings
+    ].reduce((r, a) => a(r), webpackConfig.module?.rules ?? []);
     return sources.map(([src, dest]) => {
         const srcRoots = (typeof dest !== 'string' && dest.withLegacyBlocksIn
             ? [...src.split(','), ...resolveLegacyBlockScriptsInFolder(dest.withLegacyBlocksIn)]
@@ -240,7 +264,8 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
             return undefined;
         }
         const copyFiles = srcIsDirectory && src !== dest;
-        const plugins = webpackConfig.plugins?.filter(isTruthy).filter(plugin => plugin.constructor.name !== 'RtlCssPlugin') ?? [];
+        const plugins = webpackConfig.plugins?.filter(v => !!v)
+            .filter(plugin => plugin.constructor.name !== 'RtlCssPlugin') ?? [];
         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")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.29.0",
+  "version": "2.30.0",
   "scripts": {
     "prepublishOnly": "rm -rf build && mkdir build && tsc",
     "build": "tsc",