@wular/pnext 0.0.3 → 0.0.6

package/src/compat/next/{image-props.ts → image/props.ts}

@@ -1,51 +1,51 @@
-import type { JSX } from 'preact';
+import type { JSX } from 'preact'
 
 interface LocalPattern {
-  pathname?: string;
-  search?: string;
+  pathname?: string
+  search?: string
 }
 
 interface RemotePattern {
-  protocol?: string;
-  hostname?: string;
-  port?: string;
-  pathname?: string;
-  search?: string;
+  protocol?: string
+  hostname?: string
+  port?: string
+  pathname?: string
+  search?: string
 }
 
 export interface ResolvedImagesConfig {
-  deviceSizes: number[];
-  imageSizes: number[];
-  allSizes: number[];
-  qualities: number[] | undefined;
-  formats: string[];
-  path: string;
-  loader: string;
-  loaderFile: string;
-  domains: string[];
-  disableStaticImages: boolean;
-  minimumCacheTTL: number;
-  maximumRedirects: number;
-  maximumResponseBody: number;
-  dangerouslyAllowLocalIP: boolean;
-  dangerouslyAllowSVG: boolean;
-  contentSecurityPolicy: string;
-  contentDispositionType: string;
-  localPatterns: LocalPattern[] | undefined;
-  remotePatterns: RemotePattern[];
-  unoptimized: boolean;
-  customCacheHandler: boolean;
+  deviceSizes: number[]
+  imageSizes: number[]
+  allSizes: number[]
+  qualities: number[] | undefined
+  formats: string[]
+  path: string
+  loader: string
+  loaderFile: string
+  domains: string[]
+  disableStaticImages: boolean
+  minimumCacheTTL: number
+  maximumRedirects: number
+  maximumResponseBody: number
+  dangerouslyAllowLocalIP: boolean
+  dangerouslyAllowSVG: boolean
+  contentSecurityPolicy: string
+  contentDispositionType: string
+  localPatterns: LocalPattern[] | undefined
+  remotePatterns: RemotePattern[]
+  unoptimized: boolean
+  customCacheHandler: boolean
 }
 
 declare global {
-  var __PNEXT_IMAGE_CONFIG__: ResolvedImagesConfig | undefined;
+  var __PNEXT_IMAGE_CONFIG__: ResolvedImagesConfig | undefined
 }
 
 // Client-graph bundler defines (see compat/register/bundler.ts). The boolean
 // twin gates the branch on a literal so DEFAULT_IMAGES_CONFIG is dropped from
 // every client bundle — a `??` against an object define never folds.
-declare const __PNEXT_IMAGE_CONFIG_INLINE__: ResolvedImagesConfig;
-declare const __PNEXT_IMAGE_CONFIG_INLINED__: boolean;
+declare const __PNEXT_IMAGE_CONFIG_INLINE__: ResolvedImagesConfig
+declare const __PNEXT_IMAGE_CONFIG_INLINED__: boolean
 
 const DEFAULT_IMAGES_CONFIG: ResolvedImagesConfig = {
   deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -69,73 +69,73 @@ const DEFAULT_IMAGES_CONFIG: ResolvedImagesConfig = {
   remotePatterns: [],
   unoptimized: false,
   customCacheHandler: false,
-};
+}
 
 export interface StaticImageData {
-  src: string;
-  width: number;
-  height: number;
-  blurDataURL?: string;
-  blurWidth?: number;
-  blurHeight?: number;
+  src: string
+  width: number
+  height: number
+  blurDataURL?: string
+  blurWidth?: number
+  blurHeight?: number
 }
 
-type StaticImport = StaticImageData | { default: StaticImageData };
+type StaticImport = StaticImageData | { default: StaticImageData }
 
 interface LoaderProps {
-  src: string;
-  width: number;
-  quality?: number;
+  src: string
+  width: number
+  quality?: number
 }
 
-export type ImageLoader = (props: LoaderProps) => string;
+export type ImageLoader = (props: LoaderProps) => string
 
 export type ImageProps = Omit<
   JSX.HTMLAttributes<HTMLImageElement>,
   'src' | 'srcset' | 'width' | 'height' | 'loading' | 'ref' | 'alt' | 'style'
 > & {
-  src: string | StaticImport;
-  alt?: string;
-  width?: number | string;
-  height?: number | string;
-  fill?: boolean;
-  loader?: ImageLoader;
-  quality?: number | string;
-  priority?: boolean;
+  src: string | StaticImport
+  alt?: string
+  width?: number | string
+  height?: number | string
+  fill?: boolean
+  loader?: ImageLoader
+  quality?: number | string
+  priority?: boolean
   /** Preload the image without opting into the `priority` LCP warning gating. */
-  preload?: boolean;
-  loading?: 'lazy' | 'eager';
-  placeholder?: 'blur' | 'empty' | `data:image/${string}`;
-  blurDataURL?: string;
-  unoptimized?: boolean;
-  overrideSrc?: string;
-  sizes?: string;
-  fetchPriority?: 'high' | 'low' | 'auto';
-  decoding?: 'async' | 'auto' | 'sync';
-  style?: JSX.CSSProperties | string;
-  onLoad?: JSX.GenericEventHandler<HTMLImageElement>;
-  onError?: JSX.GenericEventHandler<HTMLImageElement>;
-  onLoadingComplete?: (img: HTMLImageElement) => void;
-  layout?: 'fill' | 'responsive' | 'intrinsic' | 'fixed';
-  objectFit?: string;
-  objectPosition?: string;
-};
+  preload?: boolean
+  loading?: 'lazy' | 'eager'
+  placeholder?: 'blur' | 'empty' | `data:image/${string}`
+  blurDataURL?: string
+  unoptimized?: boolean
+  overrideSrc?: string
+  sizes?: string
+  fetchPriority?: 'high' | 'low' | 'auto'
+  decoding?: 'async' | 'auto' | 'sync'
+  style?: JSX.CSSProperties | string
+  onLoad?: JSX.GenericEventHandler<HTMLImageElement>
+  onError?: JSX.GenericEventHandler<HTMLImageElement>
+  onLoadingComplete?: (img: HTMLImageElement) => void
+  layout?: 'fill' | 'responsive' | 'intrinsic' | 'fixed'
+  objectFit?: string
+  objectPosition?: string
+}
 
 export interface ResolvedImageProps {
-  props: Record<string, unknown>;
+  props: Record<string, unknown>
   meta: {
-    preload: boolean;
-    fill: boolean;
-    unoptimized: boolean;
-    placeholder: string;
-    imgAttributes: { src: string; srcSet?: string; sizes?: string };
+    preload: boolean
+    fill: boolean
+    unoptimized: boolean
+    placeholder: string
+    imgAttributes: { src: string; srcSet?: string; sizes?: string }
     /**
      * Serialized style WITHOUT the placeholder background props - what the img should carry once loaded.
      * Set only while a placeholder is applied; the server render stamps it as `data-nimg-ph` so the
      * non-hydrated placeholder script can restore it on load.
      */
-    loadedStyle?: string;
-  };
+    loadedStyle?: string
+  }
 }
 
 const INVALID_BACKGROUND_SIZE = new Set<string | undefined>([
@@ -144,17 +144,17 @@ const INVALID_BACKGROUND_SIZE = new Set<string | undefined>([
   'none',
   'scale-down',
   undefined,
-]);
+])
 
 function unwrapStaticImport(src: StaticImport): StaticImageData {
-  return 'default' in src ? src.default : src;
+  return 'default' in src ? src.default : src
 }
 
 function toNumber(value: number | string | undefined): number | undefined {
-  if (value === undefined) return undefined;
-  if (typeof value === 'number') return value;
-  const n = parseInt(value, 10);
-  return Number.isNaN(n) ? undefined : n;
+  if (value === undefined) return undefined
+  if (typeof value === 'number') return value
+  const n = parseInt(value, 10)
+  return Number.isNaN(n) ? undefined : n
 }
 
 // The client reads the inlined define, the server the global registerImageExtensions
@@ -162,7 +162,7 @@ function toNumber(value: number | string | undefined): number | undefined {
 export function getImagesConfig(): ResolvedImagesConfig {
   return typeof __PNEXT_IMAGE_CONFIG_INLINED__ === 'boolean'
     ? __PNEXT_IMAGE_CONFIG_INLINE__
-    : (globalThis.__PNEXT_IMAGE_CONFIG__ ?? DEFAULT_IMAGES_CONFIG);
+    : (globalThis.__PNEXT_IMAGE_CONFIG__ ?? DEFAULT_IMAGES_CONFIG)
 }
 
 function defaultLoader(
@@ -171,34 +171,34 @@ function defaultLoader(
   width: number,
   quality?: number,
 ): string {
-  const q = findClosestQuality(config, quality);
-  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;
+  const q = findClosestQuality(config, quality)
+  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`
 }
 
 export function findClosestQuality(config: ResolvedImagesConfig, quality?: number): number {
-  const qualities = config.qualities;
-  if (!qualities || qualities.length === 0) return quality ?? 75;
-  if (quality === undefined) return closest(qualities, 75);
-  return closest(qualities, quality);
+  const qualities = config.qualities
+  if (!qualities || qualities.length === 0) return quality ?? 75
+  if (quality === undefined) return closest(qualities, 75)
+  return closest(qualities, quality)
 }
 
 function closest(values: number[], target: number): number {
-  let best = values[0]!;
-  let bestDelta = Math.abs(best - target);
+  let best = values[0]!
+  let bestDelta = Math.abs(best - target)
   for (const value of values) {
-    const delta = Math.abs(value - target);
+    const delta = Math.abs(value - target)
     if (delta < bestDelta) {
-      best = value;
-      bestDelta = delta;
+      best = value
+      bestDelta = delta
     }
   }
-  return best;
+  return best
 }
 
 interface GenImgAttrsResult {
-  src: string;
-  srcSet: string | undefined;
-  sizes: string | undefined;
+  src: string
+  srcSet: string | undefined
+  sizes: string | undefined
 }
 
 function getWidths(
@@ -206,44 +206,49 @@ function getWidths(
   width: number | undefined,
   sizes: string | undefined,
 ): { widths: number[]; kind: 'w' | 'x' } {
-  const { deviceSizes, allSizes } = config;
+  const { deviceSizes, allSizes } = config
   if (sizes) {
-    const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
-    const percentSizes: number[] = [];
-    for (let match; (match = viewportWidthRe.exec(sizes)); ) {
-      percentSizes.push(parseInt(match[2]!, 10));
+    const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g
+    const percentSizes: number[] = []
+    for (let match; (match = viewportWidthRe.exec(sizes));) {
+      percentSizes.push(parseInt(match[2]!, 10))
     }
     if (percentSizes.length) {
-      const smallestRatio = Math.min(...percentSizes) * 0.01;
+      const smallestRatio = Math.min(...percentSizes) * 0.01
       return {
         widths: allSizes.filter(s => s >= deviceSizes[0]! * smallestRatio),
         kind: 'w',
-      };
+      }
     }
-    return { widths: allSizes, kind: 'w' };
+    return { widths: allSizes, kind: 'w' }
   }
-  if (typeof width !== 'number') return { widths: deviceSizes, kind: 'w' };
+  if (typeof width !== 'number') return { widths: deviceSizes, kind: 'w' }
   const widths = [
     ...new Set(
       [width, width * 2].map(w => allSizes.find(p => p >= w) || allSizes[allSizes.length - 1]!),
     ),
-  ];
-  return { widths, kind: 'x' };
+  ]
+  return { widths, kind: 'x' }
 }
 
 function generateImgAttrs(params: {
-  config: ResolvedImagesConfig;
-  src: string;
-  unoptimized: boolean;
-  width: number | undefined;
-  quality: number | undefined;
-  sizes: string | undefined;
-  loader: (args: { config: ResolvedImagesConfig; src: string; width: number; quality?: number }) => string;
+  config: ResolvedImagesConfig
+  src: string
+  unoptimized: boolean
+  width: number | undefined
+  quality: number | undefined
+  sizes: string | undefined
+  loader: (args: {
+    config: ResolvedImagesConfig
+    src: string
+    width: number
+    quality?: number
+  }) => string
 }): GenImgAttrsResult {
-  const { config, src, unoptimized, width, quality, sizes, loader } = params;
-  if (unoptimized) return { src, srcSet: undefined, sizes: undefined };
-  const { widths, kind } = getWidths(config, width, sizes);
-  const last = widths.length - 1;
+  const { config, src, unoptimized, width, quality, sizes, loader } = params
+  if (unoptimized) return { src, srcSet: undefined, sizes: undefined }
+  const { widths, kind } = getWidths(config, width, sizes)
+  const last = widths.length - 1
   return {
     sizes: !sizes && kind === 'w' ? '100vw' : sizes,
     srcSet: widths
@@ -253,7 +258,7 @@ function generateImgAttrs(params: {
       )
       .join(', '),
     src: loader({ config, src, quality, width: widths[last]! }),
-  };
+  }
 }
 
 /**
@@ -262,38 +267,38 @@ function generateImgAttrs(params: {
  * builder is then dead code. Undefined (no define) keeps it, so the gate can only ever remove bytes an
  * app proved it cannot use.
  */
-declare const __PNEXT_IMAGE_BLUR__: boolean;
+declare const __PNEXT_IMAGE_BLUR__: boolean
 
 function getImageBlurSvg(params: {
-  widthInt?: number;
-  heightInt?: number;
-  blurWidth?: number;
-  blurHeight?: number;
-  blurDataURL: string;
-  objectFit?: string;
+  widthInt?: number
+  heightInt?: number
+  blurWidth?: number
+  blurHeight?: number
+  blurDataURL: string
+  objectFit?: string
 }): string {
-  const { widthInt, heightInt, blurWidth, blurHeight, blurDataURL, objectFit } = params;
-  const std = 20;
-  const svgWidth = blurWidth ? blurWidth * 40 : widthInt;
-  const svgHeight = blurHeight ? blurHeight * 40 : heightInt;
-  const viewBox = svgWidth && svgHeight ? `viewBox='0 0 ${svgWidth} ${svgHeight}'` : '';
+  const { widthInt, heightInt, blurWidth, blurHeight, blurDataURL, objectFit } = params
+  const std = 20
+  const svgWidth = blurWidth ? blurWidth * 40 : widthInt
+  const svgHeight = blurHeight ? blurHeight * 40 : heightInt
+  const viewBox = svgWidth && svgHeight ? `viewBox='0 0 ${svgWidth} ${svgHeight}'` : ''
   const preserveAspectRatio = viewBox
     ? 'none'
     : objectFit === 'contain'
       ? 'xMidYMid'
       : objectFit === 'cover'
         ? 'xMidYMid slice'
-        : 'none';
-  return `%3Csvg xmlns='http://www.w3.org/2000/svg' ${viewBox}%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='${preserveAspectRatio}' style='filter: url(%23b);' href='${blurDataURL}'/%3E%3C/svg%3E`;
+        : 'none'
+  return `%3Csvg xmlns='http://www.w3.org/2000/svg' ${viewBox}%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='${preserveAspectRatio}' style='filter: url(%23b);' href='${blurDataURL}'/%3E%3C/svg%3E`
 }
 
 export function getImageProps(imageProps: ImageProps): { props: Record<string, unknown> } {
-  const resolved = resolveImageProps(imageProps, getImagesConfig());
-  return { props: resolved.props };
+  const resolved = resolveImageProps(imageProps, getImagesConfig())
+  return { props: resolved.props }
 }
 
 export function unstable_getImgProps(imageProps: ImageProps) {
-  return getImageProps(imageProps);
+  return getImageProps(imageProps)
 }
 
 export function resolveImageProps(
@@ -328,66 +333,66 @@ export function resolveImageProps(
     onError: _onError,
     onLoadingComplete: _onLoadingComplete,
     ...rest
-  } = imageProps;
+  } = imageProps
 
-  let fill = fillProp;
-  let sizes = sizesProp;
-  let userStyle = normalizeStyle(styleProp);
+  let fill = fillProp
+  let sizes = sizesProp
+  let userStyle = normalizeStyle(styleProp)
 
   if (layout) {
-    if (layout === 'fill') fill = true;
+    if (layout === 'fill') fill = true
     const layoutStyle =
       layout === 'intrinsic'
         ? { maxWidth: '100%', height: 'auto' }
         : layout === 'responsive'
           ? { width: '100%', height: 'auto' }
-          : undefined;
-    if (layoutStyle) userStyle = { ...userStyle, ...layoutStyle };
-    if (!sizes && (layout === 'responsive' || layout === 'fill')) sizes = '100vw';
+          : undefined
+    if (layoutStyle) userStyle = { ...userStyle, ...layoutStyle }
+    if (!sizes && (layout === 'responsive' || layout === 'fill')) sizes = '100vw'
   }
 
-  const staticData = rawSrc && typeof rawSrc !== 'string' ? unwrapStaticImport(rawSrc) : undefined;
-  const src = typeof rawSrc === 'string' ? rawSrc : (staticData?.src ?? '');
+  const staticData = rawSrc && typeof rawSrc !== 'string' ? unwrapStaticImport(rawSrc) : undefined
+  const src = typeof rawSrc === 'string' ? rawSrc : (staticData?.src ?? '')
 
-  let width = toNumber(widthProp);
-  let height = toNumber(heightProp);
+  let width = toNumber(widthProp)
+  let height = toNumber(heightProp)
   if (staticData) {
     if (width === undefined && height === undefined) {
-      width = staticData.width;
-      height = staticData.height;
+      width = staticData.width
+      height = staticData.height
     } else if (width !== undefined && height === undefined) {
-      height = Math.round((staticData.height / staticData.width) * width);
+      height = Math.round((staticData.height / staticData.width) * width)
     } else if (height !== undefined && width === undefined) {
-      width = Math.round((staticData.width / staticData.height) * height);
+      width = Math.round((staticData.width / staticData.height) * height)
     }
   }
 
-  const blurDataURL = blurDataURLProp ?? staticData?.blurDataURL;
-  const quality = toNumber(qualityProp);
-  let unoptimized = Boolean(unoptimizedProp ?? config.unoptimized);
-  if (!src || src.startsWith('data:') || src.startsWith('blob:')) unoptimized = true;
+  const blurDataURL = blurDataURLProp ?? staticData?.blurDataURL
+  const quality = toNumber(qualityProp)
+  let unoptimized = Boolean(unoptimizedProp ?? config.unoptimized)
+  if (!src || src.startsWith('data:') || src.startsWith('blob:')) unoptimized = true
   // Serve `.svg` as-is instead of proxying through the Image Optimization API,
   // which refuses SVG unless `dangerouslyAllowSVG` is set (otherwise the request
   // 400s and the image never loads, so onLoad/onLoadingComplete never fire).
   // Only applies to the default loader — a custom loader/loaderFile owns SVG.
-  const isDefaultLoader = !loader && !config.loaderFile;
+  const isDefaultLoader = !loader && !config.loaderFile
   if (
     isDefaultLoader &&
     !config.dangerouslyAllowSVG &&
     (src.split('?', 1)[0] ?? '').endsWith('.svg')
   ) {
-    unoptimized = true;
+    unoptimized = true
   }
-  if (!unoptimized) validateLocalSrc(config, src);
+  if (!unoptimized) validateLocalSrc(config, src)
 
   const activeLoader: (args: {
-    config: ResolvedImagesConfig;
-    src: string;
-    width: number;
-    quality?: number;
+    config: ResolvedImagesConfig
+    src: string
+    width: number
+    quality?: number
   }) => string = loader
     ? ({ src: s, width: w, quality: q }) => loader({ src: s, width: w, quality: q })
-    : ({ config: c, src: s, width: w, quality: q }) => defaultLoader(c, s, w, q);
+    : ({ config: c, src: s, width: w, quality: q }) => defaultLoader(c, s, w, q)
 
   const imgAttrs = generateImgAttrs({
     config,
@@ -397,16 +402,16 @@ export function resolveImageProps(
     quality,
     sizes,
     loader: activeLoader,
-  });
+  })
 
-  const isBlur = placeholder === 'blur' && Boolean(blurDataURL);
+  const isBlur = placeholder === 'blur' && Boolean(blurDataURL)
   const imgStyle: Record<string, string | number | undefined> = {
     ...(fill ? { ...fillStyle(), objectFit, objectPosition } : {}),
     ...(showAltText ? {} : { color: 'transparent' }),
     ...userStyle,
-  };
+  }
 
-  const objectFitVal = typeof imgStyle.objectFit === 'string' ? imgStyle.objectFit : undefined;
+  const objectFitVal = typeof imgStyle.objectFit === 'string' ? imgStyle.objectFit : undefined
   const backgroundImage =
     !blurComplete && placeholder !== 'empty'
       ? placeholder === 'blur'
@@ -425,11 +430,11 @@ export function resolveImageProps(
             })}")`
           : undefined
         : `url("${placeholder}")`
-      : undefined;
+      : undefined
 
-  let backgroundSize = 'cover';
-  if (objectFitVal === 'fill') backgroundSize = '100% 100%';
-  else if (objectFitVal && !INVALID_BACKGROUND_SIZE.has(objectFitVal)) backgroundSize = objectFitVal;
+  let backgroundSize = 'cover'
+  if (objectFitVal === 'fill') backgroundSize = '100% 100%'
+  else if (objectFitVal && !INVALID_BACKGROUND_SIZE.has(objectFitVal)) backgroundSize = objectFitVal
 
   const placeholderStyle: Record<string, string | number> = backgroundImage
     ? {
@@ -438,10 +443,10 @@ export function resolveImageProps(
         backgroundRepeat: 'no-repeat',
         backgroundImage,
       }
-    : {};
+    : {}
 
-  const style = serializeStyle({ ...imgStyle, ...placeholderStyle });
-  const resolvedSrc = (overrideSrc ?? imgAttrs.src) || undefined;
+  const style = serializeStyle({ ...imgStyle, ...placeholderStyle })
+  const resolvedSrc = (overrideSrc ?? imgAttrs.src) || undefined
   const props: Record<string, unknown> = {
     ...rest,
     alt,
@@ -450,14 +455,14 @@ export function resolveImageProps(
     ...(imgAttrs.sizes ? { sizes: imgAttrs.sizes } : {}),
     decoding,
     style,
-  };
+  }
   if (!fill) {
-    if (width !== undefined) props.width = width;
-    if (height !== undefined) props.height = height;
+    if (width !== undefined) props.width = width
+    if (height !== undefined) props.height = height
   }
-  if (loading !== undefined) props.loading = loading;
-  else if (!priority && !preload) props.loading = 'lazy';
-  if (fetchPriority !== undefined) props.fetchpriority = fetchPriority;
+  if (loading !== undefined) props.loading = loading
+  else if (!priority && !preload) props.loading = 'lazy'
+  if (fetchPriority !== undefined) props.fetchpriority = fetchPriority
 
   return {
     props,
@@ -473,18 +478,18 @@ export function resolveImageProps(
       },
       ...(backgroundImage ? { loadedStyle: serializeStyle(imgStyle) } : {}),
     },
-  };
+  }
 }
 
 function normalizeStyle(style: JSX.CSSProperties | string | undefined): Record<string, unknown> {
-  if (!style) return {};
-  if (typeof style !== 'string') return { ...style };
-  const out: Record<string, unknown> = {};
+  if (!style) return {}
+  if (typeof style !== 'string') return { ...style }
+  const out: Record<string, unknown> = {}
   for (const decl of style.split(';')) {
-    const [k, v] = decl.split(':');
-    if (k && v) out[camel(k.trim())] = v.trim();
+    const [k, v] = decl.split(':')
+    if (k && v) out[camel(k.trim())] = v.trim()
   }
-  return out;
+  return out
 }
 
 function fillStyle(): Record<string, string> {
@@ -496,20 +501,20 @@ function fillStyle(): Record<string, string> {
     top: '0',
     right: '0',
     bottom: '0',
-  };
+  }
 }
 
 function validateLocalSrc(config: ResolvedImagesConfig, src: string): void {
-  if (!src.startsWith('/') || src.startsWith('//') || config.localPatterns !== undefined) return;
-  const search = new URL(src, 'http://n').search;
-  if (!search) return;
+  if (!src.startsWith('/') || src.startsWith('//') || config.localPatterns !== undefined) return
+  const search = new URL(src, 'http://n').search
+  if (!search) return
   throw new Error(
     `Image with src "${src}" is using a query string which is not configured in images.localPatterns.\nRead more: https://nextjs.org/docs/messages/next-image-unconfigured-localpatterns`,
-  );
+  )
 }
 
 function camel(prop: string): string {
-  return prop.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
+  return prop.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase())
 }
 
 const UNITLESS_STYLE_PROPS = new Set([
@@ -556,20 +561,21 @@ const UNITLESS_STYLE_PROPS = new Set([
   'strokeMiterlimit',
   'strokeOpacity',
   'strokeWidth',
-]);
+])
 
 function serializeStyle(style: Record<string, string | number | undefined>): string {
   return Object.entries(style)
     .filter(([, v]) => v !== undefined && v !== '')
     .map(([k, v]) => `${kebab(k)}:${cssValue(k, v!)}`)
-    .join(';');
+    .join(';')
 }
 
 function cssValue(prop: string, value: string | number): string {
-  if (typeof value === 'number' && value !== 0 && !UNITLESS_STYLE_PROPS.has(prop)) return `${value}px`;
-  return String(value);
+  if (typeof value === 'number' && value !== 0 && !UNITLESS_STYLE_PROPS.has(prop))
+    return `${value}px`
+  return String(value)
 }
 
 function kebab(prop: string): string {
-  return prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+  return prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)
 }