@ng-native/fabric 0.6.0 → 0.7.0

package/dist/css.d.ts

@@ -299,6 +299,11 @@ export interface DeferredDeclaration {
         readonly unit: 'em' | 'vw' | 'vh' | 'vmin' | 'vmax';
         readonly factor: number;
         readonly offset?: number;
+        /**
+         * A unitless line-height: the node renders `factor` em, and what it hands down is the number,
+         * which each text under it multiplies its own font size by. See `LineHeightMultiple`.
+         */
+        readonly multiple?: true;
     };
     /**
      * A structured value - a transform list, a shadow, a filter - with lengths like `compute`'s

package/dist/css.js

@@ -1226,6 +1226,40 @@ function emptyCacheFor(epoch, generation) {
         tokens: NO_TOKENS,
     };
 }
+function isMultiple(value) {
+    return typeof value === 'object' && value !== null && 'multiple' in value;
+}
+/** A line-height as points, for a node of font size `size`: what an em of it comes to. */
+function lineHeightPoints(line, size) {
+    const points = line.multiple * (typeof size === 'number' ? size : DEFAULT_FONT_SIZE);
+    return Math.round(points * 1000) / 1000;
+}
+/** A node's style with a unitless line-height it set or inherited worked out against its font size. */
+function settleLineHeight(style) {
+    const line = style['lineHeight'];
+    if (isMultiple(line))
+        style['lineHeight'] = lineHeightPoints(line, style['fontSize']);
+}
+/** The styles of nodes with no rules, by the map they inherit, for one that hands down a multiple. */
+const unstyledStyles = new WeakMap();
+/**
+ * The style of a node no rule matches: what it inherits, with a unitless line-height worked out
+ * against its font size, which an inline style can set. The same object where there is none.
+ */
+function unstyledStyle(inherited, inline) {
+    const line = inherited['lineHeight'];
+    if (!isMultiple(line))
+        return inherited;
+    const size = inline?.['fontSize'];
+    if (typeof size === 'number')
+        return { ...inherited, lineHeight: lineHeightPoints(line, size) };
+    let style = unstyledStyles.get(inherited);
+    if (!style) {
+        style = { ...inherited, lineHeight: lineHeightPoints(line, inherited['fontSize']) };
+        unstyledStyles.set(inherited, style);
+    }
+    return style;
+}
 /**
  * What this node's children inherit: the parent's map, overlaid with any inheritable value the
  * node set itself. Copied on first write only, so a node that sets none hands the same object on
@@ -1722,7 +1756,7 @@ export class StyleResolver {
             generation: this.generation,
             context: {},
             parentContext,
-            style: parentInherited,
+            style: unstyledStyle(parentInherited, inline),
             inherited: inline ? inheritFrom(parentInherited, inline) : parentInherited,
             tokens,
         };
@@ -1892,6 +1926,7 @@ export class StyleResolver {
         if (own['pointerEvents'] === 'inherit')
             delete own['pointerEvents'];
         const style = { ...parentInherited, ...own };
+        settleLineHeight(style);
         const inherited = decorate(style, inheritFrom(parentInherited, own), own);
         const rtl = (style['direction'] ?? this.conditions.direction) === 'rtl';
         const important = importantNames(result, () => TWIN[rtl ? 'rtl' : 'ltr']);
@@ -2233,9 +2268,11 @@ export class StyleResolver {
     }
     /** A length relative to the viewport or to the font size in scope. */
     computed(declaration, own, parentInherited) {
-        const { unit, factor, offset = 0 } = declaration.compute;
+        const { unit, factor, offset = 0, multiple } = declaration.compute;
         if (unit !== 'em')
             return this.viewportLength(unit, factor) + offset;
+        if (multiple && !offset)
+            return { multiple: factor };
         // The font size in scope. On `font-size` itself that is the inherited size rather than the
         // one being computed, which is what makes a nested `1.5em` compound as on the web.
         const base = declaration.props.includes('fontSize')