@ideasonpurpose/build-tools-wordpress 2.3.2 → 2.5.0

package/.github/workflows/npm-publish.yml

@@ -4,6 +4,10 @@ on:
   push:
     tags: ["v*"]
 
+permissions:
+  id-token: write  # Required for OIDC
+  contents: read
+
 jobs:
   publish:
     name: Build and publish to npm
@@ -16,10 +20,9 @@ jobs:
       # https://github.com/actions/setup-node
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
-          registry-url: https://registry.npmjs.org/
+          node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
           
       # - run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+      - run: npm publish --provenance --access public
+       

package/CHANGELOG.md

@@ -4,6 +4,32 @@ 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.4.2
+
+> 22 December 2025
+
+- Update npm publish command with options
+
+#### v2.4.1
+
+> 22 December 2025
+
+- update workflow for trusted publishing
+
+#### v2.4.0
+
+> 21 December 2025
+
+- bump deps
+- Enable loading Sass files from node_modules
+
+#### v2.3.2
+
+> 3 November 2025
+
+- bump deps
+- watch tweaks, debugging, formatting and cleanup
+
 #### v2.3.1
 
 > 21 October 2025

package/README.md

@@ -1,6 +1,6 @@
 # @ideasonpurpose/build-tools-wordpress
 
-#### Version 2.3.2
+#### Version 2.5.0
 
 [![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)
@@ -50,6 +50,14 @@ npm chokidar-cli "../../build-tools-wordpress/**/*" -c "npm install"
 
 This project expects an entirely ES Module based environment and specifies all dependencies using standard ESM import syntax. Projects importing this file should set `"type": "module"` in their package.json files.
 
+#### Sass imports
+
+Sass can import stylesheet files directly from npm packages. Use the full path from node_modules like this:
+
+```scss
+@use "@ideasonpurpose/build-tools-wordpress/example/package-style";
+```
+
 #### Publishing to [npm](https://www.npmjs.com/package/@ideasonpurpose/build-tools-wordpress)
 
 A GitHub action will auto-publish version-tagged releases to npm. In order to publish, the repository must have an `NPM_TOKEN` secret set with the token from npm. [Log into npmjs.org](https://www.npmjs.com/login) with a publish-authorized account, then find the token page linked from the Profile page sidebar. Generate a new token and update the repository secret.
@@ -63,4 +71,3 @@ A GitHub action will auto-publish version-tagged releases to npm. In order to pu
 <a href="https://www.ideasonpurpose.com"><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/iop-logo-white-on-black-88px.png" height="44" align="top" alt="IOP Logo"></a><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/spacer.png" align="middle" width="4" height="54"> This project is actively developed and used in production at <a href="https://www.ideasonpurpose.com">Ideas On Purpose</a>.
 
 <!-- END IOP CREDIT BLURB -->
-```

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;
 
@@ -172,7 +184,10 @@ export default async (env) => {
                 sassOptions: {
                   api: "modern-compiler",
 
-                  loadPaths: [path.resolve(config.src, "sass")],
+                  loadPaths: [
+                    path.resolve(config.src, "sass"),
+                    path.resolve(siteDir, "node_modules"),
+                  ],
                 },
               },
             },
@@ -197,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,
@@ -356,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 =
@@ -365,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.3.2",
+  "version": "2.5.0",
   "description": "Build scripts and dependencies for IOP's WordPress development environments.",
   "homepage": "https://github.com/ideasonpurpose/build-tools-wordpress#readme",
   "bugs": {
@@ -36,69 +36,69 @@
     "@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.34.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.21",
-    "babel-loader": "^10.0.0",
-    "caniuse-lite": "^1.0.30001753",
+    "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.0",
-    "eslint": "^9.39.0",
+    "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.2",
-    "globby": "^15.0.0",
-    "html-webpack-plugin": "^5.6.4",
+    "fs-extra": "^11.3.4",
+    "globby": "^16.1.1",
+    "html-webpack-plugin": "^5.6.6",
     "http-proxy": "^1.18.1",
-    "humanize-duration": "^3.33.1",
-    "image-minimizer-webpack-plugin": "^4.1.4",
+    "humanize-duration": "^3.33.2",
+    "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.6.2",
+    "prettier": "^3.8.1",
     "pretty-hrtime": "^1.0.3",
-    "read-package-up": "^11.0.0",
+    "read-package-up": "^12.0.0",
     "replacestream": "^4.0.3",
-    "sass-embedded": "^1.93.3",
-    "sass-loader": "^16.0.6",
-    "semver": "^7.7.3",
-    "sharp": "^0.34.4",
-    "sort-package-json": "^3.4.0",
-    "string-length": "^6.0.0",
+    "sass-embedded": "^1.97.3",
+    "sass-loader": "^16.0.7",
+    "semver": "^7.7.4",
+    "sharp": "^0.34.5",
+    "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.102.1",
-    "webpack-bundle-analyzer": "^4.10.2",
+    "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.6",
-    "vitest": "^4.0.6"
+    "@vitest/coverage-v8": "^4.0.18",
+    "vitest": "^4.0.18"
   },
   "version-everything": {
     "files": [