├── .husky ├── .gitignore └── pre-commit ├── .eslintignore ├── .prettierignore ├── .github ├── logo.png └── workflows │ ├── verify.yml │ └── release.yml ├── .eslintrc.cjs ├── .lintstagedrc.js ├── tsconfig.build.types.json ├── src ├── utils │ └── isObject.js ├── options.d.ts ├── style-dictionary-to-figma.js ├── trim-name.js ├── trim-value.js ├── clean-meta.js ├── use-ref-value.js └── mark-tokenset.js ├── .gitignore ├── .changeset └── config.json ├── index.js ├── web-test-runner.config.mjs ├── test ├── utils │ └── isObject.test.js ├── trim-name.test.js ├── clean-meta.test.js ├── trim-value.test.js ├── style-dictionary-to-figma.test.js ├── use-ref-value.test.js └── mark-tokenset.test.js ├── scripts └── sort-package-json.js ├── tsconfig.json ├── LICENSE ├── package.json ├── CODE_OF_CONDUCT.md ├── README.md └── CHANGELOG.md /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage/ 3 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | CHANGELOG.md 3 | .changeset/ -------------------------------------------------------------------------------- /.github/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/style-dictionary-to-figma/HEAD/.github/logo.png -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install lint-staged 5 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@open-wc/eslint-config', 'eslint-config-prettier'], 3 | }; 4 | -------------------------------------------------------------------------------- /.lintstagedrc.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '*.js': ['eslint --fix', 'prettier --write'], 3 | '*.md': ['prettier --write'], 4 | 'package.json': ['node ./scripts/sort-package-json.js'], 5 | }; 6 | -------------------------------------------------------------------------------- /tsconfig.build.types.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "declaration": true, 5 | "emitDeclarationOnly": true, 6 | "noEmit": false 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/utils/isObject.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {any} val 3 | * @returns {boolean} 4 | */ 5 | export function isObject(val) { 6 | return typeof val === 'object' && val !== null && !Array.isArray(val); 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## editors 2 | /.idea 3 | /.vscode 4 | /*.code-workspace 5 | /.history 6 | 7 | ## system files 8 | .DS_Store 9 | 10 | ## npm/yarn 11 | node_modules/ 12 | npm-debug.log 13 | 14 | ## temp folders 15 | /coverage/ 16 | 17 | index.cjs -------------------------------------------------------------------------------- /src/options.d.ts: -------------------------------------------------------------------------------- 1 | export interface Options { 2 | // whether or not to clean meta props, 3 | // keeps only value, description, type by default, but can also be custom string array of keys. 4 | cleanMeta?: boolean | string[]; 5 | defaultTokenset?: boolean | string; 6 | } 7 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@1.6.4/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "linked": [], 6 | "access": "public", 7 | "baseBranch": "main", 8 | "updateInternalDependencies": "patch", 9 | "ignore": [] 10 | } 11 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | export { markTokenset } from './src/mark-tokenset.js'; 2 | export { trimName } from './src/trim-name.js'; 3 | export { trimValue } from './src/trim-value.js'; 4 | export { useRefValue } from './src/use-ref-value.js'; 5 | export { cleanMeta } from './src/clean-meta.js'; 6 | export { transform } from './src/style-dictionary-to-figma.js'; 7 | -------------------------------------------------------------------------------- /web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | import { playwrightLauncher } from "@web/test-runner-playwright"; 2 | 3 | export default { 4 | nodeResolve: true, 5 | files: ["test/**/*.test.js"], 6 | coverageConfig: { 7 | report: true, 8 | reportDir: "coverage", 9 | threshold: { 10 | statements: 100, 11 | branches: 100, 12 | functions: 100, 13 | lines: 100, 14 | }, 15 | }, 16 | browsers: [playwrightLauncher({ product: "chromium" })], 17 | }; 18 | -------------------------------------------------------------------------------- /test/utils/isObject.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from '@esm-bundle/chai'; 2 | import { isObject } from '../../src/utils/isObject.js'; 3 | 4 | describe('isObject utility', () => { 5 | it('detects if something is an object', () => { 6 | expect(isObject({})).to.be.true; 7 | expect(isObject({ foo: 'bar', qux: { test: '1', testTwo: '2' } })).to.be.true; 8 | expect(isObject(['foo', { test: '1', testTwo: '2' }])).to.be.false; 9 | expect(isObject(null)).to.be.false; 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /scripts/sort-package-json.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | import { exec } from 'child_process'; 3 | import mod from 'module'; 4 | 5 | const require = mod.createRequire(import.meta.url); 6 | const defaults = require('prettier-package-json/build/defaultOptions'); 7 | 8 | const currOrder = /** @type {[]} */ (defaults.defaultOptions.keyOrder); 9 | 10 | // move version from position 11 to position 3 11 | currOrder.splice(3, 0, currOrder.splice(11, 1)[0]); 12 | 13 | exec(`npx prettier-package-json --key-order ${currOrder.join(',')} --write ../package.json`); 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "lib": ["es2017", "dom"], 7 | "allowSyntheticDefaultImports": true, 8 | "allowJs": true, 9 | "checkJs": true, 10 | "noEmit": true, 11 | "strict": true, 12 | "noImplicitThis": true, 13 | "alwaysStrict": true, 14 | "types": ["node", "mocha"], 15 | "esModuleInterop": true, 16 | "suppressImplicitAnyIndexErrors": true 17 | }, 18 | "include": ["**/*.js"], 19 | "exclude": ["node_modules", "**/coverage/*"] 20 | } 21 | -------------------------------------------------------------------------------- /.github/workflows/verify.yml: -------------------------------------------------------------------------------- 1 | name: Verify changes 2 | 3 | on: pull_request 4 | 5 | jobs: 6 | verify: 7 | name: Verify changes 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v2 11 | 12 | - name: Setup Node 16.x 13 | uses: actions/setup-node@v1 14 | with: 15 | node-version: 16.x 16 | 17 | - name: Install Dependencies 18 | run: npm ci 19 | 20 | - name: Lint 21 | run: npm run lint 22 | 23 | - name: Install chromium 24 | run: npx playwright install-deps chromium 25 | 26 | - name: Test 27 | run: npm run test -------------------------------------------------------------------------------- /src/style-dictionary-to-figma.js: -------------------------------------------------------------------------------- 1 | import { markTokenset } from './mark-tokenset.js'; 2 | import { trimName } from './trim-name.js'; 3 | import { trimValue } from './trim-value.js'; 4 | import { useRefValue } from './use-ref-value.js'; 5 | import { cleanMeta } from './clean-meta.js'; 6 | 7 | /** 8 | * @typedef {Record} Obj 9 | * @typedef {import('./options').Options} opts 10 | */ 11 | 12 | /** 13 | * @param {Obj} obj 14 | * @param {opts} [opts] 15 | * @returns {Obj} 16 | */ 17 | export function transform(obj, opts) { 18 | return cleanMeta(markTokenset(trimName(useRefValue(trimValue(obj))), opts), opts); 19 | } 20 | -------------------------------------------------------------------------------- /src/trim-name.js: -------------------------------------------------------------------------------- 1 | import { isObject } from './utils/isObject.js'; 2 | 3 | /** 4 | * @typedef {import('./style-dictionary-to-figma.js').Obj} Obj 5 | */ 6 | 7 | /** 8 | * @param {Obj} obj 9 | * @returns {Obj} 10 | */ 11 | export function trimName(obj) { 12 | const newObj = { ...obj }; 13 | 14 | Object.keys(newObj).forEach(key => { 15 | if (key === 'name') { 16 | delete newObj[key]; 17 | } else if (isObject(newObj[key]) || Array.isArray(newObj[key])) { 18 | const newValue = trimName(/** @type {Obj} */ (newObj[key])); 19 | newObj[key] = Array.isArray(newObj[key]) ? Object.values(newValue) : newValue; 20 | } 21 | }); 22 | 23 | return newObj; 24 | } 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 \RIOTS 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /src/trim-value.js: -------------------------------------------------------------------------------- 1 | import { isObject } from './utils/isObject.js'; 2 | /** 3 | * @typedef {import('./style-dictionary-to-figma.js').Obj} Obj 4 | */ 5 | 6 | /** 7 | * @param {Obj} obj 8 | * @param {boolean} isValueObj 9 | * @returns {Obj} 10 | */ 11 | export function trimValue(obj, isValueObj = false) { 12 | const newObj = { ...obj }; 13 | Object.keys(newObj).forEach(key => { 14 | if (key === 'value' || isValueObj) { 15 | if (typeof newObj[key] === 'string') { 16 | const val = /** @type {string} */ (newObj[key]); 17 | const reg = /^\{(.*)\}$/g; 18 | const matches = reg.exec(val); 19 | if (matches && matches[1]) { 20 | newObj[key] = val.replace('.value', ''); 21 | } 22 | } else if (isObject(newObj[key]) || Array.isArray(newObj[key])) { 23 | const newValue = trimValue(/** @type {Obj} */ (newObj[key]), true); 24 | newObj[key] = Array.isArray(newObj[key]) ? Object.values(newValue) : newValue; 25 | } 26 | } else if (isObject(newObj[key])) { 27 | newObj[key] = trimValue(/** @type {Obj} */ (newObj[key])); 28 | } 29 | }); 30 | return newObj; 31 | } 32 | -------------------------------------------------------------------------------- /test/trim-name.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from '@esm-bundle/chai'; 2 | import { trimName } from '../src/trim-name.js'; 3 | 4 | describe('trim-name', () => { 5 | it('trims away any name prop', () => { 6 | const obj = { 7 | value: '{color.accent.base.value}', 8 | name: 'ColorsAccentBaseName', 9 | }; 10 | 11 | const expectedObj = { 12 | value: '{color.accent.base.value}', 13 | }; 14 | 15 | const trimmedObj = trimName(obj); 16 | expect(trimmedObj).to.eql(expectedObj); 17 | }); 18 | 19 | it('trims away any name prop in nested objects', () => { 20 | const obj = { 21 | nested: { 22 | doubleNested: { 23 | tripleNested: { 24 | type: 'color', 25 | value: '{color.accent.base.value}', 26 | name: 'ColorsAccentBaseName', 27 | }, 28 | }, 29 | }, 30 | }; 31 | 32 | const expectedObj = { 33 | nested: { 34 | doubleNested: { 35 | tripleNested: { 36 | type: 'color', 37 | value: '{color.accent.base.value}', 38 | }, 39 | }, 40 | }, 41 | }; 42 | 43 | const trimmedObj = trimName(obj); 44 | 45 | expect(trimmedObj).to.eql(expectedObj); 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | release: 10 | # Prevents changesets action from creating a PR on forks 11 | if: github.repository == 'divriots/style-dictionary-to-figma' 12 | name: Release 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Checkout Repo 16 | uses: actions/checkout@master 17 | with: 18 | # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits 19 | fetch-depth: 0 20 | 21 | - name: Setup Node.js 16.x 22 | uses: actions/setup-node@master 23 | with: 24 | node-version: 16.x 25 | registry-url: 'https://registry.npmjs.org' 26 | 27 | - name: Install Dependencies 28 | run: npm ci 29 | 30 | - name: Create Release Pull Request or Publish to npm 31 | id: changesets 32 | uses: changesets/action@master 33 | with: 34 | # This expects you to have a script called release which does a build for your packages and calls changeset publish 35 | publish: npm run release 36 | env: 37 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 38 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 39 | -------------------------------------------------------------------------------- /src/clean-meta.js: -------------------------------------------------------------------------------- 1 | import { isObject } from './utils/isObject.js'; 2 | 3 | /** 4 | * @typedef {import('./options').Options} Options 5 | */ 6 | 7 | /** 8 | * Recurses object with filter of disallowed props, rest is kept 9 | * 10 | * @param {Record|{}} obj 11 | * @param {string[]} keys 12 | * @returns {Record} 13 | */ 14 | function recursiveCleanMeta(obj, keys) { 15 | if (!isObject(obj)) { 16 | // nothing to clean 17 | return obj; 18 | } 19 | 20 | return Object.keys(obj) 21 | .filter(k => !keys.includes(k)) 22 | .reduce((acc, x) => Object.assign(acc, { [x]: recursiveCleanMeta(obj[x], keys) }), {}); 23 | } 24 | 25 | /** 26 | * Clean unwanted meta props from object, nested. 27 | * 28 | * @param {Record|{}} obj 29 | * @param {Options} [opts] 30 | * @returns {Record} 31 | */ 32 | export function cleanMeta(obj, opts) { 33 | const cleanMetaOpts = opts?.cleanMeta; 34 | if (!cleanMetaOpts) { 35 | return obj; 36 | } 37 | /** @type {string[]} */ 38 | let _keys = []; 39 | if (Array.isArray(cleanMetaOpts)) { 40 | _keys = cleanMetaOpts; 41 | } else { 42 | _keys = ['filePath', 'isSource', 'original', 'attributes', 'path']; 43 | } 44 | 45 | return recursiveCleanMeta(obj, _keys); 46 | } 47 | -------------------------------------------------------------------------------- /src/use-ref-value.js: -------------------------------------------------------------------------------- 1 | import { isObject } from './utils/isObject.js'; 2 | 3 | /** 4 | * @typedef {import('./style-dictionary-to-figma.js').Obj} Obj 5 | * @typedef {string|Object|Array|number} Value 6 | */ 7 | 8 | /** 9 | * @param {Value} val 10 | * @returns {boolean} 11 | */ 12 | function isRefValue(val) { 13 | if (Array.isArray(val)) { 14 | return val.some(prop => isRefValue(/** @type {Value} */ (prop))); 15 | } 16 | 17 | if (typeof val === 'string') { 18 | return val.startsWith('{') && val.endsWith('}'); 19 | } 20 | 21 | if (typeof val === 'number') { 22 | return false; 23 | } 24 | 25 | return Object.values(val).some(prop => isRefValue(prop)); 26 | } 27 | 28 | /** 29 | * @param {Obj} obj 30 | * @returns {Obj} 31 | */ 32 | export function useRefValue(obj) { 33 | const newObj = { ...obj }; 34 | Object.keys(newObj).forEach(key => { 35 | if (key === 'original' && !newObj.ignoreUseRefValue) { 36 | const originalValue = /** @type {string} */ (/** @type {Obj} */ (newObj[key]).value); 37 | if (isRefValue(originalValue)) { 38 | newObj.value = /** @type {Obj} */ (newObj[key]).value; 39 | } 40 | } else if (isObject(newObj[key]) || Array.isArray(newObj[key])) { 41 | const newValue = useRefValue(/** @type {Obj} */ (newObj[key])); 42 | newObj[key] = Array.isArray(newObj[key]) ? Object.values(newValue) : newValue; 43 | } 44 | }); 45 | return newObj; 46 | } 47 | -------------------------------------------------------------------------------- /src/mark-tokenset.js: -------------------------------------------------------------------------------- 1 | import { isObject } from './utils/isObject.js'; 2 | 3 | /** 4 | * @typedef {import('./style-dictionary-to-figma.js').Obj} Obj 5 | * @typedef {import('./options').Options} opts 6 | */ 7 | 8 | /** 9 | * @param {Obj} obj 10 | * @param {opts} [opts] 11 | * @returns {Obj} 12 | */ 13 | export function markTokenset(obj, opts) { 14 | const defaultTokenset = opts?.defaultTokenset; 15 | const _obj = { ...obj }; 16 | Object.keys(_obj).forEach(key => { 17 | if (isObject(_obj[key])) { 18 | const nestedObj = /** @type {Obj} */ (_obj[key]); 19 | // If not marked by a tokenset, put it in a "global" set 20 | // so at least references do work by default in Figma Tokens plugin 21 | if (!nestedObj.tokenset && defaultTokenset !== false) { 22 | const set = typeof defaultTokenset === 'string' ? defaultTokenset : 'global'; 23 | nestedObj.tokenset = set; 24 | } 25 | // check so we know it's an object 26 | Object.keys(nestedObj).forEach(nestedKey => { 27 | if (nestedKey === 'tokenset') { 28 | // tokenset value may only be string 29 | const tokenset = /** @type {string} */ (nestedObj[nestedKey]); 30 | // ignore otherwise it mucks up the parenths needed for JSDoc typecast 31 | // prettier-ignore 32 | delete (/** @type {Obj} */ (_obj[key])[nestedKey]); 33 | 34 | if (!isObject(_obj[tokenset])) { 35 | _obj[tokenset] = {}; 36 | } 37 | 38 | if (tokenset === key) { 39 | // if tokenset is the same as the upper key, we will get 40 | // { key: key: {} }, so copy the object and move it a layer deeper 41 | const copy = _obj[key]; 42 | delete _obj[key]; 43 | _obj[key] = {}; 44 | /** @type {Obj} */ (_obj[key])[key] = copy; 45 | } else { 46 | /** @type {Obj} */ (_obj[tokenset])[key] = nestedObj; 47 | delete _obj[key]; 48 | } 49 | } 50 | }); 51 | } 52 | }); 53 | return _obj; 54 | } 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@divriots/style-dictionary-to-figma", 3 | "version": "0.4.0", 4 | "description": "A utility that transforms a style-dictionary object into something Figma Tokens plugin understands", 5 | "license": "MIT", 6 | "author": "divRiots ", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/divriots/style-dictionary-to-figma.git" 10 | }, 11 | "type": "module", 12 | "main": "index.js", 13 | "files": [ 14 | "index.cjs", 15 | "index.js", 16 | "index.d.ts", 17 | "src/**/*" 18 | ], 19 | "scripts": { 20 | "build:cjs": "rollup index.js --file index.cjs --format cjs --plugin rollup-plugin-cleanup", 21 | "build:types": "tsc -p tsconfig.build.types.json", 22 | "format": "npm run format:eslint && npm run format:prettier", 23 | "format:eslint": "eslint --ext .js,.html . --fix", 24 | "format:prettier": "prettier \"**/*.{js,md}\" \"package.json\" --write", 25 | "lint": "run-p lint:*", 26 | "lint:eslint": "eslint --ext .js,.html .", 27 | "lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)", 28 | "lint:types": "tsc", 29 | "prepare": "husky install", 30 | "release": "run-p build:* && changeset publish", 31 | "test": "web-test-runner --coverage", 32 | "test:view:coverage": "cd coverage/lcov-report && npx http-server -o -c-1", 33 | "test:watch": "web-test-runner --watch" 34 | }, 35 | "devDependencies": { 36 | "@changesets/cli": "^2.23.0", 37 | "@esm-bundle/chai": "^4.3.4-fix.0", 38 | "@open-wc/eslint-config": "^7.0.0", 39 | "@web/test-runner": "^0.13.31", 40 | "@web/test-runner-playwright": "^0.8.9", 41 | "eslint": "^8.20.0", 42 | "eslint-config-prettier": "^8.5.0", 43 | "eslint-plugin-import": "^2.26.0", 44 | "husky": "^7.0.4", 45 | "lint-staged": "^13.0.3", 46 | "npm-run-all": "^4.1.5", 47 | "prettier": "^2.7.1", 48 | "prettier-package-json": "^2.6.4", 49 | "rollup": "^2.77.0", 50 | "rollup-plugin-cleanup": "^3.2.1", 51 | "typescript": "^4.7.4" 52 | }, 53 | "keywords": [ 54 | "design tokens", 55 | "figma", 56 | "style-dictionary" 57 | ], 58 | "exports": { 59 | "import": "./index.js", 60 | "require": "./index.cjs" 61 | }, 62 | "prettier": { 63 | "printWidth": 100, 64 | "singleQuote": true, 65 | "arrowParens": "avoid", 66 | "trailingComma": "all" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /test/clean-meta.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from '@esm-bundle/chai'; 2 | import { cleanMeta } from '../src/clean-meta.js'; 3 | 4 | describe('clean-meta', () => { 5 | it('allows cleaning out meta data and only keeping default props: value, type, description', () => { 6 | const obj = { 7 | core: { 8 | color: { 9 | primary: { 10 | base: { 11 | type: 'color', 12 | value: '#14b8a6', 13 | original: { 14 | value: '{palette.red.500}', 15 | }, 16 | attributes: { 17 | foo: { 18 | bar: { qux: 'boo' }, 19 | }, 20 | }, 21 | path: ['core', 'color', 'primary', 'base'], 22 | }, 23 | }, 24 | }, 25 | }, 26 | }; 27 | 28 | const expectedObj = { 29 | core: { 30 | color: { 31 | primary: { 32 | base: { 33 | type: 'color', 34 | value: '#14b8a6', 35 | }, 36 | }, 37 | }, 38 | }, 39 | }; 40 | 41 | const marked = cleanMeta(obj, { cleanMeta: true }); 42 | expect(marked).to.eql(expectedObj); 43 | }); 44 | 45 | it('supports passing your own filter of props to keep', () => { 46 | const obj = { 47 | core: { 48 | color: { 49 | primary: { 50 | base: { 51 | type: 'color', 52 | value: '#14b8a6', 53 | original: { 54 | value: '{palette.red.500}', 55 | }, 56 | attributes: { 57 | foo: { 58 | bar: { qux: 'boo' }, 59 | }, 60 | }, 61 | path: ['core', 'color', 'primary', 'base'], 62 | }, 63 | }, 64 | }, 65 | }, 66 | }; 67 | 68 | const expectedObj = { 69 | core: { 70 | color: { 71 | primary: { 72 | base: { 73 | value: '#14b8a6', 74 | original: { 75 | value: '{palette.red.500}', 76 | }, 77 | }, 78 | }, 79 | }, 80 | }, 81 | }; 82 | 83 | const marked = cleanMeta(obj, { cleanMeta: ['type', 'path', 'attributes'] }); 84 | expect(marked).to.eql(expectedObj); 85 | }); 86 | 87 | it('keeps everything intact if no filter is passed', () => { 88 | const obj = { 89 | core: { 90 | color: { 91 | primary: { 92 | base: { 93 | type: 'color', 94 | value: '#14b8a6', 95 | original: { 96 | value: '{palette.red.500}', 97 | }, 98 | attributes: { 99 | foo: { 100 | bar: { qux: 'boo' }, 101 | }, 102 | }, 103 | path: ['core', 'color', 'primary', 'base'], 104 | }, 105 | }, 106 | }, 107 | }, 108 | }; 109 | 110 | const expectedObj = { 111 | core: { 112 | color: { 113 | primary: { 114 | base: { 115 | type: 'color', 116 | value: '#14b8a6', 117 | original: { 118 | value: '{palette.red.500}', 119 | }, 120 | attributes: { 121 | foo: { 122 | bar: { qux: 'boo' }, 123 | }, 124 | }, 125 | path: ['core', 'color', 'primary', 'base'], 126 | }, 127 | }, 128 | }, 129 | }, 130 | }; 131 | 132 | const marked = cleanMeta(obj); 133 | expect(marked).to.eql(expectedObj); 134 | const markedTwo = cleanMeta(obj, {}); 135 | expect(markedTwo).to.eql(expectedObj); 136 | const markedThree = cleanMeta(obj, { cleanMeta: false }); 137 | expect(markedThree).to.eql(expectedObj); 138 | }); 139 | }); 140 | -------------------------------------------------------------------------------- /test/trim-value.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from '@esm-bundle/chai'; 2 | import { trimValue } from '../src/trim-value.js'; 3 | 4 | describe('trim-value', () => { 5 | it('trims away any .value from reference values', () => { 6 | const obj = { 7 | value: '{colors.accent.base.value}', 8 | }; 9 | 10 | const expectedObj = { 11 | value: '{colors.accent.base}', 12 | }; 13 | 14 | const trimmedObj = trimValue(obj); 15 | expect(trimmedObj).to.eql(expectedObj); 16 | }); 17 | 18 | it('does not trim away .value if it is not inside a reference value', () => { 19 | const obj = { 20 | value: 'colors.accent.base.value', 21 | }; 22 | 23 | const expectedObj = { 24 | value: 'colors.accent.base.value', 25 | }; 26 | 27 | const trimmedObj = trimValue(obj); 28 | expect(trimmedObj).to.eql(expectedObj); 29 | }); 30 | 31 | it('trims away any .value from reference values in nested objects', () => { 32 | const obj = { 33 | nested: { 34 | doubleNested: { 35 | tripleNested: { 36 | type: 'color', 37 | value: '{colors.accent.base.value}', 38 | }, 39 | }, 40 | }, 41 | }; 42 | 43 | const expectedObj = { 44 | nested: { 45 | doubleNested: { 46 | tripleNested: { 47 | type: 'color', 48 | value: '{colors.accent.base}', 49 | }, 50 | }, 51 | }, 52 | }; 53 | 54 | const trimmedObj = trimValue(obj); 55 | 56 | expect(trimmedObj).to.eql(expectedObj); 57 | }); 58 | 59 | it('trims away any .value from reference values in nested objects when value is object', () => { 60 | const obj = { 61 | shadow: { 62 | value: { 63 | x: '0', 64 | y: '1', 65 | blur: '2', 66 | spread: '0', 67 | color: '{color.accent.base.value}', 68 | type: 'dropShadow', 69 | }, 70 | }, 71 | }; 72 | 73 | const expectedObj = { 74 | shadow: { 75 | value: { 76 | x: '0', 77 | y: '1', 78 | blur: '2', 79 | spread: '0', 80 | color: '{color.accent.base}', 81 | type: 'dropShadow', 82 | }, 83 | }, 84 | }; 85 | 86 | const trimmedObj = trimValue(obj); 87 | 88 | expect(trimmedObj).to.eql(expectedObj); 89 | }); 90 | 91 | it('trims away any .value from reference values in nested objects when value is array', () => { 92 | const obj = { 93 | shadow: { 94 | value: [ 95 | { 96 | x: '0', 97 | y: '1', 98 | blur: '2', 99 | spread: '0', 100 | color: '{color.accent.base.value}', 101 | type: 'dropShadow', 102 | }, 103 | { 104 | x: '0', 105 | y: '2', 106 | blur: '4', 107 | spread: '0', 108 | color: '{color.accent.base.value}', 109 | type: 'dropShadow', 110 | }, 111 | ], 112 | }, 113 | }; 114 | 115 | const expectedObj = { 116 | shadow: { 117 | value: [ 118 | { 119 | x: '0', 120 | y: '1', 121 | blur: '2', 122 | spread: '0', 123 | color: '{color.accent.base}', 124 | type: 'dropShadow', 125 | }, 126 | { 127 | x: '0', 128 | y: '2', 129 | blur: '4', 130 | spread: '0', 131 | color: '{color.accent.base}', 132 | type: 'dropShadow', 133 | }, 134 | ], 135 | }, 136 | }; 137 | 138 | const trimmedObj = trimValue(obj); 139 | 140 | expect(trimmedObj).to.eql(expectedObj); 141 | }); 142 | 143 | it('keeps arbitrary metadata intact', () => { 144 | const obj = { 145 | core: { 146 | color: { 147 | primary: { 148 | base: { 149 | type: 'color', 150 | value: '#14b8a6', 151 | path: ['core', 'color', 'primary', 'base'], 152 | }, 153 | }, 154 | }, 155 | }, 156 | }; 157 | 158 | const expectedObj = { 159 | core: { 160 | color: { 161 | primary: { 162 | base: { 163 | type: 'color', 164 | value: '#14b8a6', 165 | path: ['core', 'color', 'primary', 'base'], 166 | }, 167 | }, 168 | }, 169 | }, 170 | }; 171 | 172 | const transformedObj = trimValue(obj); 173 | expect(transformedObj).to.eql(expectedObj); 174 | }); 175 | }); 176 | -------------------------------------------------------------------------------- /test/style-dictionary-to-figma.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from '@esm-bundle/chai'; 2 | import { transform } from '../src/style-dictionary-to-figma.js'; 3 | 4 | describe('style-dictionary-to-figma', () => { 5 | it('transforms style dictionary tokens object to a figma tokens plugin compatible object', () => { 6 | const obj = { 7 | button: { 8 | tokenset: 'foo', 9 | primary: { 10 | bg: { 11 | type: 'color', 12 | original: { 13 | value: '{colors.accent.base.value}', 14 | }, 15 | name: 'ButtonPrimaryBg', 16 | value: '#F8C307', 17 | }, 18 | }, 19 | }, 20 | boxShadow: { 21 | small: { 22 | value: [ 23 | { 24 | x: '0', 25 | y: '1', 26 | blur: '2', 27 | spread: '0', 28 | color: '{color.accent.base.value}', 29 | type: 'dropShadow', 30 | }, 31 | { 32 | x: '0', 33 | y: '2', 34 | blur: '4', 35 | spread: '0', 36 | color: '{color.accent.base.value}', 37 | type: 'dropShadow', 38 | }, 39 | ], 40 | }, 41 | }, 42 | }; 43 | 44 | const expectedObj = { 45 | foo: { 46 | button: { 47 | primary: { 48 | bg: { 49 | type: 'color', 50 | original: { 51 | value: '{colors.accent.base}', 52 | }, 53 | value: '{colors.accent.base}', 54 | }, 55 | }, 56 | }, 57 | }, 58 | global: { 59 | boxShadow: { 60 | small: { 61 | value: [ 62 | { 63 | x: '0', 64 | y: '1', 65 | blur: '2', 66 | spread: '0', 67 | color: '{color.accent.base}', 68 | type: 'dropShadow', 69 | }, 70 | { 71 | x: '0', 72 | y: '2', 73 | blur: '4', 74 | spread: '0', 75 | color: '{color.accent.base}', 76 | type: 'dropShadow', 77 | }, 78 | ], 79 | }, 80 | }, 81 | }, 82 | }; 83 | 84 | const transformedObj = transform(obj); 85 | expect(transformedObj).to.eql(expectedObj); 86 | }); 87 | 88 | it('allows passing options to configure the transformation', () => { 89 | const obj = { 90 | button: { 91 | tokenset: 'foo', 92 | primary: { 93 | bg: { 94 | type: 'color', 95 | original: { 96 | value: '{colors.accent.base.value}', 97 | }, 98 | name: 'ButtonPrimaryBg', 99 | value: '#F8C307', 100 | }, 101 | }, 102 | }, 103 | boxShadow: { 104 | small: { 105 | value: [ 106 | { 107 | x: '0', 108 | y: '1', 109 | blur: '2', 110 | spread: '0', 111 | color: '{color.accent.base.value}', 112 | type: 'dropShadow', 113 | }, 114 | { 115 | x: '0', 116 | y: '2', 117 | blur: '4', 118 | spread: '0', 119 | color: '{color.accent.base.value}', 120 | type: 'dropShadow', 121 | }, 122 | ], 123 | }, 124 | }, 125 | }; 126 | 127 | const expectedObj = { 128 | foo: { 129 | button: { 130 | primary: { 131 | bg: { 132 | type: 'color', 133 | value: '{colors.accent.base}', 134 | }, 135 | }, 136 | }, 137 | }, 138 | custom: { 139 | boxShadow: { 140 | small: { 141 | value: [ 142 | { 143 | x: '0', 144 | y: '1', 145 | blur: '2', 146 | spread: '0', 147 | color: '{color.accent.base}', 148 | type: 'dropShadow', 149 | }, 150 | { 151 | x: '0', 152 | y: '2', 153 | blur: '4', 154 | spread: '0', 155 | color: '{color.accent.base}', 156 | type: 'dropShadow', 157 | }, 158 | ], 159 | }, 160 | }, 161 | }, 162 | }; 163 | 164 | const transformedObj = transform(obj, { cleanMeta: true, defaultTokenset: 'custom' }); 165 | expect(transformedObj).to.eql(expectedObj); 166 | }); 167 | }); 168 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0]. 120 | 121 | Community Impact Guidelines were inspired by 122 | [Mozilla's code of conduct enforcement ladder][mozilla coc]. 123 | 124 | For answers to common questions about this code of conduct, see the FAQ at 125 | [https://www.contributor-covenant.org/faq][faq]. Translations are available 126 | at [https://www.contributor-covenant.org/translations][translations]. 127 | 128 | [homepage]: https://www.contributor-covenant.org 129 | [v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html 130 | [mozilla coc]: https://github.com/mozilla/diversity 131 | [faq]: https://www.contributor-covenant.org/faq 132 | [translations]: https://www.contributor-covenant.org/translations 133 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | style dictionary playground logo 3 |

4 |

5 | Brought to you by
 6 | 7 | ‹div›RIOTS 8 | 9 | 10 | ‹div›RIOTS 11 | 12 |

13 | 14 | # Style Dictionary To Figma 15 | 16 | A utility that transforms a [style-dictionary](https://amzn.github.io/style-dictionary/#/) object into something [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978) understands. 17 | 18 | Used by Design Systems in [Backlight](https://backlight.dev) using design tokens in [style-dictionary](https://amzn.github.io/style-dictionary/) that can be synced into Figma via the [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978). 19 | 20 | > The tool, at the moment, assumes usage of the Sync feature of Figma Tokens Plugin. 21 | > The JSON output is catered to this as it is a single file containing the tokensets information. 22 | 23 | ## Features 24 | 25 | - Supports marking a token group as a custom tokenset so that it will appear as a separate tokenset in Figma. By default, `"global"` is used as the tokenset, and your tokens will be placed inside of this, but you can override it. This is useful if you want to combine many base tokens into a "global" set but theme-specific token groups into a "theme-dark" set for example. You can configure it like so: 26 | 27 | ```json 28 | { 29 | "color": { 30 | "tokenset": "custom", 31 | "primary": { 32 | "base": { 33 | "type": "color", 34 | "value": "#14b8a6" 35 | } 36 | } 37 | } 38 | } 39 | ``` 40 | 41 | `color.primary.base` token will appear under `custom` tokenset now in the plugin. 42 | You can also configure or turn off this automatic tokenset mapping by passing `defaultTokenset: false` or configuring a string for it `defaultTokenset: 'default'` 43 | 44 | - Trims `.value` from reference values as Figma Tokens plugin does not use this suffix. 45 | - Trims the `name` properties from tokens since Figma Tokens plugin uses this property to name its tokens, however, without a name property it creates its own naming/nesting by the object structure which is way nicer. 46 | - Use the reference values rather than its resolved values. Put `ignoreUseRefValue: true` as a sibling property to the value prop if you want to make an exception and keep it as a resolved value. 47 | - Allow passing some optional options to adjust the object conversion: 48 | 49 | - cleanMeta, if `true`, will clean up some of the meta info that style-dictionary creates, which Figma Tokens plugin doesn't care about. Can also pass a `string[]` if you want to configure a blacklist of meta props that you want to filter out yourself 50 | 51 | ```js 52 | transform(obj, { cleanMeta: ['foo', 'bar'] }); 53 | ``` 54 | 55 | ## Usage 56 | 57 | ```sh 58 | npm i @divriots/style-dictionary-to-figma 59 | ``` 60 | 61 | ```js 62 | import { transform } from '@divriots/style-dictionary-to-figma'; 63 | 64 | const sdObject = { ... }; 65 | const figmaObj = transform(sdObject); 66 | ``` 67 | 68 | In case you want its separate counterparts, you can import them separately. 69 | 70 | ```js 71 | import { 72 | trimValue, 73 | trimName, 74 | useRefValue, 75 | markTokenset, 76 | cleanMeta, 77 | } from '@divriots/style-dictionary-to-figma'; 78 | ``` 79 | 80 | Once you transformed the object to Figma, a recommendation is to push this to GitHub and use the [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978) to sync with it to use the tokens in Figma. 81 | 82 | ## Use in [Backlight](https://backlight.dev/) / [Style-dictionary](https://amzn.github.io/style-dictionary/#/) 83 | 84 | Import the `transform` utility and create a style-dictionary formatter: 85 | 86 | ```js 87 | const { transform } = require('@divriots/style-dictionary-to-figma'); 88 | const StyleDictionary = require('style-dictionary'); 89 | 90 | StyleDictionary.registerFormat({ 91 | name: 'figmaTokensPlugin', 92 | formatter: ({ dictionary }) => { 93 | const transformedTokens = transform(dictionary.tokens); 94 | return JSON.stringify(transformedTokens, null, 2); 95 | }, 96 | }); 97 | ``` 98 | 99 | Or you can also put the formatter directly into the config without registering it imperatively: 100 | 101 | ```js 102 | const { transform } = require('@divriots/style-dictionary-to-figma'); 103 | 104 | module.exports = { 105 | source: ['**/*.tokens.json'], 106 | format: { 107 | figmaTokensPlugin: ({ dictionary }) => { 108 | const transformedTokens = transform(dictionary.tokens); 109 | return JSON.stringify(transformedTokens, null, 2); 110 | }, 111 | }, 112 | platforms: { 113 | json: { 114 | transformGroup: 'js', 115 | buildPath: '/tokens/', 116 | files: [ 117 | { 118 | destination: 'tokens.json', 119 | format: 'figmaTokensPlugin', 120 | }, 121 | ], 122 | }, 123 | }, 124 | }; 125 | ``` 126 | 127 | This spits out a file `/tokens/tokens.json` which Figma Tokens plugin can import (e.g. through GitHub). 128 | 129 | Since [Backlight](https://backlight.dev/) has [GitHub](https://github.com/) and [Style-Dictionary](https://amzn.github.io/style-dictionary/#/) integration out of the box, this process is very simple. 130 | 131 | ## Create a JSON for each tokenset 132 | 133 | Perhaps you'd like to use this tool to generate a separate JSON file for each tokenset, 134 | which you can then manually paste into the Figma Tokens Plugin JSON view. 135 | For example, when you're not using the Figma Tokens Plugin Sync feature. 136 | 137 | For this, [refer to this code snippet from this issue](https://github.com/divriots/style-dictionary-to-figma/issues/15#issuecomment-1127797022). 138 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @divriots/style-dictionary-to-figma 2 | 3 | ## 0.4.0 4 | 5 | ### Minor Changes 6 | 7 | - ab01a1e: BREAKING: if an upper token group does not have a tokenset property, it will get placed in a "global" tokenset by default. This means that no action is required by the user of the transformer to get a working JSON for Figma Tokens Plugin, but this change is potentially breaking because of how it changes the JSON output. 8 | 9 | ### Before 10 | 11 | ```json 12 | { 13 | "core": { 14 | "color": { 15 | "primary": { 16 | "base": { 17 | "type": "color", 18 | "value": "#14b8a6" 19 | }, 20 | "secondary": { 21 | "type": "color", 22 | "value": "#ff0000" 23 | } 24 | } 25 | } 26 | } 27 | } 28 | ``` 29 | 30 | Nothing is changed in the output. However, if you have references, they might be broken because the plugin will interpret this as `"color"` being the upper property in a tokenset called `"core"`. 31 | 32 | ### After 33 | 34 | ```json 35 | { 36 | "core": { 37 | "color": { 38 | "primary": { 39 | "base": { 40 | "type": "color", 41 | "value": "#14b8a6" 42 | }, 43 | "secondary": { 44 | "type": "color", 45 | "value": "#ff0000" 46 | } 47 | } 48 | } 49 | } 50 | } 51 | ``` 52 | 53 | turns into 54 | 55 | ```json 56 | { 57 | "global": { 58 | "core": { 59 | "color": { 60 | "primary": { 61 | "base": { 62 | "type": "color", 63 | "value": "#14b8a6" 64 | }, 65 | "secondary": { 66 | "type": "color", 67 | "value": "#ff0000" 68 | } 69 | } 70 | } 71 | } 72 | } 73 | } 74 | ``` 75 | 76 | Your reference, for example `{core.color.primary.base}` will now work properly because `"core"` is not interpreted as the tokenset, `"global"` is. 77 | 78 | ### Patch Changes 79 | 80 | - ab01a1e: Fix clean-meta utility by using a proper isObject check which excludes arrays (values can be arrays). 81 | 82 | ## 0.3.3 83 | 84 | ### Patch Changes 85 | 86 | - 2c9be59: Allow tokensets to be the same name as the upper most keys in the tokens object, e.g.: 87 | 88 | ```json 89 | { 90 | "core": { 91 | "tokenset": "core", 92 | "color": { 93 | "value": "#ff0000", 94 | "type": "color" 95 | } 96 | } 97 | } 98 | ``` 99 | 100 | will become 101 | 102 | ```json 103 | { 104 | "core": { 105 | "core": { 106 | "color": { 107 | "value": "#ff0000", 108 | "type": "color" 109 | } 110 | } 111 | } 112 | } 113 | ``` 114 | 115 | so that Figma Tokens plugin picks it up properly. 116 | 117 | ## 0.3.2 118 | 119 | ### Patch Changes 120 | 121 | - f9cf466: Allow passing an options object, for example `cleanMeta`, to clean unwanted meta props from the style-dictionary object. 122 | 123 | ## 0.3.1 124 | 125 | ### Patch Changes 126 | 127 | - 1c0ee01: Do proper isObject check (typeof null and Array are also 'object') where needed. Fixes bug with metadata props with type Array getting altered by trimValue to become Objects. 128 | 129 | ## 0.3.0 130 | 131 | ### Minor Changes 132 | 133 | - b6cb742: BREAKING: do not restore original value if it was not a reference value. Before, it used to always restore, which unintentionally also restored style-dictionary transforms. For nested values, restore fully if any reference is found inside the nested value (object or array). If undesired, you can always use `ignoreUseRefValue` (see [README](./README.md)) to fall back to keeping the fully resolved value. Currently, a hybrid solution that restores only the subparts of a value that is partially using references, is not available. Feel free to raise an issue if needed to explain your use case. 134 | 135 | ## 0.2.1 136 | 137 | ### Patch Changes 138 | 139 | - c30d4c1: Allow passing ignoreUseRefValue boolean metadata as a sibling to the token value property. It will use the resolved value rather than using the original reference value after conversion when this is set to true. 140 | 141 | ## 0.2.0 142 | 143 | ### Minor Changes 144 | 145 | - 00c39e3: BREAKING: no longer using default export, this is considered an anti-pattern for JS libraries. [Re-export wildstars with default exports in ESM](https://twitter.com/DasSurma/status/1509835337295609865) is one example quirk, another example is [CommonJS not supporting default exports next to named exports in a single file](https://github.com/divriots/style-dictionary-to-figma/issues/7). Now, the main export is a named export called "transform" and you have to import it as such. 146 | 147 | Before: 148 | 149 | ```js 150 | // ESM 151 | import styleDictionaryToFigma from '@divriots/style-dictionary-to-figma'; 152 | // CommonJS 153 | const styleDictionaryToFigma = require('@divriots/style-dictionary-to-figma'); 154 | 155 | styleDictionaryToFigma({...}) // figma object 156 | ``` 157 | 158 | After: 159 | 160 | ```js 161 | // ESM 162 | import { transform } from '@divriots/style-dictionary-to-figma'; 163 | // CommonJS 164 | const { transform } = require('@divriots/style-dictionary-to-figma'); 165 | 166 | transform({...}) // figma object 167 | ``` 168 | 169 | ## 0.1.3 170 | 171 | ### Patch Changes 172 | 173 | - ff5d591: Keeps an array-type value as an array. This is useful with boxShadows that can have multiple stacked shadows in a single token. 174 | 175 | ## 0.1.2 176 | 177 | ### Patch Changes 178 | 179 | - 31493c5: Fixes trimValue when used on values that are objects. 180 | 181 | ## 0.1.1 182 | 183 | ### Patch Changes 184 | 185 | - 52117f8: Add CommonJS entrypoint, allowing importing with `const sdToFigma = require('@divriots/style-dictionary-to-figma').default`. 186 | 187 | ## 0.1.0 188 | 189 | ### Minor Changes 190 | 191 | - 092a7fb: Initial release: A utility that transforms a [style-dictionary](https://amzn.github.io/style-dictionary/#/) object into something [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978) understands. 192 | -------------------------------------------------------------------------------- /test/use-ref-value.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from '@esm-bundle/chai'; 2 | import { useRefValue } from '../src/use-ref-value.js'; 3 | 4 | describe('trim-name', () => { 5 | it('replaces value with original reference value instead of resolved value', () => { 6 | const obj = { 7 | original: { 8 | value: '{color.accent.base.value}', 9 | }, 10 | value: '#ffffff', 11 | }; 12 | const expectedObj = { 13 | original: { 14 | value: '{color.accent.base.value}', 15 | }, 16 | value: '{color.accent.base.value}', 17 | }; 18 | const transformedObj = useRefValue(obj); 19 | expect(transformedObj).to.eql(expectedObj); 20 | }); 21 | 22 | it('does not replace value with original value if original value is not a reference', () => { 23 | const obj = { 24 | original: { 25 | value: 'Medium', 26 | }, 27 | value: '500', 28 | }; 29 | const expectedObj = { 30 | original: { 31 | value: 'Medium', 32 | }, 33 | value: '500', 34 | }; 35 | const transformedObj = useRefValue(obj); 36 | expect(transformedObj).to.eql(expectedObj); 37 | }); 38 | 39 | it('does not replace value with original value if original value do not contain references', () => { 40 | const obj = { 41 | original: { 42 | value: { 43 | lineHeight: 1, 44 | fontWeight: '500', 45 | }, 46 | }, 47 | value: { 48 | lineHeight: 1, 49 | fontWeight: 'Medium', 50 | }, 51 | }; 52 | const expectedObj = { 53 | original: { 54 | value: { 55 | lineHeight: 1, 56 | fontWeight: '500', 57 | }, 58 | }, 59 | value: { 60 | lineHeight: 1, 61 | fontWeight: 'Medium', 62 | }, 63 | }; 64 | const transformedObj = useRefValue(obj); 65 | expect(transformedObj).to.eql(expectedObj); 66 | 67 | const obj2 = { 68 | original: { 69 | value: ['{shadow.core.4}', 'pre-transformed-shadow-2'], 70 | }, 71 | value: ['0 0 4px rgba(0,0,0,0.6)', '0 0 2px rgba(0,0,0,0.6)'], 72 | }; 73 | const expectedObj2 = { 74 | original: { 75 | value: ['{shadow.core.4}', 'pre-transformed-shadow-2'], 76 | }, 77 | value: ['{shadow.core.4}', 'pre-transformed-shadow-2'], 78 | }; 79 | const transformedObj2 = useRefValue(obj2); 80 | expect(transformedObj2).to.eql(expectedObj2); 81 | }); 82 | 83 | it('replaces value with original value if original value contains references', () => { 84 | const obj = { 85 | original: { 86 | value: { 87 | fontFamily: '{fontFamily.body}', 88 | fontWeight: '{fontWeight.regular}', 89 | lineHeight: '{size.lineHeight.xsmall}', 90 | fontSize: '{size.font.xsmall}', 91 | }, 92 | }, 93 | value: { 94 | fontFamily: 'Inter', 95 | fontWeight: 'Medium', 96 | lineHeight: '1', 97 | fontSize: '16px', 98 | }, 99 | }; 100 | const expectedObj = { 101 | original: { 102 | value: { 103 | fontFamily: '{fontFamily.body}', 104 | fontWeight: '{fontWeight.regular}', 105 | lineHeight: '{size.lineHeight.xsmall}', 106 | fontSize: '{size.font.xsmall}', 107 | }, 108 | }, 109 | value: { 110 | fontFamily: '{fontFamily.body}', 111 | fontWeight: '{fontWeight.regular}', 112 | lineHeight: '{size.lineHeight.xsmall}', 113 | fontSize: '{size.font.xsmall}', 114 | }, 115 | }; 116 | const transformedObj = useRefValue(obj); 117 | expect(transformedObj).to.eql(expectedObj); 118 | 119 | const obj2 = { 120 | original: { 121 | value: ['{shadow.core.4}', '{shadow.core.2}'], 122 | }, 123 | value: ['0 0 4px rgba(0,0,0,0.6)', '0 0 2px rgba(0,0,0,0.6)'], 124 | }; 125 | const expectedObj2 = { 126 | original: { 127 | value: ['{shadow.core.4}', '{shadow.core.2}'], 128 | }, 129 | value: ['{shadow.core.4}', '{shadow.core.2}'], 130 | }; 131 | const transformedObj2 = useRefValue(obj2); 132 | expect(transformedObj2).to.eql(expectedObj2); 133 | }); 134 | 135 | // See https://github.com/divriots/style-dictionary-to-figma/issues/17 136 | // This "feature" is a workaround for https://github.com/six7/figma-tokens/issues/706 137 | it('it does not use ref value when it encounters ignoreUseRefValue metadata', () => { 138 | const obj = { 139 | shadow: { 140 | 2: { 141 | value: { 142 | x: '0', 143 | y: '1', 144 | blur: '2', 145 | spread: '0', 146 | color: '#000000', 147 | type: 'dropShadow', 148 | }, 149 | }, 150 | 4: { 151 | value: { 152 | x: '0', 153 | y: '2', 154 | blur: '4', 155 | spread: '0', 156 | color: '#000000', 157 | type: 'dropShadow', 158 | }, 159 | }, 160 | }, 161 | elevation: { 162 | small: { 163 | ignoreUseRefValue: true, 164 | original: { 165 | value: ['{shadow.4}', '{shadow.2}'], 166 | }, 167 | value: [ 168 | { 169 | x: '0', 170 | y: '2', 171 | blur: '4', 172 | spread: '0', 173 | color: '#000000', 174 | type: 'dropShadow', 175 | }, 176 | { 177 | x: '0', 178 | y: '1', 179 | blur: '2', 180 | spread: '0', 181 | color: '#000000', 182 | type: 'dropShadow', 183 | }, 184 | ], 185 | }, 186 | }, 187 | }; 188 | const expectedObj = { 189 | shadow: { 190 | 2: { 191 | value: { 192 | x: '0', 193 | y: '1', 194 | blur: '2', 195 | spread: '0', 196 | color: '#000000', 197 | type: 'dropShadow', 198 | }, 199 | }, 200 | 4: { 201 | value: { 202 | x: '0', 203 | y: '2', 204 | blur: '4', 205 | spread: '0', 206 | color: '#000000', 207 | type: 'dropShadow', 208 | }, 209 | }, 210 | }, 211 | elevation: { 212 | small: { 213 | ignoreUseRefValue: true, 214 | original: { 215 | value: ['{shadow.4}', '{shadow.2}'], 216 | }, 217 | value: [ 218 | { 219 | x: '0', 220 | y: '2', 221 | blur: '4', 222 | spread: '0', 223 | color: '#000000', 224 | type: 'dropShadow', 225 | }, 226 | { 227 | x: '0', 228 | y: '1', 229 | blur: '2', 230 | spread: '0', 231 | color: '#000000', 232 | type: 'dropShadow', 233 | }, 234 | ], 235 | }, 236 | }, 237 | }; 238 | const transformedObj = useRefValue(obj); 239 | expect(transformedObj).to.eql(expectedObj); 240 | }); 241 | }); 242 | -------------------------------------------------------------------------------- /test/mark-tokenset.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from '@esm-bundle/chai'; 2 | import { markTokenset } from '../src/mark-tokenset.js'; 3 | 4 | describe('mark-tokenset', () => { 5 | it('allows marking object with a tokenset metadata prop, moving the object into this upper category', () => { 6 | const obj = { 7 | nested: { 8 | tokenset: 'global', 9 | doubleNested: { 10 | tripleNested: { 11 | type: 'color', 12 | value: '{colors.accent.base.value}', 13 | }, 14 | }, 15 | }, 16 | }; 17 | 18 | const expectedObj = { 19 | global: { 20 | nested: { 21 | doubleNested: { 22 | tripleNested: { 23 | type: 'color', 24 | value: '{colors.accent.base.value}', 25 | }, 26 | }, 27 | }, 28 | }, 29 | }; 30 | 31 | const marked = markTokenset(obj); 32 | expect(marked).to.eql(expectedObj); 33 | }); 34 | 35 | it("ignores tokenset metadata if it's used on the wrong level", () => { 36 | const obj = { 37 | tokenset: 'global', 38 | nested: { 39 | doubleNested: { 40 | tripleNested: { 41 | type: 'color', 42 | value: '{colors.accent.base.value}', 43 | }, 44 | }, 45 | }, 46 | }; 47 | 48 | const expectedObj = { 49 | tokenset: 'global', 50 | // since no valid tokenset is inside "nested" obj, 51 | // it will put this inside "global", 52 | // see also last tokenset tests in this file. 53 | global: { 54 | nested: { 55 | doubleNested: { 56 | tripleNested: { 57 | type: 'color', 58 | value: '{colors.accent.base.value}', 59 | }, 60 | }, 61 | }, 62 | }, 63 | }; 64 | 65 | const obj2 = { 66 | nested: { 67 | doubleNested: { 68 | tripleNested: { 69 | tokenset: 'global', 70 | type: 'color', 71 | value: '{colors.accent.base.value}', 72 | }, 73 | }, 74 | }, 75 | }; 76 | 77 | const expectedObj2 = { 78 | global: { 79 | nested: { 80 | doubleNested: { 81 | tripleNested: { 82 | tokenset: 'global', 83 | type: 'color', 84 | value: '{colors.accent.base.value}', 85 | }, 86 | }, 87 | }, 88 | }, 89 | }; 90 | 91 | const marked = markTokenset(obj); 92 | expect(marked).to.eql(expectedObj); 93 | const marked2 = markTokenset(obj2); 94 | expect(marked2).to.eql(expectedObj2); 95 | }); 96 | 97 | it('merges multiple marked sets with the same value into one tokenset', () => { 98 | const obj = { 99 | nested: { 100 | tokenset: 'global', 101 | doubleNested: { 102 | tripleNested: { 103 | type: 'color', 104 | value: '{colors.accent.base.value}', 105 | }, 106 | }, 107 | }, 108 | foo: { 109 | tokenset: 'global', 110 | bar: { 111 | type: 'color', 112 | value: '{colors.accent.light.value}', 113 | }, 114 | }, 115 | }; 116 | 117 | const expectedObj = { 118 | global: { 119 | nested: { 120 | doubleNested: { 121 | tripleNested: { 122 | type: 'color', 123 | value: '{colors.accent.base.value}', 124 | }, 125 | }, 126 | }, 127 | foo: { 128 | bar: { 129 | type: 'color', 130 | value: '{colors.accent.light.value}', 131 | }, 132 | }, 133 | }, 134 | }; 135 | 136 | const marked = markTokenset(obj); 137 | expect(marked).to.eql(expectedObj); 138 | }); 139 | 140 | it('allows naming your tokenset the same as your upper prop key', () => { 141 | const obj = { 142 | nested: { 143 | tokenset: 'nested', 144 | doubleNested: { 145 | tripleNested: { 146 | type: 'color', 147 | value: '{colors.accent.base.value}', 148 | }, 149 | }, 150 | anotherDoubleNested: { 151 | type: 'color', 152 | value: '{colors.accent.secondary.value}', 153 | }, 154 | }, 155 | foo: { 156 | tokenset: 'foo', 157 | bar: { 158 | type: 'color', 159 | value: '{colors.accent.light.value}', 160 | }, 161 | }, 162 | }; 163 | 164 | const expectedObj = { 165 | nested: { 166 | nested: { 167 | doubleNested: { 168 | tripleNested: { 169 | type: 'color', 170 | value: '{colors.accent.base.value}', 171 | }, 172 | }, 173 | anotherDoubleNested: { 174 | type: 'color', 175 | value: '{colors.accent.secondary.value}', 176 | }, 177 | }, 178 | }, 179 | foo: { 180 | foo: { 181 | bar: { 182 | type: 'color', 183 | value: '{colors.accent.light.value}', 184 | }, 185 | }, 186 | }, 187 | }; 188 | 189 | const marked = markTokenset(obj); 190 | expect(marked).to.eql(expectedObj); 191 | }); 192 | 193 | describe('default tokenset', () => { 194 | it('puts token groups under a "global" tokenset by default', () => { 195 | const obj = { 196 | nested: { 197 | doubleNested: { 198 | tripleNested: { 199 | type: 'color', 200 | value: '{colors.accent.base.value}', 201 | }, 202 | }, 203 | anotherDoubleNested: { 204 | type: 'color', 205 | value: '{colors.accent.secondary.value}', 206 | }, 207 | }, 208 | foo: { 209 | tokenset: 'foo', 210 | bar: { 211 | type: 'color', 212 | value: '{colors.accent.light.value}', 213 | }, 214 | }, 215 | }; 216 | 217 | const expectedObj = { 218 | global: { 219 | nested: { 220 | doubleNested: { 221 | tripleNested: { 222 | type: 'color', 223 | value: '{colors.accent.base.value}', 224 | }, 225 | }, 226 | anotherDoubleNested: { 227 | type: 'color', 228 | value: '{colors.accent.secondary.value}', 229 | }, 230 | }, 231 | }, 232 | foo: { 233 | foo: { 234 | bar: { 235 | type: 'color', 236 | value: '{colors.accent.light.value}', 237 | }, 238 | }, 239 | }, 240 | }; 241 | 242 | const marked = markTokenset(obj); 243 | expect(marked).to.eql(expectedObj); 244 | }); 245 | 246 | it('allows specifying defaultTokenset option to set default tokenset mapping', () => { 247 | const obj = { 248 | nested: { 249 | doubleNested: { 250 | tripleNested: { 251 | type: 'color', 252 | value: '{colors.accent.base.value}', 253 | }, 254 | }, 255 | anotherDoubleNested: { 256 | type: 'color', 257 | value: '{colors.accent.secondary.value}', 258 | }, 259 | }, 260 | foo: { 261 | tokenset: 'foo', 262 | bar: { 263 | type: 'color', 264 | value: '{colors.accent.light.value}', 265 | }, 266 | }, 267 | }; 268 | 269 | const expectedObj = { 270 | default: { 271 | nested: { 272 | doubleNested: { 273 | tripleNested: { 274 | type: 'color', 275 | value: '{colors.accent.base.value}', 276 | }, 277 | }, 278 | anotherDoubleNested: { 279 | type: 'color', 280 | value: '{colors.accent.secondary.value}', 281 | }, 282 | }, 283 | }, 284 | foo: { 285 | foo: { 286 | bar: { 287 | type: 'color', 288 | value: '{colors.accent.light.value}', 289 | }, 290 | }, 291 | }, 292 | }; 293 | 294 | const marked = markTokenset(obj, { defaultTokenset: 'default' }); 295 | expect(marked).to.eql(expectedObj); 296 | }); 297 | 298 | it('supports turning off the default tokenset mapping behavior', () => { 299 | const obj = { 300 | nested: { 301 | doubleNested: { 302 | tripleNested: { 303 | type: 'color', 304 | value: '{colors.accent.base.value}', 305 | }, 306 | }, 307 | anotherDoubleNested: { 308 | type: 'color', 309 | value: '{colors.accent.secondary.value}', 310 | }, 311 | }, 312 | foo: { 313 | tokenset: 'foo', 314 | bar: { 315 | type: 'color', 316 | value: '{colors.accent.light.value}', 317 | }, 318 | }, 319 | }; 320 | 321 | const expectedObj = { 322 | nested: { 323 | doubleNested: { 324 | tripleNested: { 325 | type: 'color', 326 | value: '{colors.accent.base.value}', 327 | }, 328 | }, 329 | anotherDoubleNested: { 330 | type: 'color', 331 | value: '{colors.accent.secondary.value}', 332 | }, 333 | }, 334 | foo: { 335 | foo: { 336 | bar: { 337 | type: 'color', 338 | value: '{colors.accent.light.value}', 339 | }, 340 | }, 341 | }, 342 | }; 343 | 344 | const marked = markTokenset(obj, { defaultTokenset: false }); 345 | expect(marked).to.eql(expectedObj); 346 | }); 347 | }); 348 | }); 349 | --------------------------------------------------------------------------------