<!-- 전통적인 CSS -->
<button class="btn btn-primary">Click me</button>

<!-- TailwindCSS -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Click me</button>

/* Button.module.css */
.button {
  background-color: #3b82f6;
  padding: 0.5rem 1rem;
  border: none;
}
.primary {
  background-color: #dc2626;
}

import styles from './Button.module.css'

function Button({ variant, children }) {
  return (
    <button className={`${styles.button} ${variant === 'primary' ? styles.primary : ''}`}>
      {children}
    </button>
  )
}

// Button.scss
$primary-color: #3b82f6;
$danger-color: #dc2626;

@mixin button-variant($bg-color) {
  background-color: $bg-color;
  padding: 0.5rem 1rem;
  border: none;
}

.button {
  @include button-variant($primary-color);
}

.button--primary {
  @include button-variant($danger-color);
}

function Button({ variant, children }) {
  return (
    <button className={`button ${variant === 'primary' ? 'button--primary' : ''}`}>
      {children}
    </button>
  )
}

function Button({ variant, children }) {
  const baseClasses = 'px-4 py-2 border-none'
  const variantClasses =
    variant === 'primary' ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-500 hover:bg-blue-600'

  return <button className={`${baseClasses} ${variantClasses}`}>{children}</button>
}

// crates/oxide/src/scanner/mod.rs
#[derive(Debug, Clone, Default)]
pub struct Scanner {
    /// 콘텐츠 소스
    sources: Sources,
    /// 스캔할 파일들을 탐지하는 워커
    walker: Option<WalkBuilder>,
    /// 변경된 콘텐츠들
    changed_content: Vec<ChangedContent>,
    /// 발견된 모든 확장자들
    extensions: FxHashSet<String>,
    /// 추적할 고유한 후보 집합
    candidates: FxHashSet<String>,
    // ... 기타 필드들
}

impl Scanner {
    pub fn scan(&mut self) -> Vec<String> {
        // 소스 스캔
        self.scan_sources();
        // 후보 추출
        let _new_candidates = self.extract_candidates();
        // 정렬된 후보 목록 반환
        let mut candidates = self.candidates.iter().cloned().collect::<Vec<_>>();
        candidates.par_sort_unstable();
        candidates
    }
}

`hover:bg-blue-500/50!`
- `hover:` → 마우스 호버 시에만 적용
- `bg-blue-500` → 파란색 배경색
- `/50` → 50% 투명도
- `!` → !important

// tailwindcss/packages/tailwindcss/src/candidate.ts
export function* parseCandidate(input: string, designSystem: DesignSystem): Iterable<Candidate> {
  // hover:focus:bg-blue-500/50! 같은 복잡한 클래스명을 파싱
  let rawVariants = segment(input, ':')

  // 마지막 부분이 실제 유틸리티 (bg-blue-500/50!)
  let base = rawVariants.pop()!

  // 변형들을 역순으로 파싱 (hover, focus)
  let parsedCandidateVariants: Variant[] = []
  for (let i = rawVariants.length - 1; i >= 0; --i) {
    let parsedVariant = designSystem.parseVariant(rawVariants[i])
    if (parsedVariant === null) return
    parsedCandidateVariants.push(parsedVariant)
  }

  // 중요도 표시 확인 (!)
  let important = false
  if (base[base.length - 1] === '!') {
    important = true
    base = base.slice(0, -1)
  }

  // 수정자 분리 (/50 부분)
  let [baseWithoutModifier, modifierSegment = null] = segment(base, '/')
  let parsedModifier = modifierSegment === null ? null : parseModifier(modifierSegment)

  // 유틸리티 타입 결정
  if (designSystem.utilities.has(baseWithoutModifier, 'static')) {
    yield {
      kind: 'static',
      root: baseWithoutModifier,
      variants: parsedCandidateVariants,
      important,
      raw: input,
    }
  }

  // 함수형 유틸리티 처리 (bg-blue-500)
  let roots = findRoots(baseWithoutModifier, (root: string) => {
    return designSystem.utilities.has(root, 'functional')
  })

  for (let [root, value] of roots) {
    yield {
      kind: 'functional',
      root, // 'bg'
      value: { kind: 'named', value }, // 'blue-500'
      modifier: parsedModifier, // '50'
      variants: parsedCandidateVariants,
      important,
      raw: input,
    }
  }
}

// 1단계: 콜론으로 분리
// input: "hover:focus:bg-blue-500/50!"
// rawVariants: ["hover", "focus", "bg-blue-500/50!"]
let rawVariants = segment(input, ':')
let base = rawVariants.pop()! // "bg-blue-500/50!"

// 2단계: 변형(variants) 파싱
parsedCandidateVariants: [
  { kind: 'static', root: 'hover' },
  { kind: 'static', root: 'focus' },
]

// 3단계: 중요도 확인
base: 'bg-blue-500/50!' //  → "bg-blue-500/50"
important: true

// 4단계: 수정자 분리
baseWithoutModifier: 'bg-blue-500'
modifierSegment: '50'

// 5단계: 루트와 값 찾기
findRoots('bg-blue-500') //  → [["bg", "blue-500"]]

const candidate: Candidate = {
  kind: 'functional',
  root: 'bg',
  value: { kind: 'named', value: 'blue-500' },
  modifier: { kind: 'named', value: '50' },
  variants: [
    { kind: 'static', root: 'hover' },
    { kind: 'static', root: 'focus' },
  ],
  important: true,
  raw: 'hover:focus:bg-blue-500/50!',
}

// tailwindcss/packages/tailwindcss/src/compile.ts
export function compileCandidates(
  rawCandidates: Iterable<string>,
  designSystem: DesignSystem,
  { onInvalidCandidate }: { onInvalidCandidate?: (candidate: string) => void } = {}
) {
  let astNodes: AstNode[] = []
  let matches = new Map<string, Candidate[]>()

  // 1단계: 클래스 파싱 및 검증
  for (let rawCandidate of rawCandidates) {
    // 이미 무효한 클래스는 건너뛰기
    if (designSystem.invalidCandidates.has(rawCandidate)) {
      onInvalidCandidate?.(rawCandidate)
      continue
    }

    // parseCandidate()를 통해 구조화된 객체 얻기
    let candidates = designSystem.parseCandidate(rawCandidate)
    if (candidates.length === 0) {
      onInvalidCandidate?.(rawCandidate)
      continue
    }

    matches.set(rawCandidate, candidates)
  }

  // 2단계: CSS AST 노드 생성
  for (let [rawCandidate, candidates] of matches) {
    for (let candidate of candidates) {
      // 각 클래스를 실제 CSS 규칙으로 변환
      let rules = designSystem.compileAstNodes(candidate)
      if (rules.length === 0) continue

      for (let { node, propertySort } of rules) {
        astNodes.push(node)
      }
    }
  }

  // 3단계: CSS 규칙 정렬
  astNodes.sort(/* 복잡한 정렬 로직 */)

  return { astNodes }
}

// 입력: 파싱된 Candidate 객체
{
  kind: 'functional',
  root: 'bg',
  value: { kind: 'named', value: 'blue-500' },
  modifier: { kind: 'named', value: '50' },
  variants: [{ kind: 'static', root: 'hover' }],
  important: true,
  raw: 'hover:bg-blue-500/50'
}

// 출력: CSS AST 노드
let baseRule = {
  kind: 'rule',
  selector: '.hover\\:bg-blue-500\\/50',
  nodes: [
    {
      kind: 'declaration',
      property: 'background-color',
      value: 'rgb(9 130 246 / 0.5)' // blue-500 + 50% 투명도
    }
  ]
}

1. Oxide 엔진(Rust): 파일 스캔 → 클래스 추출 → 후보 목록 생성
2. TypeScript: parseCandidate() → compileCandidates() → CSS 생성
3. Lightning CSS: 최적화 → 압축 → 최종 CSS 출력

// 예: 'bg-invalid-color' 같은 존재하지 않는 클래스
if (designSystem.invalidCandidates.has(candidate)) {
  onInvalidCandidate?.(candidate) // 콜백만 호출하고 건너뛰기
  continue
}

// 파싱 실패 시 무효 목록에 추가
let candidates = designSystem.parseCandidate(rawCandidate)
if (candidates.length === 0) {
  designSystem.invalidCandidates.add(rawCandidate) // 다음번엔 건너뛰기
  continue
}

let allValidCandidates = new Set<string>()

// 중복 클래스 자동 제거
allValidCandidates.add('bg-blue-500') // 첫 번째: 추가됨
allValidCandidates.add('bg-blue-500') // 두 번째: 무시됨
allValidCandidates.add('text-white') // 새로운 클래스: 추가됨

// Set 크기 변화로 실제 변경사항 감지
didChange ||= allValidCandidates.size !== prevSize

let compiled = null as AstNode[] | null

// 변경사항이 없으면 캐시된 결과 반환
if (!didChange) {
  compiled ??= optimizeAst(ast, designSystem, opts.polyfills)
  return compiled
}

// 새로운 CSS 생성 후 캐시 업데이트
let newNodes = compileCandidates(allValidCandidates, designSystem)
compiled = optimizeAst(ast, designSystem, opts.polyfills)

초기 빌드: 모든 파일 스캔 → 모든 CSS 생성
증분 빌드: 변경된 파일만 스캔 → 새로운 클래스만 추가

// Emotion: 런타임에 동적으로 생성
import { css } from '@emotion/react'

const Button = ({ primary, disabled }) => {
  const buttonStyle = css`
    padding: 16px;
    background-color: ${primary ? 'blue' : 'gray'};
    opacity: ${disabled ? 0.5 : 1};
    &:hover {
      background-color: ${primary ? 'darkblue' : 'darkgray'};
    }
  `

  return <button css={buttonStyle}>Dynamic Button</button>
}

import { css } from '@emotion/react'

// 1. 템플릿 리터럴 (동적 값 포함)
const buttonStyle = (primary) => css`
  background: ${primary ? 'blue' : 'gray'};
  padding: 16px;
`

// 2. 객체 스타일
const cardStyle = css({
  backgroundColor: 'white',
  padding: 20,
  '&:hover': { boxShadow: '0 4px 8px rgba(0,0,0,0.1)' },
})

// 3. 배열 스타일 (조건부 결합)
const complexStyle = css([{ padding: 16 }, primary && { color: 'blue' }])

// emotion/packages/serialize/src/index.ts
export function serializeStyles(
  args: Array<TemplateStringsArray | Interpolation<unknown>>, // Interpolation: 문자열, 숫자, 스타일 객체, 함수 등 CSS에 삽입될 수 있는 모든 동적 값
  registered?: RegisteredCache,
  mergedProps?: unknown
): SerializedStyles {
  // 이미 직렬화된 객체인지 확인
  if (
    args.length === 1 &&
    typeof args[0] === 'object' &&
    args[0] !== null &&
    (args[0] as SerializedStyles).styles !== undefined
  ) {
    return args[0] as SerializedStyles
  }

  let stringMode = true
  let styles = ''
  cursor = undefined

  let strings = args[0]

  // 템플릿 리터럴 vs 일반 객체/함수 구분
  if (strings == null || (strings as TemplateStringsArray).raw === undefined) {
    stringMode = false
    styles += handleInterpolation(mergedProps, registered, strings as Interpolation)
  } else {
    // 템플릿 리터럴의 첫 번째 문자열 부분
    const templateStringsArr = strings as TemplateStringsArray
    styles += templateStringsArr[0]
  }

  // 나머지 인자들 순차 처리
  for (let i = 1; i < args.length; i++) {
    styles += handleInterpolation(mergedProps, registered, args[i] as Interpolation)
    if (stringMode) {
      const templateStringsArr = strings as TemplateStringsArray
      styles += templateStringsArr[i]
    }
  }

  // 라벨 추출 및 해시 생성
  labelPattern.lastIndex = 0
  let identifierName = ''
  let match
  while ((match = labelPattern.exec(styles)) !== null) {
    identifierName += '-' + match[1]
  }

  let name = hashString(styles) + identifierName

  return {
    name,
    styles,
    next: cursor,
  }
}

// emotion/packages/serialize/src/index.ts
function handleInterpolation(
  mergedProps: unknown | undefined,
  registered: RegisteredCache | undefined,
  interpolation: Interpolation // 템플릿 리터럴 내 ${} 안에 들어가는 동적 값들
): string | number {
  if (interpolation == null) {
    return ''
  }

  switch (typeof interpolation) {
    case 'boolean': {
      return ''
    }
    case 'object': {
      // 키프레임 애니메이션 처리
      const keyframes = interpolation as Keyframes
      if (keyframes.anim === 1) {
        cursor = {
          name: keyframes.name,
          styles: keyframes.styles,
          next: cursor,
        }
        return keyframes.name
      }

      // 이미 직렬화된 스타일 처리
      const serializedStyles = interpolation as SerializedStyles
      if (serializedStyles.styles !== undefined) {
        let next = serializedStyles.next
        while (next !== undefined) {
          cursor = {
            name: next.name,
            styles: next.styles,
            next: cursor,
          }
          next = next.next
        }
        return `${serializedStyles.styles};`
      }

      // 객체나 배열 스타일 처리
      return createStringFromObject(
        mergedProps,
        registered,
        interpolation as ArrayInterpolation | CSSObject
      )
    }
    case 'function': {
      // 동적 스타일 함수 실행
      if (mergedProps !== undefined) {
        let previousCursor = cursor
        let result = interpolation(mergedProps)
        cursor = previousCursor
        return handleInterpolation(mergedProps, registered, result)
      }
      break
    }
    case 'string': {
      // 등록된 스타일 확인 후 반환
      if (registered == null) {
        return interpolation
      }
      const cached = registered[interpolation]
      return cached !== undefined ? cached : interpolation
    }
  }

  return interpolation as string
}

// emotion/packages/serialize/src/index.ts
function createStringFromObject(
  mergedProps: unknown | undefined,
  registered: RegisteredCache | undefined,
  obj: ArrayInterpolation | CSSObject
): string {
  let string = ''

  if (Array.isArray(obj)) {
    // 배열 처리: 각 요소를 재귀적으로 처리
    for (let i = 0; i < obj.length; i++) {
      string += `${handleInterpolation(mergedProps, registered, obj[i])};`
    }
  } else {
    // 객체 처리: 각 속성을 CSS로 변환
    for (let key in obj) {
      let value: unknown = obj[key as never]

      if (typeof value !== 'object') {
        // 단순 CSS 속성
        const asString = value as string
        if (registered != null && registered[asString] !== undefined) {
          string += `${key}{${registered[asString]}}`
        } else if (isProcessableValue(asString)) {
          string += `${processStyleName(key)}:${processStyleValue(key, asString)};`
        }
      } else {
        // 중첩된 선택자나 미디어 쿼리
        const interpolated = handleInterpolation(mergedProps, registered, value as Interpolation)
        switch (key) {
          case 'animation':
          case 'animationName': {
            string += `${processStyleName(key)}:${interpolated};`
            break
          }
          default: {
            string += `${key}{${interpolated}}`
          }
        }
      }
    }
  }

  return string
}

// 입력
const complexStyle = css`
  color: blue;
  padding: 16px;
  &:hover { opacity: 0.8; }
`;

// 1단계: 템플릿 리터럴 감지 및 문자열 조합
styles = 'color: blue; padding: 16px; &:hover { opacity: 0.8; }'

// 2단계: 해시 생성
hashString('color: blue; padding: 16px; &:hover { opacity: 0.8; }') // → '1a2b3c4'

// 최종 결과
{
  name: '1a2b3c4',
  styles: 'color: blue; padding: 16px; &:hover { opacity: 0.8; }',
  next: undefined
}

// emotion/packages/sheet/src/index.ts
export class StyleSheet {
  isSpeedy: boolean
  ctr: number
  tags: HTMLStyleElement[]
  container: Node
  key: string
  nonce: string | undefined

  constructor(options: Options) {
    this.isSpeedy = options.speedy === undefined ? !isDevelopment : options.speedy
    this.tags = []
    this.ctr = 0
    this.nonce = options.nonce
    this.key = options.key
    this.container = options.container
  }

  private _insertTag = (tag: HTMLStyleElement): void => {
    let before
    if (this.tags.length === 0) {
      if (this.insertionPoint) {
        before = this.insertionPoint.nextSibling
      } else if (this.prepend) {
        before = this.container.firstChild
      } else {
        before = this.before
      }
    } else {
      before = this.tags[this.tags.length - 1].nextSibling
    }
    this.container.insertBefore(tag, before)
    this.tags.push(tag)
  }
}

// emotion/packages/cache/src/index.ts
let createCache = (options: Options): EmotionCache => {
  let key = options.key
  let inserted: EmotionCache['inserted'] = {}
  let container: Node
  const nodesToHydrate: HTMLStyleElement[] = []

  // 브라우저 환경에서 SSR 스타일 처리 및 하이드레이션용 노드 수집
  if (isBrowser) {
    container = options.container || document.head

    // 1. SSR로 생성된 스타일을 document.head로 이동 (일관성 유지)
    const ssrStyles = document.querySelectorAll(`style[data-emotion]:not([data-s])`)
    Array.prototype.forEach.call(ssrStyles, (node: HTMLStyleElement) => {
      const dataEmotionAttribute = node.getAttribute('data-emotion')!
      if (dataEmotionAttribute.indexOf(' ') === -1) return
      document.head.appendChild(node)
      node.setAttribute('data-s', '')
    })

    // 2. 기존 스타일 노드 수집하여 캐시에 등록 (하이드레이션)
    Array.prototype.forEach.call(
      document.querySelectorAll(`style[data-emotion^="${key} "]`),
      (node: HTMLStyleElement) => {
        const attrib = node.getAttribute(`data-emotion`)!.split(' ')
        for (let i = 1; i < attrib.length; i++) {
          inserted[attrib[i]] = true // 이미 삽입된 것으로 표시
        }
        nodesToHydrate.push(node)
      }
    )
  }

  const cache: EmotionCache = {
    key,
    sheet: new StyleSheet({
      key,
      container: container!,
      nonce: options.nonce,
      speedy: options.speedy,
      prepend: options.prepend,
      insertionPoint: options.insertionPoint,
    }),
    nonce: options.nonce,
    inserted, // 중복 삽입 방지를 위한 캐시
    registered: {}, // 직렬화 캐시
    insert,
  }

  // 3. 수집된 노드를 StyleSheet에 등록하여 하이드레이션 실행
  cache.sheet.hydrate(nodesToHydrate)
  return cache
}

// emotion/packages/css/src/create-instance.ts
let css: Emotion['css'] = (...args) => {
  let serialized = serializeStyles(args, cache.registered, undefined)

  // 중복 삽입 방지: 이미 삽입된 스타일인지 확인
  if (cache.inserted[serialized.name] === undefined) {
    insertStyles(cache, serialized, false)
  }

  return `${cache.key}-${serialized.name}`
}

// emotion/packages/cache/src/index.ts
const stylis = (styles: string) => serialize(compile(styles), serializer)

// CSS 삽입 함수
insert = (selector, serialized, sheet, shouldCache) => {
  // ... 소스맵 처리 로직 ...

  // Stylis로 CSS 전처리 후 삽입
  stylis(selector ? `${selector}{${serialized.styles}}` : serialized.styles)

  if (shouldCache) {
    cache.inserted[serialized.name] = true
  }
}

// emotion/packages/serialize/src/index.ts
// 속성명 변환 캐싱
const processStyleName = memoize((styleName: string) =>
  isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase()
)

// emotion/packages/cache/src/index.ts
// WeakMap 기반 캐싱 (가비지 컬렉션 친화적)
const getServerStylisCache = isBrowser
  ? undefined
  : weakMemoize(() => memoize<Record<string, string>>(() => ({})))