@dream-encode/wp-js-plugin-utils 0.1.0 → 0.2.1

package/dist/webpack/CSSAssetPlugin.js

@@ -0,0 +1,40 @@
+"use strict";
+
+/**
+ * Generates `.asset.php` files for CSS-only webpack entry points.
+ *
+ * `@wordpress/dependency-extraction-webpack-plugin` only emits asset
+ * manifests for JS entry points. Plugins that ship style-only entries
+ * (e.g. an admin stylesheet not paired with a script) need a sibling
+ * `.asset.php` file so PHP `wp_enqueue_style()` calls can pull the
+ * version hash and cache-bust correctly.
+ *
+ * For each entry point that does not produce a JS chunk, this plugin
+ * emits `js/<entry>.min.asset.php` with an empty dependencies array
+ * and the current compilation hash as the version.
+ */
+class CSSAssetPlugin {
+  apply(compiler) {
+    compiler.hooks.compilation.tap('CSSAssetPlugin', compilation => {
+      compilation.hooks.processAssets.tap({
+        name: 'CSSAssetPlugin',
+        stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
+      }, () => {
+        compilation.entrypoints.forEach((entrypoint, entryName) => {
+          const hasJS = entrypoint.chunks.some(chunk => chunk.files.has(`js/${entryName}.min.js`));
+          if (hasJS) {
+            return;
+          }
+          const version = compilation.hash.substring(0, 16);
+          const assetContent = `<?php return array('dependencies' => array(), 'version' => '${version}');`;
+          const assetFilename = `js/${entryName}.min.asset.php`;
+          compilation.emitAsset(assetFilename, {
+            source: () => assetContent,
+            size: () => assetContent.length
+          });
+        });
+      });
+    });
+  }
+}
+module.exports = CSSAssetPlugin;

package/dist/webpack/createWebpackConfig.js

@@ -10,6 +10,7 @@ const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
 const TerserPlugin = require('terser-webpack-plugin');
 const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
 const postcssPlugins = require('@wordpress/postcss-plugins-preset');
+const CSSAssetPlugin = require('./CSSAssetPlugin');
 const tryRequire = id => {
   try {
     return require(id);
@@ -71,7 +72,7 @@ const createWebpackConfig = (options = {}) => {
     ignoreOrder: false
   }), new RtlCssPlugin({
     filename: 'css/[name]-rtl.css'
-  }), new RemoveEmptyScriptsPlugin(), new DependencyExtractionWebpackPlugin()];
+  }), new RemoveEmptyScriptsPlugin(), new DependencyExtractionWebpackPlugin(), new CSSAssetPlugin()];
   if (sentry) {
     const sentryWebpackPlugin = tryRequire('@sentry/webpack-plugin');
     if (sentryWebpackPlugin && sentryWebpackPlugin.sentryWebpackPlugin) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dream-encode/wp-js-plugin-utils",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Common JS functionality used by custom WP plugins.",
   "keywords": [
     "wordpress",
@@ -21,6 +21,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./webpack": "./dist/webpack/createWebpackConfig.js",
+    "./webpack/css-asset-plugin": "./dist/webpack/CSSAssetPlugin.js",
     "./postcss": "./dist/webpack/postcss.config.js",
     "./settings": "./dist/settings/index.js",
     "./settings/styles": "./dist/settings/styles/_settings-page.scss",