{"id":14007131,"url":"https://github.com/stylify/packages","last_synced_at":"2025-04-12T21:22:44.153Z","repository":{"id":38006506,"uuid":"324384182","full_name":"stylify/packages","owner":"stylify","description":"💎 Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write 💎.","archived":false,"fork":false,"pushed_at":"2024-04-12T20:11:28.000Z","size":7712,"stargazers_count":428,"open_issues_count":28,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-04T07:02:26.532Z","etag":null,"topics":["astrobuild","atomic-css","css","css-framework","frontend","functional-css","javascript","nextjs","nodejs","nuxt","nuxt-module","nuxtjs","php","postcss","react","ssr","typescript","utility-classes","vue","webpack"],"latest_commit_sha":null,"homepage":"https://stylifycss.com","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/stylify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Machy8"]}},"created_at":"2020-12-25T15:11:45.000Z","updated_at":"2025-01-02T21:34:36.000Z","dependencies_parsed_at":"2024-01-16T15:47:51.251Z","dependency_job_id":"4b7e044c-2f17-4f0d-88bd-ac5c37b4df14","html_url":"https://github.com/stylify/packages","commit_stats":{"total_commits":575,"total_committers":5,"mean_commits":115.0,"dds":"0.013913043478260834","last_synced_commit":"90dfe3bd9af04130773a2f5b7add4800cd42a9b7"},"previous_names":[],"tags_count":60,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stylify%2Fpackages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stylify%2Fpackages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stylify%2Fpackages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stylify%2Fpackages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stylify","download_url":"https://codeload.github.com/stylify/packages/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248632535,"owners_count":21136707,"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":["astrobuild","atomic-css","css","css-framework","frontend","functional-css","javascript","nextjs","nodejs","nuxt","nuxt-module","nuxtjs","php","postcss","react","ssr","typescript","utility-classes","vue","webpack"],"created_at":"2024-08-10T10:01:50.807Z","updated_at":"2025-04-12T21:22:44.115Z","avatar_url":"https://github.com/stylify.png","language":"TypeScript","readme":"\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://stylifycss.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\u003cimg src=\"https://stylifycss.com/images/logo/horizontal.svg?v2\" height=\"100\" alt=\"Stylify logo\"\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://discord.gg/NuJsk5SMDz\"\u003e\u003cimg src=\"https://img.shields.io/badge/chat-on%20discord-7289da.svg?sanitize=true\" alt=\"Chat\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/stylify/packages/discussions\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/14016808/132510133-76bb66a9-951f-4411-9236-140cac7b7472.png\"\u003e\u003c/a\u003e\n\u003ca href=\"https://twitter.com/stylifycss\"\u003e\u003cimg alt=\"Twitter Follow\" src=\"https://img.shields.io/twitter/follow/stylifycss?style=social\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/stylify/packages\"\u003e\u003cimg alt=\"GitHub Org's stars\" src=\"https://img.shields.io/github/stars/stylify/packages?style=social\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/stylify/packages/blob/master/LICENSE\"\u003e\u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/stylify/packages\"\u003e\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"(https://github.com/stylify/packages/actions/workflows/tests.yaml\"\u003e\u003cimg alt=\"GitHub Workflow Status (branch)\" src=\"https://github.com/stylify/packages/actions/workflows/tests.yaml/badge.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://codecov.io/gh/stylify/packages\"\u003e\u003cimg src=\"https://codecov.io/gh/stylify/packages/branch/master/graph/badge.svg?token=ZJLKX877DF\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/stylify/packages/issues\"\u003e\u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/github/issues/stylify/packages\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/stylify/packages\"\u003e\u003cimg alt=\"GitHub commit activity\" src=\"https://img.shields.io/github/commit-activity/m/stylify/packages\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/stylify/packages/releases\"\u003e\u003cimg alt=\"GitHub release (latest by date)\" src=\"https://img.shields.io/github/v/release/stylify/packages\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/stylify/packages\"\u003e\u003cimg alt=\"GitHub contributors\" src=\"https://img.shields.io/github/contributors/stylify/packages\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## 💎 Introduction\n\nStylify is a library that uses CSS-like selectors to generate optimized utility-first CSS dynamically based on what you write.\u003cbr\u003e\nDon't study framework. Focus on coding.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/stylify/packages/master/stylify-intro-v2.gif\" alt=\"Stylify preview\"\u003e\n\u003c/p\u003e\n\n## ⚡ Why Stylify instead of CSS or inline styles?\nBecause of [fewer CSS headaches](https://stylifycss.com/docs/get-started/why-stylify-css#problems-stylify-css-tries-to-solve), [faster coding](https://stylifycss.com/docs/get-started/why-stylify-css#faster-coding) and [extremely optimized output](https://stylifycss.com/docs/get-started/why-stylify-css#output-optimization).\n\n## ✨ Features\n\n- 💎 Define [Variables](https://stylifycss.com/docs/stylify/compiler#variables), [Components](https://stylifycss.com/docs/stylify/compiler#components), [Custom selectors](https://stylifycss.com/docs/stylify/compiler#customselectors)\n- 💎 [Add custom macros](https://stylifycss.com/docs/stylify/compiler#macros) like ml:2\n- 💎 Variables can be injected into css as CSS variables\n- 💎 CSS [variables can differ for each screen](https://stylifycss.com/docs/stylify/compiler#variables)\n- 💎 Simplify coding with [helpers](https://stylifycss.com/docs/stylify/compiler#helpers) like `color:lighten(#000,10)`\n- 💎 Style any device with dynamic [screens](https://stylifycss.com/docs/stylify/compiler#screens)\n- 💎 You can mark areas for which CSS should not be\n- 💎 Split bundles for page/layout/component\n- 💎 Selectors are minified from long `.color:blue` to short `.a`\n- 💎 No purge needed. CSS is generated only when something is matched\n- 💎 Components \u0026 Custom selectors are attached to utilities. No duplicated `property:value`\n- 💎 Hooks can modify CSS or output for example wrap it in CSS layers\n- 💎 Mangled (hidden/unreadable) HTML classes in production (if mangled)\n- 💎 [Try it with frameworks](https://stylifycss.com/docs/integrations) like, Next.js, Astro. SolidJS, Qwik Symfony, Nette, Laravel\n- 💎 Works with bundlers like Webpack, Rollup, Vite.js\n- 💎 Generated CSS can be used within SCSS, Less, Stylus\n- 💎 CSS variables can be exported into external file and reused\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://stylifycss.com\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/14016808/132552680-ae877b45-5796-42df-b507-c0f6b9cf4706.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n## 🚀 Integrations\nStart using Stylify with your favorite tool in a minute.\n\n### JavaScript\n\u003ca href=\"https://stylifycss.com/docs/integrations/nextjs\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/nextjs-light.svg\" width=\"80\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/nuxtjs\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/nuxtjs.svg\" height=\"65\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/reactjs\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/react.png\" height=\"50\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/vuejs\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/vuejs.svg\" height=\"50\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/angular\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/angular.svg\" height=\"65\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/astro\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/astro-light.svg\" height=\"50\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/remix\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/remix.svg\" height=\"65\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/solidjs\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/solidjs.svg\" height=\"49\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/qwik\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/qwik.svg\" height=\"55\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/svelte\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/svelte.svg\" height=\"50\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/vitejs\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/vite.svg\" height=\"50\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/webpack\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/webpack.svg\" height=\"55\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/rollupjs\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/rollupjs.svg\" height=\"45\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/nodejs\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/nodejs.svg\" height=\"50\" alt=\"\"\u003e\u003c/a\u003e\n\n### PHP\n\u003ca href=\"https://stylifycss.com/docs/integrations/symfony\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/symfony.svg\" height=\"70\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/laravel\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/laravel.svg\" height=\"45\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/nette\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/nette.png\" height=\"50\" alt=\"\"\u003e\u003c/a\u003e\n\u003ca href=\"https://stylifycss.com/docs/integrations/cakephp\"\u003e\u003cimg src=\"https://stylifycss.com//images/brands/cakephp.png\" height=\"55\" alt=\"\"\u003e\u003c/a\u003e\n\n## 🔥 Prepared Copy\u0026Paste Headless Components\n\u003ca href=\"https://stylifycss.com/snippets/components\"\u003e\u003cimg src=\"https://stylifycss.com/images/snippets/components/og-image.jpg\"\u003e\u003c/a\u003e\n\n## 📦 Packages\n\n| Project               | Status                                                       | Description                                                                          |\n| --------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------|\n| [bundler]             | [![bundler-status]][bundler-package]                         | A flexible CSS bundler.                                                              |\n| [stylify]             | [![stylify-status]][stylify-package]                         | Core package. Generates CSS and minifies selectors.                                  |\n\n[bundler]: https://github.com/stylify/packages/tree/master/packages/bundler\n[bundler-status]: https://img.shields.io/npm/v/@stylify/bundler?color=%2301befe\u0026label=Version\u0026style=for-the-badge\n[bundler-package]: https://npmjs.com/package/@stylify/bundler\n\n[stylify]: https://github.com/stylify/packages/tree/master/packages/stylify\n[stylify-status]: https://img.shields.io/npm/v/@stylify/stylify?color=%2301befe\u0026label=Version\u0026style=for-the-badge\n[stylify-package]: https://npmjs.com/package/@stylify/stylify\n\n## Compatibility\n| Environment | Version                                                                                                                                                          | Note                                                                                                          |\n|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------|\n| Browser     | [ES5-compliant browsers](https://caniuse.com/?search=ES5), [Intersection Observer support](https://caniuse.com/?search=intersection%20observer) is required.     | Stylify doesn't need to be included in the browser. All CSS can be pregenerated on server or during a build.  |\n| Node        | \u003e= 18                                                                                                                                                            | In case Stylify will be used during an application build or in an SSR application.                            |\n\n## 💡 Examples, Changelog, Issues\n- Live examples and tutorials: [documentation](https://stylifycss.com/docs/get-started)\n- Changelog and release changes: [releases](https://github.com/stylify/packages/releases)\n- Have an idea? Found a bug? Feel free to create an [issue](https://github.com/stylify/packages/issues)\n\n## 🤟 Stay In Touch\n\n- Visit Stylify website [https://stylifycss.com](https://stylifycss.com).\n- Follow Stylify on [Twitter](https://twitter.com/stylify_dev).\n- Join Stylify community on [Discord](https://discord.gg/NuJsk5SMDz).\n\n## 👷 Contributing\nPlease make sure to read the [Contributing Guide](https://github.com/stylify/packages/blob/master/.github/CODE_OF_CONDUCT.md) before making a pull request.\n\n## 📝 License\n\n[MIT](https://opensource.org/licenses/MIT)\n\nCopyright (c) 2021-present, Vladimír Macháček\n","funding_links":["https://github.com/sponsors/Machy8"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstylify%2Fpackages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstylify%2Fpackages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstylify%2Fpackages/lists"}