Entry points

Runtime values are importable at runtime. Type-only names exist in .d.ts only.

import {
  createDistillery,
  combineClassNames,
  type Distillery,
  type DistilleryEnvironment,
  type StyleHandle,
} from '@elastic/distillate';
		
Export Kind Role
createDistillery runtime Bind prefix and a theme tree.
cssVarName runtime --${prefix}-${path} with / joined on -; strips a leading vars/.
lightDark / cq runtime Theme-tree leaves. cq aliases scaleToken.
zipSchemes runtime Fold two per-scheme trees. Differing strings become lightDark.
resolveThemeValues runtime Nested literal values for one scheme. Prefer distillery.resolveValues.
themeToken / scaleToken / contextualVar runtime Token factories. Derivation calls themeToken / scaleToken.
isCssToken / isScaleToken / isContextualCssVar / isContextualCssVarName runtime Type guards.
css / decls runtime Handle and declaration templates. Also on the createStyleModule factory argument.
rule / media / container / variants / mapDomain runtime Root-entry authoring helpers. mapDomain has no collector side effect.
combineClassNames runtime context.resolveClassName(...handles).
StylesCollector runtime Class; artifactCollector / stylesheetCollector / liveCollection return or wrap instances. subscribe reports growth.
createDomSink runtime One <style> element in document.head or a given parent (e.g. a ShadowRoot), flushed per turn. Also exported from ./emotion.
renderStyles runtime Unbound renderer; prefer distillery.renderStyles.
createStyleNameResolver runtime Standalone compact/readable name map.
StyleRegistry runtime Module registry class.
Distillery / DistilleryOptions / DistilleryEnvironment / ThemeVarDefinition type Bindings.
TokensOf / ValuesOf / PathsOf / ThemeTree / SchemePair / ThemeVariation / ResolvedThemeVariation / ThemeAlternate / RenderStylesOptions type Theme derivation and render selection.
StyleHandle / StylesModule / StyleNameResolver / StyleNameMode / StyleTarget type Handles, modules, naming.
LiveCollection / LiveCollectionOptions type distillery.liveCollection result and options.
StyleSink / CreateDomSinkOptions / DocumentLike / StyleElementLike / StyleParentLike type Sink surface.
createDistillery<const TTheme extends ThemeTree>(
  options: DistilleryOptions<TTheme>
): Distillery<TokensOf<TTheme>, TTheme>;

distillery.resolveValues(scheme: 'light' | 'dark', variation?: string): ValuesOf<TTheme>;

distillery.createStyleModule(name, ({ css, tokens }) => ({ ... }));
distillery.artifactCollector(
  names: 'compact' | 'readable',
  options?: { warn?: (message: string) => void }
): StylesCollector;
distillery.stylesheetCollector(
  names?: 'compact' | 'readable',
  options?: { warn?: (message: string) => void }
): StylesCollector;
distillery.liveCollection(options?: {
  sink?: StyleSink;
  render?: RenderStylesOptions;
  warn?: (message: string) => void;
}): LiveCollection;
distillery.renderStyles(
  collector: StylesCollector,
  resolver?: StyleNameResolver,
  options?: RenderStylesOptions
): string;

collector.use(module | entry | entries): void;
collector.useHandles(handles: readonly StyleHandle[]): readonly StyleHandle[];
collector.createResolver(): StyleNameResolver;
collector.subscribe(listener: () => void): () => void;
createDomSink(options: {
  document: DocumentLike;
  parent?: StyleParentLike;
  schedule?: (flush: () => void) => void;
}): StyleSink;
		
  1. { collector, resolveClassName(...handles), css() }
  2. once per outermost call that grows

Field-level environment types: Environment.

import {
  createEmotion,
  createDomSink,
  type Emotion,
} from '@elastic/distillate/emotion';

const { css, cx, injectGlobal, stylesheet, globalModules } = createEmotion(
  distillery,
  { sink: createDomSink({ document }) }
);
		
Export Kind Role
createEmotion runtime css / cx / injectGlobal over the distillery registry.
createDomSink runtime One <style> element, flushed per turn. Re-exported from the root entry.
Emotion / EmotionCss / CreateEmotionOptions / StyleSink type Return and option types.
CreateDomSinkOptions / DocumentLike / StyleElementLike / StyleParentLike type DOM sink surface. Same as the root entry.
createEmotion(distillery, options?: { sink?: StyleSink }): Emotion;
createDomSink(options: { document: DocumentLike; parent?: StyleParentLike; schedule?: (flush: () => void) => void }): StyleSink;
		

The string form of a css template is readable and does not collect. The wrapper is still a StyleHandle for useHandles / resolveClassName.

import {
  assertVarRefsHaveDeclarations,
  findVarRefViolations,
  tokenTreeDts,
  type VarInvariantViolation,
} from '@elastic/distillate/testing';

findVarRefViolations(css: string): VarInvariantViolation[];
assertVarRefsHaveDeclarations(css: string): void; // throws on violations
		
Export Kind Role
findVarRefViolations runtime Returns { reference, context }[].
assertVarRefsHaveDeclarations runtime Throws if any var(...) is undeclared in the same text.
tokenTreeDts runtime Emits a TypeScript interface for a derived token tree (Monaco extraLib).
VarInvariantViolation type reference plus nearby context.

No stylis import. Safe to use from tests that must not pull the compiler.

Generated per-symbol docs are under Generated API after pnpm docs:api.