@react-x11/components 0.11.0 → 0.13.0

package/dist/html/css/style.js

@@ -15,6 +15,7 @@
 import { AUTO, alphaOf, fourSides, inkColor, isTransparent, keywordFontSize, parseAlpha, parseColor, isPct, parseLength, parseNumber, parseWeight, resolve, splitCommas, splitValue, } from './values.js';
 import { parseUrl, readIdent, startsIdent } from './parse.js';
 import { DEFAULT_QUOTES, parseContent, parseCounterList, parseListStyleType, parseQuotes, } from './content.js';
+import { LIGHT_DARK, lightDark, usedColorScheme } from './color.js';
 /** Whether a length is one `padding` takes: not `auto`, not negative. A
  *  `calc()` with a percentage in it has no sign until layout, which clamps
  *  it at zero (CSS Values 4 10.12). */
@@ -64,6 +65,7 @@ function parseClip(value, ctx) {
  *  same list. */
 export const INHERITED = [
     'color',
+    'colorScheme',
     'textFillColor',
     'fontFamily',
     'fontSize',
@@ -116,6 +118,7 @@ export function initialStyle(look, scale = 1) {
     // a copy of the literal, not the literal: see `copyStyle`
     return copyStyle({
         color: look.color,
+        colorScheme: look.colorScheme,
         fontFamily: look.fontFamily,
         fontSize: look.fontSize,
         fontWeight: 400,
@@ -173,6 +176,7 @@ export function initialStyle(look, scale = 1) {
         float: 'none',
         clear: 'none',
         boxSizing: 'content-box',
+        boxDecorationBreak: 'slice',
         lineClamp: null,
         maxLines: null,
         clampContinue: 'auto',
@@ -267,6 +271,7 @@ export function initialStyle(look, scale = 1) {
         backgroundClips: null,
         backgroundOrigins: null,
         borderImage: NO_BORDER_IMAGE,
+        mask: NO_MASK,
         textFillColor: null,
         textDecorationLine: 'none',
         textDecorationColor: null,
@@ -350,6 +355,7 @@ export function inherit(parent, initial) {
     // quarters of the cost of every element's style, a store through a
     // computed name costing thirty times one through a written one
     out.color = parent.color;
+    out.colorScheme = parent.colorScheme;
     out.textFillColor = parent.textFillColor;
     out.fontFamily = parent.fontFamily;
     out.fontSize = parent.fontSize;
@@ -541,6 +547,16 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
     if (/!\s*important$/i.test(value)) {
         value = value.replace(/!\s*important$/i, '').trim();
     }
+    // the branch of each `light-dark()` this element's scheme picks, before
+    // anything reads the value: it stands wherever a colour can, in a
+    // shorthand, a shadow, a gradient or a mix, and most often arrives
+    // through a `var()` from a theme on `:root`
+    if (LIGHT_DARK.test(value)) {
+        const picked = lightDark(value, style.colorScheme);
+        if (picked === null)
+            return;
+        value = picked;
+    }
     const color = COLOR_PROPS[name];
     if (color) {
         const parsed = parseColor(value);
@@ -556,6 +572,12 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
         return;
     }
     switch (name) {
+        case 'color-scheme': {
+            const scheme = usedColorScheme(value, ctx.initial?.colorScheme);
+            if (scheme)
+                style.colorScheme = scheme;
+            return;
+        }
         // --- box ----------------------------------------------------------------
         case 'display': {
             const v = value.toLowerCase();
@@ -775,6 +797,13 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
                 style.boxSizing = v;
             return;
         }
+        case 'box-decoration-break':
+        case '-webkit-box-decoration-break': {
+            const v = value.trim().toLowerCase();
+            if (v === 'slice' || v === 'clone')
+                style.boxDecorationBreak = v;
+            return;
+        }
         case 'aspect-ratio': {
             const parsed = parseAspectRatio(value);
             if (parsed !== undefined)
@@ -1366,6 +1395,68 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
             style.backgroundPositions = pairs.length > 1 ? pairs : null;
             return;
         }
+        // --- masking --------------------------------------------------------------
+        // Each `-webkit-` name is the same property's (Compatibility, 5): every
+        // engine takes both, and a page writes both — Wikipedia's icons do.
+        case 'mask':
+        case '-webkit-mask': {
+            const mask = readMask(value, ctx);
+            if (mask)
+                style.mask = mask;
+            return;
+        }
+        case 'mask-image':
+        case '-webkit-mask-image': {
+            // `none` a layer as much as an image is; a bad url drops it all
+            const images = [];
+            for (const part of splitCommas(value)) {
+                const image = maskImageOf(part, ctx);
+                if (image === undefined)
+                    return;
+                images.push(image);
+            }
+            if (images.length)
+                style.mask = { ...style.mask, images };
+            return;
+        }
+        case 'mask-repeat':
+        case '-webkit-mask-repeat': {
+            const repeats = layerValues(value, (part) => {
+                const words = splitValue(part.toLowerCase());
+                return words.length <= 2 ? readRepeat(words) : null;
+            });
+            if (repeats)
+                style.mask = { ...style.mask, repeats };
+            return;
+        }
+        case 'mask-size':
+        case '-webkit-mask-size': {
+            const sizes = layerValues(value, (part) => backgroundSizeOf(splitValue(part), ctx));
+            if (sizes)
+                style.mask = { ...style.mask, sizes };
+            return;
+        }
+        case 'mask-position':
+        case '-webkit-mask-position': {
+            const positions = layerValues(value, (part) => positionPair(splitValue(part), ctx));
+            if (positions)
+                style.mask = { ...style.mask, positions };
+            return;
+        }
+        case 'mask-origin':
+        case '-webkit-mask-origin': {
+            const origins = layerValues(value, (part) => maskBox(part));
+            if (origins)
+                style.mask = { ...style.mask, origins };
+            return;
+        }
+        case 'mask-clip':
+        case '-webkit-mask-clip': {
+            const clips = layerValues(value, (part) => part.toLowerCase() === 'no-clip' ? 'border-box' : maskBox(part));
+            if (clips)
+                style.mask = { ...style.mask, clips };
+            return;
+        }
         // --- generated content --------------------------------------------------
         case 'content': {
             const parsed = parseContent(value);
@@ -1426,7 +1517,7 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
             // handed a face at a size of millions shapes and caches glyphs that
             // size, and a nest of `larger`s gets there on its own
             const most = MAX_FONT_SIZE * ctx.scale;
-            const kw = keywordFontSize(value, parent.fontSize, ctx.rem);
+            const kw = keywordFontSize(value, parent.fontSize, ctx.initial?.fontSize ?? ctx.rem);
             if (kw !== null) {
                 style.fontSize = Math.min(kw, most);
                 return;
@@ -1483,7 +1574,13 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
                 style.lineHeightIsLength = true;
             }
             else if (len && typeof len === 'object') {
-                const px = resolve(len, style.fontSize);
+                // a percentage of the element's own font size, the one it is
+                // computed with (CSS 2.1 10.8.1), which `em` already is: not the
+                // size in `style` as this declaration comes up, which a `font`
+                // earlier in the same rule has just set to its own — `p { font:
+                // 12px …; line-height: 100% }` under a `.lead { font-size: 16px }`
+                // set sixteen-pixel text on twelve-pixel lines
+                const px = resolve(len, ctx.em);
                 if (px < 0)
                     return;
                 style.lineHeight = px;
@@ -1964,7 +2061,11 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
             return;
         }
         case 'align-content': {
-            const v = alignKeyword(value);
+            // `normal` is `stretch` in a flex and a grid container, the only
+            // boxes it moves anything in (CSS Box Alignment 3, 5.1)
+            const v = value.trim().toLowerCase() === 'normal'
+                ? 'stretch'
+                : alignKeyword(value);
             if (v)
                 style.alignContent = v;
             return;
@@ -2220,6 +2321,32 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
             }
             return;
         }
+        case 'place-content': {
+            // `<'align-content'> <'justify-content'>?` (CSS Box Alignment 3,
+            // 5.3), either half one keyword or two — `first baseline`, `safe
+            // center` — and the second the first again where it is left out,
+            // but for a baseline, which is no `justify-content`: `start`
+            const words = value.trim().toLowerCase().split(/\s+/);
+            const span = (at) => /^(?:safe|unsafe|first|last)$/.test(words[at] ?? '') ? 2 : 1;
+            const cut = span(0);
+            const align = words.slice(0, cut).join(' ');
+            const rest = words.slice(cut);
+            if (rest.length && rest.length !== span(cut))
+                return;
+            const justify = rest.length
+                ? rest.join(' ')
+                : /baseline$/.test(align)
+                    ? 'start'
+                    : align;
+            // a shorthand is one declaration: either half unread drops both
+            if (align !== 'normal' && !alignKeyword(align))
+                return;
+            if (!justifyKeyword(justify))
+                return;
+            applyDeclaration(style, parent, 'align-content', align, ctx);
+            applyDeclaration(style, parent, 'justify-content', justify, ctx);
+            return;
+        }
         case 'place-items':
         case 'place-self': {
             const parts = splitValue(value);
@@ -2621,6 +2748,154 @@ export const NO_BORDER_IMAGE = {
     outset: [0, 0, 0, 0],
     repeat: ['stretch', 'stretch'],
 };
+/** Whether a style masks its element: a layer of its mask has an image. */
+export function masked(style) {
+    const mask = style.mask;
+    if (mask === NO_MASK)
+        return false;
+    for (const image of mask.images)
+        if (image !== null)
+            return true;
+    return false;
+}
+/**
+ * One layer's `mask-image`: a url, a gradient — or none, for an image
+ * function this does not draw, or a `url(#id)`, which names an SVG
+ * `<mask>` element in the document rather than an image to fetch (7.2):
+ * drawn with no mask rather than as the transparent layer a mask that
+ * cannot be had is, since this draws no `<mask>`. Undefined where it is no
+ * image at all.
+ */
+function maskImageOf(text, ctx) {
+    const image = backgroundImageOf(text, ctx);
+    return typeof image === 'string' && image[0] === '#' ? null : image;
+}
+/** A `<geometry-box>` as an HTML element has it (CSS Masking 1, 7.5): the
+ *  SVG boxes are its content box and its border box. */
+function maskBox(text) {
+    const v = text.trim().toLowerCase();
+    if (isVisualBox(v))
+        return v;
+    if (v === 'fill-box')
+        return 'content-box';
+    if (v === 'stroke-box' || v === 'view-box')
+        return 'border-box';
+    return null;
+}
+/**
+ * The `mask` shorthand (CSS Masking 1, 7.10): a layer a comma group, each
+ * an image, a position with a size after a `/`, a repeat, one box for the
+ * origin and the clip or two, `no-clip`, a compositing operator and a
+ * mode, each at most once, in any order. The operator and the mode are
+ * read and not honoured: layers are added, and an image masks by its
+ * alpha, which is what `match-source` makes of one. Null where a layer is
+ * not one, which drops the declaration.
+ */
+function readMask(value, ctx) {
+    const out = {
+        images: [],
+        repeats: [],
+        sizes: [],
+        positions: [],
+        origins: [],
+        clips: [],
+    };
+    for (const text of splitCommas(value)) {
+        const parts = splitValue(text).flatMap(splitSlash);
+        let image = null;
+        let repeat = NO_MASK.repeats[0];
+        let size = 'auto';
+        let position = [0, 0];
+        const boxes = [];
+        let seen = 0;
+        const once = (bit) => {
+            if (seen & bit)
+                return false;
+            seen |= bit;
+            return true;
+        };
+        for (let i = 0; i < parts.length;) {
+            const part = parts[i];
+            const v = part.toLowerCase();
+            if (v === 'none' || v.startsWith('url(') || IMAGE_FUNCTION.test(v)) {
+                if (!once(1))
+                    return null;
+                const read = maskImageOf(part, ctx);
+                if (read === undefined)
+                    return null;
+                image = read;
+                i += 1;
+            }
+            else if (v === 'repeat-x' || v === 'repeat-y' || REPEATS.has(v)) {
+                if (!once(2))
+                    return null;
+                const pair = REPEATS.has(v) && REPEATS.has(parts[i + 1]?.toLowerCase());
+                const read = readRepeat(pair ? [v, parts[i + 1].toLowerCase()] : [v]);
+                if (!read)
+                    return null;
+                repeat = read;
+                i += pair ? 2 : 1;
+            }
+            else if (maskBox(v) || v === 'no-clip') {
+                if (boxes.length === 2 || (v === 'no-clip' && !once(4)))
+                    return null;
+                boxes.push(maskBox(v) ?? 'border-box');
+                i += 1;
+            }
+            else if (/^(?:add|subtract|intersect|exclude)$/.test(v)) {
+                if (!once(8))
+                    return null;
+                i += 1;
+            }
+            else if (/^(?:alpha|luminance|match-source)$/.test(v)) {
+                if (!once(16))
+                    return null;
+                i += 1;
+            }
+            else if (isPositionPart(v, ctx)) {
+                if (!once(32))
+                    return null;
+                let end = i;
+                while (end < parts.length &&
+                    isPositionPart(parts[end].toLowerCase(), ctx)) {
+                    end += 1;
+                }
+                const read = positionPair(parts.slice(i, end), ctx);
+                if (!read)
+                    return null;
+                position = read;
+                i = end;
+                if (parts[i] !== '/')
+                    continue;
+                const first = parts[i + 1]?.toLowerCase();
+                if (first === 'cover' || first === 'contain') {
+                    size = first;
+                    i += 2;
+                }
+                else if (first !== undefined && isSizePart(first, ctx)) {
+                    const two = i + 2 < parts.length && isSizePart(parts[i + 2].toLowerCase(), ctx);
+                    size =
+                        backgroundSizeOf(parts.slice(i + 1, i + (two ? 3 : 2)), ctx) ??
+                            'auto';
+                    i += two ? 3 : 2;
+                }
+                else {
+                    return null;
+                }
+            }
+            else {
+                return null;
+            }
+        }
+        out.images.push(image);
+        out.repeats.push(repeat);
+        out.sizes.push(size);
+        out.positions.push(position);
+        out.origins.push(boxes[0] ?? 'border-box');
+        out.clips.push(boxes[1] ?? boxes[0] ?? 'border-box');
+    }
+    return out.images.length ? out : null;
+}
 /** One to four values, one a side as `margin` takes them; null where one
  *  is not a value. */
 function sidesOf(parts, read) {
@@ -2807,6 +3082,14 @@ function repeatPair(x, y) {
     return pair;
 }
 const REPEAT = repeatPair('repeat', 'repeat');
+export const NO_MASK = {
+    images: [null],
+    repeats: [REPEAT],
+    sizes: ['auto'],
+    positions: [[0, 0]],
+    origins: ['border-box'],
+    clips: ['border-box'],
+};
 function applyBorderShorthand(style, name, value, ctx) {
     const sides = name === 'border'
         ? ['Top', 'Right', 'Bottom', 'Left']
@@ -3457,8 +3740,7 @@ function applyFontShorthand(style, parent, value, ctx) {
     // A size and a family, or the value is not a font and the declaration is
     // dropped whole, as CSS drops any value it cannot read — a line height
     // below nought included: `font: 4em/-2em serif` set the text at 4em.
-    const size = keywordFontSize(sizeText ?? '', parent.fontSize, ctx.rem) ??
-        parseLength(sizeText ?? '', { ...ctx, em: parent.fontSize });
+    const size = keywordFontSize(sizeText ?? '', parent.fontSize, ctx.initial?.fontSize ?? ctx.rem) ?? parseLength(sizeText ?? '', { ...ctx, em: parent.fontSize });
     if (!family || size === null || size === AUTO)
         return;
     if (lineText && negativeLength(lineText, ctx))
@@ -3478,12 +3760,11 @@ function applyFontShorthand(style, parent, value, ctx) {
     style.lineHeight = 'normal';
     style.lineHeightIsLength = false;
     applyDeclaration(style, parent, 'font-size', sizeText, ctx);
-    if (lineText) {
-        applyDeclaration(style, parent, 'line-height', lineText, {
-            ...ctx,
-            em: style.fontSize,
-        });
-    }
+    // against the element's own size, which `ctx.em` is once the cascade has
+    // settled it: a later rule's `font-size` outranks this one's, and
+    // `font: 12px/150%` under a `font-size: 16px` is on 24px lines
+    if (lineText)
+        applyDeclaration(style, parent, 'line-height', lineText, ctx);
     applyDeclaration(style, parent, 'font-family', family, ctx);
 }
 /** Whether a line height is a number or a length below nought. */
@@ -4172,6 +4453,7 @@ function camel(name) {
 }
 const INHERITED_NAMES = new Set([
     'color',
+    'color-scheme',
     '-webkit-text-fill-color',
     'font',
     'font-family',
@@ -4216,6 +4498,11 @@ export function isInherited(name) {
 /** A property back to its initial value: what a declaration whose `var()`
  *  has no value comes to, where the property is not inherited. */
 export function initialOne(style, initial, name) {
+    const list = MASK_LISTS[name];
+    if (list) {
+        style.mask = { ...style.mask, [list]: initial.mask[list] };
+        return;
+    }
     const keys = INHERIT_TARGETS[name];
     if (!keys)
         return;
@@ -4224,6 +4511,11 @@ export function initialOne(style, initial, name) {
     }
 }
 function inheritOne(style, parent, name) {
+    const list = MASK_LISTS[name];
+    if (list) {
+        style.mask = { ...style.mask, [list]: parent.mask[list] };
+        return;
+    }
     const keys = INHERIT_TARGETS[name];
     if (!keys)
         return;
@@ -4236,8 +4528,29 @@ function inheritOne(style, parent, name) {
 }
 const SIDES = ['Top', 'Right', 'Bottom', 'Left'];
 const sides = (make) => SIDES.map(make);
+/**
+ * The list of the mask's layers each longhand is, which `initial`,
+ * `inherit` and a `var()` that fails reset alone: one field holds them all,
+ * and reset whole, a `mask-size: calc(var(--x) - 4px)` put back the
+ * `mask-repeat: no-repeat` before it, and Wikipedia's chevron repeated.
+ */
+const MASK_LISTS = {
+    'mask-image': 'images',
+    '-webkit-mask-image': 'images',
+    'mask-repeat': 'repeats',
+    '-webkit-mask-repeat': 'repeats',
+    'mask-size': 'sizes',
+    '-webkit-mask-size': 'sizes',
+    'mask-position': 'positions',
+    '-webkit-mask-position': 'positions',
+    'mask-origin': 'origins',
+    '-webkit-mask-origin': 'origins',
+    'mask-clip': 'clips',
+    '-webkit-mask-clip': 'clips',
+};
 const INHERIT_TARGETS = {
     color: ['color'],
+    'color-scheme': ['colorScheme'],
     '-webkit-text-fill-color': ['textFillColor'],
     'background-clip': [
         'backgroundClipText',
@@ -4251,6 +4564,8 @@ const INHERIT_TARGETS = {
     ],
     'background-origin': ['backgroundOrigin', 'backgroundOrigins'],
     'border-image': ['borderImage'],
+    mask: ['mask'],
+    '-webkit-mask': ['mask'],
     'border-image-source': ['borderImage'],
     'border-image-slice': ['borderImage'],
     'border-image-width': ['borderImage'],
@@ -4331,6 +4646,8 @@ const INHERIT_TARGETS = {
     'min-height': ['minHeight', 'minHeightKeyword'],
     'max-height': ['maxHeight', 'maxHeightKeyword'],
     'box-sizing': ['boxSizing'],
+    'box-decoration-break': ['boxDecorationBreak'],
+    '-webkit-box-decoration-break': ['boxDecorationBreak'],
     margin: sides((s) => `margin${s}`),
     'margin-top': ['marginTop'],
     'margin-right': ['marginRight'],