@oddsquad/vite-plugin-lit 0.0.5 → 0.2.0

package/lib/plugin.d.ts

@@ -46,6 +46,17 @@ export interface HmrOptions {
      */
     indicator?: boolean | HmrIndicatorOptions;
 }
+/**
+ * What a `?css-sheet` import compiles to under `vite build`.
+ *
+ * - `'url'`: fetch-backed sheet over the emitted `.css` asset.
+ * - `'inline'`: css text embedded in the JS chunk, processed by the css
+ *   pipeline (`?inline`).
+ * - `'inline-raw'`: css text embedded verbatim, skipping the css pipeline
+ *   (`?raw`).
+ * - `'auto'`: `'inline'` when `build.lib` is set, `'url'` otherwise.
+ */
+export type CssSheetBuild = 'auto' | 'url' | 'inline' | 'inline-raw';
 /**
  * Options for the Lit Vite plugin.
  *
@@ -77,14 +88,59 @@ export interface LitPluginOptions {
      * `true` enables all built-in layers with defaults.
      */
     timeline?: boolean;
+    /**
+     * What a `?css-sheet` import compiles to under `vite build`.
+     * - `'url'`:        fetch-backed sheet over the emitted `.css` asset
+     * - `'inline'`:     css text embedded in the JS chunk, processed by the css
+     *                   pipeline (`?inline`)
+     * - `'inline-raw'`: css text embedded verbatim, skipping the css pipeline
+     *                   (`?raw`)
+     * - `'auto'`:       `'inline'` when `build.lib` is set, `'url'` otherwise
+     *
+     * Dev is always the fetch-backed HMR form regardless of this setting.
+     * Defaults to `'auto'`.
+     */
+    cssSheetBuild?: CssSheetBuild;
+}
+/** Plugin options after merging explicit options, env vars, and defaults. */
+export interface ResolvedOptions {
+    hmrEnabled: boolean;
+    reconnect: boolean;
+    onIncompatible: 'reload' | 'warn';
+    indicator: false | {
+        count: boolean;
+    };
+    sourceOverlay: false | SourceOverlayOptions;
+    timeline: boolean;
+    cssSheetBuild: CssSheetBuild;
 }
+/**
+ * Merge explicit options over env vars over defaults (in that precedence) into
+ * the flat shape the plugin hooks consume.
+ */
+export declare const resolveOptions: (options: LitPluginOptions, env: Record<string, string>) => ResolvedOptions;
+export declare const createOpenInEditorMiddleware: (allowedRoots: readonly string[]) => (req: {
+    url?: string;
+    headers?: {
+        origin?: string;
+        host?: string;
+    };
+}, res: {
+    statusCode: number;
+    end: (msg: string) => void;
+}, next: (err?: unknown) => void) => void;
 /**
  * Import-query support, served in dev and build alike (source code using
  * `?hmr-url`/`?css-sheet` must keep working under `vite build`, where the HMR
  * plugin doesn't apply). Exported for the baseline e2e run, which needs the
  * queries working without the HMR plugin.
+ *
+ * `getCssSheetBuild` is a getter, not a value: `litPlugin()` re-resolves its
+ * options against the loaded env in a `config` hook, which runs after the
+ * plugin array is built. Standalone (no getter) it behaves like the `'auto'`
+ * default.
  */
-export declare const litCssQueries: () => Plugin;
+export declare const litCssQueries: (getCssSheetBuild?: () => CssSheetBuild) => Plugin;
 /**
  * Vite plugin set providing HMR, CSS helpers, and Lightning CSS processing
  * for Lit projects.

package/lib/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/plugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,EAA2B,KAAK,MAAM,EAAC,MAAM,MAAM,CAAC;AAI3D,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,YAAY,CAAC;AAKrD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;CAC3C;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAE3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,oBAAoB,CAAC;IAE/C;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6PD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,QAAO,MA4D/B,CAAC;AAuFH;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,UAAS,gBAAqB,KAAG,MAAM,EAsQhE,CAAC"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/plugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,EAA2B,KAAK,MAAM,EAAC,MAAM,MAAM,CAAC;AAI3D,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,YAAY,CAAC;AAKrD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;CAC3C;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,YAAY,CAAC;AASrE;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAE3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,oBAAoB,CAAC;IAE/C;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;;;OAWG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,6EAA6E;AAC7E,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,QAAQ,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,KAAK,GAAG;QAAC,KAAK,EAAE,OAAO,CAAA;KAAC,CAAC;IACpC,aAAa,EAAE,KAAK,GAAG,oBAAoB,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,aAAa,CAAC;CAC9B;AAuCD;;;GAGG;AACH,eAAO,MAAM,cAAc,GACzB,SAAS,gBAAgB,EACzB,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAC1B,eA4DF,CAAC;AA8DF,eAAO,MAAM,4BAA4B,GACvC,cAAc,SAAS,MAAM,EAAE,MAM7B,KAAK;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAC,CAAA;CAAC,EAC/D,KAAK;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAAC,EACrD,MAAM,CAAC,GAAG,CAAC,EAAE,OAAO,KAAK,IAAI,SAkFhC,CAAC;AAoCF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,GACxB,mBAAkB,MAAM,aAA4B,KACnD,MAwFF,CAAC;AAuFF;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,UAAS,gBAAqB,KAAG,MAAM,EA0RhE,CAAC"}

package/lib/plugin.js

@@ -12,6 +12,12 @@ import { injectSourceMeta } from './source-meta.js';
 import { INSTALL_ID, VIRTUAL_PREFIX, transformLitModule } from './transform.js';
 import { WRAP_TABLE } from './wrap-table.js';
 import { litTimelinePlugin } from './timeline-plugin.js';
+const CSS_SHEET_BUILD_MODES = [
+    'auto',
+    'url',
+    'inline',
+    'inline-raw',
+];
 /** Env var prefix consumed at config time. */
 const ENV_PREFIX = 'LIT_PLUGIN';
 /** Parse a boolean-ish env string; `undefined` when unset/unrecognized. */
@@ -27,11 +33,25 @@ const envNum = (v) => {
     const n = Number(v);
     return Number.isNaN(n) ? undefined : n;
 };
+/**
+ * Parse a string against a closed set of values; `undefined` (with a warning)
+ * when set to something outside it, so a typo falls back to the default
+ * instead of silently disabling a feature.
+ */
+const envEnum = (v, allowed, source) => {
+    if (v === undefined || v === '')
+        return undefined;
+    if (allowed.includes(v))
+        return v;
+    console.warn(`[lit-plugin] ignoring ${source}=${JSON.stringify(v)}; expected one of ` +
+        allowed.map((a) => JSON.stringify(a)).join(', '));
+    return undefined;
+};
 /**
  * Merge explicit options over env vars over defaults (in that precedence) into
  * the flat shape the plugin hooks consume.
  */
-const resolveOptions = (options, env) => {
+export const resolveOptions = (options, env) => {
     const hmr = options.hmr;
     const hmrObj = typeof hmr === 'object' ? hmr : undefined;
     const hmrEnabled = (typeof hmr === 'boolean' ? hmr : hmrObj?.enabled) ??
@@ -61,6 +81,9 @@ const resolveOptions = (options, env) => {
         sourceOverlay = base;
     }
     const timeline = options.timeline ?? envBool(env[`${ENV_PREFIX}_TIMELINE`]) ?? false;
+    const cssSheetBuild = envEnum(options.cssSheetBuild, CSS_SHEET_BUILD_MODES, 'cssSheetBuild') ??
+        envEnum(env[`${ENV_PREFIX}_CSS_SHEET_BUILD`], CSS_SHEET_BUILD_MODES, `${ENV_PREFIX}_CSS_SHEET_BUILD`) ??
+        'auto';
     return {
         hmrEnabled,
         reconnect,
@@ -68,6 +91,7 @@ const resolveOptions = (options, env) => {
         indicator,
         sourceOverlay,
         timeline,
+        cssSheetBuild,
     };
 };
 /**
@@ -126,7 +150,10 @@ const isSameOrigin = (headers) => {
         return false;
     }
 };
-const createOpenInEditorMiddleware = (root) => {
+export const createOpenInEditorMiddleware = (allowedRoots) => {
+    // First entry is the primary root: relative `file` params resolve against
+    // it. Every entry grants open access to files beneath it.
+    const roots = allowedRoots.map((r) => resolvePath(r));
     return (req, res, next) => {
         if (req.url === undefined) {
             next();
@@ -147,14 +174,16 @@ const createOpenInEditorMiddleware = (root) => {
             res.end('missing file parameter');
             return;
         }
-        // Confine the open to the project root: resolve the requested path and
-        // reject anything that escapes `root` (path traversal, absolute paths to
-        // arbitrary files). `launch-editor` spawns the user's editor on this path,
-        // so an unvalidated `file` is a local-file-open / arg-injection vector.
-        const resolved = resolvePath(root, file);
-        if (resolved !== root && !resolved.startsWith(root + sep)) {
+        // Confine the open to the allowed roots: resolve the requested path and
+        // reject anything that escapes all of them (path traversal, absolute
+        // paths to arbitrary files). `launch-editor` spawns the user's editor on
+        // this path, so an unvalidated `file` is a local-file-open /
+        // arg-injection vector.
+        const resolved = resolvePath(roots[0] ?? process.cwd(), file);
+        const allowed = roots.some((root) => resolved === root || resolved.startsWith(root + sep));
+        if (!allowed) {
             res.statusCode = 403;
-            res.end('file outside project root');
+            res.end('file outside allowed roots');
             return;
         }
         if (!existsSync(resolved)) {
@@ -170,14 +199,24 @@ const createOpenInEditorMiddleware = (root) => {
         import('launch-editor')
             .then((mod) => {
             const launch = (mod.default ?? mod);
+            // `launch-editor` invokes the callback only on failure — synchronously
+            // when it can't guess an editor, later if the spawn errors. Reply `ok`
+            // right after launching; the guard keeps a sync failure's 500 first
+            // and drops a late async failure (the response is long gone).
+            let finished = false;
+            const finish = (statusCode, msg) => {
+                if (finished)
+                    return;
+                finished = true;
+                res.statusCode = statusCode;
+                res.end(msg);
+            };
             launch(fileRef, (_fileName, errorMessage) => {
                 if (errorMessage !== null) {
-                    res.statusCode = 500;
-                    res.end(errorMessage);
-                    return;
+                    finish(500, errorMessage);
                 }
-                res.end('ok');
             });
+            finish(200, 'ok');
         })
             .catch(next);
     };
@@ -203,6 +242,11 @@ const CSS_URL_VIRTUAL_PREFIX = '\0lit-plugin:hmr-url:';
  * a plugin-generated module: the `import.meta.hot.accept` lives here (where
  * Vite's static analysis sees the literal specifier), so callers write a bare
  * import and never touch `import.meta.hot` themselves.
+ *
+ * Under `vite build` the generated module can instead inline the css text (see
+ * `cssSheetBuild`) — a library's consumers bundle its JS only, so a
+ * fetch-backed sheet would 404 on the `.css` asset that never reached their
+ * build.
  */
 const CSS_SHEET_QUERY_RE = /^([^?]+\.css)\?(?:[^&]*&)*css-sheet(?:&.*)?$/;
 const CSS_SHEET_VIRTUAL_PREFIX = '\0lit-plugin:css-sheet:';
@@ -214,60 +258,91 @@ const CSS_VIRTUAL_SUFFIX = '.js';
  * `?hmr-url`/`?css-sheet` must keep working under `vite build`, where the HMR
  * plugin doesn't apply). Exported for the baseline e2e run, which needs the
  * queries working without the HMR plugin.
+ *
+ * `getCssSheetBuild` is a getter, not a value: `litPlugin()` re-resolves its
+ * options against the loaded env in a `config` hook, which runs after the
+ * plugin array is built. Standalone (no getter) it behaves like the `'auto'`
+ * default.
  */
-export const litCssQueries = () => ({
-    name: 'lit-css-query',
-    // Vite's core resolver claims `./x.css?hmr-url` for the CSS pipeline
-    // before normal plugins get a look, so resolve ahead of it.
-    enforce: 'pre',
-    async resolveId(id, importer) {
-        const prefix = CSS_URL_QUERY_RE.test(id)
-            ? CSS_URL_VIRTUAL_PREFIX
-            : CSS_SHEET_QUERY_RE.test(id)
-                ? CSS_SHEET_VIRTUAL_PREFIX
-                : null;
-        if (prefix === null) {
-            return null;
-        }
-        const file = id.slice(0, id.indexOf('?'));
-        const resolved = await this.resolve(file, importer);
-        if (resolved === null) {
+export const litCssQueries = (getCssSheetBuild = () => 'auto') => {
+    let isBuild = false;
+    let isLib = false;
+    return {
+        name: 'lit-css-query',
+        // Vite's core resolver claims `./x.css?hmr-url` for the CSS pipeline
+        // before normal plugins get a look, so resolve ahead of it.
+        enforce: 'pre',
+        configResolved(config) {
+            isBuild = config.command === 'build';
+            isLib = config.build.lib !== false && config.build.lib !== undefined;
+        },
+        async resolveId(id, importer) {
+            const prefix = CSS_URL_QUERY_RE.test(id)
+                ? CSS_URL_VIRTUAL_PREFIX
+                : CSS_SHEET_QUERY_RE.test(id)
+                    ? CSS_SHEET_VIRTUAL_PREFIX
+                    : null;
+            if (prefix === null) {
+                return null;
+            }
+            const file = id.slice(0, id.indexOf('?'));
+            const resolved = await this.resolve(file, importer);
+            if (resolved === null) {
+                return null;
+            }
+            return prefix + resolved.id + CSS_VIRTUAL_SUFFIX;
+        },
+        load(id) {
+            const helperPath = resolveRuntimeModule('css');
+            if (id.startsWith(CSS_URL_VIRTUAL_PREFIX)) {
+                const file = id.slice(CSS_URL_VIRTUAL_PREFIX.length, -CSS_VIRTUAL_SUFFIX.length);
+                return {
+                    code: `import url from ${JSON.stringify(`${file}?url`)};\n` +
+                        `import {devCacheBust} from ${JSON.stringify(helperPath)};\n` +
+                        `export default devCacheBust(url);\n`,
+                    moduleType: 'js',
+                };
+            }
+            if (id.startsWith(CSS_SHEET_VIRTUAL_PREFIX)) {
+                const file = id.slice(CSS_SHEET_VIRTUAL_PREFIX.length, -CSS_VIRTUAL_SUFFIX.length);
+                const mode = getCssSheetBuild();
+                const inlineQuery = !isBuild || mode === 'url' || (mode === 'auto' && !isLib)
+                    ? null
+                    : mode === 'inline-raw'
+                        ? '?raw'
+                        : '?inline';
+                if (inlineQuery !== null) {
+                    // Build only, so no `import.meta.hot` block. The sheet is still
+                    // constructed once per virtual module, so adopters share it exactly
+                    // as they do in the fetch-backed form.
+                    return {
+                        code: `import css from ${JSON.stringify(`${file}${inlineQuery}`)};\n` +
+                            `const sheet = new CSSStyleSheet();\n` +
+                            `sheet.replaceSync(css);\n` +
+                            `export default sheet;\n`,
+                        moduleType: 'js',
+                    };
+                }
+                // The accept specifier must be byte-identical to the import above —
+                // Vite resolves accepted HMR deps by static analysis. Generating both
+                // here is exactly what frees the caller from writing it. The swap is
+                // self-accepted at this boundary, so it never propagates to adopters.
+                const urlSpecifier = JSON.stringify(`${file}?url`);
+                return {
+                    code: `import url from ${urlSpecifier};\n` +
+                        `import {urlSheet} from ${JSON.stringify(helperPath)};\n` +
+                        `const {sheet, onHotUpdate} = urlSheet(url);\n` +
+                        `export default sheet;\n` +
+                        `if (import.meta.hot) {\n` +
+                        `  import.meta.hot.accept(${urlSpecifier}, onHotUpdate);\n` +
+                        `}\n`,
+                    moduleType: 'js',
+                };
+            }
             return null;
-        }
-        return prefix + resolved.id + CSS_VIRTUAL_SUFFIX;
-    },
-    load(id) {
-        const helperPath = resolveRuntimeModule('css');
-        if (id.startsWith(CSS_URL_VIRTUAL_PREFIX)) {
-            const file = id.slice(CSS_URL_VIRTUAL_PREFIX.length, -CSS_VIRTUAL_SUFFIX.length);
-            return {
-                code: `import url from ${JSON.stringify(`${file}?url`)};\n` +
-                    `import {devCacheBust} from ${JSON.stringify(helperPath)};\n` +
-                    `export default devCacheBust(url);\n`,
-                moduleType: 'js',
-            };
-        }
-        if (id.startsWith(CSS_SHEET_VIRTUAL_PREFIX)) {
-            const file = id.slice(CSS_SHEET_VIRTUAL_PREFIX.length, -CSS_VIRTUAL_SUFFIX.length);
-            // The accept specifier must be byte-identical to the import above —
-            // Vite resolves accepted HMR deps by static analysis. Generating both
-            // here is exactly what frees the caller from writing it. The swap is
-            // self-accepted at this boundary, so it never propagates to adopters.
-            const urlSpecifier = JSON.stringify(`${file}?url`);
-            return {
-                code: `import url from ${urlSpecifier};\n` +
-                    `import {urlSheet} from ${JSON.stringify(helperPath)};\n` +
-                    `const {sheet, onHotUpdate} = urlSheet(url);\n` +
-                    `export default sheet;\n` +
-                    `if (import.meta.hot) {\n` +
-                    `  import.meta.hot.accept(${urlSpecifier}, onHotUpdate);\n` +
-                    `}\n`,
-                moduleType: 'js',
-            };
-        }
-        return null;
-    },
-});
+        },
+    };
+};
 /**
  * A `css` tagged template literal with no interpolations and no escape
  * sequences — the only kind we can hand to a CSS parser as-is. Literals
@@ -354,10 +429,30 @@ const litCssLiterals = () => {
  */
 export const litPlugin = (options = {}) => {
     // Resolved from explicit options first, env vars second, defaults last. The
-    // `config` hook re-resolves with the loaded env once Vite hands us the mode;
-    // this initial pass covers code paths that run before (or without) it.
+    // `lit-plugin-options` `config` hook below re-resolves with the loaded env
+    // once Vite hands us the mode; this initial pass covers code paths that run
+    // before (or without) it.
     let resolved = resolveOptions(options, {});
     let root = '';
+    // Env resolution lives in its own always-applied plugin: `?css-sheet` is a
+    // build-time feature too, and the HMR plugin (`apply: 'serve'`) never gets a
+    // `config` hook under `vite build`. `enforce: 'pre'` and first position put
+    // it ahead of every other hook that reads `resolved`.
+    const optionsPlugin = {
+        name: 'lit-plugin-options',
+        enforce: 'pre',
+        config(viteConfig, { mode }) {
+            // `loadEnv` reads `.env*` files from the env dir (root by default) and
+            // merges in matching `process.env` keys, filtered to the `LIT_PLUGIN`
+            // prefix. Explicit options still win (handled in resolveOptions).
+            const envDir = viteConfig.envDir
+                ? resolvePath(viteConfig.envDir)
+                : viteConfig.root
+                    ? resolvePath(viteConfig.root)
+                    : process.cwd();
+            resolved = resolveOptions(options, loadEnv(mode, envDir, ENV_PREFIX));
+        },
+    };
     const sourceOverlayPlugin = {
         name: 'lit-source-overlay',
         apply: 'serve',
@@ -377,7 +472,12 @@ export const litPlugin = (options = {}) => {
         configureServer(server) {
             if (!resolved.sourceOverlay)
                 return;
-            server.middlewares.use(OPEN_IN_EDITOR_PATH, createOpenInEditorMiddleware(root));
+            // Allow opens from everything vite itself is willing to serve
+            // (`server.fs.allow` defaults to the workspace root), not just
+            // `config.root` — in monorepos, component sources regularly live in
+            // sibling packages outside the served app's root.
+            const fsAllow = server.config.server.fs?.allow ?? [];
+            server.middlewares.use(OPEN_IN_EDITOR_PATH, createOpenInEditorMiddleware([root, ...fsAllow]));
         },
         transform(code, id, transformOptions) {
             if (!resolved.sourceOverlay)
@@ -428,17 +528,9 @@ export const litPlugin = (options = {}) => {
     const hmr = {
         name: 'lit-plugin',
         apply: 'serve',
-        config: (viteConfig, { mode }) => {
-            // Resolve options against the loaded env now that Vite hands us the mode.
-            // `loadEnv` reads `.env*` files from the env dir (root by default) and
-            // merges in matching `process.env` keys, filtered to the `LIT_PLUGIN`
-            // prefix. Explicit options still win (handled in resolveOptions).
-            const envDir = viteConfig.envDir
-                ? resolvePath(viteConfig.envDir)
-                : viteConfig.root
-                    ? resolvePath(viteConfig.root)
-                    : process.cwd();
-            resolved = resolveOptions(options, loadEnv(mode, envDir, ENV_PREFIX));
+        config: () => {
+            // Options are already resolved against the loaded env by
+            // `lit-plugin-options`, which runs first.
             if (!resolved.hmrEnabled) {
                 return;
             }
@@ -578,7 +670,10 @@ export const litPlugin = (options = {}) => {
     // feature is disabled (which env may decide), so inclusion can't be gated
     // on the synchronously-known options here.
     const plugins = [
-        litCssQueries(),
+        optionsPlugin,
+        // Getter, not a snapshot: `resolved` is re-resolved against the loaded env
+        // in `optionsPlugin`'s `config` hook, which runs after this array is built.
+        litCssQueries(() => resolved.cssSheetBuild),
         litCssLiterals(),
         sourceOverlayPlugin,
         hmr,