astro 7.0.0-alpha.1 → 7.0.0-alpha.2

package/components/Code.astro

@@ -1,5 +1,5 @@
 ---
-import { createShikiHighlighter, type ThemePresets } from '@astrojs/markdown-remark/shiki';
+import { createShikiHighlighter, type ThemePresets } from '@astrojs/internal-helpers/shiki';
 import type { ShikiTransformer, ThemeRegistration, ThemeRegistrationRaw } from 'shiki';
 import { bundledLanguages } from 'shiki/langs';
 import type { CodeLanguage } from '../dist/types/public/common.js';

package/dist/assets/endpoint/dev.js

@@ -38,7 +38,7 @@ async function loadLocalImage(src, url) {
   } else {
     const sourceUrl = new URL(src, url.origin);
     if (sourceUrl.origin !== url.origin) {
-      returnValue = void 0;
+      return void 0;
     }
     return loadRemoteImage(sourceUrl);
   }

package/dist/assets/endpoint/generic.js

@@ -4,21 +4,7 @@ import { isRemoteAllowed } from "@astrojs/internal-helpers/remote";
 import * as mime from "mrmime";
 import { getConfiguredImageService } from "../internal.js";
 import { etag } from "../utils/etag.js";
-import { fetchWithRedirects } from "../utils/redirectValidation.js";
-async function loadRemoteImage(src, headers) {
-  try {
-    const res = await fetchWithRedirects({ url: src, headers, imageConfig });
-    if (!isRemoteAllowed(res.url, imageConfig)) {
-      return void 0;
-    }
-    if (!res.ok) {
-      return void 0;
-    }
-    return await res.arrayBuffer();
-  } catch {
-    return void 0;
-  }
-}
+import { loadImage } from "./loadImage.js";
 const GET = async ({ request }) => {
   try {
     const imageService = await getConfiguredImageService();
@@ -39,7 +25,12 @@ const GET = async ({ request }) => {
     if (!isRemoteImage && sourceUrl.origin !== url.origin) {
       return new Response("Forbidden", { status: 403 });
     }
-    inputBuffer = await loadRemoteImage(sourceUrl, isRemoteImage ? new Headers() : request.headers);
+    inputBuffer = await loadImage(
+      sourceUrl,
+      isRemoteImage ? new Headers() : request.headers,
+      imageConfig,
+      isRemoteImage
+    );
     if (!inputBuffer) {
       return new Response("Not Found", { status: 404 });
     }

package/dist/assets/endpoint/loadImage.d.ts

@@ -0,0 +1,11 @@
+import type { RemoteImageConfig } from '../utils/redirectValidation.js';
+/**
+ * Fetches an image by URL. Used by the generic image endpoint for both
+ * remote images and local images (self-fetched from the same origin).
+ *
+ * For remote images, the final URL (after any redirects) is validated
+ * against `imageConfig.domains` and `imageConfig.remotePatterns`.
+ * Local images skip this check — they are already guarded by the
+ * same-origin check in the caller.
+ */
+export declare function loadImage(src: URL, headers: Headers, imageConfig: RemoteImageConfig, isRemote: boolean, fetchFn?: typeof globalThis.fetch): Promise<ArrayBuffer | undefined>;

package/dist/assets/endpoint/loadImage.js

@@ -0,0 +1,19 @@
+import { isRemoteAllowed } from "@astrojs/internal-helpers/remote";
+import { fetchWithRedirects } from "../utils/redirectValidation.js";
+async function loadImage(src, headers, imageConfig, isRemote, fetchFn) {
+  try {
+    const res = await fetchWithRedirects({ url: src, headers, imageConfig, fetchFn });
+    if (isRemote && !isRemoteAllowed(res.url, imageConfig)) {
+      return void 0;
+    }
+    if (!res.ok) {
+      return void 0;
+    }
+    return await res.arrayBuffer();
+  } catch {
+    return void 0;
+  }
+}
+export {
+  loadImage
+};

package/dist/assets/fonts/config.d.ts

@@ -7,11 +7,11 @@ export declare const StyleSchema: z.ZodEnum<{
     oblique: "oblique";
 }>;
 export declare const DisplaySchema: z.ZodEnum<{
-    optional: "optional";
     auto: "auto";
+    optional: "optional";
+    fallback: "fallback";
     block: "block";
     swap: "swap";
-    fallback: "fallback";
 }>;
 export declare const FontProviderSchema: z.ZodCustom<FontProvider<never>, FontProvider<never>>;
 export declare const FontFamilySchema: z.ZodObject<{
@@ -45,11 +45,11 @@ export declare const FontFamilySchema: z.ZodObject<{
     fallbacks: z.ZodOptional<z.ZodArray<z.ZodString>>;
     optimizedFallbacks: z.ZodOptional<z.ZodBoolean>;
     display: z.ZodOptional<z.ZodEnum<{
-        optional: "optional";
         auto: "auto";
+        optional: "optional";
+        fallback: "fallback";
         block: "block";
         swap: "swap";
-        fallback: "fallback";
     }>>;
     stretch: z.ZodOptional<z.ZodString>;
     featureSettings: z.ZodOptional<z.ZodString>;

package/dist/assets/fonts/core/optimize-fallbacks.js

@@ -1,4 +1,17 @@
 import { isGenericFontFamily, unifontFontFaceDataToProperties } from "../utils.js";
+function deriveFallbackVariant(data) {
+  const weight = data.weight;
+  if (typeof weight === "number" && weight >= 700) {
+    return "bold";
+  }
+  if (typeof weight === "string") {
+    if (weight === "bold") return "bold";
+    if (weight.includes(" ")) return "normal";
+    const n = Number.parseInt(weight, 10);
+    if (!Number.isNaN(n) && n >= 700) return "bold";
+  }
+  return "normal";
+}
 async function optimizeFallbacks({
   family,
   fallbacks: _fallbacks,
@@ -14,28 +27,40 @@ async function optimizeFallbacks({
   if (!isGenericFontFamily(lastFallback)) {
     return null;
   }
-  const localFonts = systemFallbacksProvider.getLocalFonts(lastFallback);
-  if (!localFonts || localFonts.length === 0) {
+  const collectedWithLocalFonts = collectedFonts.map((collected) => ({
+    collected,
+    localFonts: systemFallbacksProvider.getLocalFonts(lastFallback, deriveFallbackVariant(collected.data)) ?? []
+  }));
+  const uniqueLocalFonts = [];
+  for (const { localFonts } of collectedWithLocalFonts) {
+    for (const font of localFonts) {
+      if (!uniqueLocalFonts.includes(font)) {
+        uniqueLocalFonts.push(font);
+      }
+    }
+  }
+  if (uniqueLocalFonts.length === 0) {
     return null;
   }
-  if (localFonts.includes(family.name)) {
+  if (uniqueLocalFonts.includes(family.name)) {
     return null;
   }
-  const localFontsMappings = localFonts.map((font) => ({
-    font,
+  const nameForFont = (font) => (
     // We mustn't wrap in quote because that's handled by the CSS renderer
-    name: `${family.uniqueName} fallback: ${font}`
-  }));
-  fallbacks = [...localFontsMappings.map((m) => m.name), ...fallbacks];
+    `${family.uniqueName} fallback: ${font}`
+  );
+  fallbacks = [...uniqueLocalFonts.map(nameForFont), ...fallbacks];
   let css = "";
-  for (const { font, name } of localFontsMappings) {
-    for (const collected of collectedFonts) {
+  for (const { collected, localFonts } of collectedWithLocalFonts) {
+    const properties = unifontFontFaceDataToProperties(collected.data);
+    const metrics = await fontMetricsResolver.getMetrics(family.name, collected);
+    for (const font of localFonts) {
       css += fontMetricsResolver.generateFontFace({
-        metrics: await fontMetricsResolver.getMetrics(family.name, collected),
+        metrics,
         fallbackMetrics: systemFallbacksProvider.getMetricsForLocalFont(font),
         font,
-        name,
-        properties: unifontFontFaceDataToProperties(collected.data)
+        name: nameForFont(font),
+        properties
       });
     }
   }

package/dist/assets/fonts/definitions.d.ts

@@ -1,6 +1,6 @@
 import type * as unifont from 'unifont';
 import type { CollectedFontForMetrics } from './core/optimize-fallbacks.js';
-import type { CssProperties, FontFaceMetrics, FontFileData, FontProvider, FontType, GenericFallbackName, ResolveFontOptions, Style } from './types.js';
+import type { CssProperties, FallbackVariant, FontFaceMetrics, FontFileData, FontProvider, FontType, GenericFallbackName, ResolveFontOptions, Style } from './types.js';
 export interface Hasher {
     hashString: (input: string) => string;
     hashObject: (input: Record<string, any>) => string;
@@ -28,7 +28,7 @@ export interface FontMetricsResolver {
     }) => string;
 }
 export interface SystemFallbacksProvider {
-    getLocalFonts: (fallback: GenericFallbackName) => Array<string> | null;
+    getLocalFonts: (fallback: GenericFallbackName, variant: FallbackVariant) => Array<string> | null;
     getMetricsForLocalFont: (family: string) => FontFaceMetrics;
 }
 export interface FontFetcher {

package/dist/assets/fonts/infra/system-fallbacks-provider.d.ts

@@ -1,6 +1,6 @@
 import type { SystemFallbacksProvider } from '../definitions.js';
-import type { FontFaceMetrics, GenericFallbackName } from '../types.js';
+import type { FallbackVariant, FontFaceMetrics, GenericFallbackName } from '../types.js';
 export declare class RealSystemFallbacksProvider implements SystemFallbacksProvider {
-    getLocalFonts(fallback: GenericFallbackName): Array<string> | null;
+    getLocalFonts(fallback: GenericFallbackName, variant: FallbackVariant): Array<string> | null;
     getMetricsForLocalFont(family: string): FontFaceMetrics;
 }

package/dist/assets/fonts/infra/system-fallbacks-provider.js

@@ -6,6 +6,14 @@ const SYSTEM_METRICS = {
     unitsPerEm: 2048,
     xWidthAvg: 832
   },
+  "Times New Roman Bold": {
+    ascent: 1825,
+    descent: -443,
+    lineGap: 87,
+    unitsPerEm: 2048,
+    xWidthAvg: 886
+  },
+  // Times New Roman Italic almost has the same properties as Times New Roman, we don't include it
   Arial: {
     ascent: 1854,
     descent: -434,
@@ -13,6 +21,14 @@ const SYSTEM_METRICS = {
     unitsPerEm: 2048,
     xWidthAvg: 913
   },
+  "Arial Bold": {
+    ascent: 1854,
+    descent: -434,
+    lineGap: 67,
+    unitsPerEm: 2048,
+    xWidthAvg: 983
+  },
+  // Arial Italic has the same properties as Arial, we don't include it
   "Courier New": {
     ascent: 1705,
     descent: -615,
@@ -20,6 +36,8 @@ const SYSTEM_METRICS = {
     unitsPerEm: 2048,
     xWidthAvg: 1229
   },
+  // Courier New Bold has the same properties as Courier New, we don't include it
+  // Courier New Italic has the same properties as Courier New, we don't include it
   BlinkMacSystemFont: {
     ascent: 1980,
     descent: -432,
@@ -50,17 +68,36 @@ const SYSTEM_METRICS = {
   }
 };
 const DEFAULT_FALLBACKS = {
-  serif: ["Times New Roman"],
-  "sans-serif": ["Arial"],
-  monospace: ["Courier New"],
-  "system-ui": ["BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial"],
-  "ui-serif": ["Times New Roman"],
-  "ui-sans-serif": ["Arial"],
-  "ui-monospace": ["Courier New"]
+  serif: {
+    normal: ["Times New Roman"],
+    bold: ["Times New Roman Bold"]
+  },
+  "sans-serif": {
+    normal: ["Arial"],
+    bold: ["Arial Bold"]
+  },
+  monospace: { normal: ["Courier New"] },
+  "system-ui": {
+    normal: ["BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial"],
+    bold: ["BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial Bold"]
+  },
+  "ui-serif": {
+    normal: ["Times New Roman"],
+    bold: ["Times New Roman Bold"]
+  },
+  "ui-sans-serif": {
+    normal: ["Arial"],
+    bold: ["Arial Bold"]
+  },
+  "ui-monospace": { normal: ["Courier New"] }
 };
 class RealSystemFallbacksProvider {
-  getLocalFonts(fallback) {
-    return DEFAULT_FALLBACKS[fallback] ?? null;
+  getLocalFonts(fallback, variant) {
+    const entry = DEFAULT_FALLBACKS[fallback];
+    if (!entry) {
+      return null;
+    }
+    return entry[variant] ?? entry.normal ?? null;
   }
   getMetricsForLocalFont(family) {
     return SYSTEM_METRICS[family];

package/dist/assets/fonts/types.d.ts

@@ -191,6 +191,7 @@ export interface PreloadData {
 }
 export type FontFaceMetrics = Pick<Font, 'ascent' | 'descent' | 'lineGap' | 'unitsPerEm' | 'xWidthAvg'>;
 export type GenericFallbackName = (typeof GENERIC_FALLBACK_NAMES)[number];
+export type FallbackVariant = 'normal' | 'bold';
 export type Defaults = Required<Pick<ResolvedFontFamily, 'weights' | 'styles' | 'subsets' | 'fallbacks' | 'optimizedFallbacks' | 'formats'>>;
 export interface FontFileData {
     id: string;

package/dist/assets/internal.js

@@ -13,6 +13,7 @@ import {
   isImageMetadata
 } from "./types.js";
 import { isESMImportedImage, isRemoteImage, resolveSrc } from "./utils/imageKind.js";
+import { resolveDefaultOutputFormat } from "./utils/inferSourceFormat.js";
 import { inferRemoteSize } from "./utils/remoteProbe.js";
 import { createPlaceholderURL, stringifyPlaceholderURL } from "./utils/url.js";
 import { verifyOptions } from "./services/service.js";
@@ -73,6 +74,9 @@ async function getImage(options, imageConfig) {
       const result = await getRemoteSize(resolvedOptions.src);
       resolvedOptions.width ??= result.width;
       resolvedOptions.height ??= result.height;
+      if (result.format) {
+        resolvedOptions.format ??= resolveDefaultOutputFormat(result.format);
+      }
       originalWidth = result.width;
       originalHeight = result.height;
     }
@@ -124,24 +128,13 @@ async function getImage(options, imageConfig) {
     }
     const currentPosition = resolvedOptions.position || "center";
     resolvedOptions["data-astro-image-pos"] = currentPosition.replace(/\s+/g, "-");
-    if (resolvedOptions.position) {
-      if (typeof resolvedOptions.style === "object" && resolvedOptions.style !== null) {
-        if (!("objectPosition" in resolvedOptions.style)) {
-          resolvedOptions.style = {
-            ...resolvedOptions.style,
-            objectPosition: resolvedOptions.position
-          };
-        }
-      } else {
-        const existingStyle = typeof resolvedOptions.style === "string" ? resolvedOptions.style : "";
-        if (!existingStyle.includes("object-position")) {
-          const positionStyle = `object-position: ${resolvedOptions.position}`;
-          resolvedOptions.style = existingStyle ? existingStyle.replace(/;?\s*$/, "; ") + positionStyle : positionStyle;
-        }
-      }
-    }
   }
   const validatedOptions = service.validateOptions ? await service.validateOptions(resolvedOptions, imageConfig) : resolvedOptions;
+  validatedOptions.format ??= await peekRemoteFormatForStaticEmit(
+    validatedOptions,
+    imageConfig,
+    service
+  );
   const srcSetTransforms = service.getSrcSet ? await service.getSrcSet(validatedOptions, imageConfig) : [];
   const lazyImageURLFactory = (getValue) => {
     let cached = null;
@@ -203,6 +196,17 @@ async function getImage(options, imageConfig) {
     attributes: service.getHTMLAttributes !== void 0 ? await service.getHTMLAttributes(validatedOptions, imageConfig) : {}
   };
 }
+async function peekRemoteFormatForStaticEmit(options, imageConfig, service) {
+  if (!isRemoteImage(options.src) || !isRemoteAllowed(options.src, imageConfig) || !globalThis.astroAsset?.addStaticImage || !isLocalService(service) || !service.getRemoteSize) {
+    return void 0;
+  }
+  try {
+    const probed = await service.getRemoteSize(options.src, imageConfig);
+    return resolveDefaultOutputFormat(probed.format);
+  } catch {
+    return void 0;
+  }
+}
 export {
   cssFitValues,
   getConfiguredImageService,

package/dist/assets/services/service.d.ts

@@ -82,7 +82,7 @@ export type BaseServiceTransform = {
     src: string;
     width?: number;
     height?: number;
-    format: string;
+    format?: string;
     quality?: string | null;
     fit?: ImageFit;
     position?: string;

package/dist/assets/services/service.js

@@ -1,8 +1,9 @@
 import { isRemoteAllowed } from "@astrojs/internal-helpers/remote";
 import { AstroError, AstroErrorData } from "../../core/errors/index.js";
 import { isRemotePath, joinPaths } from "../../core/path.js";
-import { DEFAULT_HASH_PROPS, DEFAULT_OUTPUT_FORMAT, VALID_SUPPORTED_FORMATS } from "../consts.js";
+import { DEFAULT_HASH_PROPS, VALID_SUPPORTED_FORMATS } from "../consts.js";
 import { isESMImportedImage, isRemoteImage } from "../utils/imageKind.js";
+import { inferSourceFormat, resolveDefaultOutputFormat } from "../utils/inferSourceFormat.js";
 import { inferRemoteSize } from "../utils/remoteProbe.js";
 function isLocalService(service) {
   if (!service) {
@@ -74,10 +75,11 @@ const baseService = {
   validateOptions(options) {
     verifyOptions(options);
     if (!options.format) {
-      if (isESMImportedImage(options.src) && options.src.format === "svg") {
-        options.format = "svg";
+      if (isESMImportedImage(options.src)) {
+        options.format = resolveDefaultOutputFormat(options.src.format);
       } else {
-        options.format = DEFAULT_OUTPUT_FORMAT;
+        const inferred = inferSourceFormat(options.src);
+        if (inferred) options.format = resolveDefaultOutputFormat(inferred);
       }
     }
     if (options.width) options.width = Math.round(options.width);
@@ -120,7 +122,7 @@ const baseService = {
     const { targetWidth, targetHeight } = getTargetDimensions(options);
     const aspectRatio = targetWidth / targetHeight;
     const { widths, densities } = options;
-    const targetFormat = options.format ?? DEFAULT_OUTPUT_FORMAT;
+    const targetFormat = options.format;
     let transformedWidths = (widths ?? []).sort(sortNumeric);
     let imageWidth = options.width;
     let maxWidth = Number.POSITIVE_INFINITY;
@@ -164,9 +166,7 @@ const baseService = {
       return {
         transform,
         descriptor,
-        attributes: {
-          type: `image/${targetFormat}`
-        }
+        attributes: targetFormat ? { type: `image/${targetFormat}` } : {}
       };
     });
   },
@@ -210,7 +210,7 @@ const baseService = {
       src: params.get("href"),
       width: params.has("w") ? Number.parseInt(params.get("w")) : void 0,
       height: params.has("h") ? Number.parseInt(params.get("h")) : void 0,
-      format: params.get("f"),
+      format: params.has("f") ? params.get("f") : void 0,
       quality: params.get("q"),
       fit: params.get("fit"),
       position: params.get("position") ?? void 0,

package/dist/assets/services/sharp.js

@@ -1,4 +1,5 @@
 import { AstroError, AstroErrorData } from "../../core/errors/index.js";
+import { resolveDefaultOutputFormat } from "../utils/inferSourceFormat.js";
 import { detector } from "../utils/vendor/image-size/detector.js";
 import {
   baseService,
@@ -21,6 +22,9 @@ function resolveSharpQuality(quality) {
 }
 function resolveSharpEncoderOptions(transform, inputFormat, serviceConfig = {}) {
   const quality = resolveSharpQuality(transform.quality);
+  if (transform.format === void 0) {
+    return quality === void 0 ? void 0 : { quality };
+  }
   switch (transform.format) {
     case "jpg":
     case "jpeg":
@@ -82,11 +86,27 @@ const sharpService = {
     if (!sharp) sharp = await loadSharp();
     const transform = transformOptions;
     const kernel = config.service.config.kernel;
-    if (transform.format === "svg") return { data: inputBuffer, format: "svg" };
-    if (detector(inputBuffer) === "svg" && !config.dangerouslyProcessSVG) {
+    const bufferFormat = detector(inputBuffer);
+    const outputFormat = transform.format ?? resolveDefaultOutputFormat(bufferFormat);
+    if (outputFormat === "svg") {
+      if (bufferFormat && bufferFormat !== "svg") {
+        console.warn(
+          `\u26A0\uFE0F  Astro expected an SVG for "${transform.src}" but the source is ${bufferFormat}. Passing it through as ${bufferFormat} instead.`
+        );
+        return { data: inputBuffer, format: bufferFormat };
+      }
+      return { data: inputBuffer, format: "svg" };
+    }
+    if (!bufferFormat) {
+      throw new AstroError({
+        ...AstroErrorData.NoImageMetadata,
+        message: AstroErrorData.NoImageMetadata.message(transform.src)
+      });
+    }
+    if (bufferFormat === "svg" && !config.dangerouslyProcessSVG) {
       throw new AstroError({
         ...AstroErrorData.UnsupportedImageFormat,
-        message: "SVG image processing is disabled. Set `image.dangerouslyProcessSVG: true` to allow processing of SVG sources."
+        message: `SVG image processing is disabled, but the source for "${transform.src}" is an SVG. Pass it through unchanged by setting \`format="svg"\` on the component, or set \`image.dangerouslyProcessSVG: true\` to rasterize SVG sources.`
       });
     }
     const result = sharp(inputBuffer, {
@@ -95,15 +115,6 @@ const sharpService = {
       limitInputPixels: config.service.config.limitInputPixels
     });
     result.rotate();
-    let format;
-    try {
-      ({ format } = await result.metadata());
-    } catch {
-      console.warn(
-        `\u26A0\uFE0F  Astro could not optimize image "${transform.src}". Sharp doesn't support this format. The image will be used unoptimized. Consider converting to WebP or placing in the public/ folder.`
-      );
-      return { data: inputBuffer, format: transform.format };
-    }
     if (transform.width && transform.height) {
       const fit = transform.fit ? fitMap[transform.fit] ?? "inside" : void 0;
       result.resize({
@@ -130,23 +141,32 @@ const sharpService = {
     if (transform.background) {
       result.flatten({ background: transform.background });
     }
-    if (transform.format) {
-      const encoderOptions = resolveSharpEncoderOptions(transform, format, config.service.config);
-      if (transform.format === "webp" && format === "gif") {
-        result.webp(encoderOptions);
-      } else if (transform.format === "webp") {
-        result.webp(encoderOptions);
-      } else if (transform.format === "png") {
-        result.png(encoderOptions);
-      } else if (transform.format === "avif") {
-        result.avif(encoderOptions);
-      } else if (transform.format === "jpeg" || transform.format === "jpg") {
-        result.jpeg(encoderOptions);
-      } else {
-        result.toFormat(transform.format, encoderOptions);
-      }
+    const encoderOptions = resolveSharpEncoderOptions(
+      { format: outputFormat, quality: transform.quality },
+      bufferFormat,
+      config.service.config
+    );
+    if (outputFormat === "webp") {
+      result.webp(encoderOptions);
+    } else if (outputFormat === "png") {
+      result.png(encoderOptions);
+    } else if (outputFormat === "avif") {
+      result.avif(encoderOptions);
+    } else if (outputFormat === "jpeg" || outputFormat === "jpg") {
+      result.jpeg(encoderOptions);
+    } else {
+      result.toFormat(outputFormat, encoderOptions);
+    }
+    let data;
+    let info;
+    try {
+      ({ data, info } = await result.toBuffer({ resolveWithObject: true }));
+    } catch {
+      console.warn(
+        `\u26A0\uFE0F  Astro could not optimize image "${transform.src}". Sharp doesn't support this format. The image will be used unoptimized. Consider converting to WebP or placing in the public/ folder.`
+      );
+      return { data: inputBuffer, format: bufferFormat };
     }
-    const { data, info } = await result.toBuffer({ resolveWithObject: true });
     const needsCopy = "buffer" in data && data.buffer instanceof SharedArrayBuffer;
     return {
       data: needsCopy ? new Uint8Array(data) : data,

package/dist/assets/utils/generateImageStylesCSS.js

@@ -1,4 +1,20 @@
 import { cssFitValues } from "../internal.js";
+const POSITION_KEYWORDS = ["top", "bottom", "left", "right", "center"];
+function getPositionEntries() {
+  const entries = [];
+  for (const kw of POSITION_KEYWORDS) {
+    entries.push([kw, kw]);
+  }
+  for (const a of POSITION_KEYWORDS) {
+    for (const b of POSITION_KEYWORDS) {
+      if (a === b) continue;
+      const cssValue = `${a} ${b}`;
+      const dataAttr = `${a}-${b}`;
+      entries.push([dataAttr, cssValue]);
+    }
+  }
+  return entries;
+}
 function generateImageStylesCSS(defaultObjectFit, defaultObjectPosition) {
   const fitStyles = cssFitValues.map(
     (fit) => `
@@ -10,11 +26,14 @@ function generateImageStylesCSS(defaultObjectFit, defaultObjectPosition) {
 :where([data-astro-image]:not([data-astro-image-fit])) {
   object-fit: ${defaultObjectFit};
 }` : "";
-  const positionStyle = defaultObjectPosition ? `
-[data-astro-image-pos="${defaultObjectPosition.replace(/\s+/g, "-")}"] {
-  object-position: ${defaultObjectPosition};
-}
-
+  const positionEntries = getPositionEntries();
+  const positionStyles = positionEntries.map(
+    ([dataAttr, cssValue]) => `
+[data-astro-image-pos="${dataAttr}"] {
+  object-position: ${cssValue};
+}`
+  ).join("\n");
+  const defaultPositionStyle = defaultObjectPosition ? `
 :where([data-astro-image]:not([data-astro-image-pos])) {
   object-position: ${defaultObjectPosition};
 }` : "";
@@ -30,7 +49,8 @@ function generateImageStylesCSS(defaultObjectFit, defaultObjectPosition) {
 }
 ${fitStyles}
 ${defaultFitStyle}
-${positionStyle}
+${positionStyles}
+${defaultPositionStyle}
 `.trim();
 }
 export {

package/dist/assets/utils/inferSourceFormat.d.ts

@@ -1,6 +1,11 @@
 /**
- * Infer the image format from a source path or URL by examining
- * the file extension. For data: URIs, the MIME type is extracted.
- * Returns undefined if the format cannot be determined.
+ * Infer the image format from a source path or URL.
+ *
+ * For `data:` URIs the MIME is read up to the first `;` or `,` (whichever comes first),
+ * so both `data:image/svg+xml;base64,...` and `data:image/svg+xml,<svg>...` work.
+ * `image/svg+xml` normalizes to `svg`; otherwise the subtype after the slash is returned.
+ *
+ * Returns undefined when the format cannot be determined.
  */
 export declare function inferSourceFormat(src: string): string | undefined;
+export declare function resolveDefaultOutputFormat(sourceFormat: string | undefined): string;

package/dist/assets/utils/inferSourceFormat.js

@@ -1,21 +1,32 @@
 import { removeQueryString } from "@astrojs/internal-helpers/path";
+import { DEFAULT_OUTPUT_FORMAT } from "../consts.js";
 const DATA_PREFIX = "data:";
 function inferSourceFormat(src) {
   if (src.startsWith(DATA_PREFIX)) {
-    const mime = src.slice(DATA_PREFIX.length, src.indexOf(";"));
+    const sepIndex = src.indexOf(";");
+    const commaIndex = src.indexOf(",");
+    const mimeEnd = sepIndex === -1 ? commaIndex : commaIndex === -1 ? sepIndex : Math.min(sepIndex, commaIndex);
+    if (mimeEnd === -1) return void 0;
+    const mime = src.slice(DATA_PREFIX.length, mimeEnd);
     if (mime === "image/svg+xml") return "svg";
     const sub = mime.split("/")[1];
     return sub || void 0;
   }
   try {
     const cleanSrc = removeQueryString(src).split("#")[0];
-    const lastDot = cleanSrc.lastIndexOf(".");
+    const lastSlash = cleanSrc.lastIndexOf("/");
+    const basename = lastSlash === -1 ? cleanSrc : cleanSrc.slice(lastSlash + 1);
+    const lastDot = basename.lastIndexOf(".");
     if (lastDot === -1) return void 0;
-    return cleanSrc.slice(lastDot + 1).toLowerCase();
+    return basename.slice(lastDot + 1).toLowerCase();
   } catch {
     return void 0;
   }
 }
+function resolveDefaultOutputFormat(sourceFormat) {
+  return sourceFormat === "svg" ? "svg" : DEFAULT_OUTPUT_FORMAT;
+}
 export {
-  inferSourceFormat
+  inferSourceFormat,
+  resolveDefaultOutputFormat
 };