{"id":50372405,"url":"https://github.com/vcalderondev/ukit-css","last_synced_at":"2026-06-01T10:00:37.943Z","repository":{"id":358076319,"uuid":"1239906255","full_name":"vcalderondev/ukit-css","owner":"vcalderondev","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-27T00:30:38.000Z","size":122,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-27T02:20:30.390Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vcalderondev.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-15T15:07:32.000Z","updated_at":"2026-05-27T00:30:15.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/vcalderondev/ukit-css","commit_stats":null,"previous_names":["vcalderondev/sass-ruleset","vcalderondev/sasskit","vcalderondev/ukit-css"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/vcalderondev/ukit-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vcalderondev%2Fukit-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vcalderondev%2Fukit-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vcalderondev%2Fukit-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vcalderondev%2Fukit-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vcalderondev","download_url":"https://codeload.github.com/vcalderondev/ukit-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vcalderondev%2Fukit-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33769492,"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-01T02:00:06.963Z","response_time":115,"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-05-30T08:00:26.066Z","updated_at":"2026-06-01T10:00:37.934Z","avatar_url":"https://github.com/vcalderondev.png","language":"TypeScript","funding_links":[],"categories":["Development Utilities"],"sub_categories":["Styling"],"readme":"# @vcalderondev/ukit-css\n\nJIT utility-first CSS engine — Tailwind-style on-demand class generation for any frontend stack (React, Vue, Angular, Svelte, Next.js, Astro, plain HTML).\n\n`ukit-css` is a powerful Node + TypeScript engine that scans your source files, extracts the classes you actually use, and emits **only those** as CSS. It supports rich utility class names (`m-1-rem`, `grid-cols-3-m`, `rounded-lg`, `text-ellipsis-3`, …) while dropping your bundle size to the absolute minimum.\n\n## Why JIT?\n\n| Mode                    | Output                        | Notes                                                |\n| ----------------------- | ----------------------------- | ---------------------------------------------------- |\n| Legacy (Static CSS)      | ~770 KB compiled \u0026 minified   | Every utility shipped, used or not                   |\n| JIT (ukit-css)          | typically 2–30 KB per project | Only the classes you actually reference              |\n\nIn a real project that uses 46 distinct utilities across HTML/JSX/Vue templates, the engine emits ~2.4 KB minified — a **99.7% reduction** versus static utility libraries.\n\n## Installation\n\n```bash\nnpm install -D @vcalderondev/ukit-css\n```\n\n## Quick start (CLI)\n\nCreate a configuration file at the root of your project:\n\n```js\n// ukit.config.mjs\nexport default {\n  content: [\"./src/**/*.{html,js,jsx,ts,tsx,vue,svelte,astro}\"],\n  output: \"./dist/ukit.css\",\n}\n```\n\nThen build:\n\n```bash\nnpx ukit-css build\n```\n\nOr watch for changes during development:\n\n```bash\nnpx ukit-css watch\n```\n\nAdd `--minify` for production builds, `--output` to override the destination, or `--content` to override globs from the command line.\n\n## Integration recipes\n\n### Vite (React / Vue / Svelte / vanilla)\n\n```ts\n// vite.config.ts\nimport { defineConfig } from \"vite\"\nimport ukit from \"@vcalderondev/ukit-css/vite\"\n\nexport default defineConfig({\n  plugins: [ukit()],\n})\n```\n\n```ts\n// main.ts (or main.tsx)\nimport \"virtual:ukit.css\"\n```\n\nHMR is wired in: every time you touch a content file, the virtual stylesheet rebuilds and hot-reloads instantly.\n\n### PostCSS (Next.js, Angular, Nuxt, Astro, Webpack, anywhere)\n\n```js\n// postcss.config.mjs\nimport ukit from \"@vcalderondev/ukit-css/postcss\"\n\nexport default {\n  plugins: [ukit()],\n}\n```\n\n```css\n/* src/styles/app.css */\n@ukit;\n```\n\nThe `@ukit;` at-rule is expanded to the JIT output. If you omit it, the plugin prepends the CSS to the entry file automatically.\n\n### Next.js (without a custom PostCSS plugin)\n\nUse the CLI in a script and import the generated file:\n\n```json\n// package.json\n{\n  \"scripts\": {\n    \"css:build\": \"ukit-css build -o app/ukit.css --minify\",\n    \"css:dev\":   \"ukit-css watch -o app/ukit.css\"\n  }\n}\n```\n\n```tsx\n// app/layout.tsx\nimport \"./ukit.css\"\n```\n\n### Angular\n\n```json\n// angular.json (excerpt)\n{\n  \"styles\": [\"src/ukit.css\", \"src/styles.scss\"]\n}\n```\n\n```bash\n# during development\nnpx ukit-css watch -o src/ukit.css\n# before production build\nnpx ukit-css build -o src/ukit.css --minify\n```\n\n### Plain HTML\n\n```bash\nnpx ukit-css build --content \"./public/**/*.html\" -o ./public/ukit.css --minify\n```\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/ukit.css\" /\u003e\n```\n\n---\n\n## Configuration\n\n```ts\n// ukit.config.mjs (or .js / .cjs / .json)\nimport { defineConfig } from \"@vcalderondev/ukit-css\"\n\nexport default defineConfig({\n  // Globs scanned for class candidates. The engine reads each file as text\n  // and pulls out any token that could be a utility class — so it works with\n  // Angular [class.x], Vue :class, React clsx(), Svelte class:foo, etc.\n  content: [\"./src/**/*.{html,ts,tsx,vue,svelte}\"],\n\n  // Output path (used by the CLI). Plugins ignore this.\n  output: \"./dist/app.css\",\n\n  // Breakpoint overrides.\n  mobile: 576,\n  tablet: 992,\n  desktop: 1200,\n\n  // Toggle the CSS reset + the keyframes block.\n  preflight: true,\n  keyframes: true,\n\n  // Class names to always include even if they don't appear in source files\n  // (useful for classes that are composed dynamically: `m-${size}-rem`, etc.).\n  safelist: [\"m-1-rem\", \"m-2-rem\", \"m-3-rem\"],\n\n  // Minify the output.\n  minify: false,\n})\n```\n\n---\n\n## Utility reference\n\nEvery utility ships with a base, `-m` (mobile, ≤ 576 px) and `-t` (tablet, 577–992 px) variant.\n\n| Category   | Examples                                                                  |\n| ---------- | ------------------------------------------------------------------------- |\n| Display    | `d-flex`, `d-grid`, `d-none-m`                                            |\n| Sizing     | `w-50`, `h-100vh`, `min-w-200px`, `max-w-90`                              |\n| Spacing    | `m-1-rem`, `pt-16px`, `gap-1-5-rem`, `mx-auto`                            |\n| Position   | `position-absolute`, `top-50-percent`, `left-50-percent`, `translate-center` |\n| Flex       | `align-items-center`, `justify-content-between`, `flex-direction-column`  |\n| Typography | `fs-1-rem`, `fw-700`, `text-center`, `lh-1-5`, `text-ellipsis-3`          |\n| Borders    | `rounded-lg`, `rounded-r-12px`, `border`, `border-t`, `border-none`       |\n| Grid       | `grid-cols-3`, `grid-cols-1-m`, `grid-col-span-2`, `grid-row-span-full`   |\n| Z-index    | `z-1`, `z-50`, `z-9999`                                                   |\n| Opacity    | `opacity-50`, `opacity-0`                                                 |\n| Overflow   | `overflow-hidden`, `overflow-x-auto`                                      |\n| Animate    | `animate-fade-in`, `animate-fade-in-up`, `animate-spin`, `animate-pulse`  |\n\nNaming convention (spacing): `{prop}{dir?}-{value}[-{unit}][-{breakpoint}]`. Example: `pt-1-5-rem-m` → `padding-top: 1.5rem` on mobile.\n\nFor the full vocabulary refer to the matchers in `src/core/matchers/` — each file documents the patterns it recognizes.\n\n---\n\n## Programmatic API\n\n```ts\nimport { build, Engine, defineConfig } from \"@vcalderondev/ukit-css\"\n\n// One-shot build\nconst { css, matchedClasses } = await build({\n  content: [\"./src/**/*.tsx\"],\n})\n\n// Long-lived engine (incremental rebuilds, watch mode, plugins)\nconst engine = new Engine({ content: [\"./src/**/*.tsx\"] })\nawait engine.scanAll()\nconst { css: output } = engine.build()\n```\n\n## License\n\nMIT — Victor Calderon \u003cmail@vcalderon.dev\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvcalderondev%2Fukit-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvcalderondev%2Fukit-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvcalderondev%2Fukit-css/lists"}