@unocss/transformer-compile-class NPM | npm.io

0.60.0 • Published 2 days ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

2 days ago

@unocss/transformer-compile-class

Compile group of classes into one class. Inspired by WindiCSS's compilation mode and #948 by @UltraCakeBakery.

Install

npm i -D @unocss/transformer-compile-class

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerCompileClass from '@unocss/transformer-compile-class'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

Usage

At the begin of your class strings, add :uno: at the begin of the strings to mark them for compilation. For example:

<div class=":uno: text-center sm:text-left">
  <div class=":uno: text-sm font-bold hover:text-red"/>
</div>

Will be compiled to:

<div class="uno-qlmcrp">
  <div class="uno-0qw2gr"/>
</div>

.uno-qlmcrp {
  text-align: center;
}
.uno-0qw2gr {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}
.uno-0qw2gr:hover {
  --un-text-opacity: 1;
  color: rgb(248 113 113 / var(--un-text-opacity));
}
@media (min-width: 640px) {
  .uno-qlmcrp {
    text-align: left;
  }
}

Options

You can config the trigger string and prefix for compile class with the options. Refers to the types for details.

License

MIT License © 2021-PRESENT Anthony Fu

unocss unocss-transformer

@infinitebrahmanuniverse/nolb-_uno @everything-registry/sub-chunk-968 jsx-email email-craft @1la/jsx-email @yicode/yite-cli @yicode/yivite-cli @live-codes/browser-compilers @johnpyp/jsx-email unocss @ow3/stacks-core

2 days ago

22 days ago

24 days ago

28 days ago

29 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

6 months ago

6 months ago

6 months ago

10 months ago

6 months ago

7 months ago

7 months ago

10 months ago

6 months ago

6 months ago

9 months ago

5 months ago

9 months ago

9 months ago

10 months ago

11 months ago

12 months ago

11 months ago

12 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago