Naming and output

Two independent axes. Target is how much CSS you want. Name mode is how classes and custom properties are spelled.

Empty declaration blocks never ship in any quadrant. In the two compact quadrants, a handle that is empty and untargeted is also dropped from collection, so it consumes no compact name and is omitted from useHandles's return value. Readable collectors keep the class name so external selectors can still target it.

Same module for every quadrant:

const demo = distillery.createStyleModule('demo', ({ css, tokens }) => ({
  root: css`
    color: ${tokens.colors.ink};
    padding: ${tokens.gap};
  `,
  unused: css`
    color: ${tokens.colors.accent};
  `,
}));
		

1. Collected only by stylesheetCollector(). Artifact collectors that use(root) drop this handle and --eui-colors-accent.

distillery.renderStyles(distillery.stylesheetCollector());
		

Includes unused. Theme vars use cssVarName(prefix, path):

.eui-view {
  --eui-colors-ink: light-dark(#111, #eee);
  --eui-colors-accent: light-dark(#06c, #8cf);
}
.demo-root {
  color: var(--eui-colors-ink);
  padding: 8px;
}
.demo-unused {
  color: var(--eui-colors-accent);
}
		

Use this in an app that loads one CSS file and writes class={handle.readableName}.

distillery.renderStyles(distillery.stylesheetCollector('compact'));
		

Still every entry, but classes and compacted theme vars are short identifiers assigned from sorted keys. Only useful if the markup that refers to those classes was emitted with the same resolver.

const collector = distillery.artifactCollector('readable');
collector.use(demo.handles.root);
distillery.renderStyles(collector);
		

unused and --eui-colors-accent are gone. Class names stay stable:

.eui-view {
  --eui-colors-ink: light-dark(#111, #eee);
}
.demo-root {
  color: var(--eui-colors-ink);
  padding: 8px;
}
		

const collector = distillery.artifactCollector('compact');
collector.use(demo.handles.root);
distillery.renderStyles(collector);
		

.eui-view {
  --a: light-dark(#111, #eee);
}
.a {
  color: var(--a);
  padding: 8px;
}
		

This is the payload target: emails, SVG, exported HTML, agent replies. Compact names are not stable across different collected sets. Always emit HTML and CSS from the same collector/resolver pair.

distillery.renderStyles(collector, resolver, {
  flatten: 'muted',
  alternates: [
    { variation: 'muted', selector: '[data-eui-theme="muted"]' },
  ],
  themeValueOverrides: { 'colors/ink': '#000' },
});
		

1. Flatten this variation into themeScope. Same declaration count as the base; values change. A media variation does not replace the primary block.
2. Emit only this variation's diff under a selector the consuming page supplies.
3. Replaces the light/dark pair with a single value. Wins over the flattened variation.

Custom-property names always follow cssVarName(prefix, path): --${prefix}-${path} with / joined on - and a leading vars/ stripped.

See declare and select variations.