Attributify preset

다른 preset에 대한 attributify 모드를 활성화합니다.

소스 코드

설치

pnpm

pnpm add -D @unocss/preset-attributify

yarn

yarn add -D @unocss/preset-attributify

npm

npm install -D @unocss/preset-attributify

bun

bun add -D @unocss/preset-attributify

import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetAttributify({ /* preset options */ }),
    // ...
  ],
})

TIP

이 preset은 unocss 패키지에 포함되어 있으며, 거기서도 가져올 수 있습니다:

import { presetAttributify } from 'unocss'

Attributify 모드

Tailwind CSS의 유틸리티를 사용하는 이 버튼을 상상해보세요. 목록이 길어지면 읽고 유지보수하기가 정말 어려워집니다.

<button
  class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600"
>
  Button
</button>

Attributify 모드를 사용하면 유틸리티를 속성으로 분리할 수 있습니다:

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

예를 들어, text-sm text-white는 같은 접두사를 중복하지 않고 text="sm white"로 그룹화할 수 있습니다.

접두사 자체 참조

flex, grid, border와 같이 접두사와 동일한 유틸리티가 있는 유틸리티의 경우, 특별한 ~ 값이 제공됩니다.

예를 들어:

<button class="border border-red">Button</button>

다음과 같이 작성할 수 있습니다:

<button border="~ red">Button</button>

값 없는 attributify

Windi CSS의 attributify 모드 외에도, 이 preset은 값 없는 속성도 지원합니다.

예를 들어,

<div class="m-2 rounded text-teal-400" />

이제 다음과 같이 할 수 있습니다:

<div m-2 rounded text-teal-400 />

INFO

참고: JSX를 사용하는 경우, <div foo>가 <div foo={true}>로 변환될 수 있어 UnoCSS에서 생성된 CSS가 속성과 매치되지 않을 수 있습니다. 이를 해결하려면 이 preset과 함께 transformer-attributify-jsx를 사용해보세요.

속성 충돌

속성 모드의 이름이 요소나 컴포넌트의 속성과 충돌하는 경우, UnoCSS의 attributify 모드에 특화되도록 un- 접두사를 추가할 수 있습니다.

예를 들어:

<a text="red">This conflicts with links' `text` prop</a>
<!-- to -->
<a un-text="red">Text color to red</a>

접두사는 기본적으로 선택사항입니다. 접두사 사용을 강제하려면 다음을 설정하세요:

presetAttributify({
  prefix: 'un-',
  prefixedOnly: true, // <--
})

다음과 같이 특정 속성의 스캔을 비활성화할 수도 있습니다:

presetAttributify({
  ignoreAttributes: [
    'text'
    // ...
  ]
})

TypeScript 지원 (JSX/TSX)

다음 내용으로 shims.d.ts를 생성하세요:

기본적으로 타입에는 @unocss/preset-wind3의 일반적인 속성이 포함됩니다. 사용자 정의 속성이 필요한 경우 타입 소스를 참조하여 자신만의 타입을 구현하세요.

Vue

Volar 0.36부터 알 수 없는 속성에 대해 엄격해졌습니다. 이를 선택 해제하려면 프로젝트에 다음 파일을 추가할 수 있습니다:

declare module '@vue/runtime-dom' {
  interface HTMLAttributes {
    [key: string]: any
  }
}
declare module '@vue/runtime-core' {
  interface AllowedComponentProps {
    [key: string]: any
  }
}
export {}

React

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'react' {
  interface HTMLAttributes<T> extends AttributifyAttributes {}
}

Vue 3

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module '@vue/runtime-dom' {
  interface HTMLAttributes extends AttributifyAttributes {}
}

SolidJS

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'solid-js' {
  namespace JSX {
    interface HTMLAttributes<T> extends AttributifyAttributes {}
  }
}

Svelte & SvelteKit

declare namespace svelteHTML {
  import type { AttributifyAttributes } from '@unocss/preset-attributify'

  type HTMLAttributes = AttributifyAttributes
}

Astro

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare global {
  namespace astroHTML.JSX {
    interface HTMLAttributes extends AttributifyAttributes { }
  }
}

Preact

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'preact' {
  namespace JSX {
    interface HTMLAttributes extends AttributifyAttributes {}
  }
}

접두사가 있는 Attributify

import type { AttributifyNames } from '@unocss/preset-attributify'

type Prefix = 'uno:' // 접두사를 변경하세요

interface HTMLAttributes extends Partial<Record<AttributifyNames<Prefix>, string>> {}

옵션

strict

• 타입: boolean
• 기본값: false

Attributify 또는 클래스에 대해서만 CSS 생성.

prefix

• 타입: string
• 기본값: 'un-'

Attributify 모드의 접두사.

prefixedOnly

• 타입: boolean
• 기본값: false

접두사가 있는 속성에 대해서만 매치.

nonValuedAttribute

• 타입: boolean
• 기본값: true

값 없는 속성 매치 지원.

ignoreAttributes

• 타입: string[]

추출에서 무시할 속성 목록.

trueToNonValued

• 타입: boolean
• 기본값: false

DOM에서 실제 값이 true로 표현되는 경우 값 없는 속성도 매치됩니다. 이 옵션은 값 없는 속성을 true로 인코딩하는 프레임워크를 지원하기 위해 존재합니다. 이 옵션을 활성화하면 true로 끝나는 규칙이 깨집니다.

크레딧

초기 아이디어는 @Tahul과 @antfu에 의해 제공되었습니다. 이전 Windi CSS 구현은 @voorjaar에 의해 제공되었습니다.