{"id":25150079,"url":"https://github.com/minusmo/tokens-to","last_synced_at":"2026-04-11T13:07:34.355Z","repository":{"id":225682993,"uuid":"766597737","full_name":"minusmo/tokens-to","owner":"minusmo","description":"Convert js or ts tokens into css variables or json","archived":false,"fork":false,"pushed_at":"2024-03-12T08:30:43.000Z","size":29,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-09T13:36:36.790Z","etag":null,"topics":["css","cssvariables","js","json","npm","style","token","ts"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/minusmo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-03T17:46:05.000Z","updated_at":"2024-03-04T07:28:18.000Z","dependencies_parsed_at":"2024-03-12T09:41:14.891Z","dependency_job_id":null,"html_url":"https://github.com/minusmo/tokens-to","commit_stats":null,"previous_names":["minusmo/tokens-to"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minusmo%2Ftokens-to","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minusmo%2Ftokens-to/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minusmo%2Ftokens-to/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minusmo%2Ftokens-to/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minusmo","download_url":"https://codeload.github.com/minusmo/tokens-to/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246970348,"owners_count":20862508,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","cssvariables","js","json","npm","style","token","ts"],"created_at":"2025-02-08T22:16:40.329Z","updated_at":"2025-12-30T23:10:03.453Z","avatar_url":"https://github.com/minusmo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003etokens-to\u003c/h2\u003e\n\n[🇯🇵 Japanese](./README_JP.md)\n\nIt is somewhat cumbersome to prepare style tokens across design systems. Design and Style tokens can be defined various ways. However, once defining style tokens in Javascript(or Typescript), it is quite tedius and inefficient to write that again in other format such as css and json to be delivered or reused. **_tokens-to_** addresses that problem to ease the pain.\n\n### **[Notice]**\n\nIt was commonjs module before 0.0.5, but I decided to move on to es module. The commonjs version will be archived on branch. As the most of tokens work with UI frameworks/libaries which utilizes es module.\n\n## **Table of Contents**\n\n- [Installation](#installation)\n- [Usages](#usages)\n- [Contributing](#contributing)\n- [License](#license)\n- [Authors](#authors)\n\n## **Installation**\n\nInstall the library using npm or yarn:\n\n```bash\nnpm install --save-dev tokens-to\n```\n\n## **Usage**\n\n### Example\n\nLet's say there is a js token like following.\n\n```javascript\nexport const colors = {\n  whites: [\n    '#fffff0',\n    '#fffff1'\n    '#fffff2'\n  ]\n}\n\n```\n\nAnd this is what you get after the conversion.\n\n```css\n:root {\n  --colors-whites-0: #fffff0;\n  --colors-whites-1: #fffff1;\n  --colors-whites-2: #fffff2;\n}\n```\n\nWhen there are multiple tokens like following,\n\n```javascript\nexport const colors = {\n  whites: [\n    '#fffff0',\n    '#fffff1'\n    '#fffff2'\n  ]\n}\n\nexport const curves = {\n  card: [\n    10,\n    20,\n    30,\n  ]\n}\n```\n\nAnd then this is what you get after the conversion.\n\n```css\n:root {\n  --colors-whites-0: #fffff0;\n  --colors-whites-1: #fffff1;\n  --colors-whites-2: #fffff2;\n  --curves-card-0: 10;\n  --curves-card-1: 20;\n  --curves-card-2: 30;\n}\n```\n\n### To Do Before converting\n\n#### Module Exports\n\nTo be converted into css, every source js module should export tokens with esm **_\"export\"_** as following.\nThe **\"export default\"** will be converted into variables with prefix **\"default\"**.\n\n```javascript\nexport { colorTokens, typographyTokens };\n```\n\nPlease keep this form(⬆️) of exporting object to get expected output files.\n\n#### Configurations\n\n---\n\nTo configure converting to keep consistency and reusability, you can create **_tokens-to.config.json_**\n\ntokens-to.config.json\n\n```javascript\n{\n  \"css\": {\n    \"sources\": [\"./tokens/*.js\"],\n    \"outFileName\": \"cssvariables\",\n    \"outDir\": \"./dist/css\",\n    \"bundled\": true,\n    \"selector\": \":root\",\n    \"prefix\": \"\"\n  },\n  \"json\": {\n    \"sources\": [\"./tokens/*.js\"],\n    \"outFileName\": \"cssvariables\",\n    \"outDir\": \"./dist/json\",\n    \"bundled\": true\n  }\n}\n```\n\n#### Configuration types and descriptions\n\n- **sources: string[];** //Sources to be converted. Patterns are allowed.\n- **outFileName: string;** //Output file name, in case of converting into single css file(bundled).\n- **outDir: string;** //Directory for output files.\n- **bundled: boolean;** //Whether output file is bundled into single file or not. If false, each sources file is converted into single css file. and outfile option is ignored.\n- **selector: string;** //Css selector that wraps css variables.\n- **prefix: string;** //Prefix to be prepended in front of each css variables\n\nIf configurations are missing, **_Default configurations_** are used instead of.\n\n#### DefaultConfiguration\n\n```javascript\n{\n  \"css\": {\n    \"sources\": [],\n    \"outFileName\": \"tokens\",\n    \"outDir\": \"./dist/css\",\n    \"bundled\": true,\n    \"selector\": \":root\",\n    \"prefix\": \"\",\n  },\n  \"json\": {\n    \"sources\": [],\n    \"outFileName\": \"tokens\",\n    \"outDir\": \"./dist/json\",\n    \"bundled\": true,\n  }\n}\n```\n\nWhen manual configurations are provided, configurations from tokens-to.config.json is overrided.\n\n#### Available manual configurations(command line interface)\n\narguments\n\n```plaintext\nfiles: optional argument for source files, patterns allowed. If not specified, sources from configurations are used.\n```\n\noptions\n\n```plaintext\n-o, --outFileName:  output filename.\n-d, --outDir:  output directory.\n-b, --bundled:  whether output is bundled.\n-s, --selector: what css selector is used to define css variables.\n```\n\n### Add npm scripts\n\n```json\n\"tokens-to\": \"tokens-to\",\n\"js2css\": \"tokens-to js2css\",\n\"js2json\": \"tokens-to js2json\"\n```\n\n### **Usages**\n\nRun with configurations\n\n```bash\nnpm run tokens-to js2css\nnpm run js2css\nnpm run tokens-to js2json\nnpm run js2json\n```\n\nHelp\n\n```bash\nnpm run tokens-to help\nnpm run tokens-to help js2css\nnpm run tokens-to help js2json\n```\n\n#### Run with command line argument\n\njs2css\n\n```bash\nnpm run js2css ./tokens/colors.js\nnpm run js2css --outDir=./dist/css ./tokens/colors.js\nnpm run js2css --outFileName=tokens ./tokens/colors.js\nnpm run js2css --bundled=true ./tokens/colors.js\nnpm run js2css --selector=html ./tokens/colors.js\n```\n\njs2json\n\n```bash\nnpm run js2json ./tokens/*.js\nnpm run js2json --outDir=./dist/json ./tokens/colors.js\nnpm run js2json --outFileName=tokens ./tokens/colors.js\nnpm run js2json --bundled=true ./tokens/colors.js\n```\n\n## **Contributing**\n\nWe welcome contributions to this library! Here's how you can get involved:\n\n- **Bug reports:** If you find a bug, please report it on the GitHub issue tracker.\n- **Feature requests:** If you have a feature request, please submit an issue on the GitHub issue tracker.\n- **Pull requests:** We encourage you to submit pull requests for bug fixes and new features. Please make sure to follow the coding style and guidelines outlined in the project's contribution guide (if applicable).\n\n## **License**\n\nThis library is licensed under the MIT LICENSE. See the LICENSE file for details.\n\n## **Authors**\n\n- HoJoon Eum\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminusmo%2Ftokens-to","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminusmo%2Ftokens-to","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminusmo%2Ftokens-to/lists"}