@ideasonpurpose/build-tools-wordpress 2.8.2 → 2.8.4

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### v2.8.3
+
+> 5 June 2026
+
+- make formatting conditionals work with npx again
+- add WP_ENVIRONMENT_TYPE to docker-compose environment
+
+#### v2.8.2
+
+> 3 June 2026
+
+- update zip script to use ESM archiver
+
 #### v2.8.1
 
 > 3 June 2026

package/README.md

@@ -1,6 +1,6 @@
 # @ideasonpurpose/build-tools-wordpress
 
-#### Version 2.8.2
+#### Version 2.8.4
 
 [![NPM Version](https://img.shields.io/npm/v/%40ideasonpurpose%2Fbuild-tools-wordpress?logo=npm)](https://www.npmjs.com/package/@ideasonpurpose/build-tools-wordpress)
 [![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/ideasonpurpose/build-tools-wordpress/npm-publish.yml?logo=github&logoColor=white)](https://github.com/ideasonpurpose/build-tools-wordpress#readme)
@@ -37,7 +37,8 @@ Webpack handles SVG files differently based on import context:
 
 - **In JS/TSX files**:
   - With `?url` query (e.g., `import svg from 'file.svg?url'`): Treated as assets, inlined as data URIs if under 4KB, else files.
-  - Without `?url`: Converted to React components using `@svgr/webpack` for direct JSX usage.
+  - With `?react` query (e.g., `import Icon from 'file.svg?react'`): Explicitly converted to a React component using `@svgr/webpack`.
+  - Without `?url` or `?react`: Converted to React components using `@svgr/webpack` for direct JSX usage (default behavior when imported from `.jsx`/`.tsx`).
 
 Data URIs are generated as `data:image/svg+xml,<url-encoded-content>` using more efficient URL-encoding, not base64.
 

package/bin/format-php-prettier.js

@@ -58,7 +58,7 @@ const isInTag = (html, offset) => {
  */
 export function tokenizeHTML(htmlContent) {
   let tokenizedHTML = "";
-  const phpCodeBlocks = new Map();  // Changed to Map for better performance and type safety
+  const phpCodeBlocks = new Map(); // Changed to Map for better performance and type safety
   let tokenCount = 0;
 
   /**
@@ -182,4 +182,5 @@ export async function main(filepath = process.argv[2]) {
   }
   await formatHTMLThenPHP(resolve(filepath));
 }
-if (import.meta.url === `file://${process.argv[1]}`) main();
+
+if (process.argv[2]) main();

package/bin/format-wp-block-pattern.js

@@ -111,9 +111,9 @@ export function normalizeCommentTagSpacing(content) {
 
     if (block === "wp:paragraph") {
       newContent = newContent
-        .replace(/\n\s*<p>\s*/g, "\n<p>")
+        .replace(/\n\s*(<p[^>]*>)\s*/g, "\n$1")
         .replace(/\s*<\/p>/g, "</p>")
-        .replace(/<p>[\s\S]*?<\/p>/g, (match) =>
+        .replace(/<p[^>]*>[\s\S]*?<\/p>/g, (match) =>
           match.replace(/\s+/g, " ").trim(),
         );
       newContent = newContent.replace(/\n{3,}/g, "\n\n").replace(/\s+$/, "\n");
@@ -211,4 +211,4 @@ export async function main(filepath = process.argv[2]) {
   }
   await formatWPBlockPattern(resolve(filepath));
 }
-if (import.meta.url === `file://${process.argv[1]}`) main();
+if (process.argv[2]) main();

package/boilerplate/svgo.config.mjs

@@ -4,7 +4,6 @@
  *
  * This config allows for immediate optimization of SVGs in the editor
  *
- *
  * @links
  * - SVGO: https://github.com/svg/svgo
  * - SVGO preset-default docs: https://svgo.dev/docs/preset-default
@@ -14,19 +13,62 @@
 
 export default {
   js2svg: {
-    indent: 4, // number
-    pretty: true, // boolean
+    indent: 4,
+    pretty: true,
   },
 
   plugins: [
+    {
+      name: "addDimensionsFromViewBox",
+      type: "visitor",
+      fn: () => {
+        return {
+          element: {
+            enter: (node) => {
+              if (node.name !== "svg") return;
+              if (!node.attributes.viewBox) return;
+              if (node.attributes.width && node.attributes.height) return;
+
+              const parts = node.attributes.viewBox.trim().split(/[\s,]+/);
+              if (parts.length !== 4) return;
+
+              if (!node.attributes.width) {
+                node.attributes.width = parts[2];
+              }
+              if (!node.attributes.height) {
+                node.attributes.height = parts[3];
+              }
+            },
+          },
+        };
+      },
+    },
+    {
+      name: "removeTopLevelFillNone",
+      type: "visitor",
+      fn: () => {
+        return {
+          element: {
+            enter: (node) => {
+              if (node.name !== "svg") return;
+              if (node.attributes.fill !== "none") return;
+
+              delete node.attributes.fill;
+            },
+          },
+        };
+      },
+    },
     {
       name: "preset-default",
       params: {
         overrides: {
           cleanupIds: false,
+          removeUselessStrokeAndFill: {
+            removeNone: true,
+          },
         },
       },
     },
-    "removeDimensions",
   ],
 };

package/config/webpack.config.js

@@ -219,6 +219,9 @@ export default async (env) => {
          * To import an SVG file as a src url, append ?url to the filename:
          *     import svg from './assets/file.svg?url'
          *
+         * To force an SVG as a React component, append ?react:
+         *     import Icon from './assets/file.svg?react'
+         *
          * @link https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
          */
         {
@@ -243,10 +246,15 @@ export default async (env) => {
             dataUrl: svgDataUrlHelper,
           },
         },
+        {
+          test: /\.svg$/i,
+          resourceQuery: /react/, // *.svg?react forces React component via SVGR
+          use: ["@svgr/webpack"],
+        },
         {
           test: /\.svg$/i,
           issuer: /\.[jt]sx?$/,
-          resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+          resourceQuery: { not: [/url/, /react/] }, // exclude react component if *.svg?url or *.svg?react
           use: ["@svgr/webpack"],
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Build scripts and dependencies for IOP's WordPress development environments.",
   "homepage": "https://github.com/ideasonpurpose/build-tools-wordpress#readme",
   "bugs": {
@@ -34,30 +34,30 @@
   },
   "prettier": "@ideasonpurpose/prettier-config",
   "dependencies": {
-    "@ideasonpurpose/prettier-config": "^1.0.1",
+    "@ideasonpurpose/prettier-config": "^1.1.0",
     "@ideasonpurpose/stylelint-config": "^1.1.6",
     "@prettier/plugin-php": "^0.25.0",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@svgr/webpack": "^8.1.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^6.47.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^6.48.1",
     "ansi-html": "^0.0.9",
     "archiver": "^8.0.0",
-    "autoprefixer": "^10.5.0",
+    "autoprefixer": "^10.5.1",
     "babel-loader": "^10.1.1",
-    "caniuse-lite": "^1.0.30001793",
+    "caniuse-lite": "^1.0.30001799",
     "chalk": "^5.6.2",
     "chalk-cli": "^6.0.0",
     "classnames": "^2.5.1",
-    "cli-truncate": "^6.0.0",
+    "cli-truncate": "^6.0.1",
     "copy-webpack-plugin": "^14.0.0",
-    "cosmiconfig": "^9.0.1",
+    "cosmiconfig": "^9.0.2",
     "css-loader": "^7.1.4",
-    "cssnano": "^8.0.1",
+    "cssnano": "^8.0.2",
     "dotenv": "^17.4.2",
-    "esbuild-loader": "^4.4.3",
-    "eslint": "^10.4.1",
+    "esbuild-loader": "^4.5.0",
+    "eslint": "^10.5.0",
     "filesize": "^11.0.17",
     "fs-extra": "^11.3.5",
     "globby": "^16.2.0",
@@ -68,20 +68,20 @@
     "is-text-path": "^3.0.0",
     "lodash": "^4.18.1",
     "mini-css-extract-plugin": "^2.10.2",
-    "ora": "^9.4.0",
+    "ora": "^9.4.1",
     "postcss": "^8.5.15",
     "postcss-loader": "^8.2.1",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.8.3",
+    "prettier": "^3.8.4",
     "pretty-hrtime": "^1.0.3",
     "read-package-up": "^12.0.0",
     "replacestream": "^4.0.3",
     "rimraf": "^6.1.3",
     "sass-embedded": "^1.100.0",
     "sass-loader": "^17.0.0",
-    "semver": "^7.8.1",
-    "sharp": "^0.34.5",
-    "sort-package-json": "^3.7.0",
+    "semver": "^7.8.5",
+    "sharp": "^0.35.2",
+    "sort-package-json": "^4.0.0",
     "string-length": "^7.0.1",
     "style-loader": "^4.0.0",
     "svgo": "^4.0.1",
@@ -90,19 +90,24 @@
     "webpack": "^5.107.2",
     "webpack-bundle-analyzer": "^5.3.0",
     "webpack-dev-middleware": "^8.0.3",
-    "webpack-dev-server": "^5.2.4",
+    "webpack-dev-server": "^5.2.5",
     "webpack-manifest-plugin": "^6.0.1"
   },
   "peerDependencies": {
     "webpack-cli": "^6.0.1"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^4.1.8",
-    "vitest": "^4.1.8"
+    "@vitest/coverage-v8": "^4.1.9",
+    "vitest": "^4.1.9"
   },
   "version-everything": {
     "files": [
       "README.md"
     ]
+  },
+  "allowScripts": {
+    "@parcel/watcher@2.5.1": true,
+    "esbuild@0.28.1": true,
+    "fsevents@2.3.3": true
   }
 }

package/test/fixtures/format-wp-block-pattern/paragraph-whitespace-with-attributes.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * Title: Paragraph Whitespace Attribute Test
+ */
+?>
+
+<!-- wp:paragraph -->
+      <p class="example classnames" style="color:red">
+        Amet dolore laborum tempor mollit ea magna enim minim sunt nostrud.
+      Sit ut labore laborum culpa sint aliqua aliqua reprehenderit
+    consectetur eiud sit.   Ea non laborum duis enim laborum reprehenderit.
+  </p>
+
+
+<!-- /wp:paragraph -->

package/test/fixtures/format-wp-block-pattern/paragraph-whitespace-with-attributes__formatted.php

@@ -0,0 +1,9 @@
+<?php
+/**
+ * Title: Paragraph Whitespace Attribute Test
+ */
+?>
+
+<!-- wp:paragraph -->
+<p class="example classnames" style="color:red">Amet dolore laborum tempor mollit ea magna enim minim sunt nostrud. Sit ut labore laborum culpa sint aliqua aliqua reprehenderit consectetur eiud sit. Ea non laborum duis enim laborum reprehenderit.</p>
+<!-- /wp:paragraph -->

package/test/format-wp-block-pattern.test.js

@@ -147,6 +147,23 @@ describe("Normalize whitespace", () => {
     expect(actual).toBe(expected);
   });
 
+  test("Whitespace handling in paragraphs with attributes", async () => {
+    const input = (
+      await readFile(
+        "./test/fixtures/format-wp-block-pattern/paragraph-whitespace-with-attributes.php",
+      )
+    ).toString();
+
+    const expected = (
+      await readFile(
+        "./test/fixtures/format-wp-block-pattern/paragraph-whitespace-with-attributes__formatted.php",
+      )
+    ).toString();
+
+    const actual = normalizeCommentTagSpacing(input);
+    expect(actual).toBe(expected);
+  });
+
   test("normalizeNewlines for coverage", async () => {
     const input = "Line 1\nLine 2\n \n \n\n\n\nLine 3\nLine 4";
     const expected = "Line 1\nLine 2\n\nLine 3\nLine 4\n";

package/tooling/docker-compose.yml

@@ -63,6 +63,7 @@ services:
       - 9003
 
     # Link external plugin projects by defining host:container path pairs in .env
+    # Set a custom environment by assigning a value to WP_ENVIRONMENT_TYPE
     environment:
       IOP_DEV_PLUGIN_1:
       IOP_DEV_PLUGIN_2:
@@ -72,6 +73,7 @@ services:
       IOP_DEV_PLUGIN_6:
       IOP_DEV_PLUGIN_7:
       IOP_DEV_PLUGIN_8:
+      WP_ENVIRONMENT_TYPE: 
 
     # Required for iptables port-mapping to work inside the Docker image
     # This is used to fix a PHP/WordPress issue where internal requests