{"id":51099030,"url":"https://github.com/efureev/unocss-preset-granular","last_synced_at":"2026-06-24T09:02:33.515Z","repository":{"id":352521752,"uuid":"1215357062","full_name":"efureev/unocss-preset-granular","owner":"efureev","description":"Universal UnoCSS preset that aggregates component styles, themes and safelist from any number of GranularProvider packages. Framework-agnostic, tree-shake friendly","archived":false,"fork":false,"pushed_at":"2026-05-05T13:36:36.000Z","size":522,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-05T15:34:11.856Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/efureev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-19T20:08:09.000Z","updated_at":"2026-05-05T13:37:07.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/efureev/unocss-preset-granular","commit_stats":null,"previous_names":["efureev/unocss-preset-granular"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/efureev/unocss-preset-granular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/efureev%2Funocss-preset-granular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/efureev%2Funocss-preset-granular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/efureev%2Funocss-preset-granular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/efureev%2Funocss-preset-granular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/efureev","download_url":"https://codeload.github.com/efureev/unocss-preset-granular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/efureev%2Funocss-preset-granular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34724743,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-24T02:00:07.484Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-06-24T09:02:29.830Z","updated_at":"2026-06-24T09:02:33.506Z","avatar_url":"https://github.com/efureev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `@feugene/unocss-preset-granular`\n\nA universal UnoCSS preset that aggregates styles, themes and `safelist` from\nany number of **granular providers** (component packages). The preset itself\nis UI‑agnostic — it works on top of the public `GranularProvider` contract.\n\n- **ESM only**, Node ≥ 22, TypeScript strict.\n- Three entries: `.` (browser), `./node` (build‑time FS),\n  `./contract` (types + helpers for provider authors).\n- Transitive `dependencies` (including cross‑provider) are resolved from a\n  single component registry.\n- Static classes from provider components are picked up by UnoCSS via\n  `content.filesystem` — no duplication in `safelist`.\n\n## Why this preset\n\n- **Ship only the CSS you actually use.** Only styles of explicitly selected\n  components (+ their transitive `dependencies`) get into the final bundle.\n- **Single source of truth.** Static classes live in component templates;\n  no parallel list in app‑level `safelist`.\n- **UI‑agnostic.** Works with any component library that implements the\n  `GranularProvider` contract (Vue, React, Svelte, web components, raw CSS).\n- **Cross‑package dependencies.** One component can depend on another from\n  a different provider — the preset resolves the graph.\n- **Built‑in themes \u0026 tokens.** Aggregates CSS variables / theme files from\n  providers with a single `themes.names` switch.\n\n## Results\n\n- Zero manual `safelist` for static component classes.\n- Smaller CSS: no styles of unused components reach the user.\n- Provider upgrades don't require app‑side changes — new component styles\n  are picked up automatically when the component is selected.\n- Consistent theming: same `light`/`dark`/custom themes across providers.\n\n## Use cases\n\n- **Design system as an npm package** — publish components with their own\n  CSS/tokens; apps pull in only what they render.\n- **Monorepo with multiple UI packages** — one app consumes several\n  component libraries, dependencies across them resolved automatically.\n- **White‑label / multi‑tenant apps** — swap themes per tenant without\n  re‑authoring components.\n- **Micro‑frontends** — each MFE picks its own component subset from\n  shared providers; no cross‑team `safelist` coordination.\n- **Incremental migration to UnoCSS** — adopt granular packages one at a\n  time while keeping existing styles intact.\n\n## Quick start\n\n```bash\nyarn add -D @feugene/unocss-preset-granular unocss @unocss/preset-wind4\n```\n\n```ts\n// uno.config.ts\nimport { defineConfig } from 'unocss'\nimport presetWind4 from '@unocss/preset-wind4'\nimport { presetGranularNode, granularContent } from '@feugene/unocss-preset-granular/node'\nimport simpleProvider from '@feugene/simple-package/granular-provider/node'\n\nconst granularOptions = {\n  providers: [simpleProvider],\n  components: [{ provider: '@feugene/simple-package', names: ['XTest1', 'XTestStyled'] }],\n  themes: { names: ['light', 'dark'] },\n  layer: 'granular' as const,\n}\n\nexport default defineConfig({\n  presets: [presetWind4(), presetGranularNode(granularOptions)],\n  content: granularContent(granularOptions), // required — see docs\n})\n```\n\n## Documentation\n\nFull documentation lives in [`./docs`](./docs) — in **English** and **Russian**.\n\n🇬🇧 **English** — [`./docs/en/README.md`](./docs/en/README.md)\n\n- [Getting started](./docs/en/getting-started.md)\n- [Usage in applications](./docs/en/usage-in-apps.md)\n- [Authoring provider packages](./docs/en/authoring-providers.md)\n- [Component scanning (`content.filesystem`)](./docs/en/component-scanning.md)\n- [Themes and tokens](./docs/en/themes-and-tokens.md)\n- [Architecture](./docs/en/architecture.md)\n- [Troubleshooting \u0026 recipes](./docs/en/troubleshooting.md)\n\n🇷🇺 **Русский** — [`./docs/ru/README.md`](./docs/ru/README.md)\n\n- [Быстрый старт](./docs/ru/getting-started.md)\n- [Использование в приложениях](./docs/ru/usage-in-apps.md)\n- [Написание пакетов‑провайдеров](./docs/ru/authoring-providers.md)\n- [Сканирование компонентов (`content.filesystem`)](./docs/ru/component-scanning.md)\n- [Темы и токены](./docs/ru/themes-and-tokens.md)\n- [Архитектура](./docs/ru/architecture.md)\n- [Рецепты и отладка](./docs/ru/troubleshooting.md)\n\n## Reference packages in this monorepo\n\n- [`packages/unocss-preset-granular`](./packages/unocss-preset-granular) — the preset itself.\n- [`packages/simple-package`](./packages/simple-package) and\n  [`packages/extra-simple-package`](./packages/extra-simple-package) — two\n  reference granular providers (the extra one declares cross‑provider\n  `dependencies` on the simple one).\n- [`apps/app-3`](./apps/app-3) — a demo app that consumes both providers\n  through the preset.\n\n## License\n\nSee [LICENSE](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fefureev%2Funocss-preset-granular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fefureev%2Funocss-preset-granular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fefureev%2Funocss-preset-granular/lists"}