From e7e9b1ff206c5ff0decdd99fcd71232a13fe3b62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Thu, 18 Jul 2024 10:03:21 +0200 Subject: [PATCH 1/3] feat(tokens): implement exception for typography multi tokens --- packages/tokens/build.js | 45 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 41 insertions(+), 4 deletions(-) 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 ?? ' ' + ); + } }, }); From e9ef76084213fa8ad80812e20be0a9a864dbf3d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Thu, 18 Jul 2024 10:03:53 +0200 Subject: [PATCH 2/3] fix(workflows): fix summary output --- .github/workflows/build-tokens.yaml | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) 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 From 7360afad2b7cd212b6b151cd7733099dccd12848 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Fri, 19 Jul 2024 08:35:21 +0200 Subject: [PATCH 3/3] chore: update pnpm-lock file --- pnpm-lock.yaml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d10126ab4c..f2cdd9583b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11462,7 +11462,7 @@ snapshots: '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.1.5(@types/node@20.14.9)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)) ansi-colors: 4.1.3 autoprefixer: 10.4.18(postcss@8.4.35) - babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3) + babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3(esbuild@0.20.1)) babel-plugin-istanbul: 6.1.1 browserslist: 4.23.0 copy-webpack-plugin: 11.0.0(webpack@5.90.3(esbuild@0.20.1)) @@ -11556,7 +11556,7 @@ snapshots: '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.1.7(@types/node@20.12.7)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)) ansi-colors: 4.1.3 autoprefixer: 10.4.18(postcss@8.4.35) - babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3) + babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3(esbuild@0.20.1)) babel-plugin-istanbul: 6.1.1 browserslist: 4.23.0 copy-webpack-plugin: 11.0.0(webpack@5.90.3(esbuild@0.20.1)) @@ -11650,7 +11650,7 @@ snapshots: '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.1.7(@types/node@20.14.9)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)) ansi-colors: 4.1.3 autoprefixer: 10.4.18(postcss@8.4.35) - babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3) + babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3(esbuild@0.20.1)) babel-plugin-istanbul: 6.1.1 browserslist: 4.23.0 copy-webpack-plugin: 11.0.0(webpack@5.90.3(esbuild@0.20.1)) @@ -17404,7 +17404,7 @@ snapshots: transitivePeerDependencies: - supports-color - babel-loader@9.1.3(@babel/core@7.24.0)(webpack@5.90.3): + babel-loader@9.1.3(@babel/core@7.24.0)(webpack@5.90.3(esbuild@0.20.1)): dependencies: '@babel/core': 7.24.0 find-cache-dir: 4.0.0 @@ -21732,7 +21732,7 @@ snapshots: make-dir@2.1.0: dependencies: pify: 4.0.1 - semver: 5.7.2 + semver: 7.6.0 make-dir@3.1.0: dependencies: