{"id":13469543,"url":"https://github.com/typestyle/typestyle","last_synced_at":"2025-04-23T20:48:22.491Z","repository":{"id":44894417,"uuid":"70857304","full_name":"typestyle/typestyle","owner":"typestyle","description":"Making CSS Typesafe 🌹","archived":false,"fork":false,"pushed_at":"2023-06-24T04:03:06.000Z","size":780,"stargazers_count":3069,"open_issues_count":25,"forks_count":87,"subscribers_count":31,"default_branch":"master","last_synced_at":"2024-10-29T15:19:09.269Z","etag":null,"topics":["css","css-in-js","typescript","typestyle"],"latest_commit_sha":null,"homepage":"https://typestyle.github.io","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/typestyle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2016-10-13T23:50:52.000Z","updated_at":"2024-10-29T04:34:31.000Z","dependencies_parsed_at":"2024-05-30T12:10:56.597Z","dependency_job_id":null,"html_url":"https://github.com/typestyle/typestyle","commit_stats":{"total_commits":467,"total_committers":38,"mean_commits":"12.289473684210526","dds":0.537473233404711,"last_synced_commit":"d68f9c65f2bed357f5efeaf53f614f42e3bd03bc"},"previous_names":[],"tags_count":126,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typestyle%2Ftypestyle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typestyle%2Ftypestyle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typestyle%2Ftypestyle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typestyle%2Ftypestyle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typestyle","download_url":"https://codeload.github.com/typestyle/typestyle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250513682,"owners_count":21443204,"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","css-in-js","typescript","typestyle"],"created_at":"2024-07-31T15:01:44.178Z","updated_at":"2025-04-23T20:48:22.465Z","avatar_url":"https://github.com/typestyle.png","language":"TypeScript","readme":"# TypeStyle\n\n[![Join the chat at  gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/typestyle/general)\n\n\u003e Making CSS type safe.\n\n[![Build Status][travis-image]][travis-url]\n[![NPM version][npm-image]][npm-url]\n[![Downloads](https://img.shields.io/npm/dm/typestyle.svg)](https://www.npmjs.com/package/typestyle)\n[![Minzipped Size](https://img.shields.io/bundlephobia/minzip/typestyle)](https://bundlephobia.com/package/typestyle)\n\nWriting CSS with TypeStyle will be just as fluent as writing JavaScript with TypeScript.\n\n![](https://raw.githubusercontent.com/typestyle/typestyle.github.io/source/public/images/autocomplete.gif)\n\nThere are quite a few css in js frameworks out there. This one is different:\n\n- Provides great TypeScript developer experience.\n- No custom AST transform or module loader support needed.\n- Works with any framework (react, angular2, [cyclejs](https://twitter.com/waynemaurer/status/788483714196078593), whatever, doesn't matter).\n- Zero config. Just use.\n- *super* **small**\n\n\u003e This project is powered by github 🌟s ^ go ahead and [star it please](https://github.com/typestyle/typestyle/stargazers).\n\nCheckout [the awesome list of reviews 🌹][reviews].\n\n## Overview\n\n* [Quickstart](#quickstart)\n* [Guide: Pseudo Classes, Animations, Media Queries, Server side rendering](#guide)\n* [Why](#why)\n\n## Quickstart\n\nUse it like you would use CSS modules or CSS in general with webpack etc, but this time you get to use TypeScript / JavaScript!\n\n**Install**\n`npm install typestyle --save`\n\n**Use**\n```tsx\n/** Import */\nimport {style} from \"typestyle\";\n\n/** convert a style object to a CSS class name */\nconst className = style({color: 'red'});\n\n/** Use the class name in a framework of choice */\n//  e.g. React\nconst MyButton =\n  ({onClick,children})\n    =\u003e \u003cbutton className={className} onClick={onClick}\u003e\n        {children}\n      \u003c/button\u003e\n// or Angular2\n@Component({\n  selector: 'my-component',\n  template: `\u003cdiv class=\"${className}\"\u003eTada\u003c/div\u003e`\n})\nexport class MyComponent {}\n```\n\n## Guide\nWe really really want to make CSS maintainable and simple. So we even wrote a free and open source book, covering the super simple core API, a handful of utility styles in [`csx`](https://github.com/typestyle/csx) and tons of other goodness 🌹. *[Jump to the guide][book]*\n\n[![](https://raw.githubusercontent.com/typestyle/typestyle.github.io/source/public/images/book/cover.png)][book]\n\n\n## Video Course\nThe guide contains everything you need to know. But if you prefer to watch video [we have a free course up on egghead][course].\n\n[![](https://raw.githubusercontent.com/typestyle/typestyle.github.io/source/public/images/course.png)][course]\n\n\n## Why\nYou are probably here cause you are unhappy with your current workflow. So why not just jump to the [guide][book] and give it a go. If you [still need reasons we have quite a few][why].\n\n[free-style]:https://github.com/blakeembrey/free-style\n[travis-image]:https://travis-ci.org/typestyle/typestyle.svg?branch=master\n[travis-url]:https://travis-ci.org/typestyle/typestyle\n[npm-image]:https://img.shields.io/npm/v/typestyle.svg?style=flat\n[npm-url]:https://npmjs.org/package/typestyle\n[types.ts]:https://github.com/typestyle/typestyle/blob/master/src/types.ts\n[csx]:https://github.com/typestyle/typestyle#csx\n[book]:https://typestyle.github.io\n[course]:https://egghead.io/courses/maintainable-css-using-typestyle\n[why]:https://typestyle.github.io/#/why\n[reviews]:https://typestyle.github.io/#/reviews\n","funding_links":[],"categories":["TypeScript","Table of Contents","css","typescript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypestyle%2Ftypestyle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftypestyle%2Ftypestyle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypestyle%2Ftypestyle/lists"}