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')),
},
];
},