@ideasonpurpose/build-tools-wordpress 2.4.2 → 2.5.1

package/.github/workflows/release-from-version-tag.yml

@@ -6,6 +6,7 @@ on:
 
 jobs:
   build:
+    # https://github.com/actions/runner-images
     name: Build Release
     # https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners#supported-runners-and-hardware-resources
     runs-on: ubuntu-24.04

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.5.0
+
+> 7 March 2026
+
+- bump deps
+- beginning of typing, some cleanup
+- inline SVGs in SCSS files by default
+
+#### v2.4.2
+
+> 22 December 2025
+
+- Update npm publish command with options
+
 #### v2.4.1
 
 > 22 December 2025

package/README.md

@@ -1,6 +1,6 @@
 # @ideasonpurpose/build-tools-wordpress
 
-#### Version 2.4.2
+#### Version 2.5.1
 
 [![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)
@@ -29,6 +29,18 @@ Each project may optionally include an **ideasonpurpose.config.js** file in the
 
 -->
 
+## SVG Processing
+
+Webpack handles SVG files differently based on import context:
+
+- **In SCSS files**: SVGs referenced via `url('file.svg')` are inlined as data URIs if under 4KB, otherwise emitted as separate files in the output directory.
+
+- **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.
+
+Data URIs are generated as `data:image/svg+xml,<url-encoded-content>` using more efficient URL-encoding, not base64.
+
 ## Local Development
 
 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:

package/config/webpack.config.js

@@ -79,6 +79,9 @@ const stats = {
   loggingDebug: ["sass-loader"],
 };
 
+/**
+ * @param {Record<string, any>} env - Environment variables from Webpack CLI
+ */
 export default async (env) => {
   // const siteDir = new URL(import.meta.url).pathname;
   const siteDir = process.cwd();
@@ -89,6 +92,15 @@ export default async (env) => {
 
   const proxy = isProduction ? {} : await devserverProxy(config);
 
+
+  /**
+   * Simple helper for encoding SVGs as data urls with proper encoding for special characters
+   * @param {Buffer} content
+   * @returns {string} - Encoded SVG data URL
+   */
+  const svgDataUrlHelper = (content) =>
+    `data:image/svg+xml,${encodeURIComponent(content.toString())}`;
+
   // console.log({config});
   // console.log({entry: config.entry});
   /**
@@ -101,11 +113,11 @@ export default async (env) => {
    *
    * TODO: Why so much dancing around defaults when this could just inherit from default.config?
    */
-  const usePolling = Boolean(config.usePolling); // likely undefined, coerced to false
-  const pollInterval = Math.max(
-    parseInt(config.pollInterval, 10) || parseInt(config.usePolling, 10) || 400,
-    400,
-  );
+  // const usePolling = Boolean(config.usePolling); // likely undefined, coerced to false
+  // const pollInterval = Math.max(
+  //   parseInt(config.pollInterval, 10) || parseInt(config.usePolling, 10) || 400,
+  //   400,
+  // );
 
   const devtool = config.devtool || false;
 
@@ -200,17 +212,35 @@ export default async (env) => {
         /**
          * SVGs can be imported as asset urls or React components
          *
+         * In SCSS files, SVGs will be treated as assets and inlined as data urls
+         *     unless they are larger than 4kb
+         *
          * To import an SVG file as a src url, append ?url to the filename:
          *     import svg from './assets/file.svg?url'
          *
-         * To import an SVG file as a React component
-
          * @link https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
          */
+        {
+          test: /\.svg$/i,
+          issuer: /\.scss$/,
+          type: "asset",
+          parser: {
+            dataUrlCondition: { maxSize: 4096 },
+          },
+          generator: {
+            dataUrl: svgDataUrlHelper,
+          },
+        },
         {
           test: /\.svg$/i,
           type: "asset",
           resourceQuery: /url/, // *.svg?url
+          parser: {
+            dataUrlCondition: { maxSize: 4096 },
+          },
+          generator: {
+            dataUrl: svgDataUrlHelper,
+          },
         },
         {
           test: /\.svg$/i,
@@ -359,6 +389,9 @@ export default async (env) => {
       //   return true;
       // },
 
+      /**
+       * @param {Object} devServer - The devServer instance
+       */
       onListening: (devServer) => {
         const port = devServer.server.address().port;
         devServer.compiler.options.devServer.port =
@@ -368,6 +401,10 @@ export default async (env) => {
         console.log("Listening on port:", port);
       },
 
+      /**
+       * @param {Array<Function>} middlewares - Array of middleware functions
+       * @param {Object} devServer - The devServer instance
+       */
       setupMiddlewares: (middlewares, devServer) => {
         /**
          * The `/inform` route is an annoying bit of code. Here's why:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "2.4.2",
+  "version": "2.5.1",
   "description": "Build scripts and dependencies for IOP's WordPress development environments.",
   "homepage": "https://github.com/ideasonpurpose/build-tools-wordpress#readme",
   "bugs": {
@@ -36,69 +36,70 @@
     "@ideasonpurpose/prettier-config": "^1.0.1",
     "@ideasonpurpose/stylelint-config": "^1.1.4",
     "@prettier/plugin-php": "^0.24.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@svgr/webpack": "^8.1.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^6.36.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^6.41.0",
     "ansi-html": "^0.0.9",
     "archiver": "^7.0.1",
     "auto-changelog": "^2.5.0",
-    "autoprefixer": "^10.4.23",
-    "babel-loader": "^10.0.0",
-    "caniuse-lite": "^1.0.30001761",
+    "autoprefixer": "^10.4.27",
+    "babel-loader": "^10.1.0",
+    "caniuse-lite": "^1.0.30001777",
     "chalk": "^5.6.2",
     "chalk-cli": "^6.0.0",
     "classnames": "^2.5.1",
-    "cli-truncate": "^5.1.1",
-    "copy-webpack-plugin": "^13.0.1",
-    "cosmiconfig": "^9.0.0",
+    "cli-truncate": "^5.2.0",
+    "copy-webpack-plugin": "^14.0.0",
+    "cosmiconfig": "^9.0.1",
     "cross-env": "^10.1.0",
-    "css-loader": "^7.1.2",
-    "cssnano": "^7.1.2",
-    "dotenv": "^17.2.3",
-    "esbuild-loader": "^4.4.1",
-    "eslint": "^9.39.2",
+    "css-loader": "^7.1.4",
+    "cssnano": "^7.1.3",
+    "dotenv": "^17.3.1",
+    "esbuild-loader": "^4.4.2",
+    "eslint": "^10.0.3",
     "filesize": "^11.0.13",
-    "fs-extra": "^11.3.3",
-    "globby": "^16.0.0",
-    "html-webpack-plugin": "^5.6.5",
+    "fs-extra": "^11.3.4",
+    "globby": "^16.1.1",
+    "html-webpack-plugin": "^5.6.6",
     "http-proxy": "^1.18.1",
     "humanize-duration": "^3.33.2",
-    "image-minimizer-webpack-plugin": "^4.1.4",
+    "image-minimizer-webpack-plugin": "^5.0.0",
     "is-text-path": "^3.0.0",
-    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.9.4",
-    "ora": "^9.0.0",
-    "postcss": "^8.5.6",
-    "postcss-loader": "^8.2.0",
+    "lodash": "^4.17.23",
+    "mini-css-extract-plugin": "^2.10.0",
+    "ora": "^9.3.0",
+    "postcss": "^8.5.8",
+    "postcss-loader": "^8.2.1",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.7.4",
+    "prettier": "^3.8.1",
     "pretty-hrtime": "^1.0.3",
     "read-package-up": "^12.0.0",
     "replacestream": "^4.0.3",
-    "sass-embedded": "^1.97.1",
-    "sass-loader": "^16.0.6",
-    "semver": "^7.7.3",
+    "rimraf": "^6.1.3",
+    "sass-embedded": "^1.97.3",
+    "sass-loader": "^16.0.7",
+    "semver": "^7.7.4",
     "sharp": "^0.34.5",
-    "sort-package-json": "^3.6.0",
-    "string-length": "^6.0.0",
+    "sort-package-json": "^3.6.1",
+    "string-length": "^7.0.1",
     "style-loader": "^4.0.0",
-    "svgo": "^4.0.0",
+    "svgo": "^4.0.1",
     "svgo-loader": "^4.0.0",
     "version-everything": "^0.11.4",
-    "webpack": "^5.104.1",
-    "webpack-bundle-analyzer": "^5.1.0",
+    "webpack": "^5.105.4",
+    "webpack-bundle-analyzer": "^5.2.0",
     "webpack-dev-middleware": "^7.4.5",
-    "webpack-dev-server": "^5.2.2",
+    "webpack-dev-server": "^5.2.3",
     "webpack-manifest-plugin": "^6.0.1"
   },
   "peerDependencies": {
     "webpack-cli": "^6.0.1"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^4.0.16",
-    "vitest": "^4.0.16"
+    "@vitest/coverage-v8": "^4.0.18",
+    "vitest": "^4.0.18"
   },
   "version-everything": {
     "files": [