{"id":15011113,"url":"https://github.com/prosazhin/mixin-dictionary","last_synced_at":"2026-03-04T10:02:22.880Z","repository":{"id":233676697,"uuid":"714278759","full_name":"prosazhin/mixin-dictionary","owner":"prosazhin","description":"Creating mixins from design tokens for LESS and SCSS.","archived":false,"fork":false,"pushed_at":"2026-02-26T20:35:36.000Z","size":227,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-27T01:59:16.279Z","etag":null,"topics":["build-system","build-tool","css","design","design-system","design-tokens","design-tool","dictionary","less","mixin","scss","style","system","tokens","tool"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/mixin-dictionary","language":"JavaScript","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/prosazhin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2023-11-04T12:52:19.000Z","updated_at":"2026-02-26T20:35:41.000Z","dependencies_parsed_at":"2024-04-17T04:37:48.304Z","dependency_job_id":"9f7be8f5-1421-4d22-a4b7-7e1d80018f9a","html_url":"https://github.com/prosazhin/mixin-dictionary","commit_stats":null,"previous_names":["prosazhin/design-token-converter-with-mixins","prosazhin/mixin-dictionary"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/prosazhin/mixin-dictionary","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prosazhin%2Fmixin-dictionary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prosazhin%2Fmixin-dictionary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prosazhin%2Fmixin-dictionary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prosazhin%2Fmixin-dictionary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prosazhin","download_url":"https://codeload.github.com/prosazhin/mixin-dictionary/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prosazhin%2Fmixin-dictionary/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30078307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T08:01:56.766Z","status":"ssl_error","status_checked_at":"2026-03-04T08:00:42.919Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["build-system","build-tool","css","design","design-system","design-tokens","design-tool","dictionary","less","mixin","scss","style","system","tokens","tool"],"created_at":"2024-09-24T19:38:58.215Z","updated_at":"2026-03-04T10:02:17.872Z","avatar_url":"https://github.com/prosazhin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mixin Dictionary\n\nMixin Dictionary is a package based on [Style Dictionary](https://github.com/amzn/style-dictionary) that allows creating mixins from design tokens for LESS and SCSS.\n\n## Installation\n\n```bash\n$ npm install mixin-dictionary --save-dev\n# or\n$ yarn add mixin-dictionary --dev\n```\n\n## Usage\n\n```bash\n$ mixin-dictionary\n```\n\n| Flag              | Short Flag | Description                                      |\n| ----------------- | ---------- | ------------------------------------------------ |\n| --config \\[path\\] | -c         | Set the config file to use. Must be a .json file |\n\n## CSS\n\nAt the moment, CSS does not yet have the ability to use mixins.\n\n## Example\n\nAs an example of usage, you can look at the [pbstyles](https://github.com/prosazhin/pbstyles) style library.\n\n### config.json\n\n```json\n{\n  \"platforms\": [\"css\", \"less\", \"scss\"],\n  \"source\": [\"tokens/**/*.json\"],\n  \"output\": \"./styles\",\n  \"mediaAliases\": [\"screen\", \"breakpoint\"],\n  \"keyframesAliases\": [\"keyframes\"]\n}\n```\n\n| Property         | Type   | Description                                                                                                                                                          |\n| :--------------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| platforms        | Array  | Sets of platform files to be built. By default is \"[\\\"css\\\", \\\"less\\\", \\\"scss\\\"]\".                                                                                   |\n| source           | Array  | An array of file path [globs](https://github.com/isaacs/node-glob) to design token files. Exactly like [Style Dictionary](https://github.com/amzn/style-dictionary). |\n| output           | String | Base path to build the files, must end with a trailing slash. By default is \"./styles\".                                                                              |\n| mediaAliases     | Array  | Aliases for media queries category. By default is \"[\\\"screen\\\", \\\"breakpoint\\\"]\".                                                                                    |\n| keyframesAliases | Array  | Aliases for keyframes animations category. By default is \"[\\\"keyframes\\\"]\".                                                                                          |\n\n### Example of a mixin\n\n```json\n{\n  \"font\": {\n    \"h64\": {\n      \"font-size\": {\n        \"value\": \"64px\",\n        \"mixin\": \"h64\"\n      },\n      \"line-height\": {\n        \"value\": \"1.25\",\n        \"mixin\": \"h64\"\n      },\n      \"font-weight\": {\n        \"value\": \"700\",\n        \"mixin\": \"h64\"\n      }\n    }\n  }\n}\n```\n\n#### SCSS\n\n```scss\n$font-h64-font-size: 64px;\n$font-h64-line-height: 1.25;\n$font-h64-font-weight: 700;\n\n@mixin h64 {\n  font-size: $font-h64-font-size;\n  line-height: $font-h64-line-height;\n  font-weight: $font-h64-font-weight;\n}\n```\n\n#### LESS\n\n```less\n@font-h64-font-size: 64px;\n@font-h64-line-height: 1.25;\n@font-h64-font-weight: 700;\n\n.h64() {\n  font-size: @font-h64-font-size;\n  line-height: @font-h64-line-height;\n  font-weight: @font-h64-font-weight;\n}\n```\n\n### Example of a keyframes mixin\n\n```json\n{\n  \"keyframes\": {\n    \"fade\": {\n      \"from\": {\n        \"value\": \"opacity: 0;\",\n        \"mixin\": \"fade\"\n      },\n      \"to\": {\n        \"value\": \"opacity: 1;\",\n        \"mixin\": \"fade\"\n      }\n    }\n  }\n}\n```\n\n#### SCSS\n\n```scss\n$keyframes-fade-from: opacity: 0;\n$keyframes-fade-to: opacity: 1;\n\n@mixin fade {\n  @include keyframes(fade) {\n    from { #{$keyframes-fade-from} }\n    to { #{$keyframes-fade-to} }\n  }\n}\n```\n\n#### LESS\n\n```less\n@keyframes-fade-from: opacity: 0;\n@keyframes-fade-to: opacity: 1;\n\n.fade() {\n  .keyframes(fade, {\n    from { @keyframes-fade-from; }\n    to { @keyframes-fade-to; }\n  });\n}\n```\n\n### Example of a media query mixin\n\n```json\n{\n  \"screen\": {\n    \"lg\": {\n      \"max\": {\n        \"value\": \"1440px\",\n        \"mixin\": \"lg\"\n      },\n      \"min\": {\n        \"value\": \"921px\",\n        \"mixin\": \"lg\"\n      }\n    }\n  }\n}\n```\n\n#### SCSS\n\n```scss\n$screen-lg-max: 1440px;\n$screen-lg-min: 921px;\n\n@mixin lg {\n  @media all and (max-width: $screen-lg-max) and (min-width: $screen-lg-min) {\n    @content;\n  }\n}\n```\n\n#### LESS\n\n```less\n@screen-lg-max: 1440px;\n@screen-lg-min: 921px;\n\n.lg(@content) {\n  @media all and (max-width: @screen-lg-max) and (min-width: @screen-lg-min) {\n    @content;\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprosazhin%2Fmixin-dictionary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprosazhin%2Fmixin-dictionary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprosazhin%2Fmixin-dictionary/lists"}