{"id":15392383,"url":"https://github.com/activeguild/css-to-vanilla-extract","last_synced_at":"2025-04-15T01:20:47.480Z","repository":{"id":37102031,"uuid":"487450323","full_name":"activeguild/css-to-vanilla-extract","owner":"activeguild","description":"Generate vanilla-extract typescript file from the CSS (SCSS/SASS) file.","archived":false,"fork":false,"pushed_at":"2023-05-21T14:50:19.000Z","size":1435,"stargazers_count":69,"open_issues_count":4,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-05T00:35:01.859Z","etag":null,"topics":["convert","css","generate","sass","scss","typescript","vanilla-extract"],"latest_commit_sha":null,"homepage":"https://css-to-vanilla-extract.netlify.app","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/activeguild.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}},"created_at":"2022-05-01T05:06:41.000Z","updated_at":"2025-01-09T16:12:25.000Z","dependencies_parsed_at":"2024-10-18T23:09:54.879Z","dependency_job_id":null,"html_url":"https://github.com/activeguild/css-to-vanilla-extract","commit_stats":{"total_commits":287,"total_committers":3,"mean_commits":95.66666666666667,"dds":"0.013937282229965153","last_synced_commit":"b4241e1dcac06e506d9b9534e5c7b793a3848540"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Fcss-to-vanilla-extract","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Fcss-to-vanilla-extract/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Fcss-to-vanilla-extract/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Fcss-to-vanilla-extract/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/activeguild","download_url":"https://codeload.github.com/activeguild/css-to-vanilla-extract/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248198977,"owners_count":21063641,"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":["convert","css","generate","sass","scss","typescript","vanilla-extract"],"created_at":"2024-10-01T15:14:42.845Z","updated_at":"2025-04-15T01:20:47.462Z","avatar_url":"https://github.com/activeguild.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eCSS-to-vanilla-extract ⚡ Welcome 😀\u003c/h1\u003e\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://github.com/actions/setup-node\"\u003e\u003cimg alt=\"GitHub Actions status\" src=\"https://github.com/activeguild/css-to-vanilla-extract/workflows/automatic%20release/badge.svg\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nGenerate [vanilla-extract](https://vanilla-extract.style/) typescript file from the CSS (SCSS/SASS) file.\n\n[playground](https://css-to-vanilla-extract.netlify.app/)\n\nThe following APIs are covered.\n\n- [styling-api/#style](https://vanilla-extract.style/documentation/styling-api/#style)\n- [styling-api/#globalstyle](https://vanilla-extract.style/documentation/styling-api/#globalstyle)\n- [styling-api/#globalfontface](https://vanilla-extract.style/documentation/styling-api/#globalfontface)\n- [styling-api/#globalkeyframes](https://vanilla-extract.style/documentation/styling-api/#globalkeyframes)\n\n## Motivation\n\n- Generate style definitions received from designers without any errors.\n- Cost-effective migration of existing projects using css modules.\n\n## Install\n\n```bash\nnpm i -D css-to-vanilla-extract\n```\n\n## Usage\n\nOnce installed, you can run it to convert css (scss/sass) files to vanilla-extract ts files.\nFor example:\n\n```\nnpx css-to-vanilla-extract sample/test.css\n```\n\n\u003cstrong\u003eOutput:\u003c/strong\u003esample/test.css.ts\n\n## Sample\n\n### Input\n\n```css\n.foo {\n  background-color: blue;\n}\n@media (min-width: 1200px) {\n  input {\n    font-size: 5rem;\n  }\n  .foo {\n    font-size: 5rem;\n    color: red;\n  }\n  .bar {\n    font-size: 10rem;\n  }\n}\n@font-face {\n  font-family: \"Roboto\";\n  src: url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100\u0026display=swap\");\n}\n\n@keyframes slidein {\n  from {\n    transform: translateX(0%);\n  }\n\n  to {\n    transform: translateX(100%);\n  }\n}\n\n.fizz .buzz {\n  background-color: blue;\n}\n\n.fizz .buzz {\n  font-size: 5rem;\n}\n```\n\n### Output\n\n```ts\nimport {\n  globalFontFace,\n  globalKeyframes,\n  globalStyle,\n  style,\n} from \"@vanilla-extract/css\";\n\nglobalFontFace(\"Roboto\", {\n  src: \"url(https://fonts.googleapis.com/css2?family=Roboto:wght@100\u0026display=swap)\",\n});\n\nglobalKeyframes(\"slidein\", {\n  from: {\n    transform: \"translateX(0%)\",\n  },\n  to: {\n    transform: \"translateX(100%)\",\n  },\n});\n\nexport const fizz = style({});\n\nexport const bar = style({\n  \"@media\": {\n    \"(min-width: 1200px)\": {\n      fontSize: \"10rem\",\n    },\n  },\n});\n\nexport const buzz = style({\n  selectors: {\n    [`${fizz} \u0026`]: {\n      backgroundColor: \"blue\",\n      fontSize: \"5rem\",\n    },\n  },\n});\n\nexport const foo = style({\n  backgroundColor: \"blue\",\n  \"@media\": {\n    \"(min-width: 1200px)\": {\n      color: \"red\",\n      fontSize: \"5rem\",\n    },\n  },\n});\n\nglobalStyle(\"input\", {\n  \"@media\": {\n    \"(min-width: 1200px)\": {\n      fontSize: \"5rem\",\n    },\n  },\n});\n```\n\n## Principles of conduct\n\nPlease see [the principles of conduct](https://github.com/activeguild/css-to-vanilla-extract/blob/master/.github/CONTRIBUTING.md) when building a site.\n\n## License\n\nThis library is licensed under the [MIT license](https://github.com/activeguild/css-to-vanilla-extract/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factiveguild%2Fcss-to-vanilla-extract","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factiveguild%2Fcss-to-vanilla-extract","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factiveguild%2Fcss-to-vanilla-extract/lists"}