🌈 Transform alias for UnoCSS shortcuts.
pnpm i -D unocss-transformer-alias// uno.config.ts
import { defineConfig } from 'unocss'
import transformerAlias from 'unocss-transformer-alias'
export default defineConfig({
// ...
shortcuts: [
['btn', 'px-2 py-3 bg-blue-500 text-white rounded'],
[/^btn-(.*)$/, ([, c]) => `btn bg-${c}4:10 text-${c}5 rounded`],
],
transformers: [
transformerAlias(),
],
})<div *btn />
<div class="*btn-red" />
<div class="+btn-blue" />Will be transformed to:
<div px-2 py-3 bg-blue-500 text-white rounded>
<div class="px-2 py-3 bg-blue-500 text-white rounded bg-red4:10 text-red5 rounded" />
<div class="btn-blue px-2 py-3 bg-blue-500 text-white rounded bg-blue4:10 text-blue5 rounded" />I suggest you to use special prefixes to avoid UnoCSS incorrectly transforming your code.
transformerAlias({
/**
* Prefix for your alias.
*
* @default "*"
*/
prefix?: string
/**
* Prefix for your alias and keep the original class.
*
* @default '+'
*/
keep?: string | KeepOption
})
interface KeepOption {
/**
* keep prefix for your alias.
*
* @default '+'
*/
prefix: string
/**
* Decedide whether to put it in `blocklist`.
*
* @default true
*/
block: boolean
}MIT License © 2023-PRESENT Chris