async build()

in libs/@guardian/source/src/design-tokens/cobalt-plugins/breakpoints.js [20:74]


		async build({ tokens, rawSchema /*, metadata */ }) {
			const TOKEN_GROUP = 'breakpoint';

			const description = rawSchema[TOKEN_GROUP]?.$description;

			const breakpointTokens = tokens.filter((token) =>
				token.id.startsWith(TOKEN_GROUP),
			);

			/**
			 * this is where we'll store the transformed tokens
			 * @type {Object.<string, string>}
			 */
			const transformedTokens = {};

			/** @type {Object.<string, string>} */
			const jsDoc = {};

			// we can re-use the default transformer from `@cobalt-ui/plugin-js`
			for (const token of breakpointTokens) {
				set(
					transformedTokens,
					token.id,
					pxStringToNumber(defaultTransformer(token).toString()),
				);
				if (token.$description) {
					jsDoc[getCommentId(token.id)] = token.$description;
				}
			}

			const serialisedJS = Object.values(transformedTokens)
				.map((breakpointToken) =>
					serializeJS(breakpointToken, { comments: jsDoc }),
				)
				.join('')
				.replace(/;$/, '');

			const typescriptSource = [];

			if (description) {
				typescriptSource.push(`/** ${description} */`);
			}

			typescriptSource.push(
				`export const breakpoints = ${serialisedJS} as const;`,
				`export type Breakpoint = keyof typeof breakpoints;`,
			);

			return [
				{
					filename: options.filename,
					contents: template(import.meta.filename, typescriptSource.join('\n')),
				},
			];
		},