@plaudit/webpack-extensions 2.22.0 → 2.24.0

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

@@ -1,2 +1,3 @@
+import type { Options as PostcssFunctionsOptions } from "postcss-functions";
 import type { PostCSSLoaderOptions } from "postcss-loader/dist/config";
-export declare function postcssConfigBuilder(verbose: boolean, variables: (name: string) => string | undefined): PostCSSLoaderOptions;
+export declare function postcssConfigBuilder(verbose: boolean, variables: (name: string) => string | undefined, postCSSFunctions: (variables: (name: string) => unknown) => PostcssFunctionsOptions): PostCSSLoaderOptions;

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

@@ -57,13 +57,22 @@ const nanoConfig = {
         }
     ]
 };
-function postcssConfigBuilder(verbose, variables) {
+function makeDefaultPostCSSFunctions(variables) {
+    const magnitude = new Intl.NumberFormat("en-US", { maximumFractionDigits: 4 });
+    return {
+        pxAsRem(value) {
+            return value ? `${magnitude.format(parseFloat(value.toString()) / (variables("font_size") || 16))}rem` : "1rem";
+        }
+    };
+}
+function postcssConfigBuilder(verbose, variables, postCSSFunctions) {
     return {
         plugins: [
             require("postcss-import")(), // Once
             require("@plaudit/postcss-silent-extend")({ warnOfUnused: verbose }), // Once (marks), OnceExit (apply)
             require("postcss-mixins")(), // There is a PostCSS 8 version, but we're forced to use the old one because the new one uses AtRule, which is too late in the process
             require("@plaudit/postcss-variables")({ variables }), // Once
+            require("postcss-functions")({ functions: { ...makeDefaultPostCSSFunctions(variables), ...postCSSFunctions(variables) } }),
             require("postcss-quantity-queries")(), // Legacy
             require("postcss-short-position")(), // Legacy
             require("postcss-short-size")(), // Legacy

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

@@ -1,3 +1,4 @@
+import type { Options as PostcssFunctionsOptions } from "postcss-functions";
 import type { Configuration } from "webpack";
 interface AdvancedOutputConfig {
     destination: string;
@@ -11,6 +12,9 @@ type PlauditWordpressWebpackConfig = {
     verbose?: boolean;
     src: string[] | Record<string, string | AdvancedOutputConfig>;
     stats?: Configuration['stats'];
+    postcss?: {
+        functions?: (variables: (name: string) => unknown) => PostcssFunctionsOptions;
+    };
 };
 declare const _default: (config: PlauditWordpressWebpackConfig, webpackConfig?: Configuration[] | Configuration) => Configuration[];
 export = _default;

package/build/wordpress-scripts-wrapper.js

@@ -146,9 +146,9 @@ function replaceDefaultURLProcessing(webpackConfig) {
         }
     }
 }
-function injectPostcssConfigOverrides(webpackConfig, variables, verbose) {
+function injectPostcssConfigOverrides(webpackConfig, variables, postcssFunctionsConfig, verbose) {
     if (webpackConfig.module?.rules) {
-        const postcssConfig = (0, static_configs_1.postcssConfigBuilder)(verbose, name => variables(name) ?? (name === 'ENV' ? '' : undefined));
+        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)) {
@@ -171,6 +171,10 @@ function injectPostcssConfigOverrides(webpackConfig, variables, verbose) {
                         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 (typeof rule.generator === 'object') {
                     const ruleGeneratorFilename = rule.generator["filename"];
                     if (typeof ruleGeneratorFilename === 'string' && (ruleGeneratorFilename.startsWith("images/") || ruleGeneratorFilename.startsWith("fonts/"))) {
@@ -223,7 +227,7 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
     const { standaloneBlocks, variablesFilePath, verbose } = config;
     let currentVariables = config.currentVariables;
     replaceDefaultURLProcessing(webpackConfig);
-    const fixedRules = injectPostcssConfigOverrides(webpackConfig, name => currentVariables[name], verbose);
+    const fixedRules = injectPostcssConfigOverrides(webpackConfig, name => currentVariables[name], config.postcss.functions ?? (() => ({})), verbose);
     return sources.map(([src, dest]) => {
         const srcRoots = (typeof dest !== 'string' && dest.withLegacyBlocksIn
             ? [...src.split(','), ...resolveLegacyBlockScriptsInFolder(dest.withLegacyBlocksIn)]
@@ -419,13 +423,13 @@ function processIndividualWebpackConfig(config, webpackConfig, sources) {
 }
 module.exports = function (config, webpackConfig = require("@wordpress/scripts/config/webpack.config")) {
     testForDuplicatedEntryPaths(config);
-    const { standaloneBlocks = false, stats = 'errors-warnings', variables: rawVariables, verbose = process.argv.includes('--verbose') || process.env['VERBOSE'] === 'true' } = config;
+    const { standaloneBlocks = false, stats = 'errors-warnings', variables: rawVariables, verbose = process.argv.includes('--verbose') || process.env['VERBOSE'] === 'true', postcss = {} } = config;
     let variablesFilePath = undefined;
     const currentVariables = rawVariables ?? {};
     if (!rawVariables) {
         variablesFilePath = ["variables.js", "src/site/variables.js"].map(p => node_path_1.default.join(process.cwd(), p)).filter(p => node_fs_1.default.existsSync(p))[0];
     }
-    const cfg = { currentVariables, standaloneBlocks, stats, variablesFilePath, verbose };
+    const cfg = { currentVariables, postcss, standaloneBlocks, stats, variablesFilePath, verbose };
     const sources = Array.isArray(config.src) ? config.src.map(s => [s, s]) : Object.entries(config.src);
     if (Array.isArray(webpackConfig)) {
         return webpackConfig.flatMap(wpCfg => processIndividualWebpackConfig(cfg, wpCfg, sources));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaudit/webpack-extensions",
-  "version": "2.22.0",
+  "version": "2.24.0",
   "scripts": {
     "prepublishOnly": "rm -rf build && mkdir build && tsc",
     "build": "tsc",
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@types/browser-sync-webpack-plugin": "^2.2.5",
+    "@types/postcss-functions": "^4.0.3",
     "@types/node": "^20.12.12",
     "@types/tapable": "^2.2.7",
     "@types/webpack": "^5.28.5",