astro 6.0.0-beta.11 → 6.0.0-beta.13

package/README.md

@@ -15,7 +15,7 @@
 npm create astro@latest
 
 # Manual:
-npm install --save-dev astro
+npm install astro
 ```
 
 Looking for help? Start with our [Getting Started](https://docs.astro.build/en/getting-started/) guide.

package/client.d.ts

@@ -84,6 +84,11 @@ declare module 'astro:assets' {
 	}: AstroAssets;
 }
 
+declare module 'virtual:astro:image-styles.css' {
+	const styles: string;
+	export default styles;
+}
+
 type ImageMetadata = import('./dist/assets/types.js').ImageMetadata;
 
 declare module '*.gif' {

package/components/Code.astro

@@ -1,10 +1,18 @@
 ---
-import { type ThemePresets, createShikiHighlighter } from '@astrojs/markdown-remark';
+import {
+	type ThemePresets,
+	createShikiHighlighter,
+	globalShikiStyleCollector,
+	transformerStyleToClass,
+} from '@astrojs/markdown-remark';
 import type { ShikiTransformer, ThemeRegistration, ThemeRegistrationRaw } from 'shiki';
 import { bundledLanguages } from 'shiki/langs';
 import type { CodeLanguage } from '../dist/types/public/common.js';
 import type { HTMLAttributes } from '../types.js';
 
+// Code.astro always uses Shiki, so import the virtual CSS module
+import 'virtual:astro:shiki-styles.css';
+
 interface Props extends Omit<HTMLAttributes<'pre'>, 'lang'> {
 	/** The code to highlight. Required. */
 	code: string;
@@ -16,6 +24,14 @@ interface Props extends Omit<HTMLAttributes<'pre'>, 'lang'> {
 	 * @default "plaintext"
 	 */
 	lang?: CodeLanguage;
+	/**
+	 * Additional languages to load.
+	 * Useful if `code` embeds languages not included by the given `lang`
+	 * For example, TSX in Vue
+	 *
+	 * @default []
+	 */
+	embeddedLangs?: CodeLanguage[];
 	/**
 	 * A metastring to pass to the highlighter.
 	 * Allows passing information to transformers: https://shiki.style/guide/transformers#meta
@@ -72,6 +88,7 @@ interface Props extends Omit<HTMLAttributes<'pre'>, 'lang'> {
 const {
 	code,
 	lang = 'plaintext',
+	embeddedLangs = [],
 	meta,
 	theme = 'github-dark',
 	themes = {},
@@ -101,16 +118,23 @@ const highlighter = await createShikiHighlighter({
 				? lang
 				: 'plaintext'
 			: (lang as any),
+		...embeddedLangs,
 	],
 	theme,
 	themes,
 });
 
+// Combine style-to-class transformer with user-provided transformers
+const allTransformers = [
+	globalShikiStyleCollector.register(transformerStyleToClass()),
+	...transformers,
+];
+
 const html = await highlighter.codeToHtml(code, typeof lang === 'string' ? lang : lang.name, {
 	defaultColor,
 	wrap,
 	inline,
-	transformers,
+	transformers: allTransformers,
 	meta,
 	attributes: rest as any,
 });

package/components/ResponsiveImage.astro

@@ -5,8 +5,6 @@ import Image from './Image.astro';
 type Props = LocalImageProps | RemoteImageProps;
 
 const { class: className, ...props } = Astro.props;
-
-import './image.css';
 ---
 
 {/* Applying class outside of the spread prevents it from applying unnecessary astro-* classes */}

package/components/ResponsivePicture.astro

@@ -4,7 +4,6 @@ import { default as Picture, type Props as PictureProps } from './Picture.astro'
 type Props = PictureProps;
 
 const { class: className, ...props } = Astro.props;
-import './image.css';
 ---
 
 {/* Applying class outside of the spread prevents it from applying unnecessary astro-* classes */}

package/dist/assets/consts.d.ts

@@ -1,6 +1,8 @@
 export declare const VIRTUAL_MODULE_ID = "astro:assets";
 export declare const RESOLVED_VIRTUAL_MODULE_ID: string;
 export declare const VIRTUAL_SERVICE_ID = "virtual:image-service";
+export declare const VIRTUAL_IMAGE_STYLES_ID = "virtual:astro:image-styles.css";
+export declare const RESOLVED_VIRTUAL_IMAGE_STYLES_ID: string;
 export declare const VALID_INPUT_FORMATS: readonly ["jpeg", "jpg", "png", "tiff", "webp", "gif", "svg", "avif"];
 /**
  * Valid formats that our base services support.

package/dist/assets/consts.js

@@ -1,6 +1,8 @@
 const VIRTUAL_MODULE_ID = "astro:assets";
 const RESOLVED_VIRTUAL_MODULE_ID = "\0" + VIRTUAL_MODULE_ID;
 const VIRTUAL_SERVICE_ID = "virtual:image-service";
+const VIRTUAL_IMAGE_STYLES_ID = "virtual:astro:image-styles.css";
+const RESOLVED_VIRTUAL_IMAGE_STYLES_ID = "\0" + VIRTUAL_IMAGE_STYLES_ID;
 const VALID_INPUT_FORMATS = [
   "jpeg",
   "jpg",
@@ -36,10 +38,12 @@ const DEFAULT_HASH_PROPS = [
 export {
   DEFAULT_HASH_PROPS,
   DEFAULT_OUTPUT_FORMAT,
+  RESOLVED_VIRTUAL_IMAGE_STYLES_ID,
   RESOLVED_VIRTUAL_MODULE_ID,
   VALID_INPUT_FORMATS,
   VALID_OUTPUT_FORMATS,
   VALID_SUPPORTED_FORMATS,
+  VIRTUAL_IMAGE_STYLES_ID,
   VIRTUAL_MODULE_ID,
   VIRTUAL_SERVICE_ID
 };

package/dist/assets/fonts/providers/index.d.ts

@@ -1,29 +1,32 @@
-import { type AdobeProviderOptions, type GoogleFamilyOptions, type GoogleiconsFamilyOptions } from 'unifont';
+import { type AdobeProviderOptions, type GoogleFamilyOptions, type GoogleiconsFamilyOptions, type NpmProviderOptions, type NpmFamilyOptions } from 'unifont';
 import type { FontProvider } from '../types.js';
 import { type LocalFamilyOptions } from './local.js';
-/** [Adobe](https://fonts.adobe.com/) */
+/** [Adobe](https://v6.docs.astro.build/en/reference/font-provider-reference/#adobe) */
 declare function adobe(config: AdobeProviderOptions): FontProvider;
-/** [Bunny](https://fonts.bunny.net/) */
+/** [Bunny](https://v6.docs.astro.build/en/reference/font-provider-reference/#bunny) */
 declare function bunny(): FontProvider;
-/** [Fontshare](https://www.fontshare.com/) */
+/** [Fontshare](https://v6.docs.astro.build/en/reference/font-provider-reference/#fontshare) */
 declare function fontshare(): FontProvider;
-/** [Fontsource](https://fontsource.org/) */
+/** [Fontsource](https://v6.docs.astro.build/en/reference/font-provider-reference/#fontsource) */
 declare function fontsource(): FontProvider;
-/** [Google](https://fonts.google.com/) */
+/** [Google](https://v6.docs.astro.build/en/reference/font-provider-reference/#google) */
 declare function google(): FontProvider<GoogleFamilyOptions | undefined>;
-/** [Google Icons](https://fonts.google.com/icons) */
+/** [Google Icons](https://v6.docs.astro.build/en/reference/font-provider-reference/#google-icons) */
 declare function googleicons(): FontProvider<GoogleiconsFamilyOptions | undefined>;
-/** A provider that handles local files. */
+/** [Local](https://v6.docs.astro.build/en/reference/font-provider-reference/#local) */
 declare function local(): FontProvider<LocalFamilyOptions>;
+/** [NPM](https://v6.docs.astro.build/en/reference/font-provider-reference/#npm) */
+declare function npm(options?: Omit<NpmProviderOptions, 'root' | 'readFile'>): FontProvider<NpmFamilyOptions | undefined>;
 /**
  * Astro exports a few built-in providers:
- * - [Adobe](https://fonts.adobe.com/)
- * - [Bunny](https://fonts.bunny.net/)
- * - [Fontshare](https://www.fontshare.com/)
- * - [Fontsource](https://fontsource.org/)
- * - [Google](https://fonts.google.com/)
- * - [Google Icons](https://fonts.google.com/icons)
- * - Local
+ * - [Adobe](https://v6.docs.astro.build/en/reference/font-provider-reference/#adobe)
+ * - [Bunny](https://v6.docs.astro.build/en/reference/font-provider-reference/#bunny)
+ * - [Fontshare](https://v6.docs.astro.build/en/reference/font-provider-reference/#fontshare)
+ * - [Fontsource](https://v6.docs.astro.build/en/reference/font-provider-reference/#fontsource)
+ * - [Google](https://v6.docs.astro.build/en/reference/font-provider-reference/#google)
+ * - [Google Icons](https://v6.docs.astro.build/en/reference/font-provider-reference/#google-icons)
+ * - [Local](https://v6.docs.astro.build/en/reference/font-provider-reference/#local)
+ * - [NPM](TODO:)
  */
 export declare const fontProviders: {
     adobe: typeof adobe;
@@ -33,5 +36,6 @@ export declare const fontProviders: {
     google: typeof google;
     googleicons: typeof googleicons;
     local: typeof local;
+    npm: typeof npm;
 };
 export {};

package/dist/assets/fonts/providers/index.js

@@ -3,6 +3,8 @@ import {
 } from "unifont";
 import { FontaceFontFileReader } from "../infra/fontace-font-file-reader.js";
 import { LocalFontProvider } from "./local.js";
+import { fileURLToPath } from "node:url";
+import { readFile } from "node:fs/promises";
 function adobe(config) {
   const provider = providers.adobe(config);
   let initializedProvider;
@@ -105,6 +107,25 @@ function local() {
     fontFileReader: new FontaceFontFileReader()
   });
 }
+function npm(options) {
+  let initializedProvider;
+  return {
+    name: providers.npm()._name,
+    async init(context) {
+      initializedProvider = await providers.npm({
+        ...options,
+        root: fileURLToPath(context.root),
+        readFile: (path) => readFile(path, "utf-8").catch(() => null)
+      })(context);
+    },
+    async resolveFont({ familyName, ...rest }) {
+      return await initializedProvider?.resolveFont(familyName, rest);
+    },
+    async listFonts() {
+      return await initializedProvider?.listFonts?.();
+    }
+  };
+}
 const fontProviders = {
   adobe,
   bunny,
@@ -112,7 +133,8 @@ const fontProviders = {
   fontsource,
   google,
   googleicons,
-  local
+  local,
+  npm
 };
 export {
   fontProviders

package/dist/assets/internal.d.ts

@@ -2,5 +2,6 @@ import type { AstroConfig } from '../types/public/config.js';
 import type { AstroAdapterClientConfig } from '../types/public/integrations.js';
 import { type ImageService } from './services/service.js';
 import { type GetImageResult, type UnresolvedImageTransform } from './types.js';
+export declare const cssFitValues: string[];
 export declare function getConfiguredImageService(): Promise<ImageService>;
 export declare function getImage(options: UnresolvedImageTransform, imageConfig: AstroConfig['image'] & AstroAdapterClientConfig): Promise<GetImageResult>;

package/dist/assets/internal.js

@@ -11,10 +11,10 @@ import { isLocalService } from "./services/service.js";
 import {
   isImageMetadata
 } from "./types.js";
-import { addCSSVarsToStyle, cssFitValues } from "./utils/imageAttributes.js";
 import { isESMImportedImage, isRemoteImage, resolveSrc } from "./utils/imageKind.js";
 import { inferRemoteSize } from "./utils/remoteProbe.js";
 import { createPlaceholderURL, stringifyPlaceholderURL } from "./utils/url.js";
+const cssFitValues = ["fill", "contain", "cover", "scale-down"];
 async function getConfiguredImageService() {
   if (!globalThis?.astroAsset?.imageService) {
     const { default: service } = await import(
@@ -110,14 +110,13 @@ async function getImage(options, imageConfig) {
     });
     resolvedOptions.sizes ||= getSizesAttribute({ width: resolvedOptions.width, layout });
     delete resolvedOptions.densities;
-    resolvedOptions.style = addCSSVarsToStyle(
-      {
-        fit: cssFitValues.includes(resolvedOptions.fit ?? "") && resolvedOptions.fit,
-        pos: resolvedOptions.position
-      },
-      resolvedOptions.style
-    );
     resolvedOptions["data-astro-image"] = layout;
+    if (resolvedOptions.fit && cssFitValues.includes(resolvedOptions.fit)) {
+      resolvedOptions["data-astro-image-fit"] = resolvedOptions.fit;
+    }
+    if (resolvedOptions.position) {
+      resolvedOptions["data-astro-image-pos"] = resolvedOptions.position.replace(/\s+/g, "-");
+    }
   }
   const validatedOptions = service.validateOptions ? await service.validateOptions(resolvedOptions, imageConfig) : resolvedOptions;
   const srcSetTransforms = service.getSrcSet ? await service.getSrcSet(validatedOptions, imageConfig) : [];
@@ -182,6 +181,7 @@ async function getImage(options, imageConfig) {
   };
 }
 export {
+  cssFitValues,
   getConfiguredImageService,
   getImage
 };

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

@@ -0,0 +1 @@
+export declare function generateImageStylesCSS(defaultObjectFit?: string, defaultObjectPosition?: string): string;

package/dist/assets/utils/generateImageStylesCSS.js

@@ -0,0 +1,38 @@
+import { cssFitValues } from "../internal.js";
+function generateImageStylesCSS(defaultObjectFit, defaultObjectPosition) {
+  const fitStyles = cssFitValues.map(
+    (fit) => `
+[data-astro-image-fit="${fit}"] {
+  object-fit: ${fit};
+}`
+  ).join("\n");
+  const defaultFitStyle = defaultObjectFit && cssFitValues.includes(defaultObjectFit) ? `
+: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};
+}
+
+:where([data-astro-image]:not([data-astro-image-pos])) {
+  object-position: ${defaultObjectPosition};
+}` : "";
+  return `
+:where([data-astro-image]) {
+  height: auto;
+}
+:where([data-astro-image="full-width"]) {
+  width: 100%;
+}
+:where([data-astro-image="constrained"]) {
+  max-width: 100%;
+}
+${fitStyles}
+${defaultFitStyle}
+${positionStyle}
+`.trim();
+}
+export {
+  generateImageStylesCSS
+};

package/dist/assets/vite-plugin-assets.js

@@ -11,8 +11,10 @@ import {
 import { normalizePath } from "../core/viteUtils.js";
 import { isAstroServerEnvironment } from "../environments.js";
 import {
+  RESOLVED_VIRTUAL_IMAGE_STYLES_ID,
   RESOLVED_VIRTUAL_MODULE_ID,
   VALID_INPUT_FORMATS,
+  VIRTUAL_IMAGE_STYLES_ID,
   VIRTUAL_MODULE_ID,
   VIRTUAL_SERVICE_ID
 } from "./consts.js";
@@ -114,46 +116,46 @@ function assets({ fs, settings, sync, logger }) {
         handler() {
           return {
             code: `
-							import { getConfiguredImageService as _getConfiguredImageService } from "astro/assets";
-							export { isLocalService } from "astro/assets";
-							import { getImage as getImageInternal } from "astro/assets";
-							export { default as Image } from "astro/components/${imageComponentPrefix}Image.astro";
-							export { default as Picture } from "astro/components/${imageComponentPrefix}Picture.astro";
-							import { inferRemoteSize as inferRemoteSizeInternal } from "astro/assets/utils/inferRemoteSize.js";
+						import { getConfiguredImageService as _getConfiguredImageService } from "astro/assets";
+						export { isLocalService } from "astro/assets";
+						import { getImage as getImageInternal } from "astro/assets";
+						${settings.config.image.responsiveStyles ? `import "${VIRTUAL_IMAGE_STYLES_ID}";` : ""}
+						export { default as Image } from "astro/components/${imageComponentPrefix}Image.astro";
+						export { default as Picture } from "astro/components/${imageComponentPrefix}Picture.astro";
+						import { inferRemoteSize as inferRemoteSizeInternal } from "astro/assets/utils/inferRemoteSize.js";
 
-							export { default as Font } from "astro/components/Font.astro";
-							export * from "${RUNTIME_VIRTUAL_MODULE_ID}";
-							
-							export const getConfiguredImageService = _getConfiguredImageService;
+						export { default as Font } from "astro/components/Font.astro";
+						export * from "${RUNTIME_VIRTUAL_MODULE_ID}";
+						
+						export const getConfiguredImageService = _getConfiguredImageService;
 
 							export const viteFSConfig = ${JSON.stringify(resolvedConfig.server.fs ?? {})};
 
-							export const safeModulePaths = new Set(${JSON.stringify(
+						export const safeModulePaths = new Set(${JSON.stringify(
               // @ts-expect-error safeModulePaths is internal to Vite
               Array.from(resolvedConfig.safeModulePaths ?? [])
             )});
 
-							const assetQueryParams = ${settings.adapter?.client?.assetQueryParams ? `new URLSearchParams(${JSON.stringify(
+						const assetQueryParams = ${settings.adapter?.client?.assetQueryParams ? `new URLSearchParams(${JSON.stringify(
               Array.from(settings.adapter.client.assetQueryParams.entries())
             )})` : "undefined"};
-							export const imageConfig = ${JSON.stringify(settings.config.image)};
-							Object.defineProperty(imageConfig, 'assetQueryParams', {
-								value: assetQueryParams,
-								enumerable: false,
-								configurable: true,
-							});
-              export const inferRemoteSize = async (url) => {
+						export const imageConfig = ${JSON.stringify(settings.config.image)};
+						Object.defineProperty(imageConfig, 'assetQueryParams', {
+							value: assetQueryParams,
+							enumerable: false,
+							configurable: true,
+						});
+export const inferRemoteSize = async (url) => {
                 const service = await _getConfiguredImageService()
 
                 return service.getRemoteSize?.(url, imageConfig) ?? inferRemoteSizeInternal(url)
-              }
-							// This is used by the @astrojs/node integration to locate images.
-							// It's unused on other platforms, but on some platforms like Netlify (and presumably also Vercel)
-							// new URL("dist/...") is interpreted by the bundler as a signal to include that directory
-							// in the Lambda bundle, which would bloat the bundle with images.
-							// To prevent this, we mark the URL construction as pure,
-							// so that it's tree-shaken away for all platforms that don't need it.
-							export const outDir = /* #__PURE__ */ new URL(${JSON.stringify(
+              }						// This is used by the @astrojs/node integration to locate images.
+						// It's unused on other platforms, but on some platforms like Netlify (and presumably also Vercel)
+						// new URL("dist/...") is interpreted by the bundler as a signal to include that directory
+						// in the Lambda bundle, which would bloat the bundle with images.
+						// To prevent this, we mark the URL construction as pure,
+						// so that it's tree-shaken away for all platforms that don't need it.
+						export const outDir = /* #__PURE__ */ new URL(${JSON.stringify(
               new URL(
                 settings.buildOutput === "server" ? settings.config.build.client : settings.config.outDir
               )
@@ -161,8 +163,8 @@ function assets({ fs, settings, sync, logger }) {
               export const serverDir = /* #__PURE__ */ new URL(${JSON.stringify(
               new URL(settings.config.build.server)
             )});
-							export const getImage = async (options) => await getImageInternal(options, imageConfig);
-						`
+						export const getImage = async (options) => await getImageInternal(options, imageConfig);
+					`
           };
         }
       },
@@ -251,7 +253,35 @@ function assets({ fs, settings, sync, logger }) {
         }
       }
     },
-    fontsPlugin({ settings, sync, logger })
+    fontsPlugin({ settings, sync, logger }),
+    {
+      name: "astro:image-styles",
+      resolveId: {
+        filter: {
+          id: new RegExp(`^${VIRTUAL_IMAGE_STYLES_ID}$`)
+        },
+        handler(id) {
+          if (id === VIRTUAL_IMAGE_STYLES_ID) {
+            return RESOLVED_VIRTUAL_IMAGE_STYLES_ID;
+          }
+        }
+      },
+      load: {
+        filter: {
+          id: new RegExp(`^${RESOLVED_VIRTUAL_IMAGE_STYLES_ID}$`)
+        },
+        async handler(id) {
+          if (id === RESOLVED_VIRTUAL_IMAGE_STYLES_ID) {
+            const { generateImageStylesCSS } = await import("./utils/generateImageStylesCSS.js");
+            const css = generateImageStylesCSS(
+              settings.config.image.objectFit,
+              settings.config.image.objectPosition
+            );
+            return { code: css };
+          }
+        }
+      }
+    }
   ];
 }
 export {