@unocss-applet/transformer-rename-class

Coverts class selector name to hash.

Instal

1npm i @unocss-applet/transformer-rename-class --save-dev # with npm
2yarn add @unocss-applet/transformer-rename-class -D # with yarn
3pnpm add @unocss-applet/transformer-rename-class -D # with pnpm

Usage

Only effect when class selector name include [.:%!#()[\/\],].

1import { defineConfig } from 'unocss'
2
3import transformerRenameClass from '@unocss-applet/transformer-rename-class'
4
5export default defineConfig({
6  // ...
7  transformers: [
8    transformerRenameClass(),
9  ],
10})

Type Declarations

1export interface RenameClassOptions {
2  /**
3   * Prefix for compile class name
4   * @default 'uno-'
5   */
6  classPrefix?: string
7
8  /**
9   * Hash function
10   */
11  hashFn?: (str: string) => string
12
13  /**
14   * The layer name of generated rules
15   * @default 'applet_shortcuts'
16   */
17  layer?: string
18
19  /**
20   * Enable rename class, only build applet should be true
21   * e.g. In uniapp `enableRename: !(process.env.UNI_PLATFORM === 'h5')` to disable rename class in h5
22   * @default true
23   */
24  enableRename?: boolean
25
26  /**
27   * Separators to expand.
28   *
29   * ```
30   * foo-(bar baz) -> foo-bar foo-baz
31   *    ^
32   *    separator
33   * ```
34   *
35   * You may set it to `[':']` for strictness.
36   *
37   * @default [':', '-']
38   * @see https://github.com/unocss/unocss/pull/1231
39   */
40  separators?: (':' | '-')[]
41}

Example

Using in with class

without

1<div class="py-3.5 grid-cols-[0.7fr_repeat(7,1fr)]">
2  py-3
3</div>

with

1<div class="uno-0tr0xg">
2  py-3
3</div>
4
5<style>
6.uno-0tr0xg {
7  grid-template-columns:0.7fr repeat(7,1fr);
8  padding-top:0.875rem;
9  padding-bottom:0.875rem;
10}
11</style>

Using with string

If you want to use string(const bg = 'bg-green-100/50') in <script></script> and JS/TS files, please use single quotes instead of double quotes.

without

1<script setup lang="ts">
2  const bg = 'bg-[hsl(2.7,81.9%,69.6%)]'
3</script>

with

1<script setup lang="ts">
2  const bg = 'uno-98db2v'
3</script>
4
5<style>
6.uno-98db2v {
7  --un-bg-opacity: 1;
8  background-color: hsla(2.7, 81.9%, 69.6%, var(--un-bg-opacity));
9}
10</style>

License

MIT License © 2022-PRESENT Neil Lee