dotClass

stable

유틸리티 문자열을 해시 기반 CSS 클래스 이름으로 변환 — 반응형/hover/pseudo-element 지원

@hua-labs/dot/classv2.0.0

Import

import { dotClass } from '@hua-labs/dot/class';

Functions

dotClass

유틸리티 문자열을 파싱하여 해시 기반 CSS 클래스 이름을 생성합니다. 인라인 스타일로 표현할 수 없는 반응형 브레이크포인트, hover:, focus:, pseudo-element 등을 CSS 규칙으로 출력해야 할 때 사용합니다.

Signature

function dotClass(input: string, options?: DotClassOptions): string

Parameters

파라미터	타입	설명
`input`	`string`	공백 구분 유틸리티 문자열
`options`	`DotClassOptions`	선택적 옵션

DotClassOptions

옵션	타입	기본값	설명
`naming`	`'hash' \	'atomic'`	`'hash'`	`'hash'`: 전체 입력에 하나의 클래스. `'atomic'`: 토큰별 개별 클래스
`darkMode`	`'class' \	'media'`	`'class'`	`'class'`: `.dark` 조상 선택자. `'media'`: `@media (prefers-color-scheme: dark)`

Returns

string — 생성된 CSS 클래스 이름 (예: 'dot-a3f2b1'). 빈 입력은 '' 반환.

Usage

import { dotClass } from '@hua-labs/dot/class';

// 기본 사용 — 해시 클래스 이름 반환
const cls = dotClass('p-4 hover:bg-red-500 focus:ring-2');
// → 'dot-a3f2b1'

// className prop에 적용
function Button({ children }: { children: React.ReactNode }) {
  return (
    <button className={dotClass('px-4 py-2 rounded-lg bg-primary-500 hover:bg-primary-600 focus:ring-2')}>
      {children}
    </button>
  );
}

// 반응형 브레이크포인트
const cls = dotClass('p-4 sm:p-6 md:p-8 lg:p-10');
// → 'dot-c9a1e2'
// 생성된 CSS:
// .dot-c9a1e2 { padding: 1rem }
// @media (min-width: 640px) { .dot-c9a1e2 { padding: 1.5rem } }
// @media (min-width: 768px) { .dot-c9a1e2 { padding: 2rem } }
// @media (min-width: 1024px) { .dot-c9a1e2 { padding: 2.5rem } }

// pseudo-element
const cls2 = dotClass('before:content-empty before:block before:w-4');
// → 'dot-e7f3a0'
// 생성된 CSS:
// .dot-e7f3a0::before { content: ''; display: block; width: 1rem }

// group-hover
const cls3 = dotClass('group-hover:text-primary-500');
// → 'dot-b2d4f1'
// 생성된 CSS:
// .group:hover .dot-b2d4f1 { color: #3b82f6 }

// peer 변형
const cls4 = dotClass('peer-checked:bg-primary-500');
// → 'dot-a1b2c3'
// 생성된 CSS:
// .peer:checked ~ .dot-a1b2c3 { background-color: #3b82f6 }

// atomic 모드 — 토큰별 개별 클래스
const cls5 = dotClass('p-4 bg-white', { naming: 'atomic' });
// → 'dot-p-4 dot-bg-white'

// 다크 모드 media 전략
const cls6 = dotClass('bg-white dark:bg-gray-900', { darkMode: 'media' });
// → 'dot-d3e4f5'
// 생성된 CSS:
// .dot-d3e4f5 { background-color: #ffffff }
// @media (prefers-color-scheme: dark) { .dot-d3e4f5 { background-color: #111827 } }

// divide-y (class-mode-only — 인라인 스타일로 표현 불가)
const cls7 = dotClass('divide-y divide-gray-200');
// → 'dot-f1a2b3'
// 생성된 CSS:
// .dot-f1a2b3 > * + * { border-top-width: 1px; border-style: solid; border-color: #e5e7eb }

// group + peer 패스스루
const cls8 = dotClass('group flex items-center gap-4');
// → 'dot-a9b8c7 group'
// 'group' 클래스는 스타일 없이 그대로 통과됩니다

지원 변형 (Selectors)

변형	생성되는 선택자
`hover:`	`.cls:hover`
`focus:`	`.cls:focus`
`active:`	`.cls:active`
`focus-visible:`	`.cls:focus-visible`
`focus-within:`	`.cls:focus-within`
`disabled:`	`.cls:disabled`
`group-hover:`	`.group:hover .cls`
`group-focus:`	`.group:focus .cls`
`peer-checked:`	`.peer:checked ~ .cls`
`peer-focus:`	`.peer:focus ~ .cls`
`first:`	`.cls:first-child`
`last:`	`.cls:last-child`
`odd:`	`.cls:nth-child(odd)`
`even:`	`.cls:nth-child(even)`
`before:`	`.cls::before`
`after:`	`.cls::after`
`placeholder:`	`.cls::placeholder`

Notes

dotClass()는 내부적으로 dotCSS()를 호출하며 클래스 이름만 반환합니다.
생성된 CSS는 브라우저에서 <style data-dot-dynamic> 태그에 자동 삽입됩니다.
SSR 환경에서는 dotFlush()로 수집된 CSS를 HTML head에 삽입해야 합니다.
group, peer, prose, prose-* 토큰은 스타일 해석 없이 클래스 이름으로 그대로 통과됩니다.
createDotConfig() 호출 후 syncClassConfig()를 호출하여 클래스 모드 설정을 동기화하세요.