@eleventy-plugin-themer/build-vite 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Artis Lismanis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,161 @@
+# @eleventy-plugin-themer/build-vite
+
+Vite integration with production optimizations for Eleventy themes built with `@eleventy-plugin-themer/core`.
+
+## Features
+
+- **Auto-Import** - Automatically imports theme styles and scripts into user entry points
+- **Feature Discovery** - Discovers and bundles theme features as Vite entry points
+- **PurgeCSS** - Removes unused CSS from production builds
+- **Critical CSS** - Inlines critical CSS and async loads the rest (via Critters)
+- **HTML Minification** - Minifies HTML output
+- **Link Validation** - Validates internal links and images after build
+- **Non-HTML Preservation** - Preserves files like RSS feeds and sitemaps
+- **Dev Server** - Serves feature scripts during development with HMR
+
+## Installation
+
+```bash
+npm install -D @eleventy-plugin-themer/build-vite @11ty/eleventy-plugin-vite
+```
+
+Optional peer dependencies (install based on optimizations you enable):
+
+```bash
+npm install -D purgecss critters html-minifier-terser node-html-parser glob
+```
+
+## Usage
+
+```js
+// eleventy.config.mjs
+import { eleventyPluginThemer } from '@eleventy-plugin-themer/core';
+import { eleventyPluginThemerVite } from '@eleventy-plugin-themer/build-vite';
+
+const THEME_NAME = '@eleventy-plugin-themer/theme-base';
+
+export default async function (eleventyConfig) {
+  const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+  // Register core theme plugin (direct call so we can spread `dir` into the return value)
+  const { dir } = await eleventyPluginThemer(eleventyConfig, {
+    theme: THEME_NAME,
+    projectRoot: __dirname,
+    input: 'content',
+    output: '_site',
+  });
+
+  // Register Vite plugin with optimizations
+  await eleventyPluginThemerVite(eleventyConfig, {
+    theme: THEME_NAME,
+    projectRoot: __dirname,
+    optimizations: {
+      purgeCSS: true,
+      criticalCSS: true,
+      minifyHTML: true,
+      validateLinks: true,
+      preserveNonHtml: {
+        extensions: ['xml', 'txt', 'xsl'],
+      },
+    },
+  });
+
+  return { dir };
+}
+```
+
+## API
+
+### `eleventyPluginThemerVite(eleventyConfig, options)`
+
+Eleventy plugin that wraps `@11ty/eleventy-plugin-vite` with theme-aware configuration.
+
+**Options:**
+
+- `theme` (string, required) - Theme package name
+- `projectRoot` (string, required) - Project root path
+- `scriptsEntry` (string) - Main scripts entry point (default: `'overrides/scripts/main.js'`)
+- `tempFolderName` (string) - Vite temp folder name (default: `'.11ty-vite'`)
+- `overridePaths` (Object) - Override paths configuration
+- `viteOptions` (Object) - Additional Vite options to merge with theme defaults
+- `optimizations` (Object) - Production optimization toggles:
+  - `purgeCSS` (boolean | Object) - Remove unused CSS
+  - `criticalCSS` (boolean | Object) - Inline critical CSS
+  - `minifyHTML` (boolean | Object) - Minify HTML output
+  - `validateLinks` (boolean | Object) - Validate internal links
+  - `preserveNonHtml` (Object) - Preserve non-HTML files. Provide `{ extensions: ['xml', 'txt'] }`
+
+### How `optimizations` merges with `theme.json#build`
+
+A theme can declare build hints in its `theme.json` under `build.*` (currently `build.purgeCSS` and `build.postcss`). These are merged with the consumer's `optimizations` config at plugin init by `mergeThemeBuildHints`:
+
+- **Arrays** (e.g. `purgeCSS.safelist.standard`, `safelist.deep`, `safelist.greedy`): theme entries come **first**, user entries **append** (deduped). Theme entries cannot be silently shadowed by a user typo, and greedy patterns the theme relies on stay at the head of the array.
+- **Objects** (non-array): user values **win** (last-spread). Setting `purgeCSS: true` enables the optimisation with the theme's hints; passing `purgeCSS: { safelist: {...} }` extends them per the array rule above.
+- **Booleans / primitives**: user value replaces.
+- **PostCSS plugins** (`build.postcss.plugins`) follow the same rule: theme-declared plugins run first, user-supplied plugins append. Override a theme plugin by re-declaring an entry with the same `package` name in your project's `postcss.config.mjs`.
+
+Disabling a theme-provided optimisation entirely: set the toggle to `false` in `optimizations` (e.g. `purgeCSS: false`).
+
+### `getFeatureEntries(projectRoot, themeMetadata, opts?)`
+
+Returns Vite entry points for the main script and all discovered features. Used internally by `eleventyPluginThemerVite`, but available for advanced use cases.
+
+```js
+import { getFeatureEntries } from '@eleventy-plugin-themer/build-vite';
+import { metadata } from '@eleventy-plugin-themer/theme-base';
+
+const input = getFeatureEntries(__dirname, metadata, {
+  resolvedOverridePaths, // optional; auto-resolved if absent
+  discoveredFeatures, // optional Map; avoids redundant FS scan
+});
+```
+
+If you've already called `getAvailableFeatures()` at plugin init, pass the resulting Map as `opts.discoveredFeatures` to skip a duplicate filesystem scan.
+
+### Individual Plugins
+
+Optimization plugins can be imported individually for custom build pipelines:
+
+```js
+import {
+  purgeCSSFiles,
+  generateCriticalCSS,
+  minifyHTML,
+  validateLinks,
+  preserveNonHtmlFiles,
+} from '@eleventy-plugin-themer/build-vite';
+```
+
+All follow the signature `(outputDir, options) => Promise<void>` and throw on failure.
+
+## Integration check
+
+`eleventyPluginThemerVite` runs a one-shot sanity check at plugin init that compares your environment against the package's declared peer ranges:
+
+- Node version vs `engines.node` (>=22)
+- `vite` peer version vs the supported major(s)
+- `@11ty/eleventy-plugin-vite` peer version vs the supported major(s)
+
+On a healthy environment you'll see one line on startup:
+
+```text
+[themer/build-vite 0.1.0] integration check: OK
+```
+
+On mismatch you get actionable warnings. The check **never throws** — a corrupt manifest or unreadable peer is logged and skipped so it can't take down your build. Opt out with `skipIntegrationCheck: true` if you're running a custom build flow.
+
+## Logging
+
+Set `THEME_LOG_LEVEL` environment variable to control output verbosity:
+
+```bash
+THEME_LOG_LEVEL=silent npx eleventy  # No theme output
+THEME_LOG_LEVEL=error npx eleventy   # Errors only
+THEME_LOG_LEVEL=warn npx eleventy    # Errors + warnings
+THEME_LOG_LEVEL=info npx eleventy    # Default
+THEME_LOG_LEVEL=debug npx eleventy   # Verbose
+```
+
+## License
+
+MIT

package/index.mjs

@@ -0,0 +1,260 @@
+/**
+ * @eleventy-plugin-themer/build-vite
+ *
+ * Opinionated Vite integration with production optimizations.
+ * Build what works for me, adaptable for your needs.
+ */
+
+import path from 'path';
+
+import { getThemerContext } from '@eleventy-plugin-themer/core/internal/api';
+
+import { createThemeViteConfig } from './theme-config.mjs';
+import { getFeatureEntries as _getFeatureEntries } from './utils/features.mjs';
+import { ASSET_PATHS } from './utils/constants.mjs';
+import { runIntegrationCheck } from './utils/integration-check.mjs';
+import { KNOWN_OPTIMIZATIONS } from './utils/plugin-orchestrator.mjs';
+
+/**
+ * @public
+ *
+ * PostCSS preset helper. Consumers call `createPostcssConfig` from their own
+ * `postcss.config.mjs` to defer to plugins declared in `theme.json#build.postcss`.
+ */
+export { createPostcssConfig } from './postcss.mjs';
+
+/**
+ * Default rollup output options for theme builds.
+ *
+ * Provides sensible defaults for asset naming and organization.
+ * Can be overridden via options.build.rollupOptions.output.
+ *
+ * @param {Object} options - Configuration options
+ * @returns {Object} Rollup output configuration
+ */
+function createDefaultRollupOutput(_options = {}) {
+  return {
+    entryFileNames: (chunkInfo) => {
+      if (chunkInfo.name === 'main') {
+        return `${ASSET_PATHS.scripts}/[name].[hash].js`;
+      }
+      const cleanName = chunkInfo.name.replace(/^\//, '').replace(/\.js$/, '');
+      return `${ASSET_PATHS.scripts}/${cleanName}.[hash].js`;
+    },
+    chunkFileNames: (chunkInfo) => {
+      if (chunkInfo.name === 'main') {
+        return `${ASSET_PATHS.scripts}/[name].[hash].js`;
+      }
+      return `${ASSET_PATHS.scripts}/chunks/[name].[hash].js`;
+    },
+    assetFileNames: ({ name, type }) => {
+      if (type === 'asset' && name?.endsWith('.css')) {
+        return `${ASSET_PATHS.css}/[name].[hash][extname]`;
+      }
+      if (/\.(xml|txt|xsl)$/.test(name ?? '')) {
+        return '[name][extname]';
+      }
+      if (/\.(woff|woff2|eot|ttf|otf)$/.test(name ?? '')) {
+        return `${ASSET_PATHS.fonts}/[name].[hash][extname]`;
+      }
+      if (/\.(png|jpe?g|svg|gif|webp|avif)$/.test(name ?? '')) {
+        return `${ASSET_PATHS.images}/[name].[hash][extname]`;
+      }
+      return 'assets/[name].[hash][extname]';
+    },
+  };
+}
+
+/**
+ * Eleventy plugin for Vite integration with theme support.
+ *
+ * This is the recommended way to use @eleventy-plugin-themer/build-vite.
+ * It wraps @11ty/eleventy-plugin-vite with theme-aware configuration:
+ * 1. Auto-imports theme styles and scripts
+ * 2. Discovers and bundles theme features
+ * 3. Sets up @theme aliases for imports
+ * 4. Applies production optimizations (PurgeCSS, Critical CSS, etc.)
+ * 5. Provides sensible rollup output defaults
+ *
+ * @param {Object} eleventyConfig - Eleventy configuration object (provided by Eleventy)
+ * @param {Object} options - Plugin options
+ * @param {string} options.theme - The theme package name (required)
+ * @param {string} options.projectRoot - Project root path (required)
+ * @param {string} [options.scriptsEntry] - Path to main scripts entry (default: 'overrides/scripts/main.js')
+ * @param {Object} [options.optimizations] - Production optimizations config
+ * @param {boolean} [options.optimizations.purgeCSS] - Enable PurgeCSS
+ * @param {boolean} [options.optimizations.criticalCSS] - Enable Critical CSS extraction
+ * @param {boolean} [options.optimizations.minifyHTML] - Enable HTML minification
+ * @param {boolean} [options.optimizations.validateLinks] - Enable link validation
+ * @param {Object} [options.optimizations.preserveNonHtml] - Preserve non-HTML files config
+ * @param {Object} [options.overridePaths] - Override paths configuration
+ * @param {Object} [options.viteOptions] - Additional Vite options to merge
+ * @param {string} [options.tempFolderName='.11ty-vite'] - Temp folder name for Vite
+ *
+ * @example
+ * // In eleventy.config.mjs
+ * import { eleventyPluginThemerVite } from '@eleventy-plugin-themer/build-vite';
+ *
+ * export default async function(eleventyConfig) {
+ *   const __dirname = fileURLToPath(new URL('.', import.meta.url));
+ *
+ *   eleventyConfig.addPlugin(eleventyPluginThemerVite, {
+ *     theme: '@eleventy-plugin-themer/theme-base',
+ *     projectRoot: __dirname,
+ *     optimizations: {
+ *       purgeCSS: true,
+ *       criticalCSS: true,
+ *       minifyHTML: true,
+ *       validateLinks: true,
+ *     },
+ *   });
+ *
+ *   return { dir: { input: 'content', output: '_site' } };
+ * }
+ */
+function validatePluginOptions({ theme, projectRoot, optimizations }) {
+  if (!theme) {
+    throw new Error(
+      'eleventyPluginThemerVite requires a `theme` option specifying the theme package name.',
+    );
+  }
+  if (!projectRoot) {
+    throw new Error('eleventyPluginThemerVite requires a `projectRoot` option.');
+  }
+  if (optimizations && typeof optimizations === 'object') {
+    const unknown = Object.keys(optimizations).filter((k) => !KNOWN_OPTIMIZATIONS.has(k));
+    if (unknown.length > 0) {
+      throw new Error(
+        `eleventyPluginThemerVite: unknown optimization key(s): ${unknown.join(', ')}. ` +
+          `Valid keys: ${[...KNOWN_OPTIMIZATIONS].join(', ')}.`,
+      );
+    }
+  }
+}
+
+async function loadEleventyVitePlugin() {
+  try {
+    const mod = await import('@11ty/eleventy-plugin-vite');
+    return mod.default;
+  } catch (cause) {
+    throw new Error(
+      'eleventyPluginThemerVite requires @11ty/eleventy-plugin-vite to be installed.\n' +
+        'Run: npm install @11ty/eleventy-plugin-vite',
+      { cause },
+    );
+  }
+}
+
+/**
+ * Resolve theme metadata, override paths, and feature discovery for the
+ * Vite adapter from the cached themer context populated by
+ * `eleventyPluginThemer` (see core/lib/index.mjs).
+ *
+ * Throws if the core plugin wasn't registered first — registration order is
+ * required for correctness (the adapter relies on the core plugin's resolved
+ * metadata, override paths, and feature discovery), so a silent fallback
+ * masks a real misconfiguration.
+ */
+function resolveBuildContext({ eleventyConfig }) {
+  const cached = getThemerContext(eleventyConfig);
+  if (!cached) {
+    throw new Error(
+      'eleventyPluginThemerVite: no themer context found on eleventyConfig. ' +
+        'Register `eleventyPluginThemer` (from @eleventy-plugin-themer/core) before ' +
+        'this plugin so it can share resolved metadata, override paths, and discovered features.',
+    );
+  }
+  return {
+    themeMetadata: cached.themeMetadata,
+    mergedThemeConfig: cached.mergedThemeConfig,
+    resolvedOverridePaths: cached.resolvedOverridePaths,
+    discoveredFeatures: cached.discoveredFeatures,
+  };
+}
+
+function buildViteOptions(ctx, opts) {
+  const {
+    themeMetadata,
+    mergedThemeConfig,
+    resolvedOverridePaths,
+    discoveredFeatures,
+    featureEntries,
+  } = ctx;
+  const { projectRoot, scriptsEntry, optimizations, viteOptions, tempFolderName } = opts;
+
+  return createThemeViteConfig(themeMetadata, {
+    projectRoot,
+    mergedConfig: mergedThemeConfig,
+    resolvedOverridePaths,
+    optimizations,
+    discoveredFeatures,
+    dirs: { temp: tempFolderName },
+    assetsInclude: ['**/*.xml', '**/*.txt', '**/*.xsl'],
+    publicDir: 'public',
+    server: {
+      mode: 'development',
+      middlewareMode: true,
+      watch: {
+        usePolling: true,
+        interval: 100,
+        ignored: ['**/_site/**', '**/node_modules/**'],
+      },
+      hmr: { overlay: true },
+    },
+    appType: 'custom',
+    resolve: {
+      alias: {
+        '/assets/scripts/main.js': path.resolve(projectRoot, scriptsEntry),
+        '/assets/scripts/features': path.resolve(projectRoot, resolvedOverridePaths.features),
+      },
+    },
+    build: {
+      mode: 'production',
+      sourcemap: 'hidden',
+      manifest: true,
+      emptyOutDir: false,
+      rollupOptions: {
+        input: {
+          main: path.resolve(projectRoot, scriptsEntry),
+          ...featureEntries,
+        },
+        output: createDefaultRollupOutput(),
+      },
+      cssCodeSplit: true,
+    },
+    ...viteOptions,
+  });
+}
+
+export async function eleventyPluginThemerVite(eleventyConfig, options = {}) {
+  const opts = {
+    scriptsEntry: 'overrides/scripts/main.js',
+    optimizations: {},
+    overridePaths: {},
+    viteOptions: {},
+    tempFolderName: '.11ty-vite',
+    ...options,
+  };
+
+  validatePluginOptions(opts);
+  runIntegrationCheck({ silent: opts.skipIntegrationCheck });
+  const EleventyVitePlugin = await loadEleventyVitePlugin();
+
+  const ctx = resolveBuildContext({ eleventyConfig });
+  const featureEntries = _getFeatureEntries(opts.projectRoot, ctx.themeMetadata, {
+    resolvedOverridePaths: ctx.resolvedOverridePaths,
+    discoveredFeatures: ctx.discoveredFeatures,
+  });
+
+  const themeViteConfig = buildViteOptions({ ...ctx, featureEntries }, opts);
+
+  eleventyConfig.addPlugin(EleventyVitePlugin, {
+    tempFolderName: opts.tempFolderName,
+    viteOptions: themeViteConfig,
+  });
+
+  return {
+    themeMetadata: ctx.themeMetadata,
+    featureEntries,
+  };
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@eleventy-plugin-themer/build-vite",
+  "version": "0.1.0",
+  "description": "Opinionated Vite integration with production optimizations for Eleventy themes",
+  "type": "module",
+  "main": "index.mjs",
+  "exports": {
+    ".": "./index.mjs",
+    "./postcss": "./postcss.mjs"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint ."
+  },
+  "files": [
+    "plugins/",
+    "utils/",
+    "index.mjs",
+    "theme-config.mjs",
+    "postcss.mjs",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "eleventy",
+    "eleventy-theme",
+    "vite",
+    "production-optimization",
+    "purgecss",
+    "critical-css",
+    "html-minification"
+  ],
+  "author": "Artis Lismanis",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/artislismanis/eleventy-plugin-themer.git",
+    "directory": "packages/build/vite"
+  },
+  "bugs": {
+    "url": "https://github.com/artislismanis/eleventy-plugin-themer/issues"
+  },
+  "homepage": "https://github.com/artislismanis/eleventy-plugin-themer/tree/main/packages/build/vite#readme",
+  "dependencies": {
+    "@eleventy-plugin-themer/core": "^0.1.0",
+    "glob": "^13.0.0",
+    "purgecss": "^6.0.0",
+    "critters": "^0.0.24",
+    "html-minifier-terser": "^7.2.0",
+    "node-html-parser": "^7.0.1"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "@11ty/eleventy-plugin-vite": "^7.0.0"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

package/plugins/auto-import.mjs

@@ -0,0 +1,82 @@
+/**
+ * Vite plugin that auto-imports theme assets into user entry points
+ *
+ * This eliminates the need for users to manually import theme styles/scripts.
+ * The plugin prepends theme imports to the user's main entry file.
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+import { resolveResource, getThemeRoot } from '@eleventy-plugin-themer/core/internal/api';
+
+/**
+ * @param {Object} options - Plugin options
+ * @param {string} options.projectRoot - Project root path
+ * @param {string} options.themeName - Theme package name
+ * @param {string} options.stylesEntry - Theme styles entry filename (e.g., 'main.scss')
+ * @param {string} options.scriptsEntry - Theme scripts entry filename (e.g., 'main.js')
+ * @param {Object} options.resolvedOverridePaths - Resolved override paths object
+ * @returns {Object} Vite plugin
+ */
+export function themeAutoImportPlugin(options = {}) {
+  const { projectRoot, themeName, stylesEntry, scriptsEntry, resolvedOverridePaths } = options;
+
+  if (!projectRoot || !themeName || !resolvedOverridePaths || !stylesEntry || !scriptsEntry) {
+    throw new Error(
+      'themeAutoImportPlugin requires projectRoot, themeName, resolvedOverridePaths, stylesEntry, and scriptsEntry',
+    );
+  }
+
+  // Get theme root for direct theme imports (not cascade-resolved)
+  const themeRoot = getThemeRoot(projectRoot, themeName);
+
+  return {
+    name: 'theme-auto-import',
+
+    transform(code, id) {
+      // Resolve the path to the user's main script entry point
+      // Use basename because entry paths like 'scripts/main.js' are relative to theme root,
+      // but resolveResource already uses resourceType to determine the base directory
+      const userMainScript = resolveResource({
+        projectRoot,
+        themeName,
+        resolvedOverridePaths,
+        resourceType: 'scripts',
+        filename: path.basename(scriptsEntry), // Extract 'main.js' from 'scripts/main.js'
+      });
+
+      // Only transform if:
+      // 1. User has their own main script (we need to inject theme imports into it)
+      // 2. The file being transformed matches the user's main entry point
+      if (!userMainScript || userMainScript.source !== 'user' || id !== userMainScript.path) {
+        return null;
+      }
+
+      // Build direct paths to theme assets (always from theme, not cascade-resolved)
+      // This ensures theme scripts/styles are imported even when user has overrides
+      // Use the entry paths directly (e.g., 'styles/main.scss') which encode the directory
+      const themeStylesPath = path.join(themeRoot, stylesEntry);
+      const themeScriptsPath = path.join(themeRoot, scriptsEntry);
+
+      // Check if theme files exist
+      const hasThemeStyles = fs.existsSync(themeStylesPath);
+      const hasThemeScripts = fs.existsSync(themeScriptsPath);
+
+      // Prepend theme imports (always from theme package, not user overrides)
+      const themeImports = [
+        `// Auto-imported by theme (${themeName})`,
+        hasThemeStyles ? `import '${themeStylesPath}';` : '',
+        hasThemeScripts ? `import '${themeScriptsPath}';` : '',
+        '',
+      ]
+        .filter(Boolean)
+        .join('\n');
+
+      return {
+        code: themeImports + code,
+        map: null,
+      };
+    },
+  };
+}

package/plugins/critical-css.mjs

@@ -0,0 +1,31 @@
+import fs from 'fs/promises';
+
+import Critters from 'critters';
+
+import { processFiles } from '../utils/file-processor.mjs';
+import { GLOB_PATTERNS } from '../utils/constants.mjs';
+
+export async function generateCriticalCSS(outputDir, options = {}) {
+  const critters = new Critters({
+    path: outputDir,
+    publicPath: '/',
+    inlineFonts: true,
+    pruneSource: true,
+    mergeStylesheets: true,
+    compress: true,
+    logLevel: 'warn', // Only show warnings/errors from Critters
+    ...options,
+  });
+
+  return processFiles({
+    pattern: GLOB_PATTERNS.html(outputDir),
+    outputDir,
+    taskName: 'Critical CSS',
+    errorTip: 'Check if CSS files exist and are properly linked in HTML',
+    processor: async (file) => {
+      const html = await fs.readFile(file, 'utf-8');
+      const inlined = await critters.process(html);
+      await fs.writeFile(file, inlined);
+    },
+  });
+}

package/plugins/feature-serve.mjs

@@ -0,0 +1,51 @@
+/**
+ * Vite plugin to serve feature scripts in development mode
+ *
+ * In production, Vite bundles features via rollup entry points.
+ * In development, this plugin intercepts /{feature-name}.js requests
+ * and serves the corresponding feature file through Vite's transform pipeline.
+ */
+
+import fs from 'fs';
+
+import { getFeaturePathsForBuild } from '../utils/features.mjs';
+
+/**
+ * @param {Object} options - Plugin options
+ * @param {Map<string, {path: string}>} options.discoveredFeatures - Pre-discovered features
+ *   from `getAvailableFeatures()`. Required.
+ * @returns {Object} Vite plugin
+ */
+export function featureServePlugin({ discoveredFeatures } = {}) {
+  // getFeaturePathsForBuild throws TypeError if discoveredFeatures is missing —
+  // surfacing the same contract violation here would just duplicate that.
+  const featurePaths = getFeaturePathsForBuild(discoveredFeatures);
+
+  return {
+    name: 'feature-serve',
+    apply: 'serve', // Only apply in dev mode
+
+    configureServer(server) {
+      // Add middleware to intercept feature requests
+      server.middlewares.use((req, res, next) => {
+        // Match /{feature-name}.js pattern
+        const match = req.url?.match(/^\/([a-z0-9-]+)\.js$/i);
+        if (!match) {
+          return next();
+        }
+
+        const featureName = match[1];
+        const featurePath = featurePaths.get(featureName);
+
+        if (!featurePath || !fs.existsSync(featurePath)) {
+          return next();
+        }
+
+        // Transform the request to use Vite's module resolution
+        // Prefix with /@fs/ to use Vite's file system serving
+        req.url = `/@fs${featurePath}`;
+        next();
+      });
+    },
+  };
+}

package/plugins/index.mjs

@@ -0,0 +1,15 @@
+/**
+ * Vite plugins for Eleventy theme development and production
+ *
+ * All plugins use dynamic imports for optional dependencies.
+ * If a dependency is not installed, the plugin skips gracefully.
+ */
+
+export { themeAutoImportPlugin } from './auto-import.mjs';
+export { featureServePlugin } from './feature-serve.mjs';
+export { purgeCSSFiles } from './purge-css.mjs';
+export { generateCriticalCSS } from './critical-css.mjs';
+export { minifyHTML } from './minify-html.mjs';
+export { validateLinks } from './validate-links.mjs';
+export { preserveNonHtmlFiles } from './preserve-non-html.mjs';
+export { prismThemePlugin } from './prism-theme.mjs';