@plaudit/webpack-extensions 2.0.1 → 2.1.0

package/build/wordpress-scripts-wrapper/static-configs.d.ts

@@ -0,0 +1,2 @@
+import type { PostCSSLoaderOptions } from "postcss-loader/dist/config";
+export declare function postcssConfigBuilder(verbose: boolean, legacyPostcssPlugins: boolean, variables: (name: string) => string | undefined): PostCSSLoaderOptions;

package/build/wordpress-scripts-wrapper/static-configs.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postcssConfigBuilder = void 0;
+const cssnano_1 = __importDefault(require("cssnano"));
+// Options: calc
+const calcOptions = { precision: 4, mediaQueries: true, selectors: true };
+// Options: autoprefixerOptions
+const autoprefixerOptions = { grid: "autoplace" };
+// Nano Config
+// http://cssnano.co/guides/optimisations/  For the value to use click on one and then
+const nanoConfig = {
+    preset: [
+        'cssnano-preset-default',
+        {
+            safe: true,
+            autoprefixer: false,
+            calc: false,
+            colormin: true,
+            convertValues: false,
+            discardComments: {
+                remove(comment) {
+                    const commentKeepRegexp = /^!|@cms|@preserve|@cc_on|\bMIT\b|\bMPL\b|\bGPL\b|\bBSD\b|\bISCL\b|\(c\)|\bLicense\b|\bCopyright\b/i;
+                    return !commentKeepRegexp.test(comment);
+                }
+            },
+            discardDuplicates: true,
+            discardEmpty: true,
+            discardOverridden: true,
+            discardUnused: false,
+            mergeIdents: false,
+            mergeLonghand: true,
+            mergeRules: false,
+            minifyFontValues: true,
+            minifyGradients: true,
+            minifyParams: true,
+            minifySelectors: true,
+            normalizeCharset: true,
+            normalizeDisplayValues: true,
+            normalizePositions: true,
+            normalizeRepeatStyle: true,
+            normalizeString: true,
+            normalizeTimingFunctions: true,
+            normalizeUnicode: true,
+            normalizeUrl: true,
+            normalizeWhitespace: true,
+            orderedValues: true,
+            reduceIdents: false,
+            reduceInitial: true,
+            reduceTransforms: true,
+            svgo: false,
+            uniqueSelectors: true,
+            zindex: false,
+            filterPlugins: false // I don't know where this one came from. It is not listed in the documentation.
+        }
+    ]
+};
+function postcssConfigBuilder(verbose, legacyPostcssPlugins, variables) {
+    return {
+        plugins: [
+            require("postcss-import")(),
+            require("@plaudit/postcss-silent-extend")({ warnOfUnused: verbose }),
+            require("postcss-mixins")(),
+            require("@plaudit/postcss-variables")({ variables }),
+            ...(legacyPostcssPlugins ? [
+                require("postcss-quantity-queries")(),
+                require("postcss-short-position")(),
+                require("postcss-short-size")(),
+                require("postcss-short-spacing")(),
+                require("postcss-fallback")() // Legacy
+            ] : []),
+            require("postcss-property-lookup")({ logLevel: "warn" }),
+            require("@plaudit/postcss-strip-units")(),
+            require("postcss-media-minmax")(),
+            require("postcss-inline-svg")(),
+            require("postcss-nested")(),
+            require("postcss-calc")(calcOptions),
+            require("@plaudit/postcss-color-function")(),
+            require("autoprefixer")(autoprefixerOptions),
+            require("postcss-reporter")({ clearReportedMessages: true }),
+            (0, cssnano_1.default)(nanoConfig)
+        ]
+    };
+}
+exports.postcssConfigBuilder = postcssConfigBuilder;

package/build/wordpress-scripts-wrapper.js

@@ -6,11 +6,11 @@ const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const AdditionalDependencyInjectorPlugin_1 = __importDefault(require("./wordpress-scripts-wrapper/AdditionalDependencyInjectorPlugin"));
 const BlockJSONStyleRemappingPlugin_1 = __importDefault(require("./wordpress-scripts-wrapper/BlockJSONStyleRemappingPlugin"));
+const static_configs_1 = require("./wordpress-scripts-wrapper/static-configs");
 const browser_sync_webpack_plugin_1 = __importDefault(require("browser-sync-webpack-plugin"));
 const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
 const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
 const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
-const cssnano_1 = __importDefault(require("cssnano"));
 function joinPossiblyAbsolutePaths(...paths) {
     return paths.reduce((res, p) => !res || node_path_1.default.isAbsolute(p) ? p : node_path_1.default.join(res, p), '') || '.';
 }
@@ -23,62 +23,49 @@ function addEntryPointWithMapper(entrypoints, entrypoint, dir, mapper = (entrypo
         }
     }
 }
+function isTruthy(value) {
+    return !!value;
+}
 module.exports = function (config, webpackConfig = require("@wordpress/scripts/config/webpack.config")) {
-    const { legacyPostcssPlugins = false, variables = ["variables.js", "preprocess/variables.js"].map(p => node_path_1.default.join(process.cwd(), p)).filter(p => node_fs_1.default.existsSync(p)).map(p => require(p))[0] ?? {}, verbose = process.argv.includes('--verbose') } = config;
-    // Nano Config
-    // http://cssnano.co/guides/optimisations/  For the value to use click on one and then
-    const nanoConfig = {
-        preset: [
-            'cssnano-preset-default',
-            {
-                safe: true,
-                autoprefixer: false,
-                calc: false,
-                colormin: true,
-                convertValues: false,
-                discardComments: {
-                    remove(comment) {
-                        const commentKeepRegexp = /^!|@cms|@preserve|@cc_on|\bMIT\b|\bMPL\b|\bGPL\b|\bBSD\b|\bISCL\b|\(c\)|\bLicense\b|\bCopyright\b/i;
-                        return !commentKeepRegexp.test(comment);
+    const seenPaths = new Map();
+    for (const bundleName of (Array.isArray(config.src) ? config.src : Object.values(config.src))) {
+        const key = bundleName.substring(0, bundleName.length - node_path_1.default.extname(bundleName).length);
+        let seen = seenPaths.get(key);
+        if (seen === undefined) {
+            seenPaths.set(key, seen = []);
+        }
+        seen.push(bundleName);
+        node_path_1.default.basename(bundleName, node_path_1.default.extname(bundleName));
+    }
+    let projectPrefix = undefined;
+    let duplicatedPaths = "";
+    for (const sameNamePaths of seenPaths.values()) {
+        if (sameNamePaths.length > 1) {
+            if (projectPrefix === undefined) {
+                for (let p = process.cwd(); p.length > 1; p = node_path_1.default.dirname(p)) {
+                    if (node_fs_1.default.existsSync(node_path_1.default.join(p, "docker-compose.yml"))) {
+                        projectPrefix = new RegExp(`^${p}`);
+                        break;
                     }
-                },
-                discardDuplicates: true,
-                discardEmpty: true,
-                discardOverridden: true,
-                discardUnused: false,
-                mergeIdents: false,
-                mergeLonghand: true,
-                mergeRules: false,
-                minifyFontValues: true,
-                minifyGradients: true,
-                minifyParams: true,
-                minifySelectors: true,
-                normalizeCharset: true,
-                normalizeDisplayValues: true,
-                normalizePositions: true,
-                normalizeRepeatStyle: true,
-                normalizeString: true,
-                normalizeTimingFunctions: true,
-                normalizeUnicode: true,
-                normalizeUrl: true,
-                normalizeWhitespace: true,
-                orderedValues: true,
-                reduceIdents: false,
-                reduceInitial: true,
-                reduceTransforms: true,
-                svgo: false,
-                uniqueSelectors: true,
-                zindex: false,
-                filterPlugins: false // I don't know where this one came from. It is not listed in the documentation.
+                }
+                if (projectPrefix === undefined) {
+                    projectPrefix = /^/;
+                }
             }
-        ]
-    };
+            duplicatedPaths += `\n* ${node_path_1.default.dirname(sameNamePaths[0]).replace(projectPrefix, '')}/[${sameNamePaths.map(p => node_path_1.default.basename(p)).join(', ')}]`;
+        }
+    }
+    if (duplicatedPaths.length !== 0) {
+        console.error(`Encountered multiple paths that produce the same effective bundle name:${duplicatedPaths}`);
+        process.exit(1);
+    }
+    const { legacyPostcssPlugins = false, variables = ["variables.js", "preprocess/variables.js"].map(p => node_path_1.default.join(process.cwd(), p)).filter(p => node_fs_1.default.existsSync(p)).map(p => require(p))[0] ?? {}, verbose = process.argv.includes('--verbose') || process.env['VERBOSE'] === 'true' } = config;
     const cssLoader = require.resolve('css-loader');
     if (cssLoader && webpackConfig.module?.rules) {
         for (const rule of webpackConfig.module.rules) {
-            if (typeof rule === 'object' && "use" in rule && Array.isArray(rule.use)) {
+            if (isTruthy(rule) && typeof rule === 'object' && "use" in rule && Array.isArray(rule.use)) {
                 for (const useElement of rule.use) {
-                    if (typeof useElement === 'object' && useElement.loader === cssLoader && typeof useElement.options === 'object') {
+                    if (isTruthy(useElement) && typeof useElement === 'object' && useElement.loader === cssLoader && typeof useElement.options === 'object') {
                         useElement.options['url'] = false;
                     }
                 }
@@ -87,47 +74,19 @@ module.exports = function (config, webpackConfig = require("@wordpress/scripts/c
     }
     let currentEntrypoint = '';
     if (webpackConfig.module?.rules) {
-        // Options: calc
-        const calcOptions = { precision: 4, mediaQueries: true, selectors: true };
-        // Options: autoprefixerOptions
-        const autoprefixerOptions = { grid: "autoplace" };
-        const postcssConfig = {
-            plugins: [
-                require("postcss-import")(),
-                require("@plaudit/postcss-silent-extend")({ warnOfUnused: verbose }),
-                require("postcss-mixins")(),
-                require("@plaudit/postcss-variables")({ variables: (name, srcNode) => {
-                        if (variables[name]) {
-                            return variables[name];
-                        }
-                        if (name === 'ENV') { // This is purely a backwards-compatibility issue.
-                            return currentEntrypoint.endsWith('public.pcss') ? 'PUBLIC' : (currentEntrypoint.endsWith('block-editor.pcss') ? 'EDITOR' : '');
-                        }
-                        return undefined;
-                    } }),
-                ...(legacyPostcssPlugins ? [
-                    require("postcss-quantity-queries")(),
-                    require("postcss-short-position")(),
-                    require("postcss-short-size")(),
-                    require("postcss-short-spacing")(),
-                    require("postcss-fallback")() // Legacy
-                ] : []),
-                require("postcss-property-lookup")({ logLevel: "warn" }),
-                require("@plaudit/postcss-strip-units")(),
-                require("postcss-media-minmax")(),
-                require("postcss-inline-svg")(),
-                require("postcss-nested")(),
-                require("postcss-calc")(calcOptions),
-                require("@plaudit/postcss-color-function")(),
-                require("autoprefixer")(autoprefixerOptions),
-                require("postcss-reporter")({ clearReportedMessages: true }),
-                (0, cssnano_1.default)(nanoConfig)
-            ]
-        };
+        const postcssConfig = (0, static_configs_1.postcssConfigBuilder)(verbose, legacyPostcssPlugins, (name) => {
+            if (variables[name]) {
+                return variables[name];
+            }
+            if (name === 'ENV') { // This is purely a backwards-compatibility issue.
+                return currentEntrypoint.endsWith('public.pcss') ? 'PUBLIC' : (currentEntrypoint.endsWith('block-editor.pcss') ? 'EDITOR' : '');
+            }
+            return undefined;
+        });
         for (const rule of webpackConfig.module.rules) {
-            if (typeof rule === 'object' && Array.isArray(rule.use)) {
+            if (isTruthy(rule) && typeof rule === 'object' && Array.isArray(rule.use)) {
                 for (const useItem of rule.use) {
-                    if (typeof useItem === 'object' && typeof useItem.options === 'object') {
+                    if (isTruthy(useItem) && typeof useItem === 'object' && typeof useItem.options === 'object') {
                         if (useItem.options["sourceMap"] === false) {
                             useItem.options["sourceMap"] = true;
                         }
@@ -152,7 +111,7 @@ module.exports = function (config, webpackConfig = require("@wordpress/scripts/c
         const srcRoot = srcRoots.length === 1 ? joinPossiblyAbsolutePaths(process.cwd(), src) : srcRoots.map(s => joinPossiblyAbsolutePaths(process.cwd(), s));
         const srcIsDirectory = !Array.isArray(srcRoot) && node_fs_1.default.lstatSync(srcRoot).isDirectory();
         const copyFiles = srcIsDirectory && src !== dest;
-        const plugins = webpackConfig.plugins ? [...webpackConfig.plugins] : [];
+        const plugins = webpackConfig.plugins?.filter(isTruthy) ?? [];
         plugins.push(new fork_ts_checker_webpack_plugin_1.default({
             typescript: {
                 diagnosticOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "scripts": {
     "prepublishOnly": "rm -rf build && mkdir build && tsc",
     "build": "tsc",
@@ -14,12 +14,12 @@
   },
   "devDependencies": {
     "@types/browser-sync-webpack-plugin": "^2.2.2",
-    "@types/node": "^20.2.5",
+    "@types/node": "^20.3.1",
     "@types/tapable": "^2.2.3",
     "@types/webpack": "^5.28.1",
     "@types/webpack-sources": "^3.2.0",
     "postcss-load-config": "^4.0.1",
-    "postcss-loader": "^7.3.2",
+    "postcss-loader": "^7.3.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.3"
   },
@@ -56,7 +56,7 @@
     "postcss-simple-vars": "^7.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "webpack": "^5.86.0",
+    "webpack": "^5.87.0",
     "webpack-remove-empty-scripts": "^1.0.3",
     "webpack-sources": "^3.2.3"
   },