Architecture

High-level data flow for the Vite + React reference stack. Full diagrams and file map live in the repository: docs/ARCHITECTURE.md.

Layers

flowchart TB
  subgraph author [Authoring]
    CSS[CSS files]
    TSX[TSX/JSX]
  end

  subgraph vite_pkg ["@driftcss/vite"]
    IDX[single Vite plugin]
    EST[extract-state.ts]
    TR[transform-tsx.ts]
  end

  subgraph core_pkg ["@driftcss/core"]
    NAPI[napi]
  end

  subgraph rust_core [driftcss-core]
    EXT[extract.rs]
    MERGE[merge.rs]
  end

  CSS --> IDX
  TSX --> IDX
  IDX --> EST --> NAPI --> EXT
  IDX --> TR --> NAPI
  NAPI --> MERGE

extract-state.ts calls extractFromCssChunks: dev extracts each file (disk-cached) and merges; production compact runs one extractFull on the merged sheet.

Packages

Package	Role
driftcss-core	Parse, extract, merge, purge
@driftcss/core	N-API bindings
@driftcss/vite	Vite plugin: CSS collect, virtual module, JSX rewrite
driftcss	CLI (init, extract, check, watch, types) — globs on the command line, no config file

Preserve selectors

Use preserveSelectors (or noAtomize) for layout classes that must stay semantic in JSX and repeat across @media blocks (e.g. grid shells). Those rules emit as authored CSS.