{"id":18978246,"url":"https://github.com/autodesk/theo-loader","last_synced_at":"2025-04-19T17:35:59.488Z","repository":{"id":143918707,"uuid":"56123815","full_name":"Autodesk/theo-loader","owner":"Autodesk","description":"A webpack loader that transforms Design Tokens files using Salesforce's theo","archived":false,"fork":false,"pushed_at":"2020-05-23T12:09:34.000Z","size":5271,"stargazers_count":21,"open_issues_count":16,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T10:51:20.110Z","etag":null,"topics":["design-systems","theo","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Autodesk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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,"publiccode":null,"codemeta":null}},"created_at":"2016-04-13T05:34:29.000Z","updated_at":"2023-06-04T08:16:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"9ca310d1-3c94-4f7e-a766-993e635e9e24","html_url":"https://github.com/Autodesk/theo-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Ftheo-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Ftheo-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Ftheo-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Ftheo-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Autodesk","download_url":"https://codeload.github.com/Autodesk/theo-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248546567,"owners_count":21122347,"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":["design-systems","theo","webpack-loader"],"created_at":"2024-11-08T15:32:45.269Z","updated_at":"2025-04-16T11:31:45.182Z","avatar_url":"https://github.com/Autodesk.png","language":"JavaScript","readme":"# theo loader for webpack\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/Autodesk/theo-loader.svg)](https://greenkeeper.io/)\n\nA webpack loader that transforms Design Tokens files using [Salesforce's theo](https://github.com/salesforce-ux/theo).\n\n[![Build Status](https://img.shields.io/travis/Autodesk/theo-loader/master.svg)](https://travis-ci.org/Autodesk/theo-loader)\n[![NPM Version](https://img.shields.io/npm/v/theo-loader.svg)](https://www.npmjs.com/package/theo-loader)\n[![Dependencies](https://david-dm.org/Autodesk/theo-loader.svg)](https://david-dm.org/Autodesk/theo-loader)\n\n## Installation\n\n```bash\nnpm install --save-dev webpack theo theo-loader\n```\n\n__Note:__ [npm](https://npmjs.com) deprecated\n[auto-installing of peerDependencies](https://github.com/npm/npm/issues/6565) from npm@3, so required peer dependencies like theo and webpack must be listed explicitly in your `package.json`.\n\n## Usage\n\n`props.json`\n```json\n{\n  \"aliases\": {\n    \"WHITE\": \"#FFFFFF\",\n    \"LINK_WATER\": \"#F4F6F9\"\n  },\n  \"props\": {\n    \"COLOR_BACKGROUND\": {\n      \"value\": \"{!LINK_WATER}\",\n      \"comment\": \"Default background color for the whole app.\"\n    },\n    \"COLOR_BACKGROUND_ALT\": {\n      \"value\": \"{!WHITE}\",\n      \"comment\": \"Second default background color for the app.\"\n    }\n  },\n  \"global\": {\n    \"type\": \"color\",\n    \"category\": \"background\"\n  }\n}\n```\n\n``` javascript\nimport designTokens from 'theo-loader!./props.json'\n// =\u003e {\n//  COLOR_BACKGROUND: \"rgb(244, 246, 249)\",\n//  COLOR_BACKGROUND_ALT: \"rgb(255, 255, 255)\"\n// }\n```\n\n[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)\n\n## Formats and Transforms\n\nThe loader uses the `web` transform and `common.js` format by default. You can specify another transform or format in the query parameters:\n\n```javascript\nimport designTokens from 'theo-loader?{\"transform\":{\"type\":\"web\"},\"format\":{\"type\":\"scss\"}!./props.json';\n// =\u003e \"$color-background: rgb(244, 246, 249);\\n$color-background-alt: rgb(255, 255, 255);\"\n```\n\nor you can use the shorthand:\n\n```javascript\nimport designTokens from 'theo-loader?transform=web\u0026format=scss!./props.json';\n// =\u003e \"$color-background: rgb(244, 246, 249);\\n$color-background-alt: rgb(255, 255, 255);\"\n```\n\nYou can specify other options to pass to theo via the `LoaderOptionsPlugin` in your webpack configuration:\n\n`webpack.config.js`\n```javascript\nmodule.exports = {\n  ...\n  module: {\n    rules: [\n      {\n        test: /\\.json$/,\n        loader: \"theo-loader\"\n      }\n    ]\n  },\n\n  plugins: [\n    new webpack.LoaderOptionsPlugin({\n      options: {\n        theo: {\n          // These options will be passed to Theo in all instances of theo-loader\n          transform: {\n            type: 'web'\n          },\n\n          // `getOptions` will be called per import\n          // `prevOptions` will be a merged object of the options specified\n          // above, as well as any passed to the loader via query string\n          getOptions: (prevOptions) =\u003e {\n            let newOptions = prevOptions;\n\n            const formatOptions = (prevOptions \u0026\u0026 prevOptions.format) || {};\n            const formatType = format.type;\n\n            if (formatType === 'scss') {\n              newOptions = {\n                ...prevOptions,\n                format: {\n                  ...formatOptions,\n                  // SCSS variables will be named by applying 'PREFIX_' to the\n                  // front of the token name\n                  propsMap: prop =\u003e prop.update('name', name =\u003e `PREFIX_${name}`)\n                },\n              };\n            }\n\n            return newOptions;\n          }\n        }\n      }\n    })\n  ]\n};\n```\n\nSee the [theo documentation](https://github.com/salesforce-ux/theo) for more information about the Theo options format.\n\n## theo Initialization\n\nYou can perform any initialization for theo, like registering custom transforms or formatters using `registerTransform`, `registerValueTransform` or `registerFormat`, in your webpack configuration:\n\n```javascript\nimport theo from 'theo';\n\n// Do any theo initialization here\ntheo.registerValueTransform(\n  'animation/web/curve',\n  prop =\u003e prop.get('type') === 'animation-curve',\n  prop =\u003e 'cubic-bezier(' + prop.get('value').join(', ') + ')'\n);\n\nmodule.exports = {\n  ...\n  module: {\n    rules: [\n      {\n        test: /\\.json$/,\n        loader: \"theo-loader\"\n      }\n    ]\n  },\n\n  plugins: {\n    new webpack.LoaderOptionsPlugin({\n      options: {\n        theo: {\n          // Configure theo-loader here\n          ...\n        }\n      }\n    })\n  }\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautodesk%2Ftheo-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fautodesk%2Ftheo-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautodesk%2Ftheo-loader/lists"}