0.0.8 • Published 1 year ago

unocss-transformer-alias v0.0.8

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Install

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(),
  ],
})

Usage

<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" />

Options

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
}

About

License

MIT License © 2023-PRESENT Chris

0.0.8

1 year ago

0.0.7

2 years ago

0.0.5

2 years ago

0.0.6

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago