{"id":25461,"library":"esbuild-vanilla-image-loader","title":"esbuild-vanilla-image-loader","description":"esbuild-vanilla-image-loader is a plugin (v0.1.3) for esbuild that enables importing image files (PNG, JPG, GIF, etc.) within vanilla-extract .css.ts files when using vanilla-extract's Vite plugin. It bridges a gap where vanilla-extract's esbuild-based build cannot handle image imports, allowing background-image URLs or data URIs in CSS. It is stable but young, with no breaking changes yet. Unlike general asset modules, this specifically targets the vanilla-extract/esbuild integration, offering a filter option and dataUrl mode. Released under MIT.","status":"active","version":"0.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/wobsoriano/esbuild-vanilla-image-loader","tags":["javascript","typescript"],"install":[{"cmd":"npm install esbuild-vanilla-image-loader","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-vanilla-image-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-vanilla-image-loader","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package exports the plugin factory as a named export, not a default export.","wrong":"import ImageLoader from 'esbuild-vanilla-image-loader'","symbol":"ImageLoader","correct":"import { ImageLoader } from 'esbuild-vanilla-image-loader'"}],"quickstart":{"code":"// Install: pnpm add esbuild-vanilla-image-loader -D\n// vite.config.ts\nimport { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\nimport { ImageLoader } from 'esbuild-vanilla-image-loader';\n\nexport default defineConfig({\n  plugins: [\n    vanillaExtractPlugin({\n      esbuildOptions: {\n        plugins: [ImageLoader()],\n      },\n    }),\n  ],\n});\n\n// src/styles/App.css.ts\nimport { style } from '@vanilla-extract/css';\nimport Pic from './pic.png';\n\nexport const root = style({\n  backgroundImage: `url(${Pic})`,\n  height: 200,\n  width: 200,\n});\n","lang":"typescript","description":"Configures esbuild-vanilla-image-loader in a vanilla-extract Vite project, and imports an image in a .css.ts file."},"warnings":[{"fix":"Ensure you pass esbuildOptions.plugins inside vanillaExtractPlugin(), not in the main Vite esbuild config.","message":"This plugin only works when vanilla-extract uses esbuild (default with Vite plugin). If you use esbuildOptions incorrectly, the plugin won't apply.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use relative paths from the .css.ts file to your image assets.","message":"Image imports in .css.ts files are resolved relative to the file, not the project root. This mirrors normal Vite behavior.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Add import { ImageLoader } from 'esbuild-vanilla-image-loader' and include it in vanillaExtractPlugin's esbuildOptions.plugins.","cause":"esbuild does not support importing images natively; the plugin is missing or misconfigured.","error":"Error: [esbuild] Cannot import file extension '.png'"},{"fix":"Run pnpm add esbuild-vanilla-image-loader -D and ensure tsconfig includes node_modules types.","cause":"The package is not installed or TypeScript cannot resolve the types (no types field).","error":"Cannot find module 'esbuild-vanilla-image-loader' or its corresponding type declarations."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}