{"id":36612492,"url":"https://github.com/magicdawn/unocss-merge","last_synced_at":"2026-06-06T06:03:11.111Z","repository":{"id":289783263,"uuid":"972387309","full_name":"magicdawn/unocss-merge","owner":"magicdawn","description":"simple utility to merge unocss class names","archived":false,"fork":false,"pushed_at":"2026-06-06T04:28:58.000Z","size":741,"stargazers_count":14,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-06-06T05:23:45.458Z","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/magicdawn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2025-04-25T02:06:22.000Z","updated_at":"2026-06-06T04:28:56.000Z","dependencies_parsed_at":"2026-01-12T09:05:13.367Z","dependency_job_id":null,"html_url":"https://github.com/magicdawn/unocss-merge","commit_stats":null,"previous_names":["magicdawn/unocss-merge"],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/magicdawn/unocss-merge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicdawn%2Funocss-merge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicdawn%2Funocss-merge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicdawn%2Funocss-merge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicdawn%2Funocss-merge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/magicdawn","download_url":"https://codeload.github.com/magicdawn/unocss-merge/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicdawn%2Funocss-merge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33971111,"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-06T02:00:07.033Z","response_time":107,"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-01-12T08:58:45.927Z","updated_at":"2026-06-06T06:03:11.105Z","avatar_url":"https://github.com/magicdawn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# unocss-merge\n\n\u003e simple utility to merge unocss class names, see https://github.com/unocss/unocss/issues/2748\n\n[![Build Status](https://img.shields.io/github/actions/workflow/status/magicdawn/unocss-merge/ci.yml?style=flat-square\u0026branch=main)](https://github.com/magicdawn/unocss-merge/actions/workflows/ci.yml)\n[![Coverage Status](https://img.shields.io/codecov/c/github/magicdawn/unocss-merge.svg?style=flat-square)](https://codecov.io/gh/magicdawn/unocss-merge)\n[![npm version](https://img.shields.io/npm/v/unocss-merge.svg?style=flat-square)](https://www.npmjs.com/package/unocss-merge)\n[![npm downloads](https://img.shields.io/npm/dm/unocss-merge.svg?style=flat-square)](https://www.npmjs.com/package/unocss-merge)\n[![npm license](https://img.shields.io/npm/l/unocss-merge.svg?style=flat-square)](http://magicdawn.mit-license.org)\n\n## Install\n\n```sh\n$ pnpm add unocss-merge\n```\n\n## API\n\n### `unoMerge`\n\n```ts\nimport { unoMerge } from 'unocss-merge'\n\nexpect(unoMerge('hidden', 'block')).toBe('block')\nexpect(unoMerge('hidden', 'block', 'flex')).toBe('flex')\n\nexpect(unoMerge('mr-1', 'mr-2')).toBe('mr-2')\nexpect(unoMerge('mr-1', 'mr-4px')).toBe('mr-4px')\nexpect(unoMerge('mr-1', 'mr-[-4px]')).toBe('mr-[-4px]')\nexpect(unoMerge('mr-1', 'mr--4px')).toBe('mr--4px')\n\nexpect(unoMerge('cursor-pointer', 'cursor-not-allowed')).toBe('cursor-not-allowed')\n```\n\n\u003e [!TIP]\n\u003e This function does not provide any cache mechanism, use `unoMergeMemoized` or wrap with your own cache if needed.\n\n### `useUnoMerge`\n\n```tsx\nimport { useUnoMerge } from 'unocss-merge/react'\n\nfunction Component(props) {\n  const className = useUnoMerge('cursor-pointer', props.className)\n  return \u003cdiv className={className} /\u003e\n}\n```\n\n\u003e [!TIP]\n\u003e this is a simple wrapper of `React.useMemo`, so arguments.length should not change in runtime \u003cbr /\u003e\n\u003e require `react` as peer dependency\n\n### `unoMergeMemoized`\n\n```tsx\nimport { unoMergeMemoized } from 'unocss-merge/memoize'\n\nexpect(unoMergeMemoized('hidden', 'block')).toBe('block')\nexpect(unoMergeMemoized('hidden', 'block', 'flex')).toBe('flex')\n\nexpect(unoMergeMemoized('mr-1', 'mr-2')).toBe('mr-2')\nexpect(unoMergeMemoized('mr-1', 'mr-4px')).toBe('mr-4px')\nexpect(unoMergeMemoized('mr-1', 'mr-[-4px]')).toBe('mr-[-4px]')\nexpect(unoMergeMemoized('mr-1', 'mr--4px')).toBe('mr--4px')\n\nexpect(unoMergeMemoized('cursor-pointer', 'cursor-not-allowed')).toBe('cursor-not-allowed')\n```\n\n\u003e [!TIP]\n\u003e this is a simple wrapper of `unoMerge` with [memoize](https://github.com/sindresorhus/memoize#install) \u003cbr /\u003e\n\u003e require `memoize` as peer dependency\n\n## Why\n\n- No Official One: https://github.com/unocss/unocss/issues/2748\n- `twMerge` don't support [arbitrary value without brackets](https://github.com/dcastil/tailwind-merge/blob/v3.2.0/src/lib/validators.ts#L1)\n\n  ```ts\n  import { twMerge } from 'tailwind-merge' // \"tailwind-merge\": \"^3.2.0\",\n\n  // size-16px ml-4px cursor-not-allowed size-18px ml-10px\n  console.log(twMerge('cursor-pointer size-16px ml-4px', 'cursor-not-allowed size-18px ml-10px'))\n  console.log(twMerge('cursor-pointer', 'cursor-not-allowed')) // `cursor-not-allowed` ✅\n\n  console.log(twMerge('size-[16px]', 'size-[18px]')) // `size-[18px]` ✅\n  console.log(twMerge('ml-[4px]', 'ml-[10px]')) // `ml-[10px]` ✅\n\n  // twMerge don't support arbitrary value without brackets\n  console.log(twMerge('size-16px', 'size-18px')) // `size-16px size-18px` ❌\n  console.log(twMerge('ml-4px', 'ml-10px')) // `ml-4px ml-10px` ❌\n  ```\n\n## Status\n\n### ✅ What is **KNOWN** Supported\n\n- ✅ simple class name `mr-4px` `mr-4`\n- ✅ value in brackets `mr-[4px]` `mr-[4]`\n- ✅ negative value `mr--4px`\n- ✅ simple colon separated variants `hover:mr-4px` `dark:ml-4px` `hover:dark:ml-4px`\n- ✅ simple shorthand: supports `margin` \u0026 `padding`, like `m-1` `mx-1` `ml-1` `mr-1`\n  - ✅ `mx-2` overwrite `ml-1` \u0026 `mr-1`\n  - ✅ `m-2` overwrite `mx-1` \u0026 `mr-1`\n- ✅ merge multiple important utilities\n  ```ts\n  expect(unoMerge('mr-4px mr-2px!')).toBe('mr-4px mr-2px!')\n  expect(unoMerge('mr-4px mr-2px! !mr-1')).toBe('mr-4px !mr-1')\n  expect(unoMerge('mr-4px mr-2px! !mr-1 important:mr-2')).toBe('mr-4px important:mr-2')\n  ```\n\n### ❌ What is **NOT** Supported\n\n- complex features are not supported !!!\n  - ❌ [Complex Variants](https://github.com/unocss/unocss/tree/main/packages-presets/preset-mini/src/_variants) are not recongized\n  - ❌ [Variant Group](https://unocss.dev/transformers/variant-group) U should setup [Variant group transformer](https://unocss.dev/transformers/variant-group)\n  - ❌ [Shortcuts](https://unocss.dev/config/shortcuts) are not recongized\n  - ❌ complex shorthand: I don't recall any example in my mind\n\n### Support Scope\n\nUtility classNames listed on [tailwindcss v3 documentation](https://v3.tailwindcss.com/docs/installation) are in the support scope.\n\n\u003e [!CAUTION]\n\u003e Yes, it's `UnoCSS-merge`, while based on `tailwindcss` v3 documentation, since unocss (technically unocss is an engine, the core presets `@unocss/preset-wind*`) has no document pages for utility classNames.\n\u003e If something listed, but not supported, please open an [issue](https://github.com/magicdawn/unocss-merge/issues)\n\n#### unocss `Too Flexible`\n\nfor example `mr-1`\n\n1. `m-r-1` / `m-r1` / `mr-1` / `mr1` are all valid for unocss presetWind3.\n2. [tailwindcss v3 documentation](https://v3.tailwindcss.com/docs/margin) using `mr-1`, unocss has no document pages.\n3. So only `mr-1` is supported.\n\n## Changelog\n\nSee https://github.com/magicdawn/unocss-merge/releases\n\n## License\n\nthe MIT License http://magicdawn.mit-license.org\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicdawn%2Funocss-merge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagicdawn%2Funocss-merge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicdawn%2Funocss-merge/lists"}