a6ace782-c012-4170-9d55-dd7515b95356

Committed 27 Jun 2024 08:14PM CUT coverage: 85.301% (-0.005%) from 85.306%

Build # a6ace782-c012-4170-9d55-dd7515b95356

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #4820 from mozilla/workaround-next-img-inline-style

MPP-3835: Workaround next/image's inline style for SVG images

Run Details

4011 of 5156 branches covered (77.79%)

Branch coverage included in aggregate %.

38 of 43 new or added lines in 30 files covered. (88.37%)

15760 of 18022 relevant lines covered (87.45%)

11.0 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

80.77

/frontend/src/components/Image.tsx

// Work around next.js adding inline style color:transparent
// This breaks our CSP rules about inline styles.
// More context and some suggested solutions from:
// https://0xdbe.github.io/NextJS-CSP-NextImage/
//
// If this is fixed in a future next.js release, replace:
// import Image from "../path/to/Image";
// with
// import Image from next/image;

import NextImage, { getImageProps } from "next/image";
import { ComponentProps } from "react";
import styles from "./Image.module.scss";

export default function Image(props: ComponentProps<typeof NextImage>) {
  const altText = props.alt;
  const { props: nextProps } = getImageProps({ ...props });
  const { style, className: origClassName, ...delegated } = nextProps;
  const debugStyles = false; // Set to true to fail build on new inline styles

  let className = origClassName || "";
  if (typeof style === "object" && style !== null) {
    if (Object.keys(style).length === 1 && style.color === "transparent") {
      className = `${className} ${styles.transparent}`.trim();
    } else if (debugStyles) {
      throw new Error(
        `Update components/Image.tsx, unexpected style value: ${JSON.stringify(style)}`,
      );
    }
  }

  if (className !== "") {
    return <img className={className} {...delegated} alt={altText} />;
  } else {
    return <img {...delegated} alt={altText} />;
  }
}

1	// Work around next.js adding inline style color:transparent
2	// This breaks our CSP rules about inline styles.
3	// More context and some suggested solutions from:
4	// https://0xdbe.github.io/NextJS-CSP-NextImage/
5	//
6	// If this is fixed in a future next.js release, replace:
7	// import Image from "../path/to/Image";
8	// with
9	// import Image from next/image;
10
11	import NextImage, { getImageProps } from "next/image";	12✔
12	import { ComponentProps } from "react";
13	import styles from "./Image.module.scss";	12✔
14
15	export default function Image(props: ComponentProps<typeof NextImage>) {	1,621✔
16	const altText = props.alt;	1,136✔
17	const { props: nextProps } = getImageProps({ ...props });	1,136✔
18	const { style, className: origClassName, ...delegated } = nextProps;	1,136✔
19	const debugStyles = false; // Set to true to fail build on new inline styles	1,136✔
20
21	let className = origClassName \|\| "";	1,136✔
22	if (typeof style === "object" && style !== null) {	1,136✔
23	if (Object.keys(style).length === 1 && style.color === "transparent") {	1,136!
24	className = `${className} ${styles.transparent}`.trim();	1,136✔
NEW 25	} else if (debugStyles) {	×
NEW 26	throw new Error(	×
27	`Update components/Image.tsx, unexpected style value: ${JSON.stringify(style)}`,
28	);
29	}
30	}
31
32	if (className !== "") {	1,136!
33	return <img className={className} {...delegated} alt={altText} />;
34	} else {
35	return <img {...delegated} alt={altText} />;
36	}
37	}

mozilla / fx-private-relay / a6ace782-c012-4170-9d55-dd7515b95356

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous