Transformer de compilación de clases

Compilar grupo de clases en una clase. Inspirado en el modo de compilación de Windi CSS y el issue #948 por @UltraCakeBakery.

Instalación

pnpm

pnpm add -D @unocss/transformer-compile-class

yarn

yarn add -D @unocss/transformer-compile-class

npm

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

bun

bun add -D @unocss/transformer-compile-class

import transformerCompileClass from '@unocss/transformer-compile-class'
import { defineConfig } from 'unocss'

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

TIP

Este preset está incluido en el paquete unocss, también puedes importarlo desde ahí:

import { transformerCompileClass } from 'unocss'

Uso

Añade :uno: al principio de las cadenas de clase para marcarlas para compilación.

Por ejemplo:

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

Se compilará a:

<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;
  }
}

Opciones

Puedes configurar la cadena de activación y el prefijo para la clase de compilación con las opciones. Consulta los tipos para más detalles.

Herramientas

ESLint

Hay una regla de eslint para hacer cumplir el transformer de compilación de clases en todo el proyecto: @unocss/enforce-class-compile

Uso:

{
  "plugins": ["@unocss"],
  "rules": {
    "@unocss/enforce-class-compile": "warn"
  }
}

Licencia

• Licencia MIT © 2021-PRESENT Anthony Fu