Clean up typography CSS output

libs/@guardian/source-foundations/jest.config.ts

@@ -13,5 +13,8 @@ export default {
 	},
 	moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
 	coverageDirectory: '../../../coverage/libs/@guardian/source-foundations',
-	setupFilesAfterEnv: ['./lib/jest-matchers/toBeValidCSS.ts'],
+	setupFilesAfterEnv: [
+		'./lib/jest-matchers/toBeValidCSS.ts',
+		'./lib/jest-matchers/toMatchCSS.ts',
+	],
 };

libs/@guardian/source-foundations/jest.e2e.setup.ts

@@ -8,5 +8,6 @@ import * as dist from '../../../dist/libs/@guardian/source-foundations';
 
 // Register our custom Jest matcher.
 import './lib/jest-matchers/toBeValidCSS';
+import './lib/jest-matchers/toMatchCSS';
 
 jest.mock('./src/index', () => dist);

libs/@guardian/source-foundations/lib/jest-matchers/index.d.ts

@@ -1,10 +1,11 @@
 declare namespace jest {
 	interface Matchers<R> {
-		toBeValidCSS(options?: ToBeValidCSSOptions): R;
+		toBeValidCSS(options?: CSSMatcherOptions): R;
+		toMatchCSS(expected: string, options?: CSSMatcherOptions): R;
 	}
 }
 
-type ToBeValidCSSOptions = {
+type CSSMatcherOptions = {
 	/**
 	 * Set this to true if the CSS is a fragment (e.g. not wrapped in a selector and valid on its own)
 	 */

libs/@guardian/source-foundations/lib/jest-matchers/toBeValidCSS.ts

@@ -10,7 +10,7 @@ expect.extend({
 	 */
 	toBeValidCSS(
 		received: string,
-		options: ToBeValidCSSOptions = {},
+		options: CSSMatcherOptions = {},
 	): jest.CustomMatcherResult {
 		const { isFragment = false } = options;
 

libs/@guardian/source-foundations/lib/jest-matchers/toMatchCSS.ts

@@ -0,0 +1,56 @@
+import type { Warning } from 'lightningcss';
+import { transform } from 'lightningcss';
+
+expect.extend({
+	/**
+	 * Uses lightningcss library to normalise and compare given CSS
+	 *
+	 * @param received - The CSS to compare
+	 * @param options - Specify whether the CSS being compared is a fragment (not wrapped in a selector)
+	 */
+	toMatchCSS(
+		received: string,
+		expected: string,
+		options: CSSMatcherOptions = {},
+	): jest.CustomMatcherResult {
+		const { isFragment = false } = options;
+
+		// We wrap the CSS in a selector if it is a fragment to ensure it is valid.
+		const recievedCSS = isFragment ? `* { ${received} }` : received;
+		const expectedCSS = isFragment ? `* { ${expected} }` : expected;
+
+		try {
+			const normalisedReceivedCSS = transform({
+				code: Buffer.from(recievedCSS, 'utf8'),
+				filename: '',
+			});
+
+			const normalisedExpectedCSS = transform({
+				code: Buffer.from(expectedCSS, 'utf8'),
+				filename: '',
+			});
+
+			if (
+				normalisedReceivedCSS.code.toString() !==
+				normalisedExpectedCSS.code.toString()
+			) {
+				throw new Error(
+					'Received CSS does not match expected CSS\n\n' +
+						normalisedReceivedCSS.code.toString(),
+				);
+			}
+
+			return {
+				pass: true,
+				message: () => '',
+			};
+		} catch (error) {
+			const message = (error as Warning).message;
+			if (!message) throw error;
+			return {
+				pass: false,
+				message: () => message,
+			};
+		}
+	},
+});