@ng-native/fabric 0.1.3 → 0.2.0

package/dist/inline-derived-token.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A custom property set on an element to a value with a `var()` inside it,
+ * `[style.--size]="'calc(var(--gap) * 2)'"`, read into the form the same text in a stylesheet is
+ * compiled to, which the cascade then works out where it is set, as it does that one
+ * (`resolveAliases` in css.ts).
+ *
+ * The shapes are the build-time conversion's and no more (`deferCalcToken`, `deferHslToken` and
+ * `deferChannelsToken` in `@ng-native/metro/css/compile.cjs`): `calc()`, `min()` or `max()` of
+ * numbers, lengths in `px` or `rem`, angles, times and `var()`, with + - * / and brackets; an
+ * `hsl()` with a `var()` for a channel; and `rgb()` or `hsl()` of one channels token, with an
+ * alpha written or tokened. Anything else is undefined, as a stylesheet refuses it.
+ */
+import type { TokenValue } from './css.ts';
+/** A value with a `var()` inside it as a token made of others; undefined if it is no such shape. */
+export declare function derivedToken(text: string): TokenValue | undefined;

package/dist/inline-derived-token.js

@@ -0,0 +1,252 @@
+import { tokenFromValue } from "./inline-token.js";
+const SPACE = /\s*/y;
+const FUNCTION = /([a-z]+)\(\s*/iy;
+const VAR = /var\(\s*(--[\w-]+)\s*/iy;
+const LITERAL = /([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(%|[a-z]+)?/iy;
+const WORD = /[^\s,/()]+/y;
+/** A fallback that is a `var()` or arithmetic, rather than a value written out. */
+const NESTED = /^\s*(var|calc|min|max)\(/i;
+/** What one of each unit counts as: points, degrees, milliseconds, or itself. */
+const PER_UNIT = {
+    '': 1,
+    px: 1,
+    rem: 16,
+    deg: 1,
+    grad: 0.9,
+    rad: 180 / Math.PI,
+    turn: 360,
+    ms: 1,
+    s: 1000,
+};
+const HUE_UNITS = new Set(['', 'deg', 'grad', 'rad', 'turn']);
+const MATH = new Set(['calc', 'min', 'max']);
+const SPACES = {
+    rgb: 'rgb',
+    rgba: 'rgb',
+    hsl: 'hsl',
+    hsla: 'hsl',
+};
+/** Thrown where the text stops being one of the shapes, and caught by `whole`. */
+const UNREADABLE = new Error('not a token made of others');
+const fail = () => {
+    throw UNREADABLE;
+};
+function match(cursor, pattern) {
+    pattern.lastIndex = cursor.at;
+    const found = pattern.exec(cursor.text);
+    if (found)
+        cursor.at = pattern.lastIndex;
+    return found;
+}
+/** Whether the next character, past any space, is `char`; taken, with the space after it, if so. */
+function take(cursor, char) {
+    match(cursor, SPACE);
+    if (cursor.text[cursor.at] !== char)
+        return false;
+    cursor.at++;
+    match(cursor, SPACE);
+    return true;
+}
+function expect(cursor, char) {
+    if (!take(cursor, char))
+        fail();
+}
+/** The whole text as `read` reads it, or undefined when it is not that shape. */
+function whole(text, read) {
+    const cursor = { text, at: 0 };
+    try {
+        const value = read(cursor);
+        match(cursor, SPACE);
+        return cursor.at === text.length ? value : undefined;
+    }
+    catch (error) {
+        if (error === UNREADABLE)
+            return undefined;
+        throw error;
+    }
+}
+/** A `var()` from its name on, to the bracket that closes it. */
+function reference(cursor, name) {
+    if (take(cursor, ')'))
+        return { reference: name };
+    expect(cursor, ',');
+    const start = cursor.at;
+    for (let depth = 0; cursor.at < cursor.text.length; cursor.at++) {
+        const char = cursor.text[cursor.at];
+        if (char === '(')
+            depth++;
+        else if (char === ')' && depth-- === 0)
+            break;
+    }
+    const fallback = cursor.text.slice(start, cursor.at);
+    expect(cursor, ')');
+    return { reference: name, fallback };
+}
+/** A fallback's token. One that is another `var()` is refused, as the compiler refuses it. */
+function fallbackToken(text) {
+    const token = text === undefined ? undefined : tokenFromValue(text);
+    return token?.alias ? fail() : token;
+}
+/** A number, length, angle or time, as the number its slot counts in. */
+function literal(cursor, units) {
+    const found = match(cursor, LITERAL) ?? fail();
+    return Number(found[1]) * (units((found[2] ?? '').toLowerCase()) ?? fail());
+}
+/** A number slot takes a percentage as a fraction, which a length slot cannot work out. */
+const unitsOf = (kind) => (unit) => unit === '%' ? (kind === 'number' ? 0.01 : undefined) : PER_UNIT[unit];
+function sum(cursor, kind) {
+    let value = product(cursor, kind);
+    for (let op; (op = ['+', '-'].find((char) => take(cursor, char)));) {
+        value = [op, value, product(cursor, kind)];
+    }
+    return value;
+}
+function product(cursor, kind) {
+    let value = factor(cursor, kind);
+    for (let op; (op = ['*', '/'].find((char) => take(cursor, char)));) {
+        value = [op, value, factor(cursor, kind)];
+    }
+    return value;
+}
+function factor(cursor, kind) {
+    if (take(cursor, '(')) {
+        const value = sum(cursor, kind);
+        expect(cursor, ')');
+        return value;
+    }
+    const name = match(cursor, VAR)?.[1];
+    if (name) {
+        const value = leafFallback(reference(cursor, name).fallback, kind);
+        return value === undefined ? { reference: name } : { reference: name, fallback: value };
+    }
+    const fn = match(cursor, FUNCTION)?.[1];
+    return fn ? math(cursor, fn, kind) : literal(cursor, unitsOf(kind));
+}
+/**
+ * A `var()` fallback in arithmetic, as its slot reads it: another `var()` or arithmetic of its
+ * own, read as a tree, `var(--a, calc(var(--gap) * 2))`, as `leaf` in the compiler reads it; a
+ * length in points, `rem` included as the compiler counts it; or a bare number.
+ */
+function leafFallback(text, kind) {
+    if (text !== undefined && NESTED.test(text)) {
+        return whole(text.trim(), (cursor) => factor(cursor, kind)) ?? fail();
+    }
+    const token = fallbackToken(text);
+    if (kind !== 'length')
+        return token?.number;
+    if (typeof token?.length === 'number')
+        return token.length;
+    const rem = text === undefined ? undefined : /^\s*(-?\d*\.?\d+)rem\s*$/i.exec(text);
+    return rem ? Number(rem[1]) * PER_UNIT['rem'] : undefined;
+}
+/** The rest of a `calc()`, or of a `min()` or `max()` of sums, once its name is read. */
+function math(cursor, fn, kind) {
+    const name = fn.toLowerCase();
+    if (!MATH.has(name))
+        fail();
+    const sides = [sum(cursor, kind)];
+    while (name !== 'calc' && take(cursor, ','))
+        sides.push(sum(cursor, kind));
+    expect(cursor, ')');
+    return sides.reduce((a, b) => [name, a, b]);
+}
+/** Arithmetic of tokens, read as a length and as a number, whichever each reading makes of it. */
+function calcToken(text) {
+    const markers = ['length', 'number'].flatMap((kind) => {
+        const expression = whole(text, (cursor) => math(cursor, (match(cursor, FUNCTION) ?? fail())[1], kind));
+        return expression === undefined ? [] : [{ expression, kind }];
+    });
+    return markers.length ? { deferredCalc: markers } : undefined;
+}
+/**
+ * A colour function's arguments, with the commas and the slash between them gone, and whether
+ * commas were what separated them.
+ */
+function colourArguments(cursor) {
+    const space = SPACES[(match(cursor, FUNCTION) ?? fail())[1].toLowerCase()] ?? fail();
+    const args = [];
+    let legacy = false;
+    while (!take(cursor, ')')) {
+        if (take(cursor, ','))
+            legacy = true;
+        else if (!take(cursor, '/')) {
+            const name = match(cursor, VAR)?.[1];
+            args.push(name ? reference(cursor, name) : { word: (match(cursor, WORD) ?? fail())[0] });
+        }
+    }
+    return { space, args, legacy };
+}
+/** What each argument of an `hsl()` is: a hue, a saturation and a lightness, then an alpha. */
+const HSL_SLOTS = ['hue', 'percentage', 'percentage', 'alpha'];
+/**
+ * A written `hsl()` channel as its slot reads it, as `hslLiteral` in the compiler does: a hue in
+ * degrees; a saturation or a lightness as a fraction, from a percentage or, in the space syntax
+ * only, a bare number of percent; an alpha as a number or a fraction.
+ */
+function hslLiteral(text, slot, legacy) {
+    const perUnit = (unit) => {
+        if (slot === 'hue')
+            return HUE_UNITS.has(unit) ? PER_UNIT[unit] : undefined;
+        if (unit === '%')
+            return 0.01;
+        if (unit !== '')
+            return undefined;
+        return slot === 'alpha' ? 1 : legacy ? undefined : 0.01;
+    };
+    return whole(text, (cursor) => literal(cursor, perUnit));
+}
+function hslChannel(arg, index, legacy) {
+    const slot = HSL_SLOTS[index];
+    if ('word' in arg)
+        return hslLiteral(arg.word, slot, legacy) ?? fail();
+    const fallback = arg.fallback === undefined ? undefined : hslLiteral(arg.fallback, slot, legacy);
+    return fallback === undefined
+        ? { reference: arg.reference }
+        : { reference: arg.reference, fallback };
+}
+/** A channels colour's alpha: none, written as a number or a percentage, or a token of its own. */
+function alphaOf(arg) {
+    if (arg === undefined)
+        return undefined;
+    if ('word' in arg) {
+        return whole(arg.word, (cursor) => literal(cursor, unitsOf('number'))) ?? fail();
+    }
+    const fallback = fallbackToken(arg.fallback)?.number;
+    return fallback === undefined
+        ? { reference: arg.reference }
+        : { reference: arg.reference, fallback };
+}
+/** `rgba(var(--channels), <alpha>)`, as `deferChannelsToken` reads it. */
+function channelsToken(channels, alpha, space) {
+    const token = fallbackToken(channels.fallback);
+    const fallback = space === 'hsl' ? token?.hslChannels : token?.channels;
+    const opacity = alphaOf(alpha);
+    return {
+        deferredColour: {
+            channels: { reference: channels.reference, ...(fallback ? { fallback } : {}), space },
+            ...(opacity === undefined ? {} : { alpha: opacity }),
+        },
+    };
+}
+/** `hsl(var(--h) 100% 50%)` and the like, as `deferHslToken` reads it. */
+function hslToken(args, legacy) {
+    if (args.length !== 3 && args.length !== 4)
+        fail();
+    const [h, s, l, alpha] = args.map((arg, index) => hslChannel(arg, index, legacy));
+    return { hsl: { h: h, s: s, l: l, ...(alpha === undefined ? {} : { alpha }) } };
+}
+function colourToken(text) {
+    return whole(text, (cursor) => {
+        const { space, args, legacy } = colourArguments(cursor);
+        const [channels, alpha, ...rest] = args;
+        if (channels && 'reference' in channels && !rest.length) {
+            return channelsToken(channels, alpha, space);
+        }
+        return space === 'hsl' ? hslToken(args, legacy) : fail();
+    });
+}
+/** A value with a `var()` inside it as a token made of others; undefined if it is no such shape. */
+export function derivedToken(text) {
+    return calcToken(text) ?? colourToken(text);
+}
+//# sourceMappingURL=inline-derived-token.js.map

package/dist/inline-derived-token.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-derived-token.js","sourceRoot":"","sources":["../src/inline-derived-token.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * A custom property set on an element to a value with a `var()` inside it,\n * `[style.--size]=\"'calc(var(--gap) * 2)'\"`, read into the form the same text in a stylesheet is\n * compiled to, which the cascade then works out where it is set, as it does that one\n * (`resolveAliases` in css.ts).\n *\n * The shapes are the build-time conversion's and no more (`deferCalcToken`, `deferHslToken` and\n * `deferChannelsToken` in `@ng-native/metro/css/compile.cjs`): `calc()`, `min()` or `max()` of\n * numbers, lengths in `px` or `rem`, angles, times and `var()`, with + - * / and brackets; an\n * `hsl()` with a `var()` for a channel; and `rgb()` or `hsl()` of one channels token, with an\n * alpha written or tokened. Anything else is undefined, as a stylesheet refuses it.\n */\nimport type { HslChannel, TokenValue } from './css.ts';\nimport { tokenFromValue } from './inline-token.ts';\n\ntype Marker = NonNullable<TokenValue['deferredCalc']>[number];\ntype Expression = Marker['expression'];\ntype Alpha = Extract<NonNullable<TokenValue['deferredColour']>, { channels: unknown }>['alpha'];\n\ninterface Cursor {\n  readonly text: string;\n  at: number;\n}\n\n/** A `var()`: the token it names, and the text of its fallback, read as its slot wants it. */\ninterface Reference {\n  readonly reference: string;\n  readonly fallback?: string;\n}\n\nconst SPACE = /\\s*/y;\nconst FUNCTION = /([a-z]+)\\(\\s*/iy;\nconst VAR = /var\\(\\s*(--[\\w-]+)\\s*/iy;\nconst LITERAL = /([+-]?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[+-]?\\d+)?)(%|[a-z]+)?/iy;\nconst WORD = /[^\\s,/()]+/y;\n/** A fallback that is a `var()` or arithmetic, rather than a value written out. */\nconst NESTED = /^\\s*(var|calc|min|max)\\(/i;\n/** What one of each unit counts as: points, degrees, milliseconds, or itself. */\nconst PER_UNIT: Readonly<Record<string, number>> = {\n  '': 1,\n  px: 1,\n  rem: 16,\n  deg: 1,\n  grad: 0.9,\n  rad: 180 / Math.PI,\n  turn: 360,\n  ms: 1,\n  s: 1000,\n};\nconst HUE_UNITS: ReadonlySet<string> = new Set(['', 'deg', 'grad', 'rad', 'turn']);\nconst MATH: ReadonlySet<string> = new Set(['calc', 'min', 'max']);\nconst SPACES: Readonly<Record<string, 'rgb' | 'hsl'>> = {\n  rgb: 'rgb',\n  rgba: 'rgb',\n  hsl: 'hsl',\n  hsla: 'hsl',\n};\n\n/** Thrown where the text stops being one of the shapes, and caught by `whole`. */\nconst UNREADABLE = new Error('not a token made of others');\nconst fail = (): never => {\n  throw UNREADABLE;\n};\n\nfunction match(cursor: Cursor, pattern: RegExp): RegExpExecArray | null {\n  pattern.lastIndex = cursor.at;\n  const found = pattern.exec(cursor.text);\n  if (found) cursor.at = pattern.lastIndex;\n  return found;\n}\n\n/** Whether the next character, past any space, is `char`; taken, with the space after it, if so. */\nfunction take(cursor: Cursor, char: string): boolean {\n  match(cursor, SPACE);\n  if (cursor.text[cursor.at] !== char) return false;\n  cursor.at++;\n  match(cursor, SPACE);\n  return true;\n}\n\nfunction expect(cursor: Cursor, char: string): void {\n  if (!take(cursor, char)) fail();\n}\n\n/** The whole text as `read` reads it, or undefined when it is not that shape. */\nfunction whole<T>(text: string, read: (cursor: Cursor) => T): T | undefined {\n  const cursor = { text, at: 0 };\n  try {\n    const value = read(cursor);\n    match(cursor, SPACE);\n    return cursor.at === text.length ? value : undefined;\n  } catch (error) {\n    if (error === UNREADABLE) return undefined;\n    throw error;\n  }\n}\n\n/** A `var()` from its name on, to the bracket that closes it. */\nfunction reference(cursor: Cursor, name: string): Reference {\n  if (take(cursor, ')')) return { reference: name };\n  expect(cursor, ',');\n  const start = cursor.at;\n  for (let depth = 0; cursor.at < cursor.text.length; cursor.at++) {\n    const char = cursor.text[cursor.at];\n    if (char === '(') depth++;\n    else if (char === ')' && depth-- === 0) break;\n  }\n  const fallback = cursor.text.slice(start, cursor.at);\n  expect(cursor, ')');\n  return { reference: name, fallback };\n}\n\n/** A fallback's token. One that is another `var()` is refused, as the compiler refuses it. */\nfunction fallbackToken(text: string | undefined): TokenValue | undefined {\n  const token = text === undefined ? undefined : tokenFromValue(text);\n  return token?.alias ? fail() : token;\n}\n\n/** A number, length, angle or time, as the number its slot counts in. */\nfunction literal(cursor: Cursor, units: (unit: string) => number | undefined): number {\n  const found = match(cursor, LITERAL) ?? fail();\n  return Number(found[1]) * (units((found[2] ?? '').toLowerCase()) ?? fail());\n}\n\n/** A number slot takes a percentage as a fraction, which a length slot cannot work out. */\nconst unitsOf =\n  (kind: Marker['kind']) =>\n  (unit: string): number | undefined =>\n    unit === '%' ? (kind === 'number' ? 0.01 : undefined) : PER_UNIT[unit];\n\nfunction sum(cursor: Cursor, kind: Marker['kind']): Expression {\n  let value = product(cursor, kind);\n  for (let op; (op = (['+', '-'] as const).find((char) => take(cursor, char)));) {\n    value = [op, value, product(cursor, kind)];\n  }\n  return value;\n}\n\nfunction product(cursor: Cursor, kind: Marker['kind']): Expression {\n  let value = factor(cursor, kind);\n  for (let op; (op = (['*', '/'] as const).find((char) => take(cursor, char)));) {\n    value = [op, value, factor(cursor, kind)];\n  }\n  return value;\n}\n\nfunction factor(cursor: Cursor, kind: Marker['kind']): Expression {\n  if (take(cursor, '(')) {\n    const value = sum(cursor, kind);\n    expect(cursor, ')');\n    return value;\n  }\n  const name = match(cursor, VAR)?.[1];\n  if (name) {\n    const value = leafFallback(reference(cursor, name).fallback, kind);\n    return value === undefined ? { reference: name } : { reference: name, fallback: value };\n  }\n  const fn = match(cursor, FUNCTION)?.[1];\n  return fn ? math(cursor, fn, kind) : literal(cursor, unitsOf(kind));\n}\n\n/**\n * A `var()` fallback in arithmetic, as its slot reads it: another `var()` or arithmetic of its\n * own, read as a tree, `var(--a, calc(var(--gap) * 2))`, as `leaf` in the compiler reads it; a\n * length in points, `rem` included as the compiler counts it; or a bare number.\n */\nfunction leafFallback(text: string | undefined, kind: Marker['kind']): Expression | undefined {\n  if (text !== undefined && NESTED.test(text)) {\n    return whole(text.trim(), (cursor) => factor(cursor, kind)) ?? fail();\n  }\n  const token = fallbackToken(text);\n  if (kind !== 'length') return token?.number;\n  if (typeof token?.length === 'number') return token.length;\n  const rem = text === undefined ? undefined : /^\\s*(-?\\d*\\.?\\d+)rem\\s*$/i.exec(text);\n  return rem ? Number(rem[1]) * PER_UNIT['rem']! : undefined;\n}\n\n/** The rest of a `calc()`, or of a `min()` or `max()` of sums, once its name is read. */\nfunction math(cursor: Cursor, fn: string, kind: Marker['kind']): Expression {\n  const name = fn.toLowerCase();\n  if (!MATH.has(name)) fail();\n  const sides = [sum(cursor, kind)];\n  while (name !== 'calc' && take(cursor, ',')) sides.push(sum(cursor, kind));\n  expect(cursor, ')');\n  return sides.reduce((a, b) => [name as 'min' | 'max', a, b]);\n}\n\n/** Arithmetic of tokens, read as a length and as a number, whichever each reading makes of it. */\nfunction calcToken(text: string): TokenValue | undefined {\n  const markers = (['length', 'number'] as const).flatMap((kind): Marker[] => {\n    const expression = whole(text, (cursor) =>\n      math(cursor, (match(cursor, FUNCTION) ?? fail())[1]!, kind),\n    );\n    return expression === undefined ? [] : [{ expression, kind }];\n  });\n  return markers.length ? { deferredCalc: markers } : undefined;\n}\n\n/** An argument of a colour function: a `var()`, or a word read as its slot wants it. */\ntype Argument = Reference | { readonly word: string };\n\n/**\n * A colour function's arguments, with the commas and the slash between them gone, and whether\n * commas were what separated them.\n */\nfunction colourArguments(cursor: Cursor): {\n  space: 'rgb' | 'hsl';\n  args: Argument[];\n  legacy: boolean;\n} {\n  const space = SPACES[(match(cursor, FUNCTION) ?? fail())[1]!.toLowerCase()] ?? fail();\n  const args: Argument[] = [];\n  let legacy = false;\n  while (!take(cursor, ')')) {\n    if (take(cursor, ',')) legacy = true;\n    else if (!take(cursor, '/')) {\n      const name = match(cursor, VAR)?.[1];\n      args.push(name ? reference(cursor, name) : { word: (match(cursor, WORD) ?? fail())[0] });\n    }\n  }\n  return { space, args, legacy };\n}\n\n/** What each argument of an `hsl()` is: a hue, a saturation and a lightness, then an alpha. */\nconst HSL_SLOTS = ['hue', 'percentage', 'percentage', 'alpha'] as const;\n\n/**\n * A written `hsl()` channel as its slot reads it, as `hslLiteral` in the compiler does: a hue in\n * degrees; a saturation or a lightness as a fraction, from a percentage or, in the space syntax\n * only, a bare number of percent; an alpha as a number or a fraction.\n */\nfunction hslLiteral(\n  text: string,\n  slot: (typeof HSL_SLOTS)[number],\n  legacy: boolean,\n): number | undefined {\n  const perUnit = (unit: string): number | undefined => {\n    if (slot === 'hue') return HUE_UNITS.has(unit) ? PER_UNIT[unit] : undefined;\n    if (unit === '%') return 0.01;\n    if (unit !== '') return undefined;\n    return slot === 'alpha' ? 1 : legacy ? undefined : 0.01;\n  };\n  return whole(text, (cursor) => literal(cursor, perUnit));\n}\n\nfunction hslChannel(arg: Argument, index: number, legacy: boolean): HslChannel {\n  const slot = HSL_SLOTS[index]!;\n  if ('word' in arg) return hslLiteral(arg.word, slot, legacy) ?? fail();\n  const fallback = arg.fallback === undefined ? undefined : hslLiteral(arg.fallback, slot, legacy);\n  return fallback === undefined\n    ? { reference: arg.reference }\n    : { reference: arg.reference, fallback };\n}\n\n/** A channels colour's alpha: none, written as a number or a percentage, or a token of its own. */\nfunction alphaOf(arg: Argument | undefined): Alpha {\n  if (arg === undefined) return undefined;\n  if ('word' in arg) {\n    return whole(arg.word, (cursor) => literal(cursor, unitsOf('number'))) ?? fail();\n  }\n  const fallback = fallbackToken(arg.fallback)?.number;\n  return fallback === undefined\n    ? { reference: arg.reference }\n    : { reference: arg.reference, fallback };\n}\n\n/** `rgba(var(--channels), <alpha>)`, as `deferChannelsToken` reads it. */\nfunction channelsToken(\n  channels: Reference,\n  alpha: Argument | undefined,\n  space: 'rgb' | 'hsl',\n): TokenValue {\n  const token = fallbackToken(channels.fallback);\n  const fallback = space === 'hsl' ? token?.hslChannels : token?.channels;\n  const opacity = alphaOf(alpha);\n  return {\n    deferredColour: {\n      channels: { reference: channels.reference, ...(fallback ? { fallback } : {}), space },\n      ...(opacity === undefined ? {} : { alpha: opacity }),\n    },\n  };\n}\n\n/** `hsl(var(--h) 100% 50%)` and the like, as `deferHslToken` reads it. */\nfunction hslToken(args: readonly Argument[], legacy: boolean): TokenValue {\n  if (args.length !== 3 && args.length !== 4) fail();\n  const [h, s, l, alpha] = args.map((arg, index) => hslChannel(arg, index, legacy));\n  return { hsl: { h: h!, s: s!, l: l!, ...(alpha === undefined ? {} : { alpha }) } };\n}\n\nfunction colourToken(text: string): TokenValue | undefined {\n  return whole(text, (cursor) => {\n    const { space, args, legacy } = colourArguments(cursor);\n    const [channels, alpha, ...rest] = args;\n    if (channels && 'reference' in channels && !rest.length) {\n      return channelsToken(channels, alpha, space);\n    }\n    return space === 'hsl' ? hslToken(args, legacy) : fail();\n  });\n}\n\n/** A value with a `var()` inside it as a token made of others; undefined if it is no such shape. */\nexport function derivedToken(text: string): TokenValue | undefined {\n  return calcToken(text) ?? colourToken(text);\n}\n"]}

package/dist/inline-token.d.ts

@@ -5,9 +5,10 @@
  * A stylesheet's custom properties are converted when the app is built, where there is a CSS
  * parser (`@ng-native/metro/css/values.cjs`). A bound one only exists here, where there is not,
  * so this takes the shapes a binding actually holds and nothing more: a length in `px` or `%`, a
- * number, a colour as React Native writes one, a colour's three channels, a word, and another
- * token, `var(--brand)`. Anything else is kept as a word, which a use site that wants a length or
- * a colour ignores, as it ignores an undefined token.
+ * number, a colour as React Native writes one, a colour's three channels, a word, another token,
+ * `var(--brand)`, and one made of others, `calc(var(--gap) * 2)` (see inline-derived-token.ts).
+ * Anything else is kept as a word, which a use site that wants a length or a colour ignores, as
+ * it ignores an undefined token.
  */
 import type { TokenValue } from './css.ts';
 export declare function tokenFromValue(value: unknown): TokenValue | undefined;

package/dist/inline-token.js

@@ -1,7 +1,9 @@
+import { derivedToken } from "./inline-derived-token.js";
 import { isNamedColor } from "./transition.js";
 const PX = /^(-?\d*\.?\d+)px$/;
 const PERCENT = /^-?\d*\.?\d+%$/;
 const NUMBER = /^-?\d*\.?\d+$/;
+const ANGLE = /^(-?\d*\.?\d+)(deg|grad|rad|turn)$/i;
 /** `#fff`, `rgb()`, `rgba()`, `hsl()`, `hsla()` and `hwb()`: what React Native's `processColor` reads. */
 const COLOR_FUNCTION = /^(#[\da-f]{3,8}|(rgba?|hsla?|hwb)\(.*\))$/i;
 const WORD = /^-?[a-z][\w-]*$/i;
@@ -99,6 +101,14 @@ function balanced(text) {
     }
     return depth === 0;
 }
+/**
+ * A value with a token in it: another token, or one made of others, worked out where it is set.
+ * Any other shape is a word no use site reads, as a colour function with a `var()` left in it is
+ * not a colour native can draw.
+ */
+function withTokens(text) {
+    return fromVar(text) ?? derivedToken(text) ?? { keyword: text };
+}
 export function tokenFromValue(value) {
     if (typeof value === 'number')
         return fromNumber(value);
@@ -110,15 +120,21 @@ export function tokenFromValue(value) {
     const px = PX.exec(text);
     if (px)
         return { length: Number(px[1]) };
+    // A percentage is a fraction as well, and an angle its degrees, as the build-time conversion
+    // reads them: an hsl() of tokens takes its saturation and its hue so.
     if (PERCENT.test(text))
-        return { length: text };
+        return { length: text, number: Number(text.slice(0, -1)) / 100 };
+    const angle = ANGLE.exec(text);
+    if (angle) {
+        const [, value, unit] = angle;
+        return { angle: Number(value) * HUE_UNITS[unit.toLowerCase()], number: Number(value) };
+    }
     if (NUMBER.test(text))
         return fromNumber(Number(text));
+    if (text.includes('var('))
+        return withTokens(text);
     if (COLOR_FUNCTION.test(text))
         return { color: text };
-    const reference = fromVar(text);
-    if (reference)
-        return reference;
     return fromChannels(text) ?? (WORD.test(text) ? fromWord(text) : { keyword: text });
 }
 //# sourceMappingURL=inline-token.js.map

package/dist/inline-token.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-token.js","sourceRoot":"","sources":["../src/inline-token.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * A custom property's value set on an element at run time, `[style.--tint]=\"tint()\"` or\n * `style=\"--gap: 4px\"`, as a token the cascade can read.\n *\n * A stylesheet's custom properties are converted when the app is built, where there is a CSS\n * parser (`@ng-native/metro/css/values.cjs`). A bound one only exists here, where there is not,\n * so this takes the shapes a binding actually holds and nothing more: a length in `px` or `%`, a\n * number, a colour as React Native writes one, a colour's three channels, a word, and another\n * token, `var(--brand)`. Anything else is kept as a word, which a use site that wants a length or\n * a colour ignores, as it ignores an undefined token.\n */\nimport type { TokenValue } from './css.ts';\nimport { isNamedColor } from './transition.ts';\n\nconst PX = /^(-?\\d*\\.?\\d+)px$/;\nconst PERCENT = /^-?\\d*\\.?\\d+%$/;\nconst NUMBER = /^-?\\d*\\.?\\d+$/;\n/** `#fff`, `rgb()`, `rgba()`, `hsl()`, `hsla()` and `hwb()`: what React Native's `processColor` reads. */\nconst COLOR_FUNCTION = /^(#[\\da-f]{3,8}|(rgba?|hsla?|hwb)\\(.*\\))$/i;\nconst WORD = /^-?[a-z][\\w-]*$/i;\n/** One colour channel: a number, a percentage, or a hue with its unit. */\nconst CHANNEL = /^(-?(?:\\d+\\.?\\d*|\\.\\d+))(%|deg|grad|rad|turn)?$/;\nconst HUE_UNITS: Record<string, number> = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };\n/** `var(--name)` or `var(--name, <fallback>)`, the whole value. */\nconst VAR = /^var\\(\\s*(--[\\w-]+)\\s*(?:,([\\s\\S]*))?\\)$/i;\nconst WEIGHTS: Record<string, string> = { normal: '400', bold: '700' };\n\n/**\n * CSS takes a bare 0 wherever it takes a length, and no other bare number. A number from 1 to 1000\n * is a weight as well, at the nearest hundred, which is every weight native draws.\n */\nfunction fromNumber(value: number): TokenValue | undefined {\n  if (!Number.isFinite(value)) return undefined;\n  const weight =\n    value >= 1 && value <= 1000\n      ? { weight: String(Math.min(900, Math.max(100, Math.round(value / 100) * 100))) }\n      : {};\n  return value === 0 ? { number: 0, length: 0 } : { number: value, ...weight };\n}\n\n/**\n * A word is a keyword, `row`, and may be a colour, `red`, or a weight, `bold`, as well: every form\n * it can take, as the build-time conversion gives, and a use site reads the one it needs.\n */\nfunction fromWord(text: string): TokenValue {\n  const weight = WEIGHTS[text.toLowerCase()];\n  return {\n    keyword: text,\n    ...(isNamedColor(text) ? { color: text } : {}),\n    ...(weight ? { weight } : {}),\n  };\n}\n\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\n\n/**\n * `13 110 253`, `13, 110, 253`, `100% 0% 0%` or `0 100% 50%`, in the forms `rgb()` and `hsl()` read\n * channels in, by the same rules the build-time conversion uses (`channelForms` in values.cjs).\n */\nfunction fromChannels(text: string): TokenValue | undefined {\n  const commas = text.split(',');\n  const spaced = commas.length === 1;\n  const words = spaced ? text.split(/\\s+/) : commas.map((word) => word.trim());\n  const parsed = words.map((word) => CHANNEL.exec(word));\n  if (parsed.length !== 3 || parsed.some((match) => !match)) return undefined;\n  const values = parsed.map((match) => ({ n: Number(match![1]), unit: match![2] ?? '' }));\n  const channels = rgbChannels(values);\n  const hslChannels = hslOf(values, spaced);\n  if (!channels && !hslChannels) return undefined;\n  return { ...(channels ? { channels } : {}), ...(hslChannels ? { hslChannels } : {}) };\n}\n\ninterface Channel {\n  readonly n: number;\n  readonly unit: string;\n}\n\n/** As `rgb()` reads them: three numbers, or three percentages of 255. */\nfunction rgbChannels(values: readonly Channel[]): number[] | undefined {\n  const scale = values.every((v) => v.unit === '')\n    ? 1\n    : values.every((v) => v.unit === '%')\n      ? 255 / 100\n      : 0;\n  if (!scale) return undefined;\n  return values.map((v) => Math.round(clamp(v.n * scale, 0, 255) * 1000) / 1000);\n}\n\n/** As `hsl()` reads them: a hue, then two percentages, which the space syntax may write bare. */\nfunction hslOf([hue, ...rest]: readonly Channel[], spaced: boolean): number[] | undefined {\n  const degrees = hue!.n * (hue!.unit === '' ? 1 : (HUE_UNITS[hue!.unit] ?? NaN));\n  const fractions = rest.map((v) =>\n    v.unit === '%' || (spaced && v.unit === '') ? clamp(v.n / 100, 0, 1) : NaN,\n  );\n  const hsl = [degrees, ...fractions];\n  return hsl.every(Number.isFinite) ? hsl : undefined;\n}\n\n/**\n * Another token, kept as an alias and resolved where it is set, as a stylesheet's `--x: var(--y)`\n * is. Undefined when the parentheses do not close where the value ends: `var(--a, 1px) var(--b)`.\n */\nfunction fromVar(text: string): TokenValue | undefined {\n  const match = VAR.exec(text);\n  if (!match) return undefined;\n  const alias = match[1]!;\n  const rest = match[2];\n  if (rest === undefined) return { alias };\n  if (!balanced(rest)) return undefined;\n  const fallback = tokenFromValue(rest);\n  return fallback ? { alias, fallback } : { alias };\n}\n\nfunction balanced(text: string): boolean {\n  let depth = 0;\n  for (const char of text) {\n    if (char === '(') depth++;\n    else if (char === ')' && --depth < 0) return false;\n  }\n  return depth === 0;\n}\n\nexport function tokenFromValue(value: unknown): TokenValue | undefined {\n  if (typeof value === 'number') return fromNumber(value);\n  if (typeof value !== 'string') return undefined;\n  const text = value.trim();\n  if (!text) return undefined;\n  const px = PX.exec(text);\n  if (px) return { length: Number(px[1]) };\n  if (PERCENT.test(text)) return { length: text };\n  if (NUMBER.test(text)) return fromNumber(Number(text));\n  if (COLOR_FUNCTION.test(text)) return { color: text };\n  const reference = fromVar(text);\n  if (reference) return reference;\n  return fromChannels(text) ?? (WORD.test(text) ? fromWord(text) : { keyword: text });\n}\n"]}
+{"version":3,"file":"inline-token.js","sourceRoot":"","sources":["../src/inline-token.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * A custom property's value set on an element at run time, `[style.--tint]=\"tint()\"` or\n * `style=\"--gap: 4px\"`, as a token the cascade can read.\n *\n * A stylesheet's custom properties are converted when the app is built, where there is a CSS\n * parser (`@ng-native/metro/css/values.cjs`). A bound one only exists here, where there is not,\n * so this takes the shapes a binding actually holds and nothing more: a length in `px` or `%`, a\n * number, a colour as React Native writes one, a colour's three channels, a word, another token,\n * `var(--brand)`, and one made of others, `calc(var(--gap) * 2)` (see inline-derived-token.ts).\n * Anything else is kept as a word, which a use site that wants a length or a colour ignores, as\n * it ignores an undefined token.\n */\nimport type { TokenValue } from './css.ts';\nimport { derivedToken } from './inline-derived-token.ts';\nimport { isNamedColor } from './transition.ts';\n\nconst PX = /^(-?\\d*\\.?\\d+)px$/;\nconst PERCENT = /^-?\\d*\\.?\\d+%$/;\nconst NUMBER = /^-?\\d*\\.?\\d+$/;\nconst ANGLE = /^(-?\\d*\\.?\\d+)(deg|grad|rad|turn)$/i;\n/** `#fff`, `rgb()`, `rgba()`, `hsl()`, `hsla()` and `hwb()`: what React Native's `processColor` reads. */\nconst COLOR_FUNCTION = /^(#[\\da-f]{3,8}|(rgba?|hsla?|hwb)\\(.*\\))$/i;\nconst WORD = /^-?[a-z][\\w-]*$/i;\n/** One colour channel: a number, a percentage, or a hue with its unit. */\nconst CHANNEL = /^(-?(?:\\d+\\.?\\d*|\\.\\d+))(%|deg|grad|rad|turn)?$/;\nconst HUE_UNITS: Record<string, number> = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };\n/** `var(--name)` or `var(--name, <fallback>)`, the whole value. */\nconst VAR = /^var\\(\\s*(--[\\w-]+)\\s*(?:,([\\s\\S]*))?\\)$/i;\nconst WEIGHTS: Record<string, string> = { normal: '400', bold: '700' };\n\n/**\n * CSS takes a bare 0 wherever it takes a length, and no other bare number. A number from 1 to 1000\n * is a weight as well, at the nearest hundred, which is every weight native draws.\n */\nfunction fromNumber(value: number): TokenValue | undefined {\n  if (!Number.isFinite(value)) return undefined;\n  const weight =\n    value >= 1 && value <= 1000\n      ? { weight: String(Math.min(900, Math.max(100, Math.round(value / 100) * 100))) }\n      : {};\n  return value === 0 ? { number: 0, length: 0 } : { number: value, ...weight };\n}\n\n/**\n * A word is a keyword, `row`, and may be a colour, `red`, or a weight, `bold`, as well: every form\n * it can take, as the build-time conversion gives, and a use site reads the one it needs.\n */\nfunction fromWord(text: string): TokenValue {\n  const weight = WEIGHTS[text.toLowerCase()];\n  return {\n    keyword: text,\n    ...(isNamedColor(text) ? { color: text } : {}),\n    ...(weight ? { weight } : {}),\n  };\n}\n\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\n\n/**\n * `13 110 253`, `13, 110, 253`, `100% 0% 0%` or `0 100% 50%`, in the forms `rgb()` and `hsl()` read\n * channels in, by the same rules the build-time conversion uses (`channelForms` in values.cjs).\n */\nfunction fromChannels(text: string): TokenValue | undefined {\n  const commas = text.split(',');\n  const spaced = commas.length === 1;\n  const words = spaced ? text.split(/\\s+/) : commas.map((word) => word.trim());\n  const parsed = words.map((word) => CHANNEL.exec(word));\n  if (parsed.length !== 3 || parsed.some((match) => !match)) return undefined;\n  const values = parsed.map((match) => ({ n: Number(match![1]), unit: match![2] ?? '' }));\n  const channels = rgbChannels(values);\n  const hslChannels = hslOf(values, spaced);\n  if (!channels && !hslChannels) return undefined;\n  return { ...(channels ? { channels } : {}), ...(hslChannels ? { hslChannels } : {}) };\n}\n\ninterface Channel {\n  readonly n: number;\n  readonly unit: string;\n}\n\n/** As `rgb()` reads them: three numbers, or three percentages of 255. */\nfunction rgbChannels(values: readonly Channel[]): number[] | undefined {\n  const scale = values.every((v) => v.unit === '')\n    ? 1\n    : values.every((v) => v.unit === '%')\n      ? 255 / 100\n      : 0;\n  if (!scale) return undefined;\n  return values.map((v) => Math.round(clamp(v.n * scale, 0, 255) * 1000) / 1000);\n}\n\n/** As `hsl()` reads them: a hue, then two percentages, which the space syntax may write bare. */\nfunction hslOf([hue, ...rest]: readonly Channel[], spaced: boolean): number[] | undefined {\n  const degrees = hue!.n * (hue!.unit === '' ? 1 : (HUE_UNITS[hue!.unit] ?? NaN));\n  const fractions = rest.map((v) =>\n    v.unit === '%' || (spaced && v.unit === '') ? clamp(v.n / 100, 0, 1) : NaN,\n  );\n  const hsl = [degrees, ...fractions];\n  return hsl.every(Number.isFinite) ? hsl : undefined;\n}\n\n/**\n * Another token, kept as an alias and resolved where it is set, as a stylesheet's `--x: var(--y)`\n * is. Undefined when the parentheses do not close where the value ends: `var(--a, 1px) var(--b)`.\n */\nfunction fromVar(text: string): TokenValue | undefined {\n  const match = VAR.exec(text);\n  if (!match) return undefined;\n  const alias = match[1]!;\n  const rest = match[2];\n  if (rest === undefined) return { alias };\n  if (!balanced(rest)) return undefined;\n  const fallback = tokenFromValue(rest);\n  return fallback ? { alias, fallback } : { alias };\n}\n\nfunction balanced(text: string): boolean {\n  let depth = 0;\n  for (const char of text) {\n    if (char === '(') depth++;\n    else if (char === ')' && --depth < 0) return false;\n  }\n  return depth === 0;\n}\n\n/**\n * A value with a token in it: another token, or one made of others, worked out where it is set.\n * Any other shape is a word no use site reads, as a colour function with a `var()` left in it is\n * not a colour native can draw.\n */\nfunction withTokens(text: string): TokenValue {\n  return fromVar(text) ?? derivedToken(text) ?? { keyword: text };\n}\n\nexport function tokenFromValue(value: unknown): TokenValue | undefined {\n  if (typeof value === 'number') return fromNumber(value);\n  if (typeof value !== 'string') return undefined;\n  const text = value.trim();\n  if (!text) return undefined;\n  const px = PX.exec(text);\n  if (px) return { length: Number(px[1]) };\n  // A percentage is a fraction as well, and an angle its degrees, as the build-time conversion\n  // reads them: an hsl() of tokens takes its saturation and its hue so.\n  if (PERCENT.test(text)) return { length: text, number: Number(text.slice(0, -1)) / 100 };\n  const angle = ANGLE.exec(text);\n  if (angle) {\n    const [, value, unit] = angle;\n    return { angle: Number(value) * HUE_UNITS[unit!.toLowerCase()]!, number: Number(value) };\n  }\n  if (NUMBER.test(text)) return fromNumber(Number(text));\n  if (text.includes('var(')) return withTokens(text);\n  if (COLOR_FUNCTION.test(text)) return { color: text };\n  return fromChannels(text) ?? (WORD.test(text) ? fromWord(text) : { keyword: text });\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/fabric",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Angular Native's engine: a retained view tree committed to React Native's Fabric, with events, the responder system and a CSS cascade.",
   "keywords": [
     "angular",