Add esbuild configuration (#668)

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

Author: AndrewLeedham

.changeset/clever-ghosts-roll.md

@@ -0,0 +1,8 @@
+---
+"@vanilla-extract/esbuild-plugin": minor
+"@vanilla-extract/integration": major
+"@vanilla-extract/vite-plugin": minor
+"@vanilla-extract/rollup-plugin": minor
+---
+
+Add esbuild configurations to vite/esbuild/rollup plugins

README.md

@@ -393,6 +393,13 @@ Different formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc)
 
 Each integration will set a default value based on the configuration options passed to the bundler.
 
+### esbuildOptions
+> Only for `esbuild`, `vite` and `rollup` plugins
+
+The `vite`, `esbuild` and `rollup` plugins use esbuild internally to compile `.css.ts` files before running them to extract styles. You can pass additional options here to customize that process.
+
+Accepts a subset of esbuild build options (`plugins`, `external`, `define` and `loader`), see https://esbuild.github.io/api/#build-api. The options are deep merged with the default options provided by Vanilla Extract.
+
 ---
 
 ## Styling API

packages/esbuild-plugin/src/index.ts

@@ -9,23 +9,31 @@ import {
   vanillaExtractFilescopePlugin,
   IdentifierOption,
 } from '@vanilla-extract/integration';
-import type { Plugin } from 'esbuild';
+import type { Plugin, BuildOptions as EsbuildOptions } from 'esbuild';
 
 const vanillaCssNamespace = 'vanilla-extract-css-ns';
 
 interface VanillaExtractPluginOptions {
   outputCss?: boolean;
+  /**
+   * @deprecated Use `esbuildOptions.external` instead.
+   */
   externals?: Array<string>;
   runtime?: boolean;
   processCss?: (css: string) => Promise<string>;
   identifiers?: IdentifierOption;
+  esbuildOptions?: Pick<
+    EsbuildOptions,
+    'plugins' | 'external' | 'define' | 'loader'
+  >;
 }
 export function vanillaExtractPlugin({
   outputCss,
   externals = [],
   runtime = false,
   processCss,
   identifiers,
+  esbuildOptions,
 }: VanillaExtractPluginOptions = {}): Plugin {
   if (runtime) {
     // If using runtime CSS then just apply fileScopes to code
@@ -64,10 +72,22 @@ export function vanillaExtractPlugin({
       );
 
       build.onLoad({ filter: cssFileFilter }, async ({ path }) => {
+        const combinedEsbuildOptions = { ...esbuildOptions } ?? {};
+
+        // To avoid a breaking change this combines the `external` option from
+        // esbuildOptions with the pre-existing externals option.
+        if (externals) {
+          if (combinedEsbuildOptions.external) {
+            combinedEsbuildOptions.external.push(...externals);
+          } else {
+            combinedEsbuildOptions.external = externals;
+          }
+        }
+
         const { source, watchFiles } = await compile({
           filePath: path,
-          externals,
           cwd: build.initialOptions.absWorkingDir,
+          esbuildOptions: combinedEsbuildOptions,
         });
 
         const contents = await processVanillaFile({

packages/integration/src/compile.ts

@@ -1,7 +1,11 @@
 import { dirname, join } from 'path';
 import { promises as fs } from 'fs';
 
-import { build as esbuild, Plugin } from 'esbuild';
+import {
+  build as esbuild,
+  Plugin,
+  BuildOptions as EsbuildOptions,
+} from 'esbuild';
 
 import { cssFileFilter } from './filters';
 import { addFileScope } from './addFileScope';
@@ -34,22 +38,30 @@ export const vanillaExtractFilescopePlugin = (): Plugin => ({
 interface CompileOptions {
   filePath: string;
   cwd?: string;
-  externals?: Array<string>;
+  esbuildOptions?: Pick<
+    EsbuildOptions,
+    'plugins' | 'external' | 'define' | 'loader'
+  >;
 }
 export async function compile({
   filePath,
   cwd = process.cwd(),
-  externals = [],
+  esbuildOptions,
 }: CompileOptions) {
   const result = await esbuild({
     entryPoints: [filePath],
     metafile: true,
     bundle: true,
-    external: ['@vanilla-extract', ...externals],
+    external: ['@vanilla-extract', ...(esbuildOptions?.external ?? [])],
     platform: 'node',
     write: false,
-    plugins: [vanillaExtractFilescopePlugin()],
+    plugins: [
+      vanillaExtractFilescopePlugin(),
+      ...(esbuildOptions?.plugins ?? []),
+    ],
     absWorkingDir: cwd,
+    loader: esbuildOptions?.loader,
+    define: esbuildOptions?.define,
   });
 
   const { outputFiles, metafile } = result;

packages/rollup-plugin/src/index.ts

@@ -7,17 +7,23 @@ import {
   getSourceFromVirtualCssFile,
   virtualCssFileFilter,
 } from '@vanilla-extract/integration';
+import { BuildOptions as EsbuildOptions } from 'esbuild';
 import { posix } from 'path';
 
 const { relative, normalize, dirname } = posix;
 
 interface Options {
   identifiers?: IdentifierOption;
   cwd?: string;
+  esbuildOptions?: Pick<
+    EsbuildOptions,
+    'plugins' | 'external' | 'define' | 'loader'
+  >;
 }
 export function vanillaExtractPlugin({
   identifiers,
   cwd = process.cwd(),
+  esbuildOptions,
 }: Options = {}): Plugin {
   const emittedFiles = new Map<string, string>();
   const isProduction = process.env.NODE_ENV === 'production';
@@ -38,6 +44,7 @@ export function vanillaExtractPlugin({
       const { source, watchFiles } = await compile({
         filePath,
         cwd,
+        esbuildOptions,
       });
 
       for (const file of watchFiles) {

packages/vite-plugin/package.json

@@ -21,6 +21,7 @@
     "postcss-load-config": "^3.1.0"
   },
   "devDependencies": {
+    "esbuild": "^0.11.16",
     "vite": "^2.7.0"
   },
   "peerDependencies": {

packages/vite-plugin/src/index.ts

@@ -12,14 +12,22 @@ import {
   getPackageInfo,
 } from '@vanilla-extract/integration';
 import { PostCSSConfigResult, resolvePostcssConfig } from './postcss';
+import { BuildOptions as EsbuildOptions } from 'esbuild';
 
 const styleUpdateEvent = (fileId: string) =>
   `vanilla-extract-style-update:${fileId}`;
 
 interface Options {
   identifiers?: IdentifierOption;
+  esbuildOptions?: Pick<
+    EsbuildOptions,
+    'plugins' | 'external' | 'define' | 'loader'
+  >;
 }
-export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
+export function vanillaExtractPlugin({
+  identifiers,
+  esbuildOptions,
+}: Options = {}): Plugin {
   let config: ResolvedConfig;
   let server: ViteDevServer;
   let postCssConfig: PostCSSConfigResult | null;
@@ -138,6 +146,7 @@ export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
       const { source, watchFiles } = await compile({
         filePath: validId,
         cwd: config.root,
+        esbuildOptions,
       });
 
       for (const file of watchFiles) {

pnpm-lock.yaml

@@ -306,3 +306,11 @@ Different formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc)
 - `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `myfile_mystyle_hnw5tz3`
 
 Each integration will set a default value based on the configuration options passed to the bundler.
+
+### esbuildOptions
+
+> Only for `esbuild`, `vite` and `rollup` plugins
+
+The `vite`, `esbuild` and `rollup` plugins use esbuild internally to compile `.css.ts` files before running them to extract styles. You can pass additional options here to customize that process.
+
+Accepts a subset of esbuild build options (`plugins`, `external`, `define` and `loader`), see https://esbuild.github.io/api/#build-api. The options are deep merged with the default options provided by Vanilla Extract.