Fix types

packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx

@@ -32,12 +32,12 @@ export interface GatsbyImageProps
   imgClassName?: string
   image: IGatsbyImageData
   imgStyle?: CSSProperties
-  backgroundColor?: string
+  backgroundColor?: CSSProperties["backgroundColor"]
   objectFit?: CSSProperties["objectFit"]
   objectPosition?: CSSProperties["objectPosition"]
   onLoad?: () => void
   onError?: () => void
-  onStartLoad?: Function
+  onStartLoad?: (props: { wasCached?: boolean }) => void
 }
 
 export interface IGatsbyImageData {

packages/gatsby-plugin-image/src/components/static-image.server.tsx

@@ -2,27 +2,12 @@ import React, { FunctionComponent } from "react"
 import { GatsbyImage as GatsbyImageServer } from "./gatsby-image.server"
 import { GatsbyImageProps, IGatsbyImageData } from "./gatsby-image.browser"
 import PropTypes from "prop-types"
-import { ImageFormat, Layout, Fit } from "../image-utils"
+import { ISharpGatsbyImageArgs } from "../image-utils"
 
-export interface IStaticImageProps extends Omit<GatsbyImageProps, "image"> {
+export interface IStaticImageProps
+  extends Omit<GatsbyImageProps, "image">,
+    ISharpGatsbyImageArgs {
   src: string
-  layout?: Layout
-  formats?: Array<ImageFormat>
-  placeholder?: "tracedSVG" | "dominantColor" | "blurred" | "none"
-  tracedSVGOptions?: Record<string, unknown>
-  width?: number
-  height?: number
-  aspectRatio?: number
-  sizes?: string
-  quality?: number
-  transformOptions?: {
-    fit?: Fit
-  }
-  jpgOptions?: Record<string, unknown>
-  pngOptions?: Record<string, unknown>
-  webpOptions?: Record<string, unknown>
-  avifOptions?: Record<string, unknown>
-  blurredOptions?: Record<string, unknown>
 }
 
 // These values are added by Babel. Do not add them manually
@@ -92,7 +77,7 @@ export const propTypes = {
     }
 
     return new Error(
-      `Invalid value ${props.layout}" provided for prop "layout". Defaulting to "fixed". Valid values are "fixed", "fluid" or "constrained"`
+      `Invalid value ${props.layout}" provided for prop "layout". Defaulting to "constrained". Valid values are "fixed", "fluid" or "constrained"`
     )
   },
 }

packages/gatsby-plugin-image/src/image-utils.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-unused-expressions */
 import { stripIndent } from "common-tags"
 import { IGatsbyImageData } from "."
+import type sharp from "gatsby-plugin-sharp/safe-sharp"
 
 const DEFAULT_PIXEL_DENSITIES = [0.25, 0.5, 1, 2]
 const DEFAULT_FLUID_WIDTH = 800
@@ -18,6 +19,27 @@ export interface IReporter {
   warn(message: string): void
 }
 
+export interface ISharpGatsbyImageArgs {
+  layout?: "fixed" | "fluid" | "constrained"
+  formats?: Array<ImageFormat>
+  placeholder?: "tracedSVG" | "dominantColor" | "blurred" | "none"
+  tracedSVGOptions?: Record<string, unknown>
+  width?: number
+  height?: number
+  aspectRatio?: number
+  sizes?: string
+  quality?: number
+  transformOptions?: {
+    fit?: Fit
+    cropFocus?: typeof sharp.strategy | typeof sharp.gravity | string
+  }
+  jpgOptions?: Record<string, unknown>
+  pngOptions?: Record<string, unknown>
+  webpOptions?: Record<string, unknown>
+  avifOptions?: Record<string, unknown>
+  blurredOptions?: { width?: number; toFormat?: ImageFormat }
+}
+
 export interface IImageSizeArgs {
   width?: number
   height?: number
@@ -392,8 +414,8 @@ export function fluidImageSizes({
     height = width / aspectRatio
   }
 
-  // if it still hasn't been found, calculate width from the derived maxHeight.
-  // TS isn't smart enough to realise the type for maxHeight has been narrowed here
+  // if it still hasn't been found, calculate width from the derived height.
+  // TS isn't smart enough to realise the type for height has been narrowed here
   if (!width) {
     width = (height as number) * aspectRatio
   }

packages/gatsby-plugin-image/src/index.ts

@@ -10,6 +10,7 @@ export { getImage, getSrc, useGatsbyImage } from "./components/hooks"
 export {
   generateImageData,
   IGatsbyImageHelperArgs,
+  ISharpGatsbyImageArgs,
   IImage,
   ImageFormat,
   Layout,

packages/gatsby-plugin-image/src/node-apis/image-processing.ts

@@ -7,9 +7,10 @@ import {
 } from "gatsby"
 import fs from "fs-extra"
 import path from "path"
-import { ImageProps, SharpProps } from "../utils"
 import { watchImage } from "./watcher"
 import type { FileSystemNode } from "gatsby-source-filesystem"
+import { IStaticImageProps } from "../components/static-image.server"
+import { ISharpGatsbyImageArgs } from "../image-utils"
 
 const supportedTypes = new Set([`image/png`, `image/jpeg`, `image/webp`])
 export interface IImageMetadata {
@@ -70,7 +71,7 @@ export async function writeImages({
   createNode,
   store,
 }: {
-  images: Map<string, ImageProps>
+  images: Map<string, IStaticImageProps>
   pathPrefix: string
   cacheDir: string
   reporter: Reporter
@@ -181,7 +182,7 @@ export async function writeImages({
 
 export async function writeImage(
   file: FileSystemNode,
-  args: SharpProps,
+  args: ISharpGatsbyImageArgs,
   pathPrefix: string,
   reporter: Reporter,
   cache: GatsbyCache,

packages/gatsby-plugin-sharp/safe-sharp.d.ts

@@ -0,0 +1,2 @@
+import sharp from "sharp"
+export default sharp

packages/gatsby-plugin-sharp/src/image-data.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-expressions */
-import { IGatsbyImageData } from "gatsby-plugin-image"
+import { IGatsbyImageData, ISharpGatsbyImageArgs } from "gatsby-plugin-image"
 import { GatsbyCache, Node } from "gatsby"
 import { Reporter } from "gatsby-cli/lib/reporter/reporter"
 import { rgbToHex, calculateImageSizes, getSrcSet, getSizes } from "./utils"
@@ -10,26 +10,7 @@ import { createTransformObject } from "./plugin-options"
 const DEFAULT_BLURRED_IMAGE_WIDTH = 20
 
 type ImageFormat = "jpg" | "png" | "webp" | "avif" | "" | "auto"
-export interface ISharpGatsbyImageArgs {
-  layout?: "fixed" | "fluid" | "constrained"
-  formats?: Array<ImageFormat>
-  placeholder?: "tracedSVG" | "dominantColor" | "blurred" | "none"
-  tracedSVGOptions?: Record<string, unknown>
-  width?: number
-  height?: number
-  aspectRatio?: number
-  sizes?: string
-  quality?: number
-  transformOptions: {
-    fit?: "contain" | "cover" | "fill" | "inside" | "outside"
-    cropFocus?: typeof sharp.strategy | typeof sharp.gravity | string
-  }
-  jpgOptions: Record<string, unknown>
-  pngOptions: Record<string, unknown>
-  webpOptions: Record<string, unknown>
-  avifOptions: Record<string, unknown>
-  blurredOptions: { width?: number; toFormat?: ImageFormat }
-}
+
 export type FileNode = Node & {
   absolutePath?: string
   extension: string