@plaudit/webpack-extensions 2.96.2 → 2.97.0

package/CHANGELOG.md

@@ -60,6 +60,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Legacy PostCSS features that have been integrated into modern CSS
 - `@extends` support
 
+## [2.97.0] - 2026-08-18
+### Added
+- David's improvements to build pipeline efficiency
+- Support for David's `@plaudit/dev-webpack-plugin`
+
+### Changed
+- To Webpack's standard plugin interface (`WebpackPluginInstance`)
+
+### Removed
+- Browsersync tests
+
+## [2.96.3] - 2026-08-11
+### Added
+- A few more validation checks
+
 ## [2.96.2] - 2026-08-11
 ### Removed
 - `processTranslationConfigs` because it should not be used and didn't actually do anything

package/README.md

@@ -1,5 +1,5 @@
 # Plaudit Webpack Extensions
-A webpack configuration and plugin suite designed specifically for WordPress development workflows. This package extends `@wordpress/scripts` with custom webpack plugins, PostCSS configurations, and build optimizations tailored for Plaudit's WordPress projects. It includes specialized handling for Gutenberg blocks, asset management, internationalization (WPML), and development tooling like BrowserSync integration.
+A webpack configuration and plugin suite designed specifically for WordPress development workflows. This package extends `@wordpress/scripts` with custom webpack plugins, PostCSS configurations, and build optimizations tailored for Plaudit's WordPress projects. It includes specialized handling for Gutenberg blocks, asset management, internationalization (WPML), and a same-origin CSS-inject / live-reload client for `wp-scripts start`.
 
 # Requirements
 - All block- and extension-related capabilities require that the `plaudit/plaudit-common` composer library be installed.
@@ -23,7 +23,27 @@ This suite generates loader code that uses the most efficient mechanisms availab
 The same file structure (both in the webpack.config.js file and the actual directory tree) can be used in plugins and themes.
 
 # Usage
-Check out the [User Guide](USER-GUIDE.md) file.
+Config, entry types, and handles: [User Guide](USER-GUIDE.md).
+
+## `dist` vs `dist-dev`
+
+With the unified loader (site `standard`), `outputDir` is `dist`. When `SERVER_MODE` is `development` (the default if unset on the host) and `omitDistDev` is off, webpack writes **`dist-dev`**. WordPress in development loads that folder via `dist/unified-loader.php` when `dist-dev/unified-loader.php` exists. Production WordPress always uses **`dist`**.
+
+`SERVER_MODE` chooses the folder. The compiler (`mode`, minify, webpack cache) is always production for `dist`. For `dist-dev` it follows `NODE_ENV`: `wp-scripts start` is development (no minify, cache on); `wp-scripts build` is production (minify, cache off) still written to `dist-dev`.
+
+`dev-reload.js` / overlay run only for `pnpm run dev` (`BROWSER_SYNC` + watch) and only under `dist-dev`. Pass `--no-dev-reload` after `--` (or `DEV_RELOAD=0`) to skip the overlay and live reload: `pnpm run dev -- --no-dev-reload`. Docker still starts and the browser still opens. The `--` is required so webpack-cli does not treat the flag as an unknown option.
+
+| Command                                 | Folder     | Compiler                                                         | Overlay |
+|-----------------------------------------|------------|------------------------------------------------------------------|---------|
+| `pnpm run dev`                          | `dist-dev` | development (no minify, cache on)                                | yes     |
+| `pnpm run dev -- --no-dev-reload`       | `dist-dev` | development (no minify, cache on)                                | no      |
+| `pnpm run watch`                        | `dist-dev` | development (no minify, cache on)                                | no      |
+| `pnpm run build`                        | `dist-dev` | production (minify, cache off)                                   | no      |
+| `SERVER_MODE=production pnpm run build` | `dist`     | same production compiler as `pnpm run build` (minify, cache off) | no      |
+
+The last row is the same compile as a local `build`; only the folder changes. That is what ships: `@plaudit/toolbox` (`toolbox init`) installs a **pre-commit** hook that runs `pnpm … build` with `SERVER_MODE=production` and stages `wp-content/**/dist/**`. A plain `pnpm run build` on your machine does **not** update `dist` unless you set `SERVER_MODE` yourself. `SKIP_BUILD=1` skips the hook build.
+
+See [Plaudit - Dev Webpack Plugin](https://github.com/plaudit/dev-webpack-plugin#readme) for more details
 
 # Development
 

package/USER-GUIDE.md

@@ -8,6 +8,7 @@
     * [Examples](#examples)
   * [Best Practices](#best-practices)
     * [Folder Structure](#folder-structure)
+    * [Enforced Naming Conventions](#enforced-naming-conventions)
     * [Blocks](#blocks)
     * [Extensions](#extensions)
     * [Plain Assets](#plain-assets)
@@ -189,11 +190,13 @@ This file automatically:
 - Sets up blocks and extensions
 
 ### 4. Run Build Commands
-While you *can* manually run these commands, using `theapp pack dev/watch/build` is preferred
+While you *can* manually run these commands, using `theapp pack dev/watch/build` is preferred.
+
+Typical theme/plugin scripts are `watch`, `dev`, and `build`. Which folder they write (`dist` vs `dist-dev`) and whether the compiler minifies is in the package [README](README.md#dist-vs-dist-dev) — a local `pnpm run build` is a production compile into `dist-dev`, not into `dist`.
 
 ```bash
-pnpm run watch   # Development mode (watches for changes)
-pnpm run build   # Production build
+pnpm run watch   # Watch; writes dist-dev
+pnpm run build   # One-shot production compile into dist-dev
 ```
 
 ---

package/dist/plugins/AbstractBiPhasicGroupPlugin.d.ts

@@ -1,7 +1,7 @@
-import { Compilation, Compiler } from "webpack";
+import { Compilation, Compiler, type WebpackPluginInstance } from "webpack";
 import { PseudoSemaphore } from "../utils/pseduo-semaphore";
 import type { VerifiedPlauditWordpressWebpackConfig } from "../utils/common-config-helpers";
-import { type ParsedAssetJsonProvider, WebpackPlugin } from "../shared";
+import { type ParsedAssetJsonProvider } from "../shared";
 type TapWithAssetsJsonOptions = {
     name?: string;
     stage?: (typeof Compilation.PROCESS_ASSETS_STAGE_REPORT) | (typeof Compilation.PROCESS_ASSETS_STAGE_ANALYSE);
@@ -9,7 +9,7 @@ type TapWithAssetsJsonOptions = {
 };
 type TapWithAssetsJsonFn = Parameters<Compilation['hooks']['processAssets']['tapPromise']>[1];
 type TapWithParsedAssetsJsonFn = (parsedAssetJsonProvider: ParsedAssetJsonProvider, assets: Parameters<TapWithAssetsJsonFn>[0]) => Promise<void> | void;
-export declare abstract class AbstractBiPhasicGroupPlugin implements WebpackPlugin {
+export declare abstract class AbstractBiPhasicGroupPlugin implements WebpackPluginInstance {
     protected readonly config: VerifiedPlauditWordpressWebpackConfig;
     readonly group: string;
     private readonly semaphores;

package/dist/plugins/MiniCSSExtractPluginErrorCleaner.d.ts

@@ -1,5 +1,4 @@
-import type { Compiler } from "webpack";
-import type { WebpackPlugin } from "../shared";
-export declare class MiniCSSExtractPluginErrorCleaner implements WebpackPlugin {
+import type { Compiler, WebpackPluginInstance } from "webpack";
+export declare class MiniCSSExtractPluginErrorCleaner implements WebpackPluginInstance {
     apply(compiler: Compiler): void;
 }

package/dist/plugins/PackageConfigSanityChecker.d.ts

@@ -1,5 +1,4 @@
-import type { Compiler } from "webpack";
-import type { WebpackPlugin } from "../shared";
-export declare class PackageConfigSanityChecker implements WebpackPlugin {
+import type { Compiler, WebpackPluginInstance } from "webpack";
+export declare class PackageConfigSanityChecker implements WebpackPluginInstance {
     apply(compiler: Compiler): void;
 }

package/dist/plugins/VariablesJSMonitorPlugin.d.ts

@@ -1,7 +1,6 @@
 import type { VerifiedPlauditWordpressWebpackConfig } from "../utils/common-config-helpers";
-import type { Compiler } from "webpack";
-import type { WebpackPlugin } from "../shared";
-export declare class VariablesJSMonitorPlugin implements WebpackPlugin {
+import type { Compiler, WebpackPluginInstance } from "webpack";
+export declare class VariablesJSMonitorPlugin implements WebpackPluginInstance {
     private readonly config;
     constructor(config: VerifiedPlauditWordpressWebpackConfig);
     apply(compiler: Compiler): void;

package/dist/plugins/WPMLConfigBuilder.d.ts

@@ -1,7 +1,6 @@
-import { type WebpackPlugin } from "../shared";
 import { AbstractBiPhasicGroupAndEntryPlugin } from "./AbstractBiPhasicGroupAndEntryPlugin";
-import { type Compiler } from "webpack";
-export declare class WPMLConfigBuilderPlugin implements WebpackPlugin {
+import { type Compiler, type WebpackPluginInstance } from "webpack";
+export declare class WPMLConfigBuilderPlugin implements WebpackPluginInstance {
     private readonly destDir;
     private readonly referencePlugin;
     private static jsdomInstance?;

package/dist/shared.d.ts

@@ -1,7 +1,7 @@
 import { PHPWriter } from "@plaudit/php-writer";
 import { HereOrNowDoc } from "@plaudit/php-writer/expressions";
 import type { Options as PostcssFunctionsOptions } from "postcss-functions";
-import { type AssetInfo, type Compilation, type Configuration, type Entrypoint, WebpackError, type Compiler } from "webpack";
+import { type AssetInfo, type Compilation, type Configuration, type Entrypoint, WebpackError } from "webpack";
 import { SourceType } from "./utils/entrypoint-resolution-logic";
 import type { NormalizedEnqueuingControlFlags } from "./utils/path-query-and-related-helpers";
 export * from "./utils/entrypoint-resolution-logic";
@@ -103,9 +103,6 @@ export declare function constantEntries<K extends string, V>(object: {
     [k in K]: V;
 }): [K, V][];
 export declare function determineCurrentSourceType(dest: string | AdvancedOutputConfig, srcIsDirectory: boolean): SourceType;
-export interface WebpackPlugin {
-    apply(compiler: Compiler): void;
-}
 export type ObjectIndividualExternalDepConfig = {
     import?: string | [string, ...string[]];
     handle: string;
@@ -124,13 +121,13 @@ export type AdvancedOutputConfig = {
     bundleAnalyzer?: boolean | 'no-auto-open';
     locations?: UsageLocations | UsageLocations['handle'];
     lazyLoader?: string;
-    pathQueryParameters?: PathQueryParameters;
     enqueuingFlags?: NormalizedEnqueuingControlFlags;
 };
-type OptionalCfgFields = 'directoryLayout' | 'externalize' | 'lazyLoader' | 'pathQueryParameters';
+type OptionalCfgFields = 'directoryLayout' | 'externalize' | 'lazyLoader';
 export type VerifiedAdvancedOutputConfig = Required<Omit<AdvancedOutputConfig, 'locations' | 'enqueuingFlags' | OptionalCfgFields>> & Pick<AdvancedOutputConfig, OptionalCfgFields> & {
     enqueuingFlags: NormalizedEnqueuingControlFlags | undefined;
     locations: NormalizedUsageLocations;
+    pathQueryParameters?: PathQueryParameters;
 };
 export type SourcesObject = Record<string, string | AdvancedOutputConfig | boolean>;
 export type PlauditWordpressWebpackConfig = {
@@ -158,6 +155,13 @@ export type PlauditWordpressWebpackConfig = {
     onlyRunPostCSSOnPCSS?: boolean;
     useBlockSupportsAsThemeJsonDefaults?: boolean;
 };
+/** Unified-loader watch output: `dist` → `dist-dev` when SERVER_MODE is development. */
+export declare function shouldWriteDistDev(config: Pick<PlauditWordpressWebpackConfig, 'outputDir' | 'useUnifiedLoader' | 'omitDistDev'>): boolean;
+/**
+ * This MUST be kept in sync with the copy in @plaudit/dev-webpack-plugin
+ * @returns true for `dist-dev` (or any `*-dev` output folder produced by {@link shouldWriteDistDev}).
+ */
+export declare function isDistDevOutputPath(outputPath: string): boolean;
 export declare function applyStandards(config: PlauditWordpressWebpackConfig): {
     readonly standard?: "2026-03-13";
     readonly standaloneBlocks?: boolean;
@@ -235,8 +239,6 @@ export type TupleOf<T, N extends number> = N extends N ? number extends N ? T[]
 type _TupleOf<T, N extends number, R extends unknown[]> = R['length'] extends N ? R : _TupleOf<T, N, [T, ...R]>;
 export declare function arrayIsLength<T, N extends number>(arr: T[] | null | undefined, length: N): arr is TupleOf<T, N>;
 export declare function kebabCase(value: string): string;
-export declare function loadEnvFile(filePath: string): Promise<Record<string, string>>;
-export declare function parseEnvFile(contents: string): Record<string, string>;
 export declare function newCleanWebpackError(error: string | ConstructorParameters<typeof WebpackError>): WebpackError;
 export declare function newWebpackErrorForFile(error: string | ConstructorParameters<typeof WebpackError>, file: string): WebpackError;
 /**

package/dist/shared.js

@@ -25,6 +25,8 @@ exports.isNormalizedUsageLocations = isNormalizedUsageLocations;
 exports.constantKeys = constantKeys;
 exports.constantEntries = constantEntries;
 exports.determineCurrentSourceType = determineCurrentSourceType;
+exports.shouldWriteDistDev = shouldWriteDistDev;
+exports.isDistDevOutputPath = isDistDevOutputPath;
 exports.applyStandards = applyStandards;
 exports.resolveStandard = resolveStandard;
 exports.convertUsageLocationsHandleToEmittableHandle = convertUsageLocationsHandleToEmittableHandle;
@@ -39,8 +41,6 @@ exports.getHandleGroup = getHandleGroup;
 exports.hasAtLeastOneItem = hasAtLeastOneItem;
 exports.arrayIsLength = arrayIsLength;
 exports.kebabCase = kebabCase;
-exports.loadEnvFile = loadEnvFile;
-exports.parseEnvFile = parseEnvFile;
 exports.newCleanWebpackError = newCleanWebpackError;
 exports.newWebpackErrorForFile = newWebpackErrorForFile;
 exports.emitResolveBaseUriFunction = emitResolveBaseUriFunction;
@@ -56,7 +56,6 @@ exports.instanceOfNodeError = instanceOfNodeError;
 exports.shouldBeSkipped = shouldBeSkipped;
 const node_crypto_1 = require("node:crypto");
 const node_fs_1 = require("node:fs");
-const promises_1 = require("node:fs/promises");
 const node_path_1 = __importDefault(require("node:path"));
 const php_writer_1 = require("@plaudit/php-writer");
 const expressions_1 = require("@plaudit/php-writer/expressions");
@@ -115,6 +114,17 @@ function determineCurrentSourceType(dest, srcIsDirectory) {
         return dest.directoryLayout;
     }
 }
+/** Unified-loader watch output: `dist` → `dist-dev` when SERVER_MODE is development. */
+function shouldWriteDistDev(config) {
+    return !!(config.outputDir && config.useUnifiedLoader && !config.omitDistDev && (process.env['SERVER_MODE'] ?? 'development') === 'development');
+}
+/**
+ * This MUST be kept in sync with the copy in @plaudit/dev-webpack-plugin
+ * @returns true for `dist-dev` (or any `*-dev` output folder produced by {@link shouldWriteDistDev}).
+ */
+function isDistDevOutputPath(outputPath) {
+    return node_path_1.default.basename(outputPath.replace(/[/\\]+$/, '')).endsWith('-dev');
+}
 function applyStandards(config) {
     switch (config.standard) {
         case '2026-03-13':
@@ -224,17 +234,6 @@ function kebabCase(value) {
     const kebabCaseRegexes = [[/([a-z])([A-Z])/g, "$1-$2"], [/[\s_.\-]+/g, "-"]];
     return kebabCaseRegexes.reduce((str, [pattern, replacement]) => str.replace(pattern, replacement), value).toLowerCase();
 }
-async function loadEnvFile(filePath) {
-    return (0, promises_1.readFile)(filePath, 'utf-8').then(parseEnvFile, () => ({}));
-}
-function parseEnvFile(contents) {
-    return Object.fromEntries(contents.split(/(\r?\n)+/).map(line => line.trim())
-        .filter(line => line.length > 0 && !line.startsWith("#") && !line.startsWith("//"))
-        .map(line => {
-        const equalsPos = line.indexOf('=');
-        return equalsPos === -1 ? [line, ""] : [line.substring(0, equalsPos), line.substring(equalsPos + 1)];
-    }));
-}
 function newCleanWebpackError(error) {
     const res = typeof error === 'string' ? new webpack_1.WebpackError(error) : new webpack_1.WebpackError(...error);
     res.hideStack = true;

package/dist/utils/common-config-helpers.d.ts

@@ -1,6 +1,6 @@
 import type { AbstractBiPhasicGroupAndEntryPlugin, EntryProvider } from "../plugins/AbstractBiPhasicGroupAndEntryPlugin";
 import type { AdditionalDependencyInjectorPlugin } from "../plugins/AdditionalDependencyInjectorPlugin";
-import { EntrypointFields, PlauditWordpressWebpackConfig, BlockEntrypointInfo, VerifiedAdvancedOutputConfig, MinimumViableMetadata, WebpackPlugin } from "../shared";
+import { EntrypointFields, PlauditWordpressWebpackConfig, BlockEntrypointInfo, VerifiedAdvancedOutputConfig, MinimumViableMetadata } from "../shared";
 import type { Compiler, Configuration, DynamicEntryPlugin, WebpackPluginInstance } from "webpack";
 import type WebpackRemoveEmptyScriptsPlugin from "webpack-remove-empty-scripts";
 export type VerifiedPlauditWordpressWebpackConfig = Required<Omit<PlauditWordpressWebpackConfig, 'variables' | 'src' | 'externals' | 'standard'>> & {
@@ -8,7 +8,7 @@ export type VerifiedPlauditWordpressWebpackConfig = Required<Omit<PlauditWordpre
     currentVariables: Record<string, any>;
 } & Pick<PlauditWordpressWebpackConfig, 'externals'>;
 export type CommonPluginConfig = {
-    plugins: (WebpackPluginInstance | WebpackPlugin | ((this: Compiler, compiler: Compiler) => void))[];
+    plugins: (WebpackPluginInstance | ((this: Compiler, compiler: Compiler) => void))[];
     removeEmptyScriptsPlugin: WebpackRemoveEmptyScriptsPlugin;
     makeAdditionalDependencyInjectorPlugin(referencePlugin: AbstractBiPhasicGroupAndEntryPlugin<any>): AdditionalDependencyInjectorPlugin;
 };

package/dist/utils/common-config-helpers.js

@@ -390,10 +390,12 @@ function commonMakeWebpackConfig(config, commonConfig, webpackConfig, externaliz
         outputLibrary = webpackConfig.output?.library;
     }
     const extensions = processingModules ? ['.mjsx', '.mjs', '.mtsx', '.mts', '...'] : ['.jsx', '.tsx', '.ts', '...'];
+    // `dist` (SERVER_MODE=production, or omitDistDev) is always minified production. `dist-dev` follows NODE_ENV so `wp-scripts start` stays fast.
+    const isProductionBuild = !(0, shared_1.isDistDevOutputPath)(config.outputDir) || process.env['NODE_ENV'] === 'production';
     return {
         ...webpackConfig,
-        devtool: 'source-map',
-        mode: "production",
+        devtool: isProductionBuild ? 'source-map' : (webpackConfig.devtool ?? 'eval-cheap-module-source-map'),
+        mode: isProductionBuild ? 'production' : 'development',
         output: {
             ...webpackConfig.output,
             path: outPath,
@@ -404,6 +406,7 @@ function commonMakeWebpackConfig(config, commonConfig, webpackConfig, externaliz
         },
         optimization: {
             ...webpackConfig.optimization,
+            minimize: isProductionBuild,
             splitChunks: {
                 ...(webpackConfig.optimization?.splitChunks || {}),
                 cacheGroups: {
@@ -423,10 +426,12 @@ function commonMakeWebpackConfig(config, commonConfig, webpackConfig, externaliz
                     default: false
                 }
             },
-            minimizer: [
-                ...(webpackConfig.optimization?.minimizer || []),
-                new css_minimizer_webpack_plugin_1.default()
-            ]
+            minimizer: isProductionBuild
+                ? [
+                    ...(webpackConfig.optimization?.minimizer || []),
+                    new css_minimizer_webpack_plugin_1.default()
+                ]
+                : webpackConfig.optimization?.minimizer
         },
         module: {
             ...webpackConfig.module,

package/dist/utils/entrypoint-resolution-logic.d.ts

@@ -1,10 +1,13 @@
-import { type AdvancedOutputConfig, type PlauditWordpressWebpackConfig } from "../shared";
+import { type AdvancedOutputConfig, type PathQueryParameters, type PlauditWordpressWebpackConfig } from "../shared";
 export declare const enum SourceType {
     blocks = "blocks",
     extensions = "extensions",
     plain = "plain"
 }
 export declare function isSourceType(str: string): str is SourceType;
-type Entrypoints = [string, AdvancedOutputConfig][];
+type ResolvedSourceConfig = AdvancedOutputConfig & {
+    pathQueryParameters?: PathQueryParameters;
+};
+type Entrypoints = [string, ResolvedSourceConfig][];
 export declare function resolveAllConfigLevelEntrypoints(config: PlauditWordpressWebpackConfig, projectRoot?: string): Record<'staticEntrypoints' | 'dynamicEntrypoints', Entrypoints>;
 export {};

package/dist/wordpress-scripts-wrapper.js

@@ -10,7 +10,6 @@ const entrypoint_resolution_logic_1 = require("./utils/entrypoint-resolution-log
 const common_config_helpers_1 = require("./utils/common-config-helpers");
 const path_query_and_related_helpers_1 = require("./utils/path-query-and-related-helpers");
 const AdditionalDependencyInjectorPlugin_1 = require("./plugins/AdditionalDependencyInjectorPlugin");
-const BrowserSyncPlugin_1 = require("./plugins/BrowserSyncPlugin");
 const dependency_extraction_webpack_plugin_config_builder_1 = require("./plugins/dependency-extraction-webpack-plugin-config-builder");
 const EnhancedDynamicEntryPlugin_1 = require("./plugins/EnhancedDynamicEntryPlugin");
 const ExtensionsConfigFileGeneratorPlugin_1 = require("./plugins/ExtensionsConfigFileGeneratorPlugin");
@@ -149,7 +148,7 @@ function buildVerifiedConfig(config) {
     config = (0, shared_1.applyStandards)(config);
     const { standaloneBlocks = false, stats = 'errors-warnings', variables: rawVariables, verbose = process.argv.includes('--verbose') || process.env['VERBOSE'] === 'true', postcss = {}, externals, assumeGlobalizedPlauditLibraries = true, useWebpackResourceFiltering = true, plainEntrypointsVersion = 1, srcDir = "", useUnifiedLoader = false, includePostInitFallback = false, omitDistDev = false, onlyRunPostCSSOnPCSS = false, useBlockSupportsAsThemeJsonDefaults = true, } = config;
     let outputDir = config.outputDir ?? "";
-    if (outputDir && useUnifiedLoader && !omitDistDev && (process.env['SERVER_MODE'] ?? 'development') === 'development') {
+    if ((0, shared_1.shouldWriteDistDev)({ outputDir, useUnifiedLoader, omitDistDev })) {
         outputDir += "-dev";
     }
     let srcPrefixes;
@@ -192,6 +191,10 @@ function buildVerifiedConfig(config) {
     const allocatedDestinations = {};
     const partiallyVerifiedSources = rawSources.map(([src, config]) => {
         const { destination, additionalDependencies = [], assumeGlobalizedPlauditLibraries = cfg.assumeGlobalizedPlauditLibraries, bundleAnalyzer = false, directoryLayout, externalize, withLegacyBlocksIn = false, lazyLoader, pathQueryParameters: rawPathQueryParameters, enqueuingFlags: rawEnqueuingFlags, locations: rawSourceLocations, } = config;
+        // This guards against a crash later on down the line due to trying to run a spread on a boolean
+        if (externalize && typeof externalize !== 'string' && typeof externalize !== 'object') {
+            throw new TypeError(`externalize must be a string, an array or an object, but "${src}" set externalize to a ${typeof externalize}`);
+        }
         const { flags: queryEnqueuingFlags, remainder: pathQueryParameters, handle: pathQueryHandle } = (0, path_query_and_related_helpers_1.unpackEnqueuingControlFlagsFromPathQueryParameters)(rawPathQueryParameters, src, 'path query parameters');
         const enqueuingFlags = (0, path_query_and_related_helpers_1.mergeTwoEnqueuingControlFlagSets)(src, rawEnqueuingFlags, queryEnqueuingFlags);
         const normalizedParts = { additionalDependencies, assumeGlobalizedPlauditLibraries, bundleAnalyzer, directoryLayout, externalize, withLegacyBlocksIn, lazyLoader };
@@ -333,34 +336,73 @@ function withDerivedOutputDir(cfg, sources) {
         })
     };
 }
+let forkTsCheckerInstalled = false;
+function isTypeScriptSourceFile(file) {
+    return /\.[cm]?tsx?$/i.test(file.split('?')[0] ?? '');
+}
+const prefixes = ['c', 'm', ''];
+const suffixes = ['x', ''];
+const tsExtensions = prefixes.map(prefix => prefix + "ts").flatMap(name => suffixes.map(suffix => name + suffix));
 function handleDisablingTSCheckerIfNecessary(srcRoot, scriptExtension, plugins) {
-    if (process.env["NO_TS_CHECKER"] !== "true") {
-        const include = (Array.isArray(srcRoot) ? srcRoot : [srcRoot])
-            .filter(sr => (0, node_path_1.extname)(sr).length === 0 || (0, shared_1.scriptOrStyleTest)(sr, scriptExtension) === "script")
-            .map(sr => (0, node_path_1.extname)(sr).length > 0 ? sr : (0, node_path_1.join)(sr, "**", "*"));
-        if (include.length > 0) {
-            plugins.push(new fork_ts_checker_webpack_plugin_1.default({
-                async: true,
-                typescript: {
-                    diagnosticOptions: {
-                        semantic: true,
-                        syntactic: true,
-                    },
-                    configOverwrite: {
-                        include,
-                        compilerOptions: {
-                            skipLibCheck: true
-                        }
-                    }
-                },
-                issue: {
-                    exclude(issue) {
-                        return issue.code === 'TS18003'; // This hides the "no TypeScript files found" error while still monitoring the directory
-                    }
-                }
-            }));
+    if (process.env["NO_TS_CHECKER"] === "true" || forkTsCheckerInstalled) {
+        return;
+    }
+    const include = [];
+    for (const sr of (Array.isArray(srcRoot) ? srcRoot : [srcRoot])) {
+        if ((0, node_path_1.extname)(sr).length === 0) {
+            include.push(...tsExtensions.map(tsExt => (0, node_path_1.join)(sr, "**", `*.${tsExt}`)));
+        }
+        else if ((0, shared_1.scriptOrStyleTest)(sr, scriptExtension) === "script") {
+            include.push(sr);
         }
     }
+    if (include.length === 0) {
+        return;
+    }
+    forkTsCheckerInstalled = true;
+    let logTsStatus = true;
+    plugins.push({
+        apply(compiler) {
+            compiler.hooks.watchRun.tap('PlauditForkTsCheckerCssQuiet', watchingCompiler => {
+                const changed = [
+                    ...(watchingCompiler.modifiedFiles ?? []),
+                    ...(watchingCompiler.removedFiles ?? [])
+                ];
+                logTsStatus = changed.length === 0 || changed.some(isTypeScriptSourceFile);
+            });
+        }
+    });
+    plugins.push(new fork_ts_checker_webpack_plugin_1.default({
+        async: true,
+        logger: {
+            log(message) {
+                if (!logTsStatus) {
+                    return;
+                }
+                console.log(message);
+            },
+            error(message) {
+                console.error(message);
+            }
+        },
+        typescript: {
+            diagnosticOptions: {
+                semantic: true,
+                syntactic: true,
+            },
+            configOverwrite: {
+                include,
+                compilerOptions: {
+                    skipLibCheck: true
+                }
+            }
+        },
+        issue: {
+            exclude(issue) {
+                return issue.code === 'TS18003';
+            }
+        }
+    }));
 }
 function buildCommonPluginConfig(webpackConfig, config, bundleAnalyzer, assumeGlobalizedPlauditLibraries, externalize) {
     const plugins = webpackConfig.plugins?.filter(v => !!v)
@@ -405,7 +447,13 @@ function buildCommonPluginConfig(webpackConfig, config, bundleAnalyzer, assumeGl
     }
     const builtDependencyExtractionWebpackPlugin = (0, dependency_extraction_webpack_plugin_config_builder_1.makeDependencyExtractionPlugin)(config.externals, assumeGlobalizedPlauditLibraries, externalize);
     plugins[dependencyExtractionPluginIndex] = builtDependencyExtractionWebpackPlugin;
-    plugins.push(new BrowserSyncPlugin_1.BrowserSyncPlugin());
+    if ((0, shared_1.isDistDevOutputPath)(config.outputDir)) {
+        try {
+            const { PlauditDevPlugin } = require("@plaudit/dev-webpack-plugin");
+            plugins.push(new PlauditDevPlugin());
+        }
+        catch { }
+    }
     return {
         plugins, removeEmptyScriptsPlugin,
         makeAdditionalDependencyInjectorPlugin(referencePlugin) {
@@ -452,7 +500,7 @@ function destToKey(dest) {
         : dest.externalize?.toString() ?? "undefined";
     return [dest.assumeGlobalizedPlauditLibraries, dest.bundleAnalyzer, externalize].join("~");
 }
-function processIndividualWebpackConfig(config, webpackConfig, sources, canClean) {
+function processIndividualWebpackConfig(config, webpackConfig, sources, canClean, preferNonModuleTsChecker) {
     if (webpackConfig.output?.module) {
         // This ensures that module files are emitted as module files
         webpackConfig = {
@@ -486,7 +534,9 @@ function processIndividualWebpackConfig(config, webpackConfig, sources, canClean
     return batches.map(currentBatch => {
         const { bundleAnalyzer, assumeGlobalizedPlauditLibraries, externalize } = currentBatch[0].dest;
         const { plugins, removeEmptyScriptsPlugin, makeAdditionalDependencyInjectorPlugin } = buildCommonPluginConfig(webpackConfig, config, bundleAnalyzer, assumeGlobalizedPlauditLibraries, externalize);
-        handleDisablingTSCheckerIfNecessary(currentBatch.flatMap(a => a.srcRoots), scriptExtension, plugins);
+        if (!processingModules || !preferNonModuleTsChecker) {
+            handleDisablingTSCheckerIfNecessary(currentBatch.flatMap(a => a.srcRoots), scriptExtension, plugins);
+        }
         const applicableExtensionTest = (name) => {
             return commonConfig.scriptExtension.test(name) || (!processingModules && shared_1.styleExtension.test(name));
         };
@@ -627,12 +677,13 @@ module.exports = function (config, webpackConfig = require("@wordpress/scripts/c
         webpackConfig = webpackConfig[0];
     }
     if (Array.isArray(webpackConfig)) {
+        const hasNonModuleCompiler = webpackConfig.some(cfg => !cfg.output?.module);
         return webpackConfig.toSorted((a, b) => {
             if (a.output?.module) {
                 return b.output?.module ? 0 : -1;
             }
             return b.output?.module ? 1 : 0;
-        }).flatMap(wpCfg => processIndividualWebpackConfig(cfg, wpCfg, sources, false));
+        }).flatMap(wpCfg => processIndividualWebpackConfig(cfg, wpCfg, sources, false, hasNonModuleCompiler));
     }
-    return processIndividualWebpackConfig(cfg, webpackConfig, sources, true);
+    return processIndividualWebpackConfig(cfg, webpackConfig, sources, true, false);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.96.2",
+  "version": "2.97.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "repository": {
     "type": "git",
@@ -32,19 +32,19 @@
     }
   },
   "devDependencies": {
-    "@plaudit/gutenberg-api-extensions": "^2.98.0",
-    "@types/browser-sync-webpack-plugin": "^2.2.5",
+    "@plaudit/dev-webpack-plugin": "^1.0.1",
+    "@plaudit/gutenberg-api-extensions": "^2.98.2",
     "@types/jsdom": "^28.0.3",
     "@types/node": "^25.9.5",
     "@types/postcss-functions": "^4.0.4",
     "@types/tapable": "^2.3.0",
     "@types/webpack-sources": "^3.2.3",
     "atob": "^2.1.2",
-    "css-loader": "^6.2.0",
-    "glob": "^7.1.2",
-    "jest": "^30.0.0",
-    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.9.2",
+    "css-loader": "^6.11.0",
+    "glob": "^7.2.3",
+    "jest": "^30.4.2",
+    "lodash": "^4.18.1",
+    "mini-css-extract-plugin": "^2.10.2",
     "mkdirp": "^3.0.1",
     "rimraf": "^5.0.10",
     "typescript": "^6.0.3",
@@ -57,10 +57,9 @@
     "@plaudit/postcss-silent-extend": "^3.0.0",
     "@plaudit/postcss-strip-units": "^3.0.0",
     "@plaudit/postcss-variables": "^1.1.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^6.51.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^6.53.0",
     "@wordpress/scripts": "^32.6.0",
     "autoprefixer": "^10.5.4",
-    "browser-sync": "^3.0.4",
     "copy-webpack-plugin": "10.2.4",
     "css-minimizer-webpack-plugin": "^6.0.0",
     "cssnano": "^6.1.2",
@@ -68,11 +67,11 @@
     "http-proxy-middleware": "^3.0.7",
     "jsdom": "^29.1.1",
     "json2php": "0.0.12",
-    "postcss": "^8.5.19",
+    "postcss": "^8.5.26",
     "postcss-calc": "^9.0.1",
     "postcss-discard-comments": "^6.0.2",
     "postcss-functions": "^4.0.2",
-    "postcss-import": "^16.1.1",
+    "postcss-import": "^16.2.0",
     "postcss-load-config": "^4.0.2",
     "postcss-loader": "^7.3.4",
     "postcss-media-minmax": "^5.0.0",
@@ -82,10 +81,18 @@
     "postcss-reporter": "^7.1.0",
     "postcss-simple-vars": "^7.0.1",
     "postcss-url": "^10.1.4",
-    "webpack": "^5.108.4",
+    "webpack": "^5.109.2",
     "webpack-remove-empty-scripts": "^1.1.1",
     "xml-formatter": "^3.7.0"
   },
+  "peerDependencies": {
+    "@plaudit/dev-webpack-plugin": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@plaudit/dev-webpack-plugin": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=20"
   },

package/dist/plugins/BrowserSyncPlugin.d.ts

@@ -1,25 +0,0 @@
-import { type WebpackPlugin } from "../shared";
-import browserSync, { type BrowserSyncInstance } from "browser-sync";
-import type { Compiler } from "webpack";
-export type PluginOptions = {
-    reload: boolean;
-    name: string;
-    callback?: (err: Error, bs: BrowserSyncInstance) => any;
-    injectCss: boolean;
-    middlewareBuilder?: (options: browserSync.Options) => browserSync.Options['middleware'];
-};
-export declare class BrowserSyncPlugin implements WebpackPlugin {
-    private static isBrowserSyncRunning;
-    private static browserSyncPluginOptions?;
-    private readonly pluginOptions;
-    private readonly browserSyncInstance;
-    private isWebpackWatching;
-    private mostRecentChunkHashes;
-    private shouldNotify;
-    constructor(pluginOptions?: Partial<PluginOptions>);
-    private static getBrowserSyncPluginOptions;
-    private static findEnvFile;
-    apply(compiler: Compiler): void;
-    private getCssOnlyEmittedAssetsNames;
-    private static getSiteUrls;
-}

package/dist/plugins/BrowserSyncPlugin.js

@@ -1,212 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BrowserSyncPlugin = void 0;
-const node_child_process_1 = __importDefault(require("node:child_process"));
-const node_fs_1 = __importDefault(require("node:fs"));
-const node_path_1 = __importDefault(require("node:path"));
-const shared_1 = require("../shared");
-const browser_sync_1 = __importDefault(require("browser-sync"));
-const http_proxy_middleware_1 = require("http-proxy-middleware");
-class BrowserSyncPlugin {
-    static isBrowserSyncRunning = false;
-    static browserSyncPluginOptions;
-    pluginOptions;
-    browserSyncInstance;
-    isWebpackWatching = false;
-    mostRecentChunkHashes = {};
-    shouldNotify = false;
-    constructor(pluginOptions) {
-        this.pluginOptions = { reload: true, name: "plaudit-bs-plugin", injectCss: true, ...pluginOptions };
-        this.browserSyncInstance = browser_sync_1.default.has(this.pluginOptions.name) ? browser_sync_1.default.get(this.pluginOptions.name) : browser_sync_1.default.create(this.pluginOptions.name);
-    }
-    static getBrowserSyncPluginOptions() {
-        return BrowserSyncPlugin.browserSyncPluginOptions ?? (BrowserSyncPlugin.browserSyncPluginOptions = new Promise(async (resolve) => {
-            const envFilePath = BrowserSyncPlugin.findEnvFile();
-            const envFile = envFilePath ? await (0, shared_1.loadEnvFile)(envFilePath) : {};
-            const prefixes = BrowserSyncPlugin.getSiteUrls();
-            const targetPort = envFile["WEB_PORT_SSL"]?.match(/^\d+$/) ? envFile["WEB_PORT_SSL"] : "8443";
-            const targetHost = targetPort === "443" ? "localhost" : `localhost:${targetPort}`;
-            if (prefixes.length === 0 || prefixes.every(prefix => prefix.startsWith("localhost"))) {
-                resolve([{
-                        host: 'localhost',
-                        port: 3000,
-                        https: true,
-                        proxy: `https://${targetHost}`
-                    }, {}]);
-            }
-            else {
-                resolve([{
-                        port: 3000,
-                        listen: "0.0.0.0",
-                        https: true,
-                        open: false,
-                        callbacks: {
-                            ready(err, bsi) {
-                                // This ensures that the opened URL is actually a valid one
-                                import("open").then(open => open.default(`https://${prefixes[0]?.replace(/:\d{2,4}/, "")}:${bsi.getOption("port") ?? 3000}`));
-                            }
-                        }
-                    }, {
-                        middlewareBuilder: (options) => {
-                            const proxyPort = options.port?.toString() ?? "3000";
-                            const router = prefixes.reduce((router, prefix) => {
-                                router[`${prefix}:${proxyPort}`] = {
-                                    protocol: 'https:',
-                                    slashes: true,
-                                    auth: null,
-                                    host: prefix,
-                                    port: targetPort,
-                                    hostname: targetHost,
-                                    hash: null,
-                                    search: null,
-                                    query: null,
-                                    pathname: '/',
-                                    path: '/',
-                                    href: `https://${targetHost}/`
-                                };
-                                return router;
-                            }, {});
-                            const portInjectionPattern = new RegExp(`(${prefixes.join('|')})(?!:3000)`, "gi");
-                            return (0, http_proxy_middleware_1.createProxyMiddleware)({
-                                changeOrigin: true, router, secure: false, xfwd: true, selfHandleResponse: true, target: `https://${targetHost}`,
-                                on: {
-                                    proxyRes: (0, http_proxy_middleware_1.responseInterceptor)(async (responseBuffer, proxyRes) => {
-                                        const contentType = proxyRes.headers["content-type"];
-                                        if (contentType && (contentType.startsWith("text/") || contentType === "application/x-javascript")) {
-                                            return responseBuffer.toString('utf-8').replaceAll(portInjectionPattern, "$1:3000");
-                                        }
-                                        return responseBuffer;
-                                    })
-                                }
-                            });
-                        }
-                    }]);
-            }
-        }));
-    }
-    static findEnvFile() {
-        for (let envFileHolderPath = process.cwd(); envFileHolderPath.length > 5; envFileHolderPath = node_path_1.default.dirname(envFileHolderPath)) {
-            if (node_fs_1.default.existsSync(node_path_1.default.join(envFileHolderPath, ".env"))) {
-                return node_path_1.default.join(envFileHolderPath, ".env");
-            }
-        }
-        return undefined;
-    }
-    apply(compiler) {
-        if (!process.argv.includes('--browser-sync') && process.env['BROWSER_SYNC'] !== 'true') {
-            return;
-        }
-        let devTarget = process.env['DEV_TARGET'] ?? process.argv.find(a => a.startsWith("--dev-target="))?.substring(13);
-        if (devTarget === undefined) {
-            const flagIndex = process.argv.findIndex(a => a === "--dev-target");
-            if (flagIndex > -1) {
-                devTarget = process.argv[flagIndex + 1];
-            }
-        }
-        if (devTarget !== undefined && devTarget !== node_path_1.default.basename(process.cwd()) && !(devTarget === "theme" && node_fs_1.default.existsSync(node_path_1.default.join(process.cwd(), "style.css")))) {
-            return;
-        }
-        compiler.hooks.watchRun.tap(BrowserSyncPlugin.name, () => {
-            this.isWebpackWatching = true;
-        });
-        compiler.hooks.compilation.tap(BrowserSyncPlugin.name, () => {
-            if (BrowserSyncPlugin.isBrowserSyncRunning && this.shouldNotify) {
-                this.browserSyncInstance.notify('Rebuilding...');
-            }
-        });
-        compiler.hooks.done.tapPromise(BrowserSyncPlugin.name, async (stats) => {
-            if (!this.isWebpackWatching) {
-                return;
-            }
-            if (!BrowserSyncPlugin.isBrowserSyncRunning) {
-                const [browserSyncOptions, pluginOptions] = await BrowserSyncPlugin.getBrowserSyncPluginOptions();
-                const actualPluginOptions = { ...this.pluginOptions, ...pluginOptions };
-                const middleware = actualPluginOptions.middlewareBuilder?.(browserSyncOptions);
-                this.browserSyncInstance.init(middleware
-                    ? { ...browserSyncOptions, server: { middleware: Array.isArray(middleware) ? middleware : [middleware] } }
-                    : browserSyncOptions, this.pluginOptions.callback);
-                if (browserSyncOptions.notify) {
-                    this.shouldNotify = true;
-                }
-                BrowserSyncPlugin.isBrowserSyncRunning = true;
-            }
-            if (this.pluginOptions.reload) {
-                if (this.pluginOptions.injectCss) {
-                    const cssOnlyEmittedAssets = this.getCssOnlyEmittedAssetsNames(stats);
-                    if (cssOnlyEmittedAssets !== undefined) {
-                        this.browserSyncInstance.reload(cssOnlyEmittedAssets);
-                        return;
-                    }
-                }
-                this.browserSyncInstance.reload();
-            }
-        });
-    }
-    getCssOnlyEmittedAssetsNames(stats) {
-        const compiledStats = stats.compilation.getStats().toJson({
-            hash: true,
-            publicPath: true,
-            assets: true,
-            chunks: true,
-            modules: false,
-            source: false,
-            errorDetails: false,
-            timings: false
-        });
-        const chunks = compiledStats.chunks
-            ?.filter((chunk) => chunk.names !== undefined && chunk.files !== undefined);
-        if (!chunks) {
-            return undefined;
-        }
-        const mostRecentChunkHashes = this.mostRecentChunkHashes;
-        this.mostRecentChunkHashes = Object.fromEntries(chunks.flatMap(chunk => chunk.names.map(cn => [cn, chunk.hash])));
-        if (Object.keys(mostRecentChunkHashes).length !== chunks.length) {
-            return undefined;
-        }
-        const changedFilenames = chunks
-            .filter(chunk => chunk.names.some(name => mostRecentChunkHashes[name] !== chunk.hash))
-            .flatMap(chunk => [...chunk.files, ...(chunk.auxiliaryFiles ?? [])])
-            .filter(filename => !filename.endsWith(".asset.php"));
-        if (changedFilenames.length === 0) {
-            return undefined;
-        }
-        for (const filename of changedFilenames) {
-            if (!filename.includes(".css")) {
-                return undefined;
-            }
-        }
-        return changedFilenames;
-    }
-    static getSiteUrls() {
-        //docker container inspect "$(docker compose ps --format=json | jq '. | select(. | contains({"Service": "wordpress"})) | .ID' -r)" | jq '.[].Config.Env'
-        const serviceId = node_child_process_1.default.spawnSync("docker", ["compose", "ps", "--format=json"], { encoding: "utf-8", stdio: ["ignore", "pipe", "inherit"] })
-            .stdout.trim().split("\n").map(item => JSON.parse(item.trim())).find(item => item.Service === "wordpress")?.ID;
-        if (serviceId === undefined) {
-            return ["localhost"]; // This will only happen for Tomcat or misconfigured containers, both of which should use localhost
-        }
-        const inspectionResult = node_child_process_1.default.spawnSync("docker", ["container", "inspect", "--format=json", serviceId], { encoding: "utf-8", stdio: ["ignore", "pipe", "inherit"] })
-            .stdout.trim();
-        const containerEnv = Object.fromEntries(JSON.parse(inspectionResult)[0]?.Config.Env.map((envEntry) => {
-            const equalSignIndex = envEntry.indexOf('=');
-            return [envEntry.substring(0, equalSignIndex), envEntry.substring(equalSignIndex + 1)];
-        }));
-        if (containerEnv['WORDPRESS_MAPPED_DOMAINS'] !== '1') {
-            return ["localhost:8443"]; //This will only happen for legacy WordPress sites
-        }
-        let siteUrls;
-        const multisiteUrlsProcess = node_child_process_1.default.spawnSync("docker", ["compose", "exec", "--user=www-data", "wordpress", "wp", "site", "list", "--field=url", "--quiet"], { encoding: "utf-8", stdio: ["ignore", "pipe", "ignore"] }); // We're forced to mute stderr here because it is otherwise almost guaranteed to print
-        if (!multisiteUrlsProcess.error && !multisiteUrlsProcess.status && !multisiteUrlsProcess.signal) {
-            siteUrls = multisiteUrlsProcess.stdout.split("\n").map(line => line.trim()).filter(line => line.length > 0);
-        }
-        else {
-            siteUrls = [node_child_process_1.default.spawnSync("docker", ["compose", "exec", "--user=www-data", "wordpress", "wp", "option", "get", "siteurl"], { encoding: "utf-8", stdio: ["ignore", "pipe", "inherit"] }).stdout.trim()];
-        }
-        // Because mapped domain sites that are using my mapping scheme hyphenate instances of "www.", this is an effective test for whether it is in use.
-        // If the URL still has the "www.", then it is using David's mapping scheme and should be accessed via localhost
-        return siteUrls.map(siteUrl => siteUrl.includes("www.") ? "localhost" : siteUrl).map(siteUrl => siteUrl.replace(/^https?:\/\//i, ""));
-    }
-}
-exports.BrowserSyncPlugin = BrowserSyncPlugin;