Add transforms example

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_

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);

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;
 		}]
 	});