@ideasonpurpose/build-tools-wordpress 2.1.7 → 2.1.8

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.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.8
 
 [![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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "Build scripts and dependencies for IOP's WordPress development environments.",
   "homepage": "https://github.com/ideasonpurpose/build-tools-wordpress#readme",
   "bugs": {

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___");
+  });
 });