esbuild-vanilla-image-loader

Meant to be used with vanilla-extract and its Vite plugin. See this.

Install

pnpm add esbuild-vanilla-image-loader -D

import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
import { ImageLoader } from 'esbuild-vanilla-image-loader'

export default defineConfig({
  plugins: [
    vanillaExtractPlugin({
      esbuildOptions: {
        plugins: [ImageLoader()],
      }
    }),
  ],
})

Usage

// src/style/App.css.ts

import { style } from '@vanilla-extract/css'
import Pic from './pic.png'

export const root = style({
  backgroundImage: `url(${Pic})`,
  height: 200,
  width: 200
})

Options

ImageLoader({
  filter: /\.(gif|jpe?g|tiff?|png|webp|bmp)$/,
  dataUrl: false, // Read file as dataurl
})

License

MIT