https://github.com/unpreset/unocss-transformer-alias

Transform alias for UnoCSS shortcuts.
https://github.com/unpreset/unocss-transformer-alias

unocss unocss-transformer

Last synced: 17 days ago
JSON representation

Transform alias for UnoCSS shortcuts.

• Host: GitHub
• URL: https://github.com/unpreset/unocss-transformer-alias
• Owner: unpreset
• License: mit
• Created: 2023-04-29T02:04:04.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-04T05:10:38.000Z (4 months ago)
• Last Synced: 2024-09-21T21:40:08.300Z (about 2 months ago)
• Topics: unocss, unocss-transformer
• Language: TypeScript
• Homepage:
• Size: 174 KB
• Stars: 33
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-unocss - unocss-transformer-alias - Transform alias for UnoCSS shortcuts. (Transformers)
• awesome-unocss - unocss-transformer-alias - Transform alias for UnoCSS shortcuts. (Transformers)

README

        






unocss-transformer-alias


🌈 Transform alias for UnoCSS shortcuts.
























## Install

```shell

pnpm i -D unocss-transformer-alias

```

```ts

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

```html







```


Will be transformed to:

```html







```


## Options

> I suggest you to use special prefixes to avoid UnoCSS incorrectly transforming your code.

```ts

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

- [UnoCSS Issue #2543](https://github.com/unocss/unocss/issues/2543)

- [WindiCSS Alias Config](https://windicss.org/integrations/vite.html#alias-config)

## License

MIT License © 2023-PRESENT [Chris](https://github.com/zyyv)