in libs/@guardian/source/src/design-tokens/cobalt-plugins/size.js [21:93]
async build({ tokens, rawSchema /*, metadata */ }) {
const TOKEN_GROUP = ['size', 'height', 'width', 'iconSize'];
/** @type {Object.<string, string | undefined>} */
const description = {};
for (const group of TOKEN_GROUP) {
description[group] = rawSchema[group]?.$description ?? '';
}
/** @type {Object.<string, string>} */
let numberTokens = {};
/** @type {Object.<string, string>} */
let remTokens = {};
/** @type {Object.<string, string>} */
const jsDoc = {};
const sizeTokens = tokens.filter((token) => {
const [group] = token.id.split('.');
return TOKEN_GROUP.includes(group ?? '');
});
// we can re-use the default transformer from `@cobalt-ui/plugin-js`
for (const token of sizeTokens) {
const value = Number(
pxStringToNumber(defaultTransformer(token).toString()),
);
set(numberTokens, token.id, value);
set(remTokens, token.id, numberToRem(value));
if (token.$description) {
jsDoc[getCommentId(token.id)] = token.$description;
}
}
const typescriptSource = [];
for (const tokenGroup of Object.keys(numberTokens)) {
const serialisedJS = serializeJS(numberTokens[tokenGroup], {
comments: jsDoc,
}).trim();
if (description[tokenGroup]) {
typescriptSource.push(`/** ${description[tokenGroup]} */`);
}
typescriptSource.push(
`export const ${tokenGroup} = ${serialisedJS.replace(/;$/, '')} as const;`,
);
}
for (const tokenGroup of Object.keys(remTokens)) {
const serialisedJS = serializeJS(remTokens[tokenGroup], {
comments: jsDoc,
}).trim();
if (description[tokenGroup]) {
typescriptSource.push(`/** ${description[tokenGroup]} */`);
}
typescriptSource.push(
`export const rem${capitalise(tokenGroup)} = ${serialisedJS.replace(/;$/, '')} as const;`,
);
}
return [
{
filename: options.filename,
contents: template(import.meta.filename, typescriptSource.join('\n')),
},
];
},