@plaudit/webpack-extensions 2.0.0 → 2.0.2

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.d.ts

@@ -2,6 +2,7 @@ import type { Configuration } from "webpack";
 interface PlauditWordpressWebpackConfig {
     legacyPostcssPlugins?: boolean;
     variables?: Record<string, any>;
+    verbose?: boolean;
     src: string[] | Record<string, string>;
 }
 declare const _default: (config: PlauditWordpressWebpackConfig, webpackConfig?: Configuration) => Configuration[];

package/build/wordpress-scripts-wrapper.js

@@ -10,7 +10,7 @@ const browser_sync_webpack_plugin_1 = __importDefault(require("browser-sync-webp
 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"));
+const static_configs_1 = require("./wordpress-scripts-wrapper/static-configs");
 function joinPossiblyAbsolutePaths(...paths) {
     return paths.reduce((res, p) => !res || node_path_1.default.isAbsolute(p) ? p : node_path_1.default.join(res, p), '') || '.';
 }
@@ -24,55 +24,7 @@ function addEntryPointWithMapper(entrypoints, entrypoint, dir, mapper = (entrypo
     }
 }
 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] ?? {}, } = 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);
-                    }
-                },
-                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.
-            }
-        ]
-    };
+    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) {
@@ -85,36 +37,17 @@ 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")(),
-                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)
-            ]
-        };
+        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)) {
                 for (const useItem of rule.use) {
@@ -138,6 +71,7 @@ module.exports = function (config, webpackConfig = require("@wordpress/scripts/c
     let first = true;
     const sources = Array.isArray(config.src) ? config.src.map(s => [s, s]) : Object.entries(config.src);
     return sources.map(([src, dest]) => {
+        currentEntrypoint = src;
         const srcRoots = src.split(',');
         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();
@@ -157,7 +91,7 @@ module.exports = function (config, webpackConfig = require("@wordpress/scripts/c
         plugins.push(new AdditionalDependencyInjectorPlugin_1.default());
         if (first) {
             first = false;
-            if (process.argv.includes('--browser-sync')) {
+            if (process.argv.includes('--browser-sync') || process.env['BROWSER_SYNC'] === 'true') {
                 plugins.push(new browser_sync_webpack_plugin_1.default({
                     host: 'localhost',
                     port: 3000,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "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.0",
     "@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"
   },