From 9875912ff6b0a707b0920f9adc8e73529cbb9d53 Mon Sep 17 00:00:00 2001
From: Zach Leatherman <zachleatherman@gmail.com>
Date: Thu, 2 Feb 2023 15:30:07 -0600
Subject: [PATCH] Add transforms example

---
 README.md                                    | 26 ++++++++++++++++++++
 codeManager.js                               |  1 +
 test/stubs/use-transforms/eleventy.config.js |  2 +-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6597701..1647f8b 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,10 @@ module.exports = function(eleventyConfig) {
 
 		// Default bundle types
 		bundles: ["css", "js", "html"],
+
+		// Array of async-friendly callbacks to transform bundle content.
+		// Works with getBundle and getBundleFileUrl
+		transforms: []
 	});
 };
 ```
@@ -248,6 +252,28 @@ To add JS to a page bundle in WebC, you would use a `<script>` element in a WebC
 	* For consistency, you may prefer using the bundle plugin method names everywhere: `<style @raw="getBundle('css')">` and `<script @raw="getBundle('js')">` both work fine.
 * Outside of WebC, the [Universal Filters `webcGetCss` and `webcGetJs`](https://www.11ty.dev/docs/languages/webc/#css-and-js-(bundler-mode)) were available to access CSS and JS bundles but are considered deprecated in favor of new bundle plugin Universal Shortcodes `getBundle("css")` and `getBundle("js")` respectively.
 
+#### Modify the bundle output
+
+You can wire up your own async-friendly callbacks to transform the bundle output too. Here’s a quick example of `postcss` integration.
+
+```js
+const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");
+const postcss = require("postcss");
+const postcssNested = require("postcss-nested");
+
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addPlugin(bundlerPlugin, {
+		transforms: [
+			async function(content) {
+				// Same as Eleventy transforms, this.page is available here.
+				let result = await postcss([postcssNested]).process(content, { from: this.page.inputPath, to: null });
+				return result.css;
+			}
+		]
+	});
+};
+```
+
 #### Bundling on the [Edge](https://www.11ty.dev/docs/plugins/edge/)
 
 _Coming soon_
diff --git a/codeManager.js b/codeManager.js
index c83f300..860b029 100644
--- a/codeManager.js
+++ b/codeManager.js
@@ -167,6 +167,7 @@ class CodeManager {
 
 		buckets = CodeManager.normalizeBuckets(buckets);
 
+		// TODO the bundle output URL might be useful in the transforms for sourcemaps
 		let content = await this.getForPage(pageData, buckets);
 
 		let writer = new BundleFileOutput(output, bundle);
diff --git a/test/stubs/use-transforms/eleventy.config.js b/test/stubs/use-transforms/eleventy.config.js
index 842dd28..c6d1a42 100644
--- a/test/stubs/use-transforms/eleventy.config.js
+++ b/test/stubs/use-transforms/eleventy.config.js
@@ -9,7 +9,7 @@ module.exports = function(eleventyConfig) {
 				setTimeout(() => resolve(content), 50);
 			});
 		}, async function(content) {
-			let result = await postcss([postcssNested]).process(content, { from: this.page.inputPath, to: this.page.outputPath })
+			let result = await postcss([postcssNested]).process(content, { from: null, to: null })
 			return result.css;
 		}]
 	});