{"id":13726975,"url":"https://github.com/sultan99/stylin","last_synced_at":"2025-05-15T12:04:44.888Z","repository":{"id":52297492,"uuid":"338078634","full_name":"sultan99/stylin","owner":"sultan99","description":"A built-time  CSS library for styling React components.","archived":false,"fork":false,"pushed_at":"2025-01-30T07:10:52.000Z","size":3912,"stargazers_count":181,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-07T01:58:02.294Z","etag":null,"topics":["annotations","css-library","css-modules","loader","react-style","typescript"],"latest_commit_sha":null,"homepage":"","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/sultan99.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":"2021-02-11T16:05:57.000Z","updated_at":"2025-03-17T06:35:32.000Z","dependencies_parsed_at":"2024-04-19T16:41:15.207Z","dependency_job_id":"9e698091-012b-4709-8120-6a1c24215fc6","html_url":"https://github.com/sultan99/stylin","commit_stats":{"total_commits":39,"total_committers":1,"mean_commits":39.0,"dds":0.0,"last_synced_commit":"fdcf34e12668cb06d2b3990a6dc952b32594ee41"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sultan99%2Fstylin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sultan99%2Fstylin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sultan99%2Fstylin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sultan99%2Fstylin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sultan99","download_url":"https://codeload.github.com/sultan99/stylin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253481058,"owners_count":21915259,"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":["annotations","css-library","css-modules","loader","react-style","typescript"],"created_at":"2024-08-03T01:03:33.968Z","updated_at":"2025-05-15T12:04:39.868Z","avatar_url":"https://github.com/sultan99.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./be-easy.png\" width=\"300px\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n# Stylin\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40stylin%2Fstyle?label=gzip%20size\u0026color=green)\n![NPM Downloads](https://img.shields.io/npm/d18m/%40stylin%2Fstyle)\n![GitHub License](https://img.shields.io/github/license/sultan99/stylin)\n\nStylin is a build-time CSS library that offers an elegant way to style React components. It extends CSS Modules and adds some missing features like dynamic variables or auto-typing.\n\nThere is no faster way to create styled \u0026 typed React component.\n\n```jsx\nimport {Title} from './styles.scss'\n// crazy part, importing 👆 component from styles\n\n\n\u003cTitle color=\"tomato\" size=\"small\"\u003e\n  Hello world!\n\u003c/Title\u003e\n```\n\n#### 💅 `style.scss`\n```scss\n/**\n  @tag: h1\n  @component: Title\n  size: small | medium | large\n  color: #38383d --color\n*/\n.title {\n  --color: #38383d;\n  color: var(--color);\n  font-size: 18px;\n  \n  \u0026.small {\n    font-size: 14px;\n    margin: 2px 0;\n  }\n  \u0026.medium {\n    font-size: 18px;\n    margin: 4px 0;\n  }\n  \u0026.large {\n    font-size: 20px;\n    margin: 6px 0;\n  }\n}\n```\n\u003cbr/\u003e\n\n#### 🧙‍♂️ `Type auto-generation`\n\u003cimg src=\"./packages/ts-loader/typing-support.gif\"/\u003e\n\u003cbr/\u003e\n\nAll the magic is behind the style annotations, which you can find in the comment section. It is like JSDoc, but for CSS. However, it is not a CSSDoc. It is more about mapping styles with component properties. \n\nWith the annotations you can:\n - map styles with components\n - generate TypeScript types\n - generate documents or even stories for StoryBook\n\nFor all these, you will need a specific package, plugin, or webpack loader.\n\u003cbr/\u003e\n\n## Demo\n✨ [Online demo (webpack)](https://codesandbox.io/s/github/sultan99/cards/tree/main)\u003cbr/\u003e\n✨ [Online demo (vite)](https://codesandbox.io/p/github/sultan99/cards/vite)\u003cbr/\u003e\n✨ [Github repo](https://github.com/sultan99/cards)\n\u003cbr/\u003e\n\n## Get started\nThis library can be used with either webpack or vite.\n\n### 📦 Webpack\nThe TypeScript loader `@stylin/ts-loader` is optional.\n\n```sh\nnpm install @stylin/style\nnpm install --save-dev @stylin/msa-loader @stylin/ts-loader\n```\n\nThen you should add the loader(s) in your webpack configs files:\n - [MSA loader](./packages/msa-loader/README.md)\n - [TypeScript loader (optional)](./packages/ts-loader/README.md)\n\u003cbr/\u003e\n\nCheck out the 📺[video](https://www.youtube.com/watch?v=XF4vBx-ImzE) for more information on how to install and set up.\n\n[\u003cimg src=\"./install-setup.gif\"/\u003e](https://www.youtube.com/watch?v=XF4vBx-ImzE)\n\u003cbr/\u003e\n\n\n### ⚡ Vite\n```sh\nnpm install @stylin/style\nnpm install --save-dev @stylin/vite-plugin\n```\n\nRegister your plugin in `vite.config.ts`:\n\n```ts\nimport stylin from '@stylin/vite-plugin'\n\nexport default defineConfig({\n  plugins: [stylin(), otherPlugin()]\n})\n```\n\nFor more details, please refer to the [installation guide](./packages/vite-plugin/README.md).\n\n\n## Diving deeper\n\nDon't be scared to learn new stuff, it is deadly simple. Only three things to remember:\n1) @tag: html tag\n2) @component: name of your component\n3) Mapping object:\n\n```\ncomponentPropertyName {\n  propertyValue: css-class-name\n  anotherPropertyValue: another-css\n}\n```\n\nFor example:\n```scss\n/**\n  @tag: button\n  @component: SexyButton\n  type {\n    primary: btn-primary\n    secondary: bnt-secondary\n    link: btn-link\n  }\n*/\n.sexy-button {\n  \u0026.btn-primary { \n    /* some styles */\n  }\n  \u0026.btn-secondary { \n    /* some styles */\n  }\n  \u0026.btn-link { \n    /* some styles \n  */}\n}\n```\n\n```jsx\n\u003cSexyButton type='primary'\u003e\n  Love me\n\u003c/SexyButton\u003e\n\n/* HTML output:\n\u003cbutton class=\"sexy-button btn-primary\"\u003e //in fact, it will have hashed css class names\n  Love me\n\u003c/button\u003e\n*/\n```\n\n\u003cimg src=\"./packages/style/msa-demo.gif\"/\u003e\n\u003cbr/\u003e\n\nDone! That is all about to know! 🎉🥳\n\nNow you are the PRO 😎. Update your resume with a new skill!\n\u003cbr/\u003e\n\n## Shortening\nHere are [some tips](./packages/style/README.md) to make life easier. \n\nIf your component property values are similar to CSS class names, like in the example below:\n\n```\ntype {\n  primary: primary\n  secondary: secondary\n  link: link\n}\n```\n\nIt can be shorten this way:\n\n```\ntype: primary | secondary | link\n```\n\nSweet! what is next? Read more about:\n - [Shortening, variables, restyling](./packages/style/README.md)\n - [TypeScript](./packages/ts-loader/README.md)\n\u003cbr/\u003e\n\n## Benchmark\nExplore performance comparison between [Styled Components](https://styled-components.com/) and Stylin libraries [here](https://github.com/sultan99/stylin/tree/main/packages/benchmark). This section provides detailed insights and results from our tests, highlighting the efficiency and speed of both libraries.\n\n\n## Development plans\n1) Support Next.js.\n2) Support React-like libraries (preact etc.).\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## Feedback\nAny questions or suggestions?\n\nYou are welcome to discuss it on:\n\n[![Gitter](https://badges.gitter.im/react-on-lambda/community.svg)](https://gitter.im/stylin-js/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](http://twitter.com/share?text=There%20is%20no%20faster%20way%20to%20create%20styled%20and%20typed%20React%20components:%20\u0026url=https://sultan99.github.io/stylin\u0026hashtags=css,react,javascript)\n\n\n\n\n\n","funding_links":[],"categories":["TypeScript","CSS in JS"],"sub_categories":["Editor's Draft :black_nib:"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsultan99%2Fstylin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsultan99%2Fstylin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsultan99%2Fstylin/lists"}