{"id":14990571,"url":"https://github.com/eagerpatch/navita","last_synced_at":"2025-04-07T05:09:35.853Z","repository":{"id":195558724,"uuid":"693150625","full_name":"eagerpatch/navita","owner":"eagerpatch","description":"Atomic CSS-in-JS with zero runtime","archived":false,"fork":false,"pushed_at":"2025-03-09T17:51:45.000Z","size":846,"stargazers_count":51,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T04:08:11.756Z","etag":null,"topics":["atomic","css","css-in-js","css-modules","emotion","linaria","nextjs","nextjs13","sass","scss","styled-components","stylex","swc","swc-plugin","typescript","vanilla-extract","vite","webpack"],"latest_commit_sha":null,"homepage":"https://navita.style","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/eagerpatch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2023-09-18T13:00:32.000Z","updated_at":"2025-03-09T17:48:14.000Z","dependencies_parsed_at":"2023-11-23T17:27:43.781Z","dependency_job_id":"693af844-4946-47ba-b75c-5c69d43672af","html_url":"https://github.com/eagerpatch/navita","commit_stats":{"total_commits":71,"total_committers":3,"mean_commits":"23.666666666666668","dds":"0.46478873239436624","last_synced_commit":"2f572a55e2a87e72fe36de127b762d6e3af2188f"},"previous_names":["eagerpatch/navita"],"tags_count":117,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eagerpatch%2Fnavita","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eagerpatch%2Fnavita/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eagerpatch%2Fnavita/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eagerpatch%2Fnavita/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eagerpatch","download_url":"https://codeload.github.com/eagerpatch/navita/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247098001,"owners_count":20883129,"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":["atomic","css","css-in-js","css-modules","emotion","linaria","nextjs","nextjs13","sass","scss","styled-components","stylex","swc","swc-plugin","typescript","vanilla-extract","vite","webpack"],"created_at":"2024-09-24T14:20:23.684Z","updated_at":"2025-04-07T05:09:35.825Z","avatar_url":"https://github.com/eagerpatch.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![Navita Logo](https://navita.style/navita.svg)\n\nNavita is a powerful CSS-in-JS library\nthat brings type-safe compile-time Atomic CSS-in-JS with zero runtime to your projects.\n\nIt allows you to easily style your components and apply themes without the need for any additional runtime dependencies.\n\nWith Navita, you can write clean and maintainable CSS in JavaScript, without sacrificing runtime performance.\n\n\n🔥 \u0026nbsp; All styles generated at build time — just like Sass, Less, etc.\n\n✨ \u0026nbsp; Minimal abstraction over standard CSS.\n\n🦄 \u0026nbsp; Works with any JS-based front-end framework — or even without one.\n\n🎨 \u0026nbsp; High-level theme system with support for simultaneous themes.\n\n💪 \u0026nbsp; Type-safe styles via [CSSType](https://github.com/frenic/csstype).\n\n🌳 \u0026nbsp; Co-locate your styles with your components — if you want to.\n\n🛠 \u0026nbsp; Integrations with popular bundlers such as Webpack, Vite, and Next.js.\n\n---\n🌐 [Check out the documentation site for setup guides, examples and API docs.](https://navita.style)\n\n---\n\n## Installation\n\nTo start using Navita in your project, simply follow these steps:\n\n### Install Navita using npm:\n\n```bash\nnpm install @navita/css --save\n```\n\nYou'll also need to install the Navita integration for your preferred bundler.\nNavita currently supports Webpack, Vite, and Next.js.\n\n### Choose the integration for your preferred bundler:\n#### If you are using Webpack, install the Webpack integration:\n\n```bash\nnpm install @navita/webpack-plugin mini-css-extract-plugin --save-dev\n```\n\nUpdate your `webpack.config.js` file to include both MiniCssExtractPlugin and NavitaPlugin:\n\n```javascript\nconst { NavitaPlugin } = require('@navita/webpack-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nmodule.exports = {\n  // Other webpack options,\n  plugins: [\n    new MiniCssExtractPlugin(),\n    new NavitaPlugin(),\n  ],\n};\n```\n\nRead more about the Webpack integration in the [Webpack documentation](https://navita.style/integrations/webpack).\n\n#### If you are using Vite, install the Vite integration:\n\n```bash\nnpm install @navita/vite-plugin --save-dev\n```\n\nAnd add it to your `vite.config.js` file:\n\n```typescript\nimport { defineConfig } from 'vite';\nimport { navita } from '@navita/vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    // Other plugins\n    navita(/* Additional options */)\n  ],\n});\n```\n\nRead more about the Vite integration in the [Vite documentation](https://navita.style/integrations/vite).\n\n##### If you are using Next.js, install the Next.js integration:\n\n🚀 \u0026nbsp; React Server Components support!\n\n```bash\nnpm install @navita/next-plugin --save-dev\n```\n\nAnd add it to your `next.config.js` file:\n\n```javascript\nconst { createNavitaStylePlugin } = require(\"@navita/next-plugin\");\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {};\n\nmodule.exports = createNavitaStylePlugin({\n  // Additional options\n})(nextConfig);\n```\n\nRead more about the Next.js integration in the [Next.js documentation](https://navita.style/integrations/next).\n\n## Usage\n\nThe main entry point for Navita is the `style` function.\nMake sure you read the reset of the documentation on\n\u003chttps://navita.style\u003e to learn more about the APIs.\n\n```typescript\nimport { style } from '@navita/css';\n\nconst container = style({\n  padding: '2rem',\n  background: 'hotpink',\n  color: 'white',\n});\n\ndocument.write(`\n  \u003cdiv class=\"${container}\"\u003e\n    Hello World!\n  \u003c/div\u003e\n`);\n```\n\nThat's it!\n\n💡 Only references to the classNames will be included in the bundle.\n\n\u003e Note: Navita doesn't require special file extensions for your styles.\nYou can co-locate your CSS styles with your components.\n\n## Documentation\n\nFor detailed documentation, examples, and usage guidelines,\nplease visit the official Navita website: \u003chttps://navita.style\u003e\n\n## Contributing\n\nWe welcome contributions from the community to make Navita even better!\n\n## Thanks\n* [Vanilla-Extract](https://vanilla-extract.style) and [Linaria](https://linaria.dev) for the inspiration and the great work on the CSS-in-JS ecosystem. \n* [Fela](https://fela.js.org) for the fantastic work on Atomic css-in-js.\n* [Eagerpatch](https://eagerpatch.com) for giving us the space to do interesting work.\n***\n\nMIT Licensed—A project by [Eagerpatch](https://eagerpatch.com).\\\nMade with ❤️ by [zn4rk](https://github.com/zn4rk) and contributors.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feagerpatch%2Fnavita","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feagerpatch%2Fnavita","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feagerpatch%2Fnavita/lists"}