{"id":20148903,"url":"https://github.com/chore-dev/sass2ts","last_synced_at":"2026-02-07T04:31:25.343Z","repository":{"id":242053245,"uuid":"808553425","full_name":"chore-dev/sass2ts","owner":"chore-dev","description":"Bridge Sass \u0026 JS! Easily exporting Sass variables and parser them to typed typescript variables for better DX.","archived":false,"fork":false,"pushed_at":"2024-06-18T09:28:02.000Z","size":303,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-31T07:38:43.102Z","etag":null,"topics":["css","javascript","sass","scss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chore-dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2024-05-31T10:01:02.000Z","updated_at":"2024-06-18T09:30:20.000Z","dependencies_parsed_at":"2024-06-11T10:44:14.808Z","dependency_job_id":"d39c2120-7ae8-4c72-88f7-bbbc92ee1f47","html_url":"https://github.com/chore-dev/sass2ts","commit_stats":null,"previous_names":["chore-dev/sass2js","chore-dev/sass2ts"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/chore-dev/sass2ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chore-dev%2Fsass2ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chore-dev%2Fsass2ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chore-dev%2Fsass2ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chore-dev%2Fsass2ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chore-dev","download_url":"https://codeload.github.com/chore-dev/sass2ts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chore-dev%2Fsass2ts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29186736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T03:35:06.566Z","status":"ssl_error","status_checked_at":"2026-02-07T03:34:57.604Z","response_time":63,"last_error":"SSL_read: 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":["css","javascript","sass","scss","typescript"],"created_at":"2024-11-13T22:40:00.622Z","updated_at":"2026-02-07T04:31:25.327Z","avatar_url":"https://github.com/chore-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sass2Ts\n\nBridge Sass \u0026 JS! Easily exporting Sass variables and parser them to typed typescript variables for\nbetter DX.\n\n## Table of content\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Export values in Sass](#export-values-in-sass)\n  - [Generate types](#generate-types)\n  - [Use values in TypeScript](#use-values-in-typescript)\n- [sass2ts.config.js](#sass2tsconfigjs)\n- [Options](#options)\n\n## Installation\n\nInstall the package as a dependency:\n\n```shell\n# NPM\n$ npm install -D @chore-dev/sass2ts\n\n# PNPM\n$ pnpm add -D @chore-dev/sass2ts\n\n# Yarn\n$ yarn add -D @chore-dev/sass2ts\n```\n\n## Usage\n\n### Export values in Sass\n\nAccording to [Sass Doc](https://sass-lang.com/documentation/values/), there are total 8 data types\nin Sass:\n\nNo need to stringify before exporting:\n\n- Numbers\n- Strings\n- Colors\n- boolean\n\nNeed to stringify before exporting:\n\n- List of values\n- null\n- Maps\n- Function references\n\nNotice that error will be thrown if you try to export a data type that need to be stringify\n\nBelow is an example of how to export values in Sass:\n\n```Scss\n// variables.module.scss\n\n@use 'sass:meta';\n@use '@chore-dev/sass2ts/stringifier' as sass2ts;\n\n@function function-example() {\n  @return 'this is a example function';\n}\n\n:export {\n  number-example                  : 1;\n  number-quoted-example           : '1';\n  number-with-unit-example        : 1px;\n  number-with-unit-quoted-example : '1px';\n  string-example                  : i-go-to-school-by-bus;\n  string-quoted-example           : 'I go to school by bus';\n  color-hex-example               : #000000;\n  color-hex-quoted-example        : '#000000';\n  color-hsl-example               : hsl(0, 0%, 0%);\n  color-hsl-quoted-example        : 'hsl(0, 0%, 0%)';\n  color-rgb-example               : rgb(0, 0, 0);\n  color-rgb-quoted-example        : 'rgb(0, 0, 0)';\n  boolean-true-example            : true;\n  boolean-true-quoted-example     : 'true';\n  boolean-false-example           : false;\n  boolean-false-quoted-example    : 'false';\n  list-example                    : sass2ts.stringifier((1, i-go-to-school-by-bus, #000000, true, (1, 2, 3, 4, 5), null, (foo: bar), meta.get-function(function-example)));\n  null-example                    : sass2ts.stringifier(null);\n  map-example                     : sass2ts.stringifier((\n    numebr: 1,\n    string: i-go-to-school-by-bus,\n    color: #000000,\n    boolean: true,\n    list: (1, 2, 3, 4, 5),\n    null: null,\n    map: (foo: bar),\n    function-example : meta.get-function(function-example)\n  ));\n  function-example                : sass2ts.stringifier(meta.get-function(function-example));\n}\n```\n\n### Generate types\n\n1. Add the following script to your `package.json` file\n\n\u003e You may skip this step if you are using PNPM or Yarn\n\n```json\n{\n  ...\n  \"scripts\": {\n    // ...existing scripts\n    \"sass2ts\": \"sass2ts\"\n  },\n  ...\n}\n```\n\n2. Create a config file at the project root directory named `sass2ts.config.js`\n\n\u003e NOTE: Read the [sass2ts.config.js](#sass2tsconfigjs) section for more information\n\n```javascript\n/** @type {import(\"@chore-dev/sass2ts/parser/types\").Sass2TsConfig} */\n\nconst config = [\n  {\n    implementGetter: true,\n    input: './path/to/variables.module.scss',\n    output: 'fooBar', // No extension needed\n    outputDir: './path/of/output/dir',\n    preserveString: false,\n    rootName: 'FooBar'\n  }\n];\n```\n\n- If \"type\": \"module\" in package.json\n\n```javascript\nexport default config;\n```\n\n- If no \"type\": \"module\" in package.json\n\n```javascript\nmodule.exports = config;\n```\n\n3. Run the following command to start the Sass2Ts:\n\n\u003e NOTE: Read the [Options](#options) section for more information\n\n```shell\n# NPM\n$ npm run sass2ts [\u003coptions\u003e]\n\n# PNPM\n$ pnpm sass2ts [\u003coptions\u003e]\nor # If you have added the script to your `package.json` file\n$ pnpm run sass2ts [\u003coptions\u003e]\n\n# Yarn\n$ yarn sass2ts [\u003coptions\u003e]\nor # If you have added the script to your `package.json` file\n$ yarn run sass2ts [\u003coptions\u003e]\n```\n\n### Use values in TypeScript\n\n```typescript\n// somewhere.ts\n\nimport { getFooBar } from './path/of/output/dir/fooBar';\n\nconst fooBar = getFooBar();\n\n// Do something with fooBar...\n```\n\n## sass2ts.config.js\n\nThe following are options that can be used in the `sass2ts.config.js` file:\n\n| Option            | Type      | Optional |        Default         | Description                                                                       |\n| ----------------- | --------- | :------: | :--------------------: | --------------------------------------------------------------------------------- |\n| `implementGetter` | `boolean` |    Y     |          true          | Include a get function in the output file to direct access the exported variables |\n| `input`           | `string`  |          |                        | The source sass export file                                                       |\n| `output`          | `string`  |    Y     | Same as the input file | The name of the output file without extension                                     |\n| `outputDir`       | `string`  |          |                        | The output directory of the output file                                           |\n| `preserveString`  | `boolean` |    Y     |         false          | Should Sass2Ts try its best to convert values to the type it should be            |\n| `rootName`        | `string`  |    Y     |    `SassVariables`     | The name of the exporting interface                                               |\n\n## Options\n\nThe following are options that can be used in the command line:\n\n| Option                  | Alias             | Description                                                                                            | Example                                |\n| ----------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | -------------------------------------- |\n| `--config path::string` | `-C path::string` | Use a config file which is not located at the project root directory or not named as sass2ts.config.ts | `--config ./foo/bar/sass2ts.config.js` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchore-dev%2Fsass2ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchore-dev%2Fsass2ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchore-dev%2Fsass2ts/lists"}