From 7d9883ed295ae1edaf3a11c08d623c5a3d1bf7ae Mon Sep 17 00:00:00 2001 From: Tiddo Langerak Date: Wed, 24 May 2023 14:33:54 +0100 Subject: [PATCH] fix: token generation for dashboard Context: the existing build scripts don't generate any output for the dashboard tokens. After some debugging, it appears that `omod` cannot resolve variables from different tokensets. The `dashboard` tokensets exclusively refer to other tokensets, and hence all their values end up empty. Fortunately, there's an official npm package to transform these figma tokens: https://www.npmjs.com/package/token-transformer Unfortunately, that package also doesn't work 100% how we would want: Our existing build takes all tokenSets, and generate outputs for them. We can do this with `token-transformer` too. In order to resolve variables from other tokensets, we would need to: - Pass the extra tokenSets to the transformer as input tokenSets, such that the variables can be found - Also pass these extra sets as "excludes" to the transformer, such that these extra sets won't be duplicated. E.g. in order to build "dashboard/darkMode", we'd need to pass: inputs: dashboard/darkMode,origin,base excludes: origin,base The output will be just the dashboard/darkMode values, with values resolved from any of the sets. So my first attempt was this: for each tokenSet "targetSet", set all sets as input, and all but "targetSet" as excludes. This means that for each tokenSet we can resolve variables from any other tokenSet. Unfortunately, this is where I ran into issues: apparently, this doesn't quite work when there's overlap in naming between the tokensets. Specifically, since darkMode and lightMode share all keys, this would result in the `lightMode` file just being completely empty. So from here, I had 2 options: - Hardcode the dependencies, such that `lightMode` and `darkMode` don't conflict. - Figure out the actual dependencies from the data file I managed to do the second. The data file has a "themes" section, which indicates which sets are needed for each theme, and which is the "target set". So we can use that. The only caveat here is that this doesn't include a dedicated team for the "origin" set. Our current builds all include an "origin" set (with all the "reference only" values), but on this new build this will be gone. Now given that all of these are "reference only", I would assume they're not used anywhere in product, but I don't have enough context for this. Lastly, the switch from omod -> token-transformer also has some smaller differences in output format: - Hex values are now capitalised - Colours without opacity no longer include the opacity. E.g. instead of `#000000ff` we would now get `#000000`. I don't know if this would break anything, advice needed. ----- - Switch to use the official `token-transformer` package such that we can properly resolve the references for `dashboard/lightMode` and `dashboard/darkMode` - This has 2 potential **breaking changes**: - There's no longer an `origin` export - Colours without opacity are now 6-digit hex values instead of 8-digit hex values. --- package-lock.json | 204 +++++++++++++++++++++++++++++++++----------- package.json | 2 +- scripts/build.js | 4 +- scripts/prebuild.js | 22 +++-- yarn.lock | 55 ++++++++++-- 5 files changed, 220 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index 154ad5aa..f11b0eda 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,11 +35,11 @@ "node-fetch": "2.6.7", "node-typescript-compiler": "^2.2.1", "nodemon": "^2.0.20", - "omod": "1.2.0", "prettier": "^2.2.1", "scss": "^0.2.4", "style-dictionary": "^3.0.1", "tinycolor2": "^1.4.2", + "token-transformer": "^0.0.32", "typescript": "^4.6.2" }, "engines": { @@ -1217,6 +1217,20 @@ "colors": "1.4.0" } }, + "node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -1924,7 +1938,6 @@ "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", "dev": true, - "peer": true, "engines": { "node": ">=6" } @@ -2960,7 +2973,6 @@ "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", "dev": true, "license": "ISC", - "peer": true, "engines": { "node": "6.* || 8.* || >= 10.*" } @@ -5344,6 +5356,8 @@ }, "node_modules/npm/node_modules/@npmcli/installed-package-contents/node_modules/npm-bundled": { "version": "1.1.2", + "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz", + "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==", "dev": true, "inBundle": true, "license": "ISC", @@ -5627,6 +5641,8 @@ }, "node_modules/npm/node_modules/bin-links/node_modules/npm-normalize-package-bin": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz", + "integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==", "dev": true, "inBundle": true, "license": "ISC", @@ -5902,6 +5918,8 @@ }, "node_modules/npm/node_modules/debug/node_modules/ms": { "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true, "inBundle": true, "license": "MIT" @@ -6379,6 +6397,7 @@ "node_modules/npm/node_modules/jsonparse": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz", + "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=", "dev": true, "engines": [ "node >= 0.2.0" @@ -6630,7 +6649,9 @@ } }, "node_modules/npm/node_modules/minipass": { - "version": "3.3.4", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", + "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", "dev": true, "inBundle": true, "license": "ISC", @@ -6864,6 +6885,8 @@ }, "node_modules/npm/node_modules/node-gyp/node_modules/nopt": { "version": "5.0.0", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", + "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==", "dev": true, "inBundle": true, "license": "ISC", @@ -6937,6 +6960,8 @@ }, "node_modules/npm/node_modules/npm-bundled/node_modules/npm-normalize-package-bin": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz", + "integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==", "dev": true, "inBundle": true, "license": "ISC", @@ -7000,6 +7025,8 @@ }, "node_modules/npm/node_modules/npm-packlist/node_modules/npm-normalize-package-bin": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz", + "integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==", "dev": true, "inBundle": true, "license": "ISC", @@ -7025,6 +7052,8 @@ }, "node_modules/npm/node_modules/npm-pick-manifest/node_modules/npm-normalize-package-bin": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz", + "integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==", "dev": true, "inBundle": true, "license": "ISC", @@ -7327,6 +7356,8 @@ }, "node_modules/npm/node_modules/read-package-json/node_modules/npm-normalize-package-bin": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz", + "integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==", "dev": true, "inBundle": true, "license": "ISC", @@ -7468,7 +7499,9 @@ "optional": true }, "node_modules/npm/node_modules/semver": { - "version": "7.3.7", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", + "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", "dev": true, "inBundle": true, "license": "ISC", @@ -7484,6 +7517,8 @@ }, "node_modules/npm/node_modules/semver/node_modules/lru-cache": { "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, "inBundle": true, "license": "ISC", @@ -7739,6 +7774,7 @@ "node_modules/npm/node_modules/validate-npm-package-license": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", + "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", "dev": true, "inBundle": true, "license": "Apache-2.0", @@ -7916,19 +7952,6 @@ "node": ">= 0.2.0" } }, - "node_modules/omod": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/omod/-/omod-1.2.0.tgz", - "integrity": "sha512-j5WX0CEw+3nbm0dtv0WAa6W0raizsi+B+GOJ1W1i7p7M35bx/yQqEEv8uSuGlvdjCCNzO8+5peHEdU8hC5oi5w==", - "dev": true, - "license": "ISC", - "dependencies": { - "tinycolor2": "^1.4.2" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -8597,7 +8620,6 @@ "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", "dev": true, - "peer": true, "engines": { "node": ">=0.10.0" } @@ -9823,6 +9845,18 @@ "node": ">=8.0" } }, + "node_modules/token-transformer": { + "version": "0.0.32", + "resolved": "https://registry.npmjs.org/token-transformer/-/token-transformer-0.0.32.tgz", + "integrity": "sha512-JRhLcztUCYIi4kHF/o7/askCqXPUef98821CfrVJOQjDmPm09+9vTDJqXDyOYLRa29eBkqLqWg/35H2InnsFpg==", + "dev": true, + "dependencies": { + "yargs": "^17.6.2" + }, + "bin": { + "token-transformer": "cli.js" + } + }, "node_modules/touch": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz", @@ -10253,7 +10287,6 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", "dev": true, - "peer": true, "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", @@ -10271,7 +10304,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, - "peer": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -10287,7 +10319,6 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, - "peer": true, "dependencies": { "color-name": "~1.1.4" }, @@ -10299,8 +10330,7 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/wrappy": { "version": "1.0.2", @@ -10324,7 +10354,6 @@ "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", "dev": true, - "peer": true, "engines": { "node": ">=10" } @@ -10346,6 +10375,24 @@ "node": ">= 6" } }, + "node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/yargs-parser": { "version": "20.2.9", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", @@ -10355,6 +10402,15 @@ "engines": { "node": ">=10" } + }, + "node_modules/yargs/node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true, + "engines": { + "node": ">=12" + } } }, "dependencies": { @@ -11244,6 +11300,17 @@ "string-width": "^4.2.0" } }, + "cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "requires": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + } + }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -11793,8 +11860,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", - "dev": true, - "peer": true + "dev": true }, "escape-string-regexp": { "version": "1.0.5", @@ -12531,8 +12597,7 @@ "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", - "dev": true, - "peer": true + "dev": true }, "get-intrinsic": { "version": "1.1.1", @@ -14194,6 +14259,8 @@ "dependencies": { "npm-bundled": { "version": "1.1.2", + "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz", + "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==", "bundled": true, "dev": true, "requires": { @@ -14405,6 +14472,8 @@ "dependencies": { "npm-normalize-package-bin": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz", + "integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==", "bundled": true, "dev": true } @@ -14599,6 +14668,8 @@ "dependencies": { "ms": { "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "bundled": true, "dev": true } @@ -14962,6 +15033,7 @@ "jsonparse": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz", + "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=", "bundled": true, "dev": true }, @@ -15151,7 +15223,9 @@ } }, "minipass": { - "version": "3.3.4", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", + "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", "bundled": true, "dev": true, "requires": { @@ -15318,6 +15392,8 @@ }, "nopt": { "version": "5.0.0", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", + "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==", "bundled": true, "dev": true, "requires": { @@ -15367,6 +15443,8 @@ "dependencies": { "npm-normalize-package-bin": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz", + "integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==", "bundled": true, "dev": true } @@ -15412,6 +15490,8 @@ "dependencies": { "npm-normalize-package-bin": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz", + "integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==", "bundled": true, "dev": true } @@ -15431,6 +15511,8 @@ "dependencies": { "npm-normalize-package-bin": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz", + "integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==", "bundled": true, "dev": true } @@ -15640,6 +15722,8 @@ "dependencies": { "npm-normalize-package-bin": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz", + "integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==", "bundled": true, "dev": true } @@ -15747,7 +15831,9 @@ "optional": true }, "semver": { - "version": "7.3.7", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", + "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", "bundled": true, "dev": true, "requires": { @@ -15756,6 +15842,8 @@ "dependencies": { "lru-cache": { "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "bundled": true, "dev": true, "requires": { @@ -15953,6 +16041,7 @@ "validate-npm-package-license": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", + "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", "bundled": true, "dev": true, "requires": { @@ -16092,15 +16181,6 @@ "integrity": "sha1-9TxHNbptVq9aRrBN+3xDNMWW1E4=", "dev": true }, - "omod": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/omod/-/omod-1.2.0.tgz", - "integrity": "sha512-j5WX0CEw+3nbm0dtv0WAa6W0raizsi+B+GOJ1W1i7p7M35bx/yQqEEv8uSuGlvdjCCNzO8+5peHEdU8hC5oi5w==", - "dev": true, - "requires": { - "tinycolor2": "^1.4.2" - } - }, "once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -16562,8 +16642,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", - "dev": true, - "peer": true + "dev": true }, "require-from-string": { "version": "2.0.2", @@ -17467,6 +17546,15 @@ "is-number": "^7.0.0" } }, + "token-transformer": { + "version": "0.0.32", + "resolved": "https://registry.npmjs.org/token-transformer/-/token-transformer-0.0.32.tgz", + "integrity": "sha512-JRhLcztUCYIi4kHF/o7/askCqXPUef98821CfrVJOQjDmPm09+9vTDJqXDyOYLRa29eBkqLqWg/35H2InnsFpg==", + "dev": true, + "requires": { + "yargs": "^17.6.2" + } + }, "touch": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz", @@ -17807,7 +17895,6 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", "dev": true, - "peer": true, "requires": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", @@ -17819,7 +17906,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, - "peer": true, "requires": { "color-convert": "^2.0.1" } @@ -17829,7 +17915,6 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, - "peer": true, "requires": { "color-name": "~1.1.4" } @@ -17838,8 +17923,7 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "peer": true + "dev": true } } }, @@ -17860,8 +17944,7 @@ "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", - "dev": true, - "peer": true + "dev": true }, "yallist": { "version": "4.0.0", @@ -17876,6 +17959,29 @@ "dev": true, "peer": true }, + "yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, + "requires": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "dependencies": { + "yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true + } + } + }, "yargs-parser": { "version": "20.2.9", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", diff --git a/package.json b/package.json index 2b75cde9..7f481418 100644 --- a/package.json +++ b/package.json @@ -54,11 +54,11 @@ "node-fetch": "2.6.7", "node-typescript-compiler": "^2.2.1", "nodemon": "^2.0.20", - "omod": "1.2.0", "prettier": "^2.2.1", "scss": "^0.2.4", "style-dictionary": "^3.0.1", "tinycolor2": "^1.4.2", + "token-transformer": "^0.0.32", "typescript": "^4.6.2" } } diff --git a/scripts/build.js b/scripts/build.js index d2320fa7..f05a83bc 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -5,12 +5,10 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved const { readJsonSync } = require('fs-extra') const { dictionary, groups } = require('./style-dictionary') -const filterPublic = require('./utils/filter-public') const filterTheme = require('./utils/filter-theme') const tokens = readJsonSync('temp/tokens.json') -const publicTokens = filterPublic(tokens) -const themes = Object.keys(publicTokens) +const themes = Object.keys(tokens) console.log(`Found ${themes.length} public themes: ${themes.join(', ')}.`) diff --git a/scripts/prebuild.js b/scripts/prebuild.js index a3e096db..134542eb 100644 --- a/scripts/prebuild.js +++ b/scripts/prebuild.js @@ -1,16 +1,13 @@ /* Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved */ -const { - omod, - figmaTokensToStyleDictionary -} = require('omod') const { resolve } = require('path') const { removeSync, readJsonSync, outputJsonSync } = require('fs-extra') +const { transformTokens } = require('token-transformer') const filterPublic = require('./utils/filter-public') @@ -27,7 +24,22 @@ const outputFile = resolve(__dirname, '../temp/tokens.json') const tokens = readJsonSync(inputFile) const filteredTokens = filterPublic(tokens) - const outputTokens = omod(filteredTokens, figmaTokensToStyleDictionary) + + const themes = tokens.$themes + const outputTokens = {} + for (const theme of themes) { + const tokenSets = Object.keys(theme.selectedTokenSets) + // Each theme has 0 or more "source" sets, and 1 (or more?) "enabled" set. + // The enabled set is what we're building for, the source sets are where we can pull variables from + const targetSet = tokenSets.find(tokenSet => theme.selectedTokenSets[tokenSet] === 'enabled') + if (!targetSet) { + throw new Error('No target set found') + } + // We'll need to instruct `transformTokens` to exclude any `sourceSet` in the output, + // and only keep our single `enabled` set + const excludeInOutput = tokenSets.filter(set => set !== targetSet) + outputTokens[targetSet] = transformTokens(filteredTokens, tokenSets, excludeInOutput) + } // Below temporary /temp/tokens.json file is created. // It contains all pre-transformed data. diff --git a/yarn.lock b/yarn.lock index 12e5d938..f49fe9bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1011,6 +1011,15 @@ "strip-ansi" "^6.0.0" "wrap-ansi" "^7.0.0" +"cliui@^8.0.1": + "integrity" "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==" + "resolved" "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz" + "version" "8.0.1" + dependencies: + "string-width" "^4.2.0" + "strip-ansi" "^6.0.1" + "wrap-ansi" "^7.0.0" + "clone@^1.0.2": "resolved" "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz" "version" "1.0.4" @@ -2622,6 +2631,7 @@ "version" "1.3.1" "jsonparse@^1.3.1": + "integrity" "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=" "resolved" "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz" "version" "1.3.1" @@ -3115,7 +3125,9 @@ "yallist" "^4.0.0" "minipass@^3.1.6": - "version" "3.3.4" + "integrity" "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==" + "resolved" "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz" + "version" "3.3.6" dependencies: "yallist" "^4.0.0" @@ -3361,6 +3373,8 @@ "chalk" "^4.0.0" "npm-bundled@^1.1.1": + "integrity" "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==" + "resolved" "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz" "version" "1.1.2" dependencies: "npm-normalize-package-bin" "^1.0.1" @@ -3382,6 +3396,8 @@ "version" "1.0.1" "npm-normalize-package-bin@^2.0.0": + "integrity" "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==" + "resolved" "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz" "version" "2.0.0" "npm-package-arg@^9.0.0", "npm-package-arg@^9.0.1", "npm-package-arg@^9.1.0": @@ -3572,13 +3588,6 @@ "resolved" "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz" "version" "0.2.2" -"omod@1.2.0": - "integrity" "sha512-j5WX0CEw+3nbm0dtv0WAa6W0raizsi+B+GOJ1W1i7p7M35bx/yQqEEv8uSuGlvdjCCNzO8+5peHEdU8hC5oi5w==" - "resolved" "https://registry.npmjs.org/omod/-/omod-1.2.0.tgz" - "version" "1.2.0" - dependencies: - "tinycolor2" "^1.4.2" - "once@^1.3.0", "once@^1.4.0": "integrity" "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=" "resolved" "https://registry.npmjs.org/once/-/once-1.4.0.tgz" @@ -4238,7 +4247,9 @@ "version" "6.3.0" "semver@^7.0.0", "semver@^7.1.1", "semver@^7.3.7": - "version" "7.3.7" + "integrity" "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==" + "resolved" "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz" + "version" "7.5.1" dependencies: "lru-cache" "^6.0.0" @@ -4730,6 +4741,13 @@ dependencies: "is-number" "^7.0.0" +"token-transformer@^0.0.32": + "integrity" "sha512-JRhLcztUCYIi4kHF/o7/askCqXPUef98821CfrVJOQjDmPm09+9vTDJqXDyOYLRa29eBkqLqWg/35H2InnsFpg==" + "resolved" "https://registry.npmjs.org/token-transformer/-/token-transformer-0.0.32.tgz" + "version" "0.0.32" + dependencies: + "yargs" "^17.6.2" + "touch@^3.1.0": "integrity" "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==" "resolved" "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz" @@ -4960,6 +4978,7 @@ "spdx-expression-parse" "^3.0.0" "validate-npm-package-license@^3.0.4": + "integrity" "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==" "resolved" "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz" "version" "3.0.4" dependencies: @@ -5083,6 +5102,11 @@ "resolved" "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz" "version" "20.2.9" +"yargs-parser@^21.1.1": + "integrity" "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==" + "resolved" "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz" + "version" "21.1.1" + "yargs@^16.2.0": "integrity" "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==" "resolved" "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz" @@ -5095,3 +5119,16 @@ "string-width" "^4.2.0" "y18n" "^5.0.5" "yargs-parser" "^20.2.2" + +"yargs@^17.6.2": + "integrity" "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==" + "resolved" "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz" + "version" "17.7.2" + dependencies: + "cliui" "^8.0.1" + "escalade" "^3.1.1" + "get-caller-file" "^2.0.5" + "require-directory" "^2.1.1" + "string-width" "^4.2.3" + "y18n" "^5.0.5" + "yargs-parser" "^21.1.1"