chore: convert preprocessor to vite plugin

Author: benmccann

.changeset/curvy-flies-carry.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/enhanced-img': minor
+---
+
+feat: add support for targeting `enhanced\:img` in CSS

documentation/docs/40-best-practices/07-images.md

@@ -27,8 +27,6 @@ Doing this manually is tedious. There are a variety of techniques you can use, d
 `@sveltejs/enhanced-img` is a plugin offered on top of Vite's built-in asset handling. It provides plug and play image processing that serves smaller file formats like `avif` or `webp`, automatically sets the intrinsic `width` and `height` of the image to avoid layout shift, creates images of multiple sizes for various devices, and strips EXIF data for privacy. It will work in any Vite-based project including, but not limited to, SvelteKit projects.
 
 > [!NOTE] As a build plugin, `@sveltejs/enhanced-img` can only optimize files located on your machine during the build process. If you have an image located elsewhere (such as a path served from your database, CMS, or backend), please read about [loading images dynamically from a CDN](#Loading-images-dynamically-from-a-CDN).
->
-> **WARNING**: The `@sveltejs/enhanced-img` package is experimental. It uses pre-1.0 versioning and may introduce breaking changes with every minor version release.
 
 ### Setup
 
@@ -67,7 +65,7 @@ At build time, your `<enhanced:img>` tag will be replaced with an `<img>` wrappe
 
 You should provide your image at 2x resolution for HiDPI displays (a.k.a. retina displays). `<enhanced:img>` will automatically take care of serving smaller versions to smaller devices.
 
-If you wish to add styles to your `<enhanced:img>`, you should add a `class` and target that.
+> [!NOTE] if you wish to use a [tag name CSS selector](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#type_selectors) in your `<style>` block you will need to write `enhanced\:img` to escape the colon in the tag name.
 
 ### Dynamically choosing an image
 

packages/enhanced-img/src/index.js

@@ -1,10 +1,10 @@
 import path from 'node:path';
 import process from 'node:process';
 import { imagetools } from 'vite-imagetools';
-import { image } from './preprocessor.js';
+import { image_plugin } from './vite-plugin.js';
 
 /**
- * @returns {import('vite').Plugin[]}
+ * @returns {Array<import('vite').Plugin | Promise<import('vite').Plugin>>}
  */
 export function enhancedImages() {
 	const imagetools_instance = imagetools_plugin();
@@ -13,42 +13,6 @@ export function enhancedImages() {
 		: [];
 }
 
-/**
- * Creates the Svelte image plugin which provides the preprocessor.
- * @param {import('vite').Plugin} imagetools_plugin
- * @returns {import('vite').Plugin}
- */
-function image_plugin(imagetools_plugin) {
-	/**
-	 * @type {{
-	 *   plugin_context: import('vite').Rollup.PluginContext
-	 *   vite_config: import('vite').ResolvedConfig
-	 *   imagetools_plugin: import('vite').Plugin
-	 * }}
-	 */
-	const opts = {
-		// @ts-expect-error populated when build starts so we cheat on type
-		plugin_context: undefined,
-		// @ts-expect-error populated when build starts so we cheat on type
-		vite_config: undefined,
-		imagetools_plugin
-	};
-	const preprocessor = image(opts);
-
-	return {
-		name: 'vite-plugin-enhanced-img',
-		api: {
-			sveltePreprocess: preprocessor
-		},
-		configResolved(config) {
-			opts.vite_config = config;
-		},
-		buildStart() {
-			opts.plugin_context = this;
-		}
-	};
-}
-
 /** @type {Record<string,string>} */
 const fallback = {
 	'.avif': 'png',