Skip to content
Docs
dot

dotCSS / dotFlush / dotReset

stable

CSS 클래스 이름과 완전한 CSS 규칙셋을 함께 반환 — SSR 지원 포함

Import

import { dotCSS, dotFlush, dotReset, syncClassConfig } from '@hua-labs/dot/class';

Functions

dotCSS

유틸리티 문자열을 파싱하여 CSS 클래스 이름과 완전한 CSS 규칙셋을 함께 반환합니다. pseudo-class, pseudo-element, 미디어 쿼리를 포함한 전체 CSS를 직접 제어해야 할 때 사용합니다.

Signature

function dotCSS(input: string, options?: DotClassOptions): DotClassResult

Parameters

파라미터타입설명
inputstring공백 구분 유틸리티 문자열
optionsDotClassOptions선택적 옵션

DotClassOptions

옵션타입기본값설명
naming`'hash' \'atomic'`'hash'클래스 이름 생성 전략
darkMode`'class' \'media'`'class'다크 모드 처리 방식

Returns

DotClassResult — 클래스 이름과 CSS 규칙셋.

interface DotClassResult {
  /** 생성된 클래스 이름 (예: 'dot-a3f2b1') */
  className: string;
  /** 생성된 CSS 규칙 문자열 */
  css: string;
}

Usage

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

// 기본 사용
const { className, css } = dotCSS('p-4 hover:bg-red-500 focus:ring-2');
// className: 'dot-a3f2b1'
// css:
// .dot-a3f2b1 { padding: 1rem }
// .dot-a3f2b1:hover { background-color: #ef4444 }
// .dot-a3f2b1:focus { box-shadow: 0 0 0 3px ... }

// 반응형 + pseudo-element
const result = dotCSS('text-sm md:text-base before:content-empty before:block');
// className: 'dot-c9d8e7'
// css:
// .dot-c9d8e7 { font-size: 0.875rem }
// @media (min-width: 768px) { .dot-c9d8e7 { font-size: 1rem } }
// .dot-c9d8e7::before { content: ''; display: block }

// 다크 모드 + media 전략
const darkResult = dotCSS('bg-white dark:bg-gray-900', { darkMode: 'media' });
// className: 'dot-f2e1d0'
// css:
// .dot-f2e1d0 { background-color: #ffffff }
// @media (prefers-color-scheme: dark) { .dot-f2e1d0 { background-color: #111827 } }

// CSS를 외부 스타일시트에 삽입
function injectStyles(input: string) {
  const { className, css } = dotCSS(input);
  const styleEl = document.querySelector('style[data-my-styles]') as HTMLStyleElement;
  if (styleEl) styleEl.textContent += '\n' + css;
  return className;
}

dotFlush

dotClass() / dotCSS() 호출로 수집된 모든 CSS를 반환하고 버퍼를 초기화합니다. SSR 환경에서 HTML head에 스타일을 삽입할 때 사용합니다.

Signature

function dotFlush(): string

Returns

string — 수집된 모든 CSS 규칙 (개행으로 연결).

Usage

import { dotCSS, dotFlush } from '@hua-labs/dot/class';

// Next.js App Router — layout.tsx (서버 컴포넌트)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  // 서버 사이드에서 컴포넌트 렌더링 중 dotClass/dotCSS가 CSS를 수집
  const content = renderToString(<App />);

  // 수집된 CSS를 HTML head에 삽입
  const css = dotFlush();

  return (
    <html>
      <head>
        <style data-dot>{css}</style>
      </head>
      <body dangerouslySetInnerHTML={{ __html: content }} />
    </html>
  );
}

// Next.js Pages Router — _document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { dotFlush } from '@hua-labs/dot/class';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    const css = dotFlush();
    return { ...initialProps, css };
  }

  render() {
    return (
      <Html>
        <Head>
          <style data-dot>{this.props.css}</style>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

dotReset

수집된 CSS 버퍼와 클래스 캐시를 모두 초기화합니다.

Signature

function dotReset(): void

Usage

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

// 테스트 환경에서 각 테스트 전에 초기화
beforeEach(() => {
  dotReset();
});

// 또는 페이지 전환 시 초기화 (SPA)
router.on('beforeNavigate', () => {
  dotReset();
});

syncClassConfig

createDotConfig() 호출 후 클래스 모드 설정을 동기화합니다.

Signature

function syncClassConfig(): void

Usage

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

// 커스텀 브레이크포인트로 설정 변경
createDotConfig({
  breakpoints: ['tablet', 'desktop'],
  breakpointWidths: { tablet: '900px', desktop: '1440px' },
});

// 클래스 모드에 동기화
syncClassConfig();

// 이후 dotClass()는 커스텀 브레이크포인트를 사용
import { dotClass } from '@hua-labs/dot/class';
const cls = dotClass('p-4 tablet:p-8');

Notes

  • 브라우저 환경에서 dotCSS()는 <style data-dot-dynamic> 태그에 CSS를 자동 삽입합니다. 중복 삽입은 자동으로 방지됩니다.
  • SSR에서 dotFlush()는 모든 CSS를 수집하고 버퍼를 비웁니다. 요청별로 정확히 한 번 호출해야 합니다.
  • globalThis를 통해 서버 컴포넌트와 클라이언트 컴포넌트 번들 간 CSS 수집 상태가 공유됩니다 (Next.js App Router 지원).
  • divide-y, divide-x 유틸리티는 클래스 모드에서만 작동합니다 (자식 결합자 CSS 규칙 생성). 인라인 스타일 dot()에서는 무시됩니다.