Add processCss callback option for esbuild plugin (#183)

Co-authored-by: mattcompiles <[email protected]>

Author: Brendan-csel

.changeset/curly-bats-allow.md

@@ -0,0 +1,28 @@
+---
+'@vanilla-extract/esbuild-plugin': minor
+---
+
+Add `processCss` plugin option to allow further processing of CSS while bundling.
+
+**Example for postcss with autoprefixer:**
+
+```js
+const { vanillaExtractPlugin } = require('@vanilla-extract/esbuild-plugin');
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
+
+require('esbuild').build({
+  entryPoints: ['app.ts'],
+  bundle: true,
+  plugins: [vanillaExtractPlugin({
+
+    processCss: async (css) => {
+      return (await postcss([autoprefixer])
+        .process(css, { from: undefined /* suppress source map warning */ })
+      ).css
+    }
+
+  })],
+  outfile: 'out.js',
+}).catch(() => process.exit(1))
+```

packages/esbuild-plugin/src/index.ts

@@ -14,11 +14,13 @@ interface VanillaExtractPluginOptions {
   outputCss?: boolean;
   externals?: Array<string>;
   runtime?: boolean;
+  processCss?: (css: string) => Promise<string>;
 }
 export function vanillaExtractPlugin({
   outputCss,
   externals = [],
   runtime = false,
+  processCss,
 }: VanillaExtractPluginOptions = {}): Plugin {
   if (runtime) {
     // If using runtime CSS then just apply fileScopes to code
@@ -37,8 +39,12 @@ export function vanillaExtractPlugin({
 
       build.onLoad(
         { filter: /.*/, namespace: vanillaCssNamespace },
-        ({ path }) => {
-          const { source } = getSourceFromVirtualCssFile(path);
+        async ({ path }) => {
+          let { source } = getSourceFromVirtualCssFile(path);
+
+          if (typeof processCss === 'function') {
+            source = await processCss(source);
+          }
 
           return {
             contents: source,