@ng-native/fabric 0.0.1 → 0.1.1

package/dist/css.d.ts

@@ -0,0 +1,615 @@
+/**
+ * Runtime half of the CSS system: selector matching and the cascade.
+ *
+ * All the expensive work happened at build time (parsing, longhand expansion, value conversion,
+ * specificity maths, sorting), so this only walks a pre-sorted rule list and merges. It is
+ * framework-agnostic and knows nothing about Angular.
+ */
+import { type HueMethod, type MixSpace } from './color-mix.ts';
+import { type Channel } from './relative-colour.ts';
+import type { Keyframe } from './transition.ts';
+/** One `[name]` or `[name op "value"]` test. */
+export interface AttributeTest {
+    readonly name: string;
+    /** Absent means a presence test. */
+    readonly operator?: 'equal' | 'prefix' | 'suffix' | 'substring' | 'includes' | 'dash-match';
+    readonly value?: string;
+    /** The `i` flag: the value is compared without case, and is written here in lower case. */
+    readonly insensitive?: true;
+}
+export interface Compound {
+    readonly type?: string;
+    readonly id?: string;
+    /** `:root`: the node at the top of the tree. */
+    readonly root?: true;
+    readonly classes: readonly string[];
+    readonly attributes?: readonly AttributeTest[];
+    /** `:is()` / `:where()` arguments: the compound matches if any of these do. */
+    readonly is?: readonly (readonly Compound[])[];
+    /** `:not()` arguments: the compound matches only if none of these do. */
+    readonly not?: readonly Compound[];
+    /** `:host`: the node must be the host of the component whose sheet is being evaluated. */
+    readonly host?: true;
+    /** `:host-context()`: the host, or one of its ancestors, must match one of these. */
+    readonly hostContext?: readonly Compound[];
+    /**
+     * `:is(<compound> *)`: every one of these must match some ancestor, the node itself excluded.
+     * What Tailwind's `group-*` variants compile to.
+     */
+    readonly ancestors?: readonly Compound[];
+    /** Interaction state the engine tracks: `:focus` and `:active`. */
+    readonly pseudo?: readonly ('focus' | 'active')[];
+    /**
+     * `:first-child` and its family, reduced to the counting tests CSS defines them as. More than
+     * one because `:only-child` is two: first from the start and first from the end.
+     */
+    readonly nth?: readonly NthTest[];
+    /** `:empty`: no children at all, text included. */
+    readonly empty?: true;
+}
+/** `an + b`, counted from the start unless `fromEnd`. */
+export interface NthTest {
+    readonly a: number;
+    readonly b: number;
+    readonly fromEnd?: true;
+}
+export type Combinator = 'descendant' | 'child' | 'next-sibling' | 'later-sibling';
+export interface StyleRule {
+    readonly compounds: readonly Compound[];
+    /** Between compounds; length is `compounds.length - 1`. */
+    readonly combinators: readonly Combinator[];
+    readonly specificity: number;
+    readonly order: number;
+    readonly declarations: Readonly<Record<string, unknown>>;
+    readonly important?: Readonly<Record<string, unknown>>;
+    /** Custom properties this rule defines, pre-converted into every form a use site might want. */
+    readonly tokens?: Readonly<Record<string, TokenValue>>;
+    /** Declarations whose value is a `var()`, resolved once the token map is known. */
+    readonly deferred?: readonly DeferredDeclaration[];
+    /** The media query guarding this rule, if any. */
+    readonly condition?: MediaCondition;
+    /** Memo of the last condition evaluation, and the conditions version it was made against. */
+    activeAt?: number;
+    active?: boolean;
+}
+export type MediaCondition = {
+    readonly all: readonly MediaCondition[];
+} | {
+    readonly any: readonly MediaCondition[];
+} | {
+    readonly feature: 'width' | 'height';
+    readonly op: 'gt' | 'gte' | 'lt' | 'lte' | 'eq';
+    readonly value: number;
+} | {
+    readonly feature: 'orientation' | 'prefers-color-scheme' | 'prefers-reduced-motion';
+    readonly value: string;
+};
+/** What media queries are evaluated against. Pushed in by the host: the engine imports no RN. */
+export interface Conditions {
+    readonly width: number;
+    readonly height: number;
+    readonly colorScheme: 'light' | 'dark';
+    /**
+     * The user asked for less animation. Optional because it is a preference rather than a
+     * measurement: an app that never asks the platform gets `no-preference`, which is what a
+     * platform that cannot answer means anyway.
+     */
+    readonly reducedMotion?: boolean;
+}
+/** A custom property's value, in each form it can legally take. Absent forms are unusable. */
+export interface TokenValue {
+    readonly length?: number | string;
+    /** An angle, in degrees whatever unit it was written in. */
+    readonly angle?: number;
+    /** A time, in milliseconds whatever unit it was written in. */
+    readonly time?: number;
+    readonly color?: string;
+    readonly keyword?: string;
+    readonly number?: number;
+    /** A font weight, as the string `fontWeight` takes. */
+    readonly weight?: string;
+    /** The first family of a font stack. A single word is read from `keyword` instead. */
+    readonly family?: string;
+    /**
+     * A bare number as a line-height: a multiple of the font size, settled where it is used. A
+     * length is read from `length` instead.
+     */
+    readonly lineHeight?: {
+        readonly __defer: DeferredDeclaration['compute'];
+    };
+    /** A whole shadow list, in the processed shape `boxShadow` takes. */
+    readonly shadow?: readonly unknown[];
+    /** One filter function, as the one-entry list `filter` takes: a slot of Tailwind's filters. */
+    readonly filter?: readonly unknown[];
+    /** One transform function, as the one-entry list `transform` takes: a 3D rotation or skew. */
+    readonly transform?: readonly unknown[];
+    /** One font variant, as the one-entry list `fontVariant` takes: a numeric variant's slot. */
+    readonly fontVariant?: readonly string[];
+    /** Bare colour channels, `13, 110, 253`, for an `rgba(var(--x), <alpha>)` to finish. */
+    readonly channels?: readonly number[];
+    /**
+     * Defined as `rgba(var(--channels), <alpha>)`: a colour made of a channels token and an alpha
+     * written or tokened. Settled on the node that defines it, as an `hsl` one is.
+     */
+    readonly deferredColour?: Extract<ColourExpression, {
+        channels: unknown;
+    }>;
+    /**
+     * Defined as another token, `var(--name)`. Resolved on the node that defines it, against the
+     * tokens in scope there, and passed down resolved - which is what a browser does.
+     */
+    readonly alias?: string;
+    /** What an alias becomes when the token it names is not defined. */
+    readonly fallback?: TokenValue;
+    /**
+     * Defined as `hsl(var(--h), var(--s), var(--l))`, or `hsla()` with an alpha: how Bulma writes
+     * every colour. Resolved into `color` on the node that defines it, alongside its aliases, so a
+     * use site never has to know a token was ever built this way.
+     */
+    readonly hsl?: {
+        readonly h: HslChannel;
+        readonly s: HslChannel;
+        readonly l: HslChannel;
+        readonly alpha?: HslChannel;
+    };
+}
+/** One channel of an `hsl()` token: settled at build time, or a token to read at match time. */
+export type HslChannel = number | {
+    readonly reference: string;
+    readonly fallback?: number;
+};
+/** The forms a token can be read in: one per kind of value a use site can need. */
+export type TokenKind = 'length' | 'color' | 'keyword' | 'number' | 'weight' | 'family' | 'lineHeight' | 'shadow' | 'filter' | 'transform' | 'fontVariant' | 'channels';
+export interface DeferredDeclaration {
+    /**
+     * The React Native style properties this lands in. Usually one, but a four-sided shorthand is
+     * unambiguous given a single-valued token, so `padding: var(--gap)` writes all four.
+     */
+    readonly props: readonly string[];
+    /** A `var()` reference. Exactly one of this and `compute` is present. */
+    readonly kind?: TokenKind;
+    readonly reference?: string;
+    /**
+     * The tokens a fallback that is itself a `var()` names, tried in turn when `reference` is not
+     * defined: `var(--a, var(--b, green))` is `--a`, then `--b`, then `green`.
+     */
+    readonly alternatives?: readonly string[];
+    readonly fallback?: unknown;
+    /**
+     * What to write when the reference resolves, whatever it resolves to: `flex: var(--grow)` sets a
+     * shrink of 1 and a basis of 0%, but only when there is a grow for them to go with.
+     */
+    readonly whenSet?: unknown;
+    /**
+     * What to write when the reference resolves to nothing: the property's initial value, which is
+     * what a browser gives a property whose `var()` cannot be substituted. Only where it differs
+     * from leaving the property out: `flex-shrink` starts at 1 in CSS and at 0 in Yoga.
+     */
+    readonly unset?: unknown;
+    /**
+     * For a colour built from `channels`, the token its alpha comes from:
+     * `rgba(var(--bs-primary-rgb), var(--bs-bg-opacity))`. A written alpha is an `adjust` instead.
+     */
+    readonly alpha?: {
+        readonly reference: string;
+        readonly fallback?: number;
+    };
+    /**
+     * A gradient whose stops are custom properties, filled in once a node's tokens are known. What
+     * a utility framework's `from-*` and `to-*` classes compile to, since the class that paints the
+     * gradient is not the class that supplies its colours.
+     */
+    readonly gradient?: GradientTemplate | readonly GradientTemplate[];
+    /**
+     * Arithmetic around the reference, settled at build time. `value * scale + offset`, then no
+     * smaller than `floor`. What `calc(var(--x) + 12px)` and `max(var(--x), 16px)` become.
+     */
+    readonly adjust?: {
+        readonly scale?: number;
+        readonly offset?: number;
+        readonly floor?: number;
+        /**
+         * A fraction to multiply the resolved colour's alpha by. What
+         * `color-mix(in oklab, var(--x) 90%, transparent)` becomes, which is Tailwind's `/90`.
+         */
+        readonly alpha?: number;
+    };
+    /** Declared `!important`: ranked with the important declarations, not the plain ones. */
+    readonly important?: true;
+    /**
+     * A length relative to the viewport or to the font size in scope, plus an absolute `offset`
+     * when it came from a sum: `calc(1.375rem + 1.5vw)` is 1.5vw with 22 added.
+     */
+    readonly compute?: {
+        readonly unit: 'em' | 'vw' | 'vh' | 'vmin' | 'vmax';
+        readonly factor: number;
+        readonly offset?: number;
+    };
+    /**
+     * A structured value - a transform list, a shadow, a filter - with lengths like `compute`'s
+     * somewhere inside it, each marked `{ __defer: compute }`. Filled in where it is used.
+     */
+    readonly within?: unknown;
+}
+/**
+ * A colour a deferred value is made of: settled at build time, a token, or a `color-mix()` of two
+ * such, worked out once the tokens are known. What a gradient stop, a shadow's colour or a colour
+ * property with a `var()` in a mix becomes.
+ */
+export type ColourExpression = {
+    readonly color: string;
+} | {
+    readonly reference: string;
+    readonly alternatives?: readonly string[];
+    readonly fallback?: string;
+} | {
+    /** A token of bare channels, as `rgba(var(--channels), <alpha>)` reads it. */
+    readonly channels: {
+        readonly reference: string;
+        readonly fallback?: readonly number[];
+    };
+    readonly alpha?: number | {
+        readonly reference: string;
+        readonly fallback?: number;
+    };
+} | {
+    readonly hsl: NonNullable<TokenValue['hsl']>;
+} | {
+    /** `oklch(from <colour> <channel> <channel> <channel> [/ <alpha>])`. */
+    readonly relative: {
+        readonly space: MixSpace;
+        readonly from: ColourExpression;
+        readonly channels: readonly [Channel, Channel, Channel];
+        readonly alpha?: Channel;
+    };
+} | {
+    readonly mix: {
+        readonly space: MixSpace;
+        readonly hue?: HueMethod;
+        readonly a: ColourExpression;
+        readonly aPercentage?: number;
+        readonly b: ColourExpression;
+        readonly bPercentage?: number;
+    };
+};
+/** One component's compiled styles, pre-sorted by specificity then source order. */
+/**
+ * A gradient with holes in it: everything but the stop colours is settled at build time.
+ *
+ * The shape is React Native's own processed one, so filling it in is a copy with the references
+ * resolved rather than a translation.
+ */
+export interface GradientTemplate {
+    readonly type: 'linear-gradient' | 'radial-gradient';
+    readonly colorStops: readonly {
+        /** The custom property holding this stop's colour. A stop with no colour is not painted. */
+        readonly reference?: string;
+        /** A colour made from tokens and literals instead, such as a `color-mix()` of one. */
+        readonly colour?: ColourExpression;
+        readonly positionReference?: string;
+        readonly position?: string | number;
+    }[];
+    /**
+     * A radial gradient's centre, by the edges native measures from: each offset written, or a
+     * token with what is written beside its name to use when it is not set.
+     */
+    readonly position?: Readonly<Record<string, string | number | {
+        readonly reference: string;
+        readonly fallback?: string | number;
+    }>>;
+}
+export interface StyleSheet {
+    readonly rules: readonly StyleRule[];
+    /**
+     * `@keyframes` by name. Global within a sheet, as they are within a document; the engine keeps
+     * one registry across every sheet it sees, so a name defined in a global stylesheet is usable
+     * from a component's.
+     */
+    readonly keyframes?: Readonly<Record<string, readonly Keyframe[]>>;
+    /**
+     * Whether any rule here asks about a node's position among its siblings.
+     *
+     * Said on the sheet because what these cost is not matching but invalidation: adding a row
+     * changes what its neighbours match while nothing about those neighbours moved, so the engine
+     * has to re-resolve a whole child list when it changes. It only does that where a sheet asks.
+     */
+    readonly structural?: true;
+}
+/**
+ * What one node resolved to. `style` is what it renders with; `inherited` is what its children
+ * start from, which is the parent's own `inherited` plus whatever inheritable values this node
+ * set. Keeping the two apart is what lets resolution go downwards.
+ */
+export interface StyleCache {
+    epoch: number;
+    /**
+     * Identity token standing for "the ancestor chain, as far as matching is concerned". A node
+     * mints a fresh one whenever it recomputes, and reuses its previous one when it does not, so a
+     * descendant can tell whether anything above it moved with a single reference comparison.
+     *
+     * It has to cover more than the inherited values. `.wrap.dark .label` and
+     * `:host-context(.dark) .label` both change what a descendant matches when a class toggles on
+     * an ancestor, while nothing inherited changes at all, so watching the inherited map alone
+     * leaves those stale.
+     */
+    context: object;
+    /** The parent's `context` this was computed from. */
+    parentContext: object;
+    /** The conditions version this was resolved under. */
+    generation: number;
+    style: Record<string, unknown>;
+    inherited: Record<string, unknown>;
+    /**
+     * Custom properties in scope for this node and its descendants. Cascades exactly as inherited
+     * values do, and by the same copy-on-write rule, so a subtree that defines none shares one map.
+     */
+    tokens: Readonly<Record<string, TokenValue>>;
+}
+/** What the matcher needs of a node. The engine's node satisfies this structurally. */
+export interface StyleTarget {
+    readonly name: string;
+    readonly parent: StyleTarget | null;
+    /**
+     * Needed only by the selectors that ask about a node's place among its siblings, which is why
+     * it is read through the parent rather than kept as an index: an index would have to be right
+     * after every insertion and removal, and this is right by construction.
+     */
+    readonly children?: readonly StyleTarget[];
+    /**
+     * Only elements are counted by the selectors that ask about position. Text is not one, and
+     * neither is the anchor a structural directive leaves behind - the same reason a browser does
+     * not count a comment. Absent means element, so a hand-built target needs nothing extra.
+     */
+    readonly kind?: string;
+    readonly classes: ReadonlySet<string> | null;
+    readonly props: Readonly<Record<string, unknown>>;
+    /**
+     * The sheet this node's own rules come from, which is the sheet of the component whose renderer
+     * created it. Read from the node rather than passed in, because a node's ancestors usually
+     * belong to other components and must be matched against their own sheets, not this one's.
+     */
+    readonly sheet: StyleSheet | null;
+    /**
+     * The sheet of the component this node is the *host* of, if it is one. Distinct from `sheet`,
+     * which is the sheet of the component that *created* it: a host node is created by the parent,
+     * so those two are always different sheets and `:host` needs the second.
+     */
+    hostSheet: StyleSheet | null;
+    /**
+     * Custom properties set on the node itself, `[style.--tint]` or `style="--tint: red"`, already
+     * converted (`inline-token.ts`). In scope for its own rules and its descendants', and stronger
+     * than any rule's, as inline style is on the web. Absent on a hand-built target.
+     */
+    readonly customProperties?: Readonly<Record<string, TokenValue>> | null;
+    /** Memo slot, owned by the resolver. */
+    styleCache: StyleCache | null;
+    /** Set when something that could change what this node matches has changed. */
+    styleDirty: boolean;
+    /** `:focus`. Set by the engine from the native focus and blur events. */
+    focused?: boolean;
+    /**
+     * `:active`. Set by the engine on the responder and every one of its ancestors, because a press
+     * activates the whole chain on the web too, not only the deepest element under the finger.
+     */
+    active?: boolean;
+}
+/**
+ * Deterministic work counters for the matcher.
+ *
+ * Wall-clock is noise; a compound comparison is not. Asserting on these catches an algorithmic
+ * regression (a walk that became quadratic, a cache that stopped hitting) in a way that a timing
+ * assertion never could without being flaky. `test/css-cost.test.ts` holds the baselines.
+ *
+ * The cost is one integer increment per comparison, against a Set lookup and several property
+ * reads, so it does not distort what it measures.
+ */
+export declare const styleStats: {
+    /** Calls to `matchesCompound`, the innermost unit of matching work. */
+    compoundTests: number;
+    /** Rules considered, i.e. calls to `matches`. */
+    ruleTests: number;
+    /** Nodes cascaded, as opposed to handed back from the memo. */
+    nodesResolved: number;
+};
+export declare function resetStyleStats(): void;
+/**
+ * Right-to-left matching, as every CSS engine does it: the rightmost compound is the cheapest
+ * filter and rejects almost everything immediately.
+ */
+export declare function matches(node: StyleTarget, rule: StyleRule, sheet?: StyleSheet | null): boolean;
+/** One rule in a cascade: the sheet it came from, which `:host` needs, and its weight here. */
+interface RuleEntry {
+    readonly rule: StyleRule;
+    readonly sheet: StyleSheet;
+    readonly weight: number;
+}
+/**
+ * The bucket a rule is filed under: the most selective simple selector in its rightmost compound,
+ * which is what a browser calls the key selector.
+ *
+ * Matching counts leftwards from that compound, so if it cannot match a node then nothing to its
+ * left needs looking at. Anything that could match a node whose name, id and classes say nothing -
+ * an attribute test, `:host`, `:is()`, a bare pseudo-class, `*` - goes in the universal bucket and
+ * is offered to everything, because the alternative is a rule that silently stops applying.
+ */
+export declare function ruleKey(rule: StyleRule): string;
+/** Where a rule sits in the merged, weight-sorted list. The cascade depends on that order. */
+interface IndexedEntry {
+    readonly entry: RuleEntry;
+    readonly at: number;
+}
+export interface RuleIndex {
+    readonly buckets: ReadonlyMap<string, readonly IndexedEntry[]>;
+    readonly universal: readonly IndexedEntry[];
+}
+/** File a merged, sorted rule list by key selector. Done once per sheet pair, not per node. */
+export declare function indexRules(entries: readonly RuleEntry[]): RuleIndex;
+/**
+ * The rules worth trying against a node, in the order they were merged in.
+ *
+ * Each bucket is already in order, so the collected list only needs sorting when more than one
+ * contributed - which for a node with one class and a name is the common case, and cheap: the
+ * lists are short by construction, which is the entire point of the index.
+ */
+export declare function candidateRules(node: StyleTarget, index: RuleIndex): RuleEntry[];
+/**
+ * The runtime half of CSS for one engine: the global sheet, the conditions media queries are
+ * evaluated against, and the memo that makes resolution cost nodes x rules rather than
+ * nodes x rules x depth.
+ *
+ * One per engine rather than module state, so two surfaces in one process (or two engines in
+ * one test) cannot overwrite each other's sheet or viewport.
+ *
+ * Inherited state is pushed **down** rather than walked up: a node takes what its parent already
+ * resolved and overlays its own declarations. That is how real CSS engines do it, and it matters
+ * for two separate reasons.
+ *
+ * Correctness first. Walking up meant matching every ancestor against the *starting node's*
+ * sheet, but an ancestor almost always belongs to a different component, so a component's rules
+ * reached nodes it did not own while a parent's real values never arrived. Reading `sheet` off
+ * each node fixes both directions at once.
+ *
+ * Cost second. Walking up re-derived, for every node, everything its parent had already worked
+ * out. Memoising by epoch makes it nodes x rules, and a node that sets no inheritable value hands
+ * its parent's map straight on rather than copying it, so the common case allocates nothing.
+ */
+export declare class StyleResolver {
+    private conditions;
+    /**
+     * Bumped whenever the conditions move. Every cached result and every per-rule condition memo
+     * is stamped with it, so a rotation or a theme switch invalidates the lot in one assignment
+     * rather than walking the tree.
+     */
+    private generation;
+    private emptyCache;
+    /**
+     * The rules a node is matched against, merged across the global sheet, the sheet of the
+     * component it hosts and the sheet that created it, sorted once by weight and then filed by key
+     * selector. Keyed by the creating sheet and then the hosted one, so a component's nodes share a
+     * single index.
+     */
+    private readonly merged;
+    /**
+     * The application-level sheet, if any: the one set of rules allowed to match a node whatever
+     * component created it, which is what resets, utility classes and `:root` tokens all need.
+     */
+    private readonly globalSheet;
+    /**
+     * Custom properties the host supplies rather than the stylesheet: the safe-area insets, and
+     * whatever else is a property of the device instead of the design.
+     *
+     * Seeded rather than forced. They stand in for the root's inherited tokens, so a `:root` rule
+     * in the app's own sheet overrides them the way it would override anything it inherited, and an
+     * app that wants to pin an inset for a tablet layout or a screenshot still can.
+     */
+    private tokensOnRoot;
+    /** What the host has supplied so far, so a second source can add to it rather than replace it. */
+    get rootTokens(): Readonly<Record<string, TokenValue>>;
+    /**
+     * Told of a `var()` that names a custom property nothing in scope defines and has no fallback,
+     * which is dropped. Set only in development, where it is how the engine says so.
+     */
+    onUndefinedToken: ((name: string, props: readonly string[]) => void) | null;
+    constructor(globalSheet: StyleSheet | null, conditions: Conditions);
+    setConditions(next: Conditions): void;
+    setRootTokens(next: Readonly<Record<string, TokenValue>>): void;
+    /**
+     * Resolve a node, memoised for the life of one epoch.
+     *
+     * `epoch` scopes the memo. The engine bumps it once per commit, so within a commit each node
+     * resolves at most once however many descendants ask for its inherited values.
+     */
+    resolve(node: StyleTarget, epoch: number): StyleCache;
+    /**
+     * Whether a node's last answer still stands under a parent that resolved to `parentContext`,
+     * without resolving it. What lets a commit step over a clean child in one comparison.
+     */
+    holds(node: StyleTarget, parentContext: object): boolean;
+    /**
+     * Whether a previous result still stands: nothing about the node changed, nothing above it
+     * moved, and the conditions have not.
+     */
+    private reusable;
+    /**
+     * Nothing anywhere can match this node, and it sets no custom property of its own, so its style
+     * is whatever it inherits.
+     */
+    private hasNoRules;
+    /**
+     * A node with no rules anywhere: it renders with what it inherits and passes the same map on.
+     *
+     * It still mints a context, because a rule further down may match on one of *its* classes.
+     * When there is nothing to inherit either, one shared cache object serves every such node, so
+     * an application that writes no CSS allocates nothing per node.
+     */
+    private unstyled;
+    /**
+     * The rules worth trying against a node.
+     *
+     * The merged list is built once per (creating sheet, hosted sheet) pair and indexed by key
+     * selector; what comes back here is only the buckets this node can reach. For a component's own
+     * sheet that changes little, but a global utility sheet is hundreds of rules and a screen is a
+     * thousand nodes, and the difference is between a million match attempts and a few thousand.
+     */
+    private rulesFor;
+    /**
+     * Weakest first. A host node is matched against two component sheets: the one belonging to the
+     * component it hosts, whose `:host` rules exist to reach exactly this node, and the one that
+     * created it. Both carry the bump; the creator comes later and so wins a tie, as the outer
+     * document does over `:host` on the web. The sort is stable, so within one sheet source order
+     * survives and a later sheet wins equal weight.
+     */
+    private merge;
+    /** The declarations that apply to a node. The list is sorted, so later simply wins. */
+    private cascade;
+    /**
+     * Whether a rule's media query holds, memoised per rule.
+     *
+     * Conditions are the same for every node, so this is answered once per rule per change rather
+     * than once per rule per node.
+     */
+    private conditionHolds;
+    private evaluate;
+    /** What the device answers for a feature that is a keyword rather than a measurement. */
+    private preference;
+    /** A length relative to the viewport, in points. */
+    private viewportLength;
+    /**
+     * Write the declarations that could not be settled at build time: a `var()` reference, or a
+     * length relative to the viewport or to the font size in scope.
+     *
+     * A declaration with no token and no usable fallback is dropped rather than written as
+     * undefined, which is what a browser does with a value it cannot resolve.
+     */
+    private applyDeferred;
+    /** One deferred declaration's value, from the tokens in scope and the node's own style. */
+    private settled;
+    /** A reference with nothing defined for it and nothing to fall back to. */
+    private reportUndefined;
+    /**
+     * A structured value with every deferred length and colour inside it settled, or undefined when
+     * a colour in it cannot be: a shadow with no colour is not a shadow, as CSS reads it.
+     */
+    private settledWithin;
+    /** A structured value with every deferred length and colour inside it settled. */
+    private filledIn;
+    /**
+     * A list's parts filled in, a whole shadow or filter token standing for however many entries it
+     * holds: none, for an empty filter slot.
+     */
+    private filledList;
+    /** A length relative to the viewport or to the font size in scope. */
+    private computed;
+}
+/**
+ * Where a component's compiled sheet lives: a static on the component class, written by the
+ * Metro transformer at build time.
+ *
+ * `RendererFactory2.createRenderer(host, type)` receives the component definition, and a
+ * definition references its class, so a renderer can find its own sheet with no registry and no
+ * generated id. That is also how encapsulation is scoped for free: a component's renderer only
+ * ever matches that component's rules, so its elements cannot be styled by anyone else's CSS.
+ */
+export declare const NATIVE_STYLES = "\u0275nativeStyles";
+export declare function styleSheetOf(type: unknown): StyleSheet | null;
+export {};