From 3ba1adc91dad82ec8a86110afdb3bc51db65ee3a Mon Sep 17 00:00:00 2001 From: Kshitij Sobti Date: Mon, 17 Jun 2024 21:44:00 +0530 Subject: [PATCH] feat: Add support for tokens in toml files (#3047) --- lib/build-tokens.js | 22 ++++++++++--- package-lock.json | 66 +++++++++++++++++++++++++++++++++++++- package.json | 1 + tokens/style-dictionary.js | 6 ++++ 4 files changed, 90 insertions(+), 5 deletions(-) diff --git a/lib/build-tokens.js b/lib/build-tokens.js index b9916ddb3d..e2e04d60ae 100755 --- a/lib/build-tokens.js +++ b/lib/build-tokens.js @@ -31,8 +31,13 @@ async function buildTokensCommand(commandArgs) { } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' }); const coreConfig = { - include: [path.resolve(__dirname, '../tokens/src/core/**/*.json')], - source: tokensSource ? [`${tokensSource}/core/**/*.json`] : [], + include: [ + path.resolve(__dirname, '../tokens/src/core/**/*.json'), + path.resolve(__dirname, '../tokens/src/core/**/*.toml'), + ], + source: tokensSource + ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`] + : [], platforms: { css: { prefix: 'pgn', @@ -67,8 +72,17 @@ async function buildTokensCommand(commandArgs) { const getStyleDictionaryConfig = (themeVariant) => ({ ...coreConfig, - include: [...coreConfig.include, path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`)], - source: tokensSource ? [`${tokensSource}/themes/${themeVariant}/**/*.json`] : [], + include: [ + ...coreConfig.include, + path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`), + path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.toml`), + ], + source: tokensSource + ? [ + `${tokensSource}/themes/${themeVariant}/**/*.json`, + `${tokensSource}/themes/${themeVariant}/**/*.toml`, + ] + : [], transform: { 'color/sass-color-functions': { ...StyleDictionary.transform['color/sass-color-functions'], diff --git a/package-lock.json b/package-lock.json index b20a1efd77..88eeab573a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "file-selector": "^0.6.0", "glob": "^8.0.3", "inquirer": "^8.2.5", + "js-toml": "^1.0.0", "lodash.uniqby": "^4.7.0", "log-update": "^4.0.0", "mailto-link": "^2.0.0", @@ -2230,6 +2231,40 @@ "partytown": "bin/partytown.cjs" } }, + "node_modules/@chevrotain/cst-dts-gen": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz", + "integrity": "sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==", + "dependencies": { + "@chevrotain/gast": "11.0.3", + "@chevrotain/types": "11.0.3", + "lodash-es": "4.17.21" + } + }, + "node_modules/@chevrotain/gast": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-11.0.3.tgz", + "integrity": "sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==", + "dependencies": { + "@chevrotain/types": "11.0.3", + "lodash-es": "4.17.21" + } + }, + "node_modules/@chevrotain/regexp-to-ast": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-11.0.3.tgz", + "integrity": "sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==" + }, + "node_modules/@chevrotain/types": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.0.3.tgz", + "integrity": "sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==" + }, + "node_modules/@chevrotain/utils": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.0.3.tgz", + "integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==" + }, "node_modules/@cnakazawa/watch": { "version": "1.0.4", "dev": true, @@ -13181,6 +13216,19 @@ "node": "*" } }, + "node_modules/chevrotain": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz", + "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==", + "dependencies": { + "@chevrotain/cst-dts-gen": "11.0.3", + "@chevrotain/gast": "11.0.3", + "@chevrotain/regexp-to-ast": "11.0.3", + "@chevrotain/types": "11.0.3", + "@chevrotain/utils": "11.0.3", + "lodash-es": "4.17.21" + } + }, "node_modules/child_process": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz", @@ -24952,6 +25000,15 @@ "version": "4.0.0", "license": "MIT" }, + "node_modules/js-toml": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/js-toml/-/js-toml-1.0.0.tgz", + "integrity": "sha512-G757004huuG5Cjg8KUoVTS4zNRR4449KG8kjtFQS0yyQnceq3KfxcArThcqUV2cwdpd0C9I+e1WciK3Xm4cWJw==", + "dependencies": { + "chevrotain": "^11.0.3", + "xregexp": "^5.1.1" + } + }, "node_modules/js-yaml": { "version": "3.14.1", "license": "MIT", @@ -25755,7 +25812,6 @@ }, "node_modules/lodash-es": { "version": "4.17.21", - "dev": true, "license": "MIT" }, "node_modules/lodash.assignin": { @@ -39890,6 +39946,14 @@ "node": ">=0.4.0" } }, + "node_modules/xregexp": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-5.1.1.tgz", + "integrity": "sha512-fKXeVorD+CzWvFs7VBuKTYIW63YD1e1osxwQ8caZ6o1jg6pDAbABDG54LCIq0j5cy7PjRvGIq6sef9DYPXpncg==", + "dependencies": { + "@babel/runtime-corejs3": "^7.16.5" + } + }, "node_modules/xss": { "version": "1.0.14", "license": "MIT", diff --git a/package.json b/package.json index 51311f8027..d85f25b581 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "file-selector": "^0.6.0", "glob": "^8.0.3", "inquirer": "^8.2.5", + "js-toml": "^1.0.0", "lodash.uniqby": "^4.7.0", "log-update": "^4.0.0", "mailto-link": "^2.0.0", diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index aa37a73eae..5193d87475 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -1,6 +1,7 @@ /** * This module creates and exports custom StyleDictionary instance for Paragon. */ +const toml = require('js-toml'); const StyleDictionary = require('style-dictionary'); const chroma = require('chroma-js'); const { colorYiq, darken, lighten } = require('./sass-helpers'); @@ -216,6 +217,11 @@ StyleDictionary.registerFilter({ matcher: token => token?.isSource === true, }); +StyleDictionary.registerParser({ + pattern: /\.toml$/, + parse: ({ contents }) => toml.load(contents), +}); + module.exports = { StyleDictionary, createCustomCSSVariables,