feat(csp): support responsive images (#15407)

Co-authored-by: Matt Kane <[email protected]>

Author: ematipico

.changeset/ripe-nights-feel.md

@@ -0,0 +1,17 @@
+---
+'astro': minor
+---
+
+Responsive images are now supported when `security.csp` is enabled, out of the box. 
+
+Before, the styles for responsive images were injected using the `style="""` attribute, and the image would look like this:
+
+```html
+<img style="--fit: <value>; --pos: <value>" >
+```
+
+After this change, styles now use a combination of `class=""` and data attributes. The image would look like this:
+
+```html
+<img class="__a_HaSh350" data-atro-fit="value" data-astro-pos="value" >
+```

.changeset/upset-dodos-rhyme.md

@@ -0,0 +1,5 @@
+---
+'astro': major
+---
+
+Changes how styles of responsive images are emitted - ([v6 upgrade guidance](https://v6.docs.astro.build/en/guides/upgrade-to/v6/#changed-how-responsive-image-styles-are-emitted))

packages/astro/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' {

packages/astro/components/ResponsiveImage.astro

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

packages/astro/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 */}

packages/astro/components/image.css

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import { testFactory } from './test-utils.js';
+
+const test = testFactory(import.meta.url, {
+	root: '../test/fixtures/core-image-layout/',
+	devToolbar: {
+		enabled: false,
+	},
+});
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async () => {
+	await devServer.stop();
+});
+
+test.describe('Image styles injection', () => {
+	test('injects a style tag with [data-astro-image] CSS', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		// Wait for client-side CSS injection
+		await page.waitForLoadState('networkidle');
+
+		// Check all style tags for image styles
+		const styleTags = await page.locator('style').all();
+		let foundImageStyles = false;
+
+		for (const styleTag of styleTags) {
+			const content = await styleTag.textContent();
+			if (content && content.includes('[data-astro-image]')) {
+				foundImageStyles = true;
+				break;
+			}
+		}
+
+		expect(foundImageStyles).toBe(true);
+	});
+});

packages/astro/e2e/core-image-styles.test.js

@@ -1,6 +1,9 @@
 export const VIRTUAL_MODULE_ID = 'astro:assets';
 export const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
 export const VIRTUAL_SERVICE_ID = 'virtual:image-service';
+// Must keep the extension so we trigger the pipeline of CSS files
+export const VIRTUAL_IMAGE_STYLES_ID = 'virtual:astro:image-styles.css';
+export const RESOLVED_VIRTUAL_IMAGE_STYLES_ID = '\0' + VIRTUAL_IMAGE_STYLES_ID;
 export const VALID_INPUT_FORMATS = [
 	'jpeg',
 	'jpg',

packages/astro/src/assets/consts.ts

@@ -17,11 +17,12 @@ import {
 	type SrcSetValue,
 	type UnresolvedImageTransform,
 } 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';
 
+export const cssFitValues = ['fill', 'contain', 'cover', 'scale-down'];
+
 export async function getConfiguredImageService(): Promise<ImageService> {
 	if (!globalThis?.astroAsset?.imageService) {
 		const { default: service }: { default: ImageService } = await import(
@@ -149,14 +150,19 @@ export async function getImage(
 		resolvedOptions.sizes ||= getSizesAttribute({ width: resolvedOptions.width, layout });
 		// The densities option is incompatible with the `layout` option
 		delete resolvedOptions.densities;
-		resolvedOptions.style = addCSSVarsToStyle(
-			{
-				fit: cssFitValues.includes(resolvedOptions.fit ?? '') && resolvedOptions.fit,
-				pos: resolvedOptions.position,
-			},
-			resolvedOptions.style,
-		);
+
+		// Set data attribute for layout
 		resolvedOptions['data-astro-image'] = layout;
+
+		// Set data attributes for fit and position for CSP-compliant styling
+		if (resolvedOptions.fit && cssFitValues.includes(resolvedOptions.fit)) {
+			resolvedOptions['data-astro-image-fit'] = resolvedOptions.fit;
+		}
+
+		if (resolvedOptions.position) {
+			// Normalize position value for data attribute (spaces to dashes)
+			resolvedOptions['data-astro-image-pos'] = resolvedOptions.position.replace(/\s+/g, '-');
+		}
 	}
 
 	const validatedOptions = service.validateOptions

packages/astro/src/assets/internal.ts

@@ -0,0 +1,48 @@
+import { cssFitValues } from '../internal.js';
+
+export function generateImageStylesCSS(
+	defaultObjectFit?: string,
+	defaultObjectPosition?: string,
+): string {
+	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();
+}