diff --git a/.github/workflows/build-tokens.yaml b/.github/workflows/build-tokens.yaml index d463475e55..c72c148e50 100644 --- a/.github/workflows/build-tokens.yaml +++ b/.github/workflows/build-tokens.yaml @@ -32,7 +32,7 @@ jobs: const inputFileNames = fs.readdirSync('packages/tokens/tokensstudio-generated') const inputFiles = inputFileNames.map(fileName => ({ - type: path.extname(fileName), + type: path.extname(fileName).replace(/^\./, ''), name: fileName, content: fs.readFileSync(`packages/tokens/tokensstudio-generated/${fileName}`, 'utf8') })) @@ -47,11 +47,17 @@ jobs: 'components.scss', ] const outputFileNames = fs.readdirSync('packages/tokens/dist') - const outputFiles = outputFileNames.map(fileName => ({ - type: path.extname(fileName), - name: fileName, - content: fs.readFileSync(`packages/tokens/dist/${fileName}`, 'utf8') - })).sort((a, b) => (outputOrder.includes(a.name) ? outputOrder.indexOf(a.name) : 1000) - (outputOrder.includes(b.name) ? outputOrder.indexOf(b.name) : 1000)) + const outputFiles = outputFileNames + .map(fileName => ({ + type: path.extname(fileName).replace(/^\./, ''), + name: fileName, + content: fs.readFileSync(`packages/tokens/dist/${fileName}`, 'utf8') + })) + .map(({ type, name, content }) => { + if (type === 'scss') content = content.replaceAll('\n\n', '\n \n').replaceAll('$', '$').replaceAll(' ', '  ') + return { type, name, content } + }) + .sort((a, b) => (outputOrder.includes(a.name) ? outputOrder.indexOf(a.name) : 1000) - (outputOrder.includes(b.name) ? outputOrder.indexOf(b.name) : 1000)) return `# Token Build ## Input diff --git a/packages/tokens/build.js b/packages/tokens/build.js index 6b70e0c02a..c788960ace 100644 --- a/packages/tokens/build.js +++ b/packages/tokens/build.js @@ -51,6 +51,10 @@ StyleDictionary.registerFilter({ StyleDictionary.registerFormat({ name: 'swisspost/scss-format', format: ({ dictionary, file }) => { + const MULTIVALUE_SEPARATOR_RULES = [ + { previousKey: 'fontSize', currentKey: 'lineHeight', separator: '/' }, + ]; + const fileName = file.destination.replace(/\.scss$/, ''); const isCore = fileName === 'core'; @@ -76,10 +80,26 @@ StyleDictionary.registerFormat({ let tokenValue = token.value; if (usesReferences(token.original.value)) { - tokenValue = token.original.value.replace( - /{[^}]+}/g, - match => `var(--${match.replace(/[{}]/g, '').replace(/\./g, '-')})`, - ); + try { + if (token.type === 'typography') { + tokenValue = Object.entries(token.original.value).reduce( + (values, [key, value], i) => + `${values}${getSeparator( + Object.keys(token.original.value)[i - 1], + key, + )}${getReference(value)}`, + '', + ); + } else { + tokenValue = getReference(token.original.value); + } + } catch (error) { + console.error( + `\x1b[31mError: While processing the token \x1b[33m"${tokenName}"\x1b[31m within the tokenset \x1b[33m"${dataSetName}"\x1b[31m, the following error occurred:\n"${ + error.message + }".\nInput:\n\x1b[90m${JSON.stringify(token, null, 2)}\x1b[0m`, + ); + } } return isCore ? `--${tokenName}: ${tokenValue};` : `'${tokenName}': ${tokenValue},`; @@ -92,6 +112,23 @@ StyleDictionary.registerFormat({ }) .join('\n') ); + + function getReference(value = '') { + return value.replace( + /{[^}]+}/g, + match => `var(--${match.replace(/[{}]/g, '').replace(/\./g, '-')})`, + ); + } + + function getSeparator(pKey = '', cKey = '') { + if (pKey === '') return ''; + + return ( + MULTIVALUE_SEPARATOR_RULES.find( + rule => rule.previousKey === pKey && rule.currentKey === cKey, + )?.separator ?? ' ' + ); + } }, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cab7ec2d33..7548914e84 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17033,7 +17033,7 @@ snapshots: node-fetch: 2.7.0(encoding@0.1.13) picomatch: 2.3.1 pkg-dir: 5.0.0 - prettier-fallback: prettier@3.3.3 + prettier-fallback: prettier@3.3.2 pretty-hrtime: 1.0.3 resolve-from: 5.0.0 semver: 7.6.2 @@ -17070,7 +17070,7 @@ snapshots: node-fetch: 2.7.0(encoding@0.1.13) picomatch: 2.3.1 pkg-dir: 5.0.0 - prettier-fallback: prettier@3.3.3 + prettier-fallback: prettier@3.3.2 pretty-hrtime: 1.0.3 resolve-from: 5.0.0 semver: 7.6.2