@ideasonpurpose/build-tools-wordpress 2.1.7 → 2.1.9

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.1.8
+
+> 29 May 2025
+
+- Fix inline-whitespace wrapped php token bug
+- typo
+
+#### v2.1.7
+
+> 28 May 2025
+
+- bump deps
+- enable sourcemaps on all CSS loaders
+
 #### v2.1.6
 
 > 1 May 2025

package/README.md

@@ -1,6 +1,6 @@
 # @ideasonpurpose/build-tools-wordpress
 
-#### Version 2.1.7
+#### Version 2.1.9
 
 [![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)
@@ -31,7 +31,7 @@ Each project may optionally include an **ideasonpurpose.config.js** file in the
 
 ## Local Development
 
-Because this project makes use of bin scripts, conventional `npm link` workflows won't work correctly. To work on this code to work on a development project, change the project's package.json to install from a local file path, probably something like this:
+Because this project makes use of bin scripts, conventional `npm link` workflows won't work correctly. To work on this code in a development project, change the project's package.json to install from a local file path, probably something like this:
 
 ```json
   "devDependencies": {

package/bin/format-php-prettier.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+//@ts-check
+
 /**
  * This is an experimental proof-of-concept for formatting mixed HTML & PHP
  * files from a single function.
@@ -109,8 +111,15 @@ export function tokenizeHTML(htmlContent) {
 export function unTokenizeHTML(tokenizedHTML, phpCodeBlocks) {
   let phpContent = tokenizedHTML;
   for (const token in phpCodeBlocks) {
+    /**
+     * Create a pattern from token that matches whitespace breaks resulting
+     * from Prettier's HTML formatting, usually on very long lines.
+     * eg. the token `<php_4___ />` formats to `<php_4___ \n    />`
+     * This changes the token to `/<php_4___\s+\/>/g`
+     */
+    const regexToken = new RegExp(token.replace("_ />", "_\\s+\\/>"), "g");
     phpContent = phpContent.replace(
-      new RegExp(token, "g"),
+      regexToken,
       phpCodeBlocks[token].replace(/\$/g, "$$$$"),
     );
   }
@@ -128,6 +137,7 @@ async function formatHTMLThenPHP(filepath) {
       ...prettierConfig,
       ...htmlOptions,
       parser: "html",
+      embeddedLanguageFormatting: "auto",
     });
 
     const phpUnTokenized = unTokenizeHTML(htmlFormatted, phpCodeBlocks);
@@ -136,6 +146,7 @@ async function formatHTMLThenPHP(filepath) {
       ...prettierConfig,
       ...phpOptions,
       parser: "php",
+      embeddedLanguageFormatting: "auto",
     });
 
     await writeFile(filepath, phpFormatted, "utf8");

package/lib/ImageminPlugins.js

@@ -14,7 +14,7 @@ const svgoConfig = {
       params: {
         overrides: {
           cleanupIDs: false,
-          removeViewBox: false,
+          // removeViewBox: false, // removed with SVGO v4
         },
       },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "description": "Build scripts and dependencies for IOP's WordPress development environments.",
   "homepage": "https://github.com/ideasonpurpose/build-tools-wordpress#readme",
   "bugs": {
@@ -35,66 +35,66 @@
   "dependencies": {
     "@ideasonpurpose/prettier-config": "^1.0.1",
     "@ideasonpurpose/stylelint-config": "^1.1.1",
-    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@svgr/webpack": "^8.1.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^6.24.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^6.29.0",
     "ansi-html": "^0.0.9",
     "archiver": "^7.0.1",
     "auto-changelog": "^2.5.0",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
-    "caniuse-lite": "^1.0.30001718",
-    "chalk": "^5.4.1",
+    "caniuse-lite": "^1.0.30001737",
+    "chalk": "^5.6.0",
     "chalk-cli": "^6.0.0",
     "classnames": "^2.5.1",
     "cli-truncate": "^4.0.0",
-    "copy-webpack-plugin": "^13.0.0",
+    "copy-webpack-plugin": "^13.0.1",
     "cosmiconfig": "^9.0.0",
-    "cross-env": "^7.0.3",
+    "cross-env": "^10.0.0",
     "css-loader": "^7.1.2",
-    "cssnano": "^7.0.7",
-    "dotenv": "^16.5.0",
+    "cssnano": "^7.1.1",
+    "dotenv": "^17.2.1",
     "esbuild-loader": "^4.3.0",
-    "eslint": "^9.27.0",
-    "filesize": "^10.1.6",
-    "fs-extra": "^11.3.0",
+    "eslint": "^9.34.0",
+    "filesize": "^11.0.2",
+    "fs-extra": "^11.3.1",
     "globby": "^14.1.0",
     "http-proxy": "^1.18.1",
-    "humanize-duration": "^3.32.2",
-    "image-minimizer-webpack-plugin": "^4.1.3",
+    "humanize-duration": "^3.33.0",
+    "image-minimizer-webpack-plugin": "^4.1.4",
     "is-text-path": "^3.0.0",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.9.2",
+    "mini-css-extract-plugin": "^2.9.4",
     "ora": "^8.2.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.6",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "pretty-hrtime": "^1.0.3",
     "read-package-up": "^11.0.0",
     "replacestream": "^4.0.3",
-    "sass-embedded": "^1.89.0",
+    "sass-embedded": "^1.90.0",
     "sass-loader": "^16.0.5",
     "semver": "^7.7.2",
-    "sharp": "^0.34.2",
-    "sort-package-json": "^3.2.1",
+    "sharp": "^0.34.3",
+    "sort-package-json": "^3.4.0",
     "string-length": "^6.0.0",
     "style-loader": "^4.0.0",
-    "svgo": "^3.3.2",
+    "svgo": "^4.0.0",
     "svgo-loader": "^4.0.0",
     "version-everything": "^0.11.4",
-    "webpack": "^5.99.9",
+    "webpack": "^5.101.3",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-dev-middleware": "^7.4.2",
-    "webpack-dev-server": "^5.2.1"
+    "webpack-dev-server": "^5.2.2"
   },
   "peerDependencies": {
     "webpack-cli": "^6.0.1"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^3.1.4",
-    "vitest": "^3.1.4"
+    "@vitest/coverage-v8": "^3.2.4",
+    "vitest": "^3.2.4"
   },
   "version-everything": {
     "files": [

package/test/format-php-prettier.test.js

@@ -6,6 +6,16 @@ import { readFile } from "node:fs/promises";
 
 import { tokenizeHTML, unTokenizeHTML } from "../bin/format-php-prettier.js";
 
+import prettier from "prettier";
+import prettierConfig from "@ideasonpurpose/prettier-config" with { type: "json" };
+
+/**
+ * Prettier API doesn't recognize overrides, so we extract them
+ */
+const htmlOptions = prettierConfig.overrides.find(
+  (o) => o.files === "*.html",
+)?.options;
+
 describe("HTML-PHP Prettier", () => {
   test("All tokens exist", async () => {
     const input = (
@@ -55,7 +65,7 @@ describe("HTML-PHP Prettier", () => {
       )
     ).toString();
 
-    const { tokenizedHTML, phpCodeBlocks  } = tokenizeHTML(input);
+    const { tokenizedHTML, phpCodeBlocks } = tokenizeHTML(input);
 
     // console.log({input, tokenizedHTML})
 
@@ -129,10 +139,59 @@ describe("HTML-PHP Prettier", () => {
 
     // console.log({input, tokenizedHTML, phpCodeBlocks});
 
-
     expect(tokenizedHTML).toContain("<php_0____ />");
     expect(tokenizedHTML).toContain("<php_1____ />");
     expect(phpCodeBlocks).toHaveProperty("<php_0____ />");
     expect(phpCodeBlocks).toHaveProperty("<php_1____ />");
   });
+
+  /**
+ *
+ * Tag-style tokens towards the end of long lines may be line-wrapped by Prettier's HTML
+ * formatting, where the token `<php_4___ />` ends up as `<php_4___ \n    />`
+ *
+ * That line-break means a simple string match won't work and the PHP token must be converted
+ * to a regexp that matches more than one whitespace character.
+ *
+ * This example is tricky because the <time> is an inline tag so whitespace is significant. The inner
+ * PHP codeblock has a space before it, but not after: <time> <?php ... ?></time>
+ * More here: @link https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
+ *
+ * Input:
+ *     <time class="type-eyebrow" datetime="<?= get_the_date('c') ?>"> <?= date('F j, Y', get_post_time()) ?></time>
+ *
+ * Expected:
+ *        <time class="type-eyebrow" datetime="<?= get_the_date('c') ?>">
+ *          <?= date('F j, Y', get_post_time()) ?></time>
+ *
+ * This is an edge case on line-length.
+ *   TODO: I think the token replacement pattern needs to replace the literal space between ___ and /> with a regex token
+ *         so any acquired whitespace from prettier's HTML formatter.
+ *
+ */
+  test("extra space bug", async () => {
+    const input = `<time class="type" datetime="<?= get_the_date('c') ?>"> <?= date('F j, Y', get_post_time()) ?></time>`;
+    // const input = `<time class="typ" datetime="<?= get_the_date('c') ?>"> <?= date('F j, Y', get_post_time()) ?></time>`;
+    const { tokenizedHTML, phpCodeBlocks } = tokenizeHTML(input);
+
+    const htmlFormatted = await prettier.format(tokenizedHTML, {
+      ...prettierConfig,
+      ...htmlOptions,
+      parser: "html",
+      embeddedLanguageFormatting: "auto",
+    });
+
+    const formattedContent = unTokenizeHTML(htmlFormatted, phpCodeBlocks);
+    console.log({
+      phpCodeBlocks,
+      tokenizedHTML,
+      htmlFormatted,
+      formattedContent,
+    });
+
+    expect(tokenizedHTML).toContain("_php_0___");
+    expect(tokenizedHTML).toContain("<php_1___");
+    expect(htmlFormatted).toContain("_____\n/>");
+    expect(formattedContent).not.toContain("<php_1___");
+  });
 });