@blotch/rsbuild-plugin-angular-lynx 22.2.3 → 22.2.4

package/dist/index.js

@@ -12,6 +12,7 @@ import { availableParallelism } from "node:os";
 import { workspaces } from "@angular-devkit/core";
 import { NodeJsSyncHost } from "@angular-devkit/core/node";
 import { access, constants } from "node:fs/promises";
+import postcss_value_parser from "postcss-value-parser";
 import * as __rspack_external_typescript from "typescript";
 import * as __rspack_external_node_path_c5b9b54f from "node:path";
 const ANGULAR_CLI_CONTEXT = Symbol.for('@blotch/rsbuild-plugin-angular-lynx:angular-cli-context');
@@ -527,7 +528,7 @@ const checkThresholds = (thresholds, size, label)=>thresholds.flatMap(({ limit,
             }
         ];
     });
-const sum = (sizes)=>sizes.reduce((total, { size })=>total + size, 0);
+const budgets_sum = (sizes)=>sizes.reduce((total, { size })=>total + size, 0);
 const calculateSizes = (budget, assets, componentStyles)=>{
     switch(budget.type){
         case 'initial':
@@ -541,21 +542,21 @@ const calculateSizes = (budget, assets, componentStyles)=>{
         case 'bundle':
             return budget.name ? [
                 {
-                    size: sum(assets.filter((asset)=>asset.entryName === budget.name)),
+                    size: budgets_sum(assets.filter((asset)=>asset.entryName === budget.name)),
                     label: budget.name
                 }
             ] : [];
         case 'all':
             return [
                 {
-                    size: sum(assets),
+                    size: budgets_sum(assets),
                     label: 'total'
                 }
             ];
         case 'allScript':
             return [
                 {
-                    size: sum(assets),
+                    size: budgets_sum(assets),
                     label: "total scripts"
                 }
             ];
@@ -2287,6 +2288,1830 @@ const applySplitChunksRule = (api, options)=>{
         return rspackConfig;
     });
 };
+const foldCalc = (value)=>{
+    if (!value.includes('calc(')) return value;
+    const parsed = postcss_value_parser(value);
+    foldNodes(parsed.nodes);
+    return parsed.toString();
+};
+const foldNodes = (nodes)=>{
+    for (const node of nodes){
+        if ('function' !== node.type) continue;
+        const folded = 'calc' === node.value.toLowerCase() ? evaluate(node.nodes) : void 0;
+        if (folded) Object.assign(node, {
+            type: 'word',
+            value: formatDimension(folded)
+        });
+        else foldNodes(node.nodes);
+    }
+};
+const INFINITY_VALUE = 9999;
+const formatDimension = ({ value, unit })=>`${Number(value.toFixed(6))}${unit}`;
+const evaluate = (nodes)=>{
+    const tokens = tokenize(nodes);
+    if (!tokens) return;
+    let position = 0;
+    const peek = ()=>tokens[position];
+    const factor = ()=>{
+        const token = tokens[position++];
+        return 'object' == typeof token ? token : void 0;
+    };
+    const term = ()=>{
+        let left = factor();
+        while(left && ('*' === peek() || '/' === peek())){
+            const operator = tokens[position++];
+            const right = factor();
+            left = right && ('*' === operator ? multiply(left, right) : divide(left, right));
+        }
+        return left;
+    };
+    const expression = ()=>{
+        let left = term();
+        while(left && ('+' === peek() || '-' === peek())){
+            const operator = tokens[position++];
+            const right = term();
+            left = right && add(left, '-' === operator ? negate(right) : right);
+        }
+        return left;
+    };
+    const result = expression();
+    return position === tokens.length ? result : void 0;
+};
+const tokenize = (nodes)=>{
+    const tokens = [];
+    for (const node of nodes){
+        if ('space' === node.type || 'comment' === node.type) continue;
+        if ('function' === node.type) {
+            const name = node.value.toLowerCase();
+            const group = 'calc' === name || '' === name ? evaluate(node.nodes) : void 0;
+            if (!group) return;
+            tokens.push(group);
+            continue;
+        }
+        if ('word' !== node.type) return;
+        if ([
+            '+',
+            '-',
+            '*',
+            '/'
+        ].includes(node.value)) {
+            tokens.push(node.value);
+            continue;
+        }
+        if (/^-?infinity$/i.test(node.value)) {
+            tokens.push({
+                value: node.value.startsWith('-') ? -INFINITY_VALUE : INFINITY_VALUE,
+                unit: ''
+            });
+            continue;
+        }
+        const unit = postcss_value_parser.unit(node.value);
+        if (!unit) return;
+        tokens.push({
+            value: Number(unit.number),
+            unit: unit.unit.toLowerCase()
+        });
+    }
+    return tokens;
+};
+const negate = ({ value, unit })=>({
+        value: -value,
+        unit
+    });
+const add = (a, b)=>a.unit === b.unit ? {
+        value: a.value + b.value,
+        unit: a.unit
+    } : void 0;
+const multiply = (a, b)=>{
+    if (a.unit && b.unit) return;
+    return {
+        value: a.value * b.value,
+        unit: a.unit || b.unit
+    };
+};
+const divide = (a, b)=>b.unit || 0 === b.value ? void 0 : {
+        value: a.value / b.value,
+        unit: a.unit
+    };
+const clampHugeNumbers = (value)=>value.replace(/(-?)\d*\.?\d+e\+?(\d+)([a-z%]*)/gi, (match, sign, exponent, unit)=>Number(exponent) >= 7 ? `${sign}${INFINITY_VALUE}${unit}` : match);
+const COLOR_FUNCTIONS = new Set([
+    'rgb',
+    'rgba',
+    'hsl',
+    'hsla',
+    'hwb',
+    'lab',
+    'lch',
+    'oklab',
+    'oklch',
+    'color-mix'
+]);
+const LOWERED_FUNCTIONS = new Set([
+    ...COLOR_FUNCTIONS
+].filter((name)=>'rgb' !== name && 'rgba' !== name));
+const NAMED_COLORS = {
+    aliceblue: 'f0f8ff',
+    antiquewhite: 'faebd7',
+    aqua: '00ffff',
+    aquamarine: '7fffd4',
+    azure: 'f0ffff',
+    beige: 'f5f5dc',
+    bisque: 'ffe4c4',
+    black: '000000',
+    blanchedalmond: 'ffebcd',
+    blue: '0000ff',
+    blueviolet: '8a2be2',
+    brown: 'a52a2a',
+    burlywood: 'deb887',
+    cadetblue: '5f9ea0',
+    chartreuse: '7fff00',
+    chocolate: 'd2691e',
+    coral: 'ff7f50',
+    cornflowerblue: '6495ed',
+    cornsilk: 'fff8dc',
+    crimson: 'dc143c',
+    cyan: '00ffff',
+    darkblue: '00008b',
+    darkcyan: '008b8b',
+    darkgoldenrod: 'b8860b',
+    darkgray: 'a9a9a9',
+    darkgreen: '006400',
+    darkgrey: 'a9a9a9',
+    darkkhaki: 'bdb76b',
+    darkmagenta: '8b008b',
+    darkolivegreen: '556b2f',
+    darkorange: 'ff8c00',
+    darkorchid: '9932cc',
+    darkred: '8b0000',
+    darksalmon: 'e9967a',
+    darkseagreen: '8fbc8f',
+    darkslateblue: '483d8b',
+    darkslategray: '2f4f4f',
+    darkslategrey: '2f4f4f',
+    darkturquoise: '00ced1',
+    darkviolet: '9400d3',
+    deeppink: 'ff1493',
+    deepskyblue: '00bfff',
+    dimgray: '696969',
+    dimgrey: '696969',
+    dodgerblue: '1e90ff',
+    firebrick: 'b22222',
+    floralwhite: 'fffaf0',
+    forestgreen: '228b22',
+    fuchsia: 'ff00ff',
+    gainsboro: 'dcdcdc',
+    ghostwhite: 'f8f8ff',
+    gold: 'ffd700',
+    goldenrod: 'daa520',
+    gray: '808080',
+    green: '008000',
+    greenyellow: 'adff2f',
+    grey: '808080',
+    honeydew: 'f0fff0',
+    hotpink: 'ff69b4',
+    indianred: 'cd5c5c',
+    indigo: '4b0082',
+    ivory: 'fffff0',
+    khaki: 'f0e68c',
+    lavender: 'e6e6fa',
+    lavenderblush: 'fff0f5',
+    lawngreen: '7cfc00',
+    lemonchiffon: 'fffacd',
+    lightblue: 'add8e6',
+    lightcoral: 'f08080',
+    lightcyan: 'e0ffff',
+    lightgoldenrodyellow: 'fafad2',
+    lightgray: 'd3d3d3',
+    lightgreen: '90ee90',
+    lightgrey: 'd3d3d3',
+    lightpink: 'ffb6c1',
+    lightsalmon: 'ffa07a',
+    lightseagreen: '20b2aa',
+    lightskyblue: '87cefa',
+    lightslategray: '778899',
+    lightslategrey: '778899',
+    lightsteelblue: 'b0c4de',
+    lightyellow: 'ffffe0',
+    lime: '00ff00',
+    limegreen: '32cd32',
+    linen: 'faf0e6',
+    magenta: 'ff00ff',
+    maroon: '800000',
+    mediumaquamarine: '66cdaa',
+    mediumblue: '0000cd',
+    mediumorchid: 'ba55d3',
+    mediumpurple: '9370db',
+    mediumseagreen: '3cb371',
+    mediumslateblue: '7b68ee',
+    mediumspringgreen: '00fa9a',
+    mediumturquoise: '48d1cc',
+    mediumvioletred: 'c71585',
+    midnightblue: '191970',
+    mintcream: 'f5fffa',
+    mistyrose: 'ffe4e1',
+    moccasin: 'ffe4b5',
+    navajowhite: 'ffdead',
+    navy: '000080',
+    oldlace: 'fdf5e6',
+    olive: '808000',
+    olivedrab: '6b8e23',
+    orange: 'ffa500',
+    orangered: 'ff4500',
+    orchid: 'da70d6',
+    palegoldenrod: 'eee8aa',
+    palegreen: '98fb98',
+    paleturquoise: 'afeeee',
+    palevioletred: 'db7093',
+    papayawhip: 'ffefd5',
+    peachpuff: 'ffdab9',
+    peru: 'cd853f',
+    pink: 'ffc0cb',
+    plum: 'dda0dd',
+    powderblue: 'b0e0e6',
+    purple: '800080',
+    rebeccapurple: '663399',
+    red: 'ff0000',
+    rosybrown: 'bc8f8f',
+    royalblue: '4169e1',
+    saddlebrown: '8b4513',
+    salmon: 'fa8072',
+    sandybrown: 'f4a460',
+    seagreen: '2e8b57',
+    seashell: 'fff5ee',
+    sienna: 'a0522d',
+    silver: 'c0c0c0',
+    skyblue: '87ceeb',
+    slateblue: '6a5acd',
+    slategray: '708090',
+    slategrey: '708090',
+    snow: 'fffafa',
+    springgreen: '00ff7f',
+    steelblue: '4682b4',
+    tan: 'd2b48c',
+    teal: '008080',
+    thistle: 'd8bfd8',
+    tomato: 'ff6347',
+    turquoise: '40e0d0',
+    violet: 'ee82ee',
+    wheat: 'f5deb3',
+    white: 'ffffff',
+    whitesmoke: 'f5f5f5',
+    yellow: 'ffff00',
+    yellowgreen: '9acd32'
+};
+const lowerColors = (value, channelVariables = new Set())=>{
+    if (![
+        ...LOWERED_FUNCTIONS
+    ].some((name)=>value.includes(`${name}(`))) return value;
+    const parsed = postcss_value_parser(value);
+    rewriteColorFunctions(parsed.nodes, channelVariables);
+    return parsed.toString();
+};
+const rewriteColorFunctions = (nodes, channelVariables)=>{
+    for (const node of nodes){
+        if ('function' !== node.type) continue;
+        const name = node.value.toLowerCase();
+        const color = LOWERED_FUNCTIONS.has(name) ? parseColor(node) : void 0;
+        if (color) {
+            Object.assign(node, {
+                type: 'word',
+                value: formatRgb(color)
+            });
+            continue;
+        }
+        rewriteColorFunctions(node.nodes, channelVariables);
+        const mixed = 'color-mix' === name ? mixWithChannels(node.nodes, channelVariables) : void 0;
+        if (mixed) Object.assign(node, {
+            type: 'word',
+            value: mixed
+        });
+    }
+};
+const mixWithChannels = (nodes, channelVariables)=>{
+    const parts = splitByComma(nodes);
+    if (3 !== parts.length) return;
+    const [, first, second] = parts;
+    const variable = first.find((node)=>'function' === node.type && 'var' === node.value.toLowerCase());
+    const name = variable?.nodes[0]?.value;
+    const percentage = first.filter((node)=>node !== variable).map((node)=>postcss_value_parser.unit(node.value) || {
+            number: '',
+            unit: ''
+        });
+    const isTransparent = 1 === second.length && 'transparent' === second[0].value.toLowerCase();
+    if (!name || !channelVariables.has(name) || 1 !== variable.nodes.length || !isTransparent || percentage.length > 1 || 1 === percentage.length && percentage[0]?.unit !== '%') return;
+    const alpha = percentage[0] ? Number(percentage[0].number) / 100 : 0.5;
+    return `rgba(var(${name}-rgb), ${Number(alpha.toFixed(4))})`;
+};
+const formatRgb = ({ r, g, b, alpha })=>{
+    const channel = (value)=>Math.round(255 * clamp01(value));
+    const channels = `${channel(r)}, ${channel(g)}, ${channel(b)}`;
+    const a = Number(clamp01(alpha).toFixed(4));
+    return 1 === a ? `rgb(${channels})` : `rgba(${channels}, ${a})`;
+};
+const clamp01 = (value)=>Math.min(1, Math.max(0, value));
+const parseColor = (node)=>{
+    if ('word' === node.type) {
+        const word = node.value.toLowerCase();
+        if ('transparent' === word) return {
+            r: 0,
+            g: 0,
+            b: 0,
+            alpha: 0
+        };
+        const named = NAMED_COLORS[word];
+        return parseHex('string' == typeof named ? `#${named}` : word);
+    }
+    if ('function' !== node.type) return;
+    const name = node.value.toLowerCase();
+    if (!COLOR_FUNCTIONS.has(name)) return;
+    if ('color-mix' === name) return parseColorMix(node.nodes);
+    const args = colorArguments(node.nodes);
+    if (!args) return;
+    const { channels, alpha } = args;
+    switch(name){
+        case 'rgb':
+        case 'rgba':
+            return withAlpha(rgbFromChannels(channels.map((c)=>colors_channel(c, 255))), alpha);
+        case 'hsl':
+        case 'hsla':
+            return withAlpha(hslToRgb(angle(channels[0]), percent(channels[1]), percent(channels[2])), alpha);
+        case 'hwb':
+            return withAlpha(hwbToRgb(angle(channels[0]), percent(channels[1]), percent(channels[2])), alpha);
+        case 'lab':
+            return withAlpha(labToRgb([
+                colors_channel(channels[0], 100),
+                colors_channel(channels[1], 125),
+                colors_channel(channels[2], 125)
+            ]), alpha);
+        case 'lch':
+            return withAlpha(labToRgb(polarToRectangular([
+                colors_channel(channels[0], 100),
+                colors_channel(channels[1], 150),
+                angle(channels[2])
+            ])), alpha);
+        case 'oklab':
+            return withAlpha(oklabToRgb([
+                colors_channel(channels[0], 1),
+                colors_channel(channels[1], 0.4),
+                colors_channel(channels[2], 0.4)
+            ]), alpha);
+        default:
+            return withAlpha(oklabToRgb(polarToRectangular([
+                colors_channel(channels[0], 1),
+                colors_channel(channels[1], 0.4),
+                angle(channels[2])
+            ])), alpha);
+    }
+};
+const rgbFromChannels = ([r, g, b])=>({
+        r: r / 255,
+        g: g / 255,
+        b: b / 255,
+        alpha: 1
+    });
+const withAlpha = (color, alpha)=>({
+        ...color,
+        alpha: void 0 === alpha ? 1 : colors_channel(alpha, 1)
+    });
+const parseHex = (word)=>{
+    const match = /^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i.exec(word);
+    if (!match) return;
+    let hex = match[1];
+    if (hex.length <= 4) hex = [
+        ...hex
+    ].map((digit)=>digit + digit).join('');
+    const byte = (index)=>Number.parseInt(hex.slice(2 * index, 2 * index + 2), 16) / 255;
+    return {
+        r: byte(0),
+        g: byte(1),
+        b: byte(2),
+        alpha: 8 === hex.length ? byte(3) : 1
+    };
+};
+const colorArguments = (nodes)=>{
+    const words = [];
+    let alpha;
+    let afterSlash = false;
+    for (const node of nodes)if ('space' !== node.type && 'comment' !== node.type) {
+        if ('div' === node.type) {
+            afterSlash ||= '/' === node.value;
+            continue;
+        }
+        if ('word' !== node.type) return;
+        if (afterSlash) alpha = node.value;
+        else words.push(node.value);
+    }
+    if (void 0 === alpha && 4 === words.length) alpha = words.pop();
+    if (3 !== words.length || ![
+        ...words,
+        ...void 0 === alpha ? [] : [
+            alpha
+        ]
+    ].every(isNumeric)) return;
+    return {
+        channels: words,
+        alpha
+    };
+};
+const isNumeric = (word)=>'none' === word.toLowerCase() || false !== postcss_value_parser.unit(word);
+const colors_channel = (word, full)=>{
+    const { number, unit } = postcss_value_parser.unit(word) || {
+        number: '0',
+        unit: ''
+    };
+    return '%' === unit ? Number(number) / 100 * full : Number(number);
+};
+const percent = (word)=>colors_channel(word, 100) / 100;
+const angle = (word)=>{
+    const { number, unit } = postcss_value_parser.unit(word) || {
+        number: '0',
+        unit: ''
+    };
+    const value = Number(number);
+    switch(unit.toLowerCase()){
+        case 'rad':
+            return 180 * value / Math.PI;
+        case 'grad':
+            return 0.9 * value;
+        case 'turn':
+            return 360 * value;
+        default:
+            return value;
+    }
+};
+const hslToRgb = (hue, saturation, lightness)=>{
+    const h = (hue % 360 + 360) % 360;
+    const f = (n)=>{
+        const k = (n + h / 30) % 12;
+        const a = saturation * Math.min(lightness, 1 - lightness);
+        return lightness - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    };
+    return {
+        r: f(0),
+        g: f(8),
+        b: f(4),
+        alpha: 1
+    };
+};
+const hwbToRgb = (hue, whiteness, blackness)=>{
+    if (whiteness + blackness >= 1) {
+        const gray = whiteness / (whiteness + blackness);
+        return {
+            r: gray,
+            g: gray,
+            b: gray,
+            alpha: 1
+        };
+    }
+    const { r, g, b } = hslToRgb(hue, 1, 0.5);
+    const scale = (value)=>value * (1 - whiteness - blackness) + whiteness;
+    return {
+        r: scale(r),
+        g: scale(g),
+        b: scale(b),
+        alpha: 1
+    };
+};
+const polarToRectangular = ([lightness, chroma, hue])=>{
+    const radians = hue * Math.PI / 180;
+    return [
+        lightness,
+        chroma * Math.cos(radians),
+        chroma * Math.sin(radians)
+    ];
+};
+const rectangularToPolar = ([lightness, a, b])=>{
+    const hue = 180 * Math.atan2(b, a) / Math.PI;
+    return [
+        lightness,
+        Math.hypot(a, b),
+        (hue + 360) % 360
+    ];
+};
+const gammaEncode = (value)=>{
+    const sign = value < 0 ? -1 : 1;
+    const abs = Math.abs(value);
+    return abs > 0.0031308 ? sign * (1.055 * abs ** (1 / 2.4) - 0.055) : 12.92 * value;
+};
+const gammaDecode = (value)=>{
+    const sign = value < 0 ? -1 : 1;
+    const abs = Math.abs(value);
+    return abs > 0.04045 ? sign * ((abs + 0.055) / 1.055) ** 2.4 : value / 12.92;
+};
+const oklabToLinearRgb = ([l, a, b])=>{
+    const lms = [
+        (l + 0.3963377773761749 * a + 0.2158037573099136 * b) ** 3,
+        (l - 0.1055613458156586 * a - 0.0638541728258133 * b) ** 3,
+        (l - 0.0894841775298119 * a - 1.2914855480194092 * b) ** 3
+    ];
+    return [
+        4.0767416360759583 * lms[0] - 3.3077115392580629 * lms[1] + 0.2309699031821043 * lms[2],
+        -1.2684379732850315 * lms[0] + 2.6097573492876882 * lms[1] - 0.341319376002657 * lms[2],
+        -0.0041960761386756 * lms[0] - 0.7034186179359363 * lms[1] + 1.7076146940746117 * lms[2]
+    ];
+};
+const linearRgbToOklab = ([r, g, b])=>{
+    const lms = [
+        Math.cbrt(0.4122214694707629 * r + 0.5363325372617349 * g + 0.0514459932675022 * b),
+        Math.cbrt(0.2119034958178251 * r + 0.6806995506452344 * g + 0.1073969535369406 * b),
+        Math.cbrt(0.0883024591900564 * r + 0.2817188391361215 * g + 0.6299787016738223 * b)
+    ];
+    return [
+        0.2104542553 * lms[0] + 0.793617785 * lms[1] - 0.0040720468 * lms[2],
+        1.9779984951 * lms[0] - 2.428592205 * lms[1] + 0.4505937099 * lms[2],
+        0.0259040371 * lms[0] + 0.7827717662 * lms[1] - 0.808675766 * lms[2]
+    ];
+};
+const encodeRgb = ([r, g, b])=>({
+        r: gammaEncode(r),
+        g: gammaEncode(g),
+        b: gammaEncode(b),
+        alpha: 1
+    });
+const rgbToOklab = ({ r, g, b })=>linearRgbToOklab([
+        gammaDecode(r),
+        gammaDecode(g),
+        gammaDecode(b)
+    ]);
+const isInGamut = ({ r, g, b })=>[
+        r,
+        g,
+        b
+    ].every((value)=>value >= -0.000001 && value <= 1 + 1e-6);
+const clip = ({ r, g, b, alpha })=>({
+        r: clamp01(r),
+        g: clamp01(g),
+        b: clamp01(b),
+        alpha
+    });
+const oklabToRgb = (oklab)=>{
+    const color = encodeRgb(oklabToLinearRgb(oklab));
+    if (isInGamut(color)) return color;
+    const [lightness, chroma, hue] = rectangularToPolar(oklab);
+    if (lightness >= 1) return {
+        r: 1,
+        g: 1,
+        b: 1,
+        alpha: 1
+    };
+    if (lightness <= 0) return {
+        r: 0,
+        g: 0,
+        b: 0,
+        alpha: 1
+    };
+    const JND = 0.02;
+    const EPSILON = 0.0001;
+    const atChroma = (c)=>encodeRgb(oklabToLinearRgb(polarToRectangular([
+            lightness,
+            c,
+            hue
+        ])));
+    const deltaE = (a, b)=>Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
+    let clipped = clip(color);
+    if (deltaE(rgbToOklab(clipped), oklab) < JND) return clipped;
+    let min = 0;
+    let max = chroma;
+    let minInGamut = true;
+    while(max - min > EPSILON){
+        const c = (min + max) / 2;
+        const current = atChroma(c);
+        if (minInGamut && isInGamut(current)) {
+            min = c;
+            continue;
+        }
+        clipped = clip(current);
+        const e = deltaE(rgbToOklab(clipped), polarToRectangular([
+            lightness,
+            c,
+            hue
+        ]));
+        if (e < JND) {
+            if (JND - e < EPSILON) break;
+            minInGamut = false;
+            min = c;
+        } else max = c;
+    }
+    return clipped;
+};
+const labToRgb = ([l, a, b])=>{
+    const k = 24389 / 27;
+    const e = 216 / 24389;
+    const fy = (l + 16) / 116;
+    const fx = a / 500 + fy;
+    const fz = fy - b / 200;
+    const xyz = [
+        (fx ** 3 > e ? fx ** 3 : (116 * fx - 16) / k) * 0.3457 / 0.3585,
+        l > k * e ? fy ** 3 : l / k,
+        (fz ** 3 > e ? fz ** 3 : (116 * fz - 16) / k) * 0.2958 / 0.3585
+    ];
+    const d65 = [
+        0.955473421488075 * xyz[0] - 0.02309845494876471 * xyz[1] + 0.06325924320057072 * xyz[2],
+        -0.0283697093338637 * xyz[0] + 1.0099953980813041 * xyz[1] + 0.021041441191917323 * xyz[2],
+        0.012314014864481998 * xyz[0] - 0.020507649298898964 * xyz[1] + 1.330365926242124 * xyz[2]
+    ];
+    const linear = [
+        3.2409699419045226 * d65[0] - 1.537383177570094 * d65[1] - 0.4986107602930034 * d65[2],
+        -0.9692436362808796 * d65[0] + 1.8759675015077202 * d65[1] + 0.04155505740717559 * d65[2],
+        0.05563007969699366 * d65[0] - 0.20397695888897652 * d65[1] + 1.0569715142428786 * d65[2]
+    ];
+    const color = encodeRgb(linear);
+    return isInGamut(color) ? color : oklabToRgb(linearRgbToOklab(linear));
+};
+const parseColorMix = (nodes)=>{
+    const parts = splitByComma(nodes);
+    if (3 !== parts.length) return;
+    const space = mixSpace(parts[0]);
+    const first = mixColor(parts[1]);
+    const second = mixColor(parts[2]);
+    if (!space || !first || !second) return;
+    let p1 = first.percentage;
+    let p2 = second.percentage;
+    if (void 0 === p1 && void 0 === p2) p1 = p2 = 50;
+    else if (void 0 === p1) p1 = 100 - p2;
+    else if (void 0 === p2) p2 = 100 - p1;
+    const sum = p1 + p2;
+    if (sum <= 0) return;
+    const mixed = interpolate(space, first.color, second.color, p2 / sum);
+    return {
+        ...mixed,
+        alpha: mixed.alpha * Math.min(sum, 100) / 100
+    };
+};
+const splitByComma = (nodes)=>{
+    const parts = [
+        []
+    ];
+    for (const node of nodes)if ('div' === node.type && ',' === node.value) parts.push([]);
+    else if ('space' !== node.type && 'comment' !== node.type) parts[parts.length - 1].push(node);
+    return parts;
+};
+const MIX_SPACES = new Set([
+    'srgb',
+    'srgb-linear',
+    'oklab',
+    'oklch'
+]);
+const mixSpace = (nodes)=>{
+    const words = nodes.map((node)=>node.value.toLowerCase());
+    const [keyword, space, ...hue] = words;
+    const defaultHue = 0 === hue.length || 'shorter' === hue[0] && 'hue' === hue[1];
+    return 'in' === keyword && MIX_SPACES.has(space) && defaultHue ? space : void 0;
+};
+const mixColor = (nodes)=>{
+    let color;
+    let percentage;
+    for (const node of nodes){
+        const unit = 'word' === node.type && postcss_value_parser.unit(node.value);
+        if (unit && '%' === unit.unit && void 0 === percentage) percentage = Number(unit.number);
+        else {
+            if (color) return;
+            color = parseColor(node);
+            if (!color) return;
+        }
+    }
+    return color && {
+        color,
+        percentage
+    };
+};
+const interpolate = (space, from, to, weight)=>{
+    const alpha = from.alpha * (1 - weight) + to.alpha * weight;
+    if (0 === alpha) return {
+        r: 0,
+        g: 0,
+        b: 0,
+        alpha: 0
+    };
+    const blend = (a, b)=>(a * from.alpha * (1 - weight) + b * to.alpha * weight) / alpha;
+    switch(space){
+        case 'srgb':
+            return {
+                r: blend(from.r, to.r),
+                g: blend(from.g, to.g),
+                b: blend(from.b, to.b),
+                alpha
+            };
+        case 'srgb-linear':
+            return {
+                ...encodeRgb([
+                    blend(gammaDecode(from.r), gammaDecode(to.r)),
+                    blend(gammaDecode(from.g), gammaDecode(to.g)),
+                    blend(gammaDecode(from.b), gammaDecode(to.b))
+                ]),
+                alpha
+            };
+        case 'oklab':
+            {
+                const a = rgbToOklab(from);
+                const b = rgbToOklab(to);
+                return {
+                    ...oklabToRgb([
+                        blend(a[0], b[0]),
+                        blend(a[1], b[1]),
+                        blend(a[2], b[2])
+                    ]),
+                    alpha
+                };
+            }
+        default:
+            {
+                const a = rectangularToPolar(rgbToOklab(from));
+                const b = rectangularToPolar(rgbToOklab(to));
+                const powerless = (color, source)=>color[1] < 1e-4 || 0 === source.alpha;
+                const hueA = powerless(a, from) ? b[2] : a[2];
+                const hueB = powerless(b, to) ? a[2] : b[2];
+                let delta = hueB - hueA;
+                if (delta > 180) delta -= 360;
+                else if (delta < -180) delta += 360;
+                const hue = hueA + delta * weight;
+                return {
+                    ...oklabToRgb(polarToRectangular([
+                        blend(a[0], b[0]),
+                        blend(a[1], b[1]),
+                        hue
+                    ])),
+                    alpha
+                };
+            }
+    }
+};
+const LYNX_PROPERTIES = new Set([
+    '-x-animation-color-interpolation',
+    '-x-app-region',
+    '-x-auto-font-size',
+    '-x-auto-font-size-line-ranges',
+    '-x-auto-font-size-preset-sizes',
+    '-x-box-match-parent-size',
+    '-x-box-propagate-min-constraints',
+    '-x-caret-gradient',
+    '-x-caret-height',
+    '-x-caret-radius',
+    '-x-caret-width',
+    '-x-handle-color',
+    '-x-handle-size',
+    '-x-placeholder-color',
+    '-x-placeholder-font-family',
+    '-x-placeholder-font-size',
+    '-x-placeholder-font-style',
+    '-x-placeholder-font-weight',
+    '-x-text-decoration-gap',
+    '-x-text-decoration-width',
+    'adapt-font-size',
+    'align-content',
+    'align-items',
+    'align-self',
+    'animation',
+    'animation-delay',
+    'animation-direction',
+    'animation-duration',
+    'animation-fill-mode',
+    'animation-iteration-count',
+    'animation-name',
+    'animation-play-state',
+    'animation-timing-function',
+    'aspect-ratio',
+    'background',
+    'background-clip',
+    'background-color',
+    'background-image',
+    'background-origin',
+    'background-position',
+    'background-repeat',
+    'background-size',
+    'border',
+    'border-bottom',
+    'border-bottom-color',
+    'border-bottom-left-radius',
+    'border-bottom-right-radius',
+    'border-bottom-style',
+    'border-bottom-width',
+    'border-color',
+    'border-end-end-radius',
+    'border-end-start-radius',
+    'border-inline-end-color',
+    'border-inline-end-style',
+    'border-inline-end-width',
+    'border-inline-start-color',
+    'border-inline-start-style',
+    'border-inline-start-width',
+    'border-left',
+    'border-left-color',
+    'border-left-style',
+    'border-left-width',
+    'border-radius',
+    'border-right',
+    'border-right-color',
+    'border-right-style',
+    'border-right-width',
+    'border-start-end-radius',
+    'border-start-start-radius',
+    'border-style',
+    'border-top',
+    'border-top-color',
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'border-top-style',
+    'border-top-width',
+    'border-width',
+    'bottom',
+    'box-shadow',
+    'box-sizing',
+    'caret-color',
+    'clip-path',
+    'color',
+    'column-gap',
+    'content',
+    'cursor',
+    'direction',
+    'display',
+    'enter-transition-name',
+    'exit-transition-name',
+    'filter',
+    'flex',
+    'flex-basis',
+    'flex-direction',
+    'flex-flow',
+    'flex-grow',
+    'flex-shrink',
+    'flex-wrap',
+    'font-family',
+    'font-feature-settings',
+    'font-optical-sizing',
+    'font-size',
+    'font-style',
+    'font-variation-settings',
+    'font-weight',
+    'gap',
+    'grid-auto-columns',
+    'grid-auto-flow',
+    'grid-auto-rows',
+    'grid-column',
+    'grid-column-end',
+    'grid-column-gap',
+    'grid-column-span',
+    'grid-column-start',
+    'grid-row',
+    'grid-row-end',
+    'grid-row-gap',
+    'grid-row-span',
+    'grid-row-start',
+    'grid-template-columns',
+    'grid-template-rows',
+    'height',
+    'hyphens',
+    'image-rendering',
+    'implicit-animation',
+    'inset-inline-end',
+    'inset-inline-start',
+    'justify-content',
+    'justify-items',
+    'justify-self',
+    'layout-animation-create-delay',
+    'layout-animation-create-duration',
+    'layout-animation-create-property',
+    'layout-animation-create-timing-function',
+    'layout-animation-delete-delay',
+    'layout-animation-delete-duration',
+    'layout-animation-delete-property',
+    'layout-animation-delete-timing-function',
+    'layout-animation-update-delay',
+    'layout-animation-update-duration',
+    'layout-animation-update-timing-function',
+    'left',
+    'letter-spacing',
+    'line-height',
+    'line-spacing',
+    'linear-cross-gravity',
+    'linear-direction',
+    'linear-gravity',
+    'linear-layout-gravity',
+    'linear-orientation',
+    'linear-weight',
+    'linear-weight-sum',
+    'list-cross-axis-gap',
+    'list-main-axis-gap',
+    'margin',
+    'margin-bottom',
+    'margin-inline-end',
+    'margin-inline-start',
+    'margin-left',
+    'margin-right',
+    'margin-top',
+    'mask',
+    'mask-clip',
+    'mask-composite',
+    'mask-image',
+    'mask-origin',
+    'mask-position',
+    'mask-repeat',
+    'mask-size',
+    'max-height',
+    'max-width',
+    'min-height',
+    'min-width',
+    'offset-distance',
+    'offset-path',
+    'offset-rotate',
+    'opacity',
+    'order',
+    'outline',
+    'outline-color',
+    'outline-style',
+    'outline-width',
+    'overflow',
+    'overflow-x',
+    'overflow-y',
+    'padding',
+    'padding-bottom',
+    'padding-inline-end',
+    'padding-inline-start',
+    'padding-left',
+    'padding-right',
+    'padding-top',
+    'pause-transition-name',
+    'perspective',
+    'pointer-events',
+    'position',
+    'relative-align-bottom',
+    'relative-align-inline-end',
+    'relative-align-inline-start',
+    'relative-align-left',
+    'relative-align-right',
+    'relative-align-top',
+    'relative-bottom-of',
+    'relative-center',
+    'relative-id',
+    'relative-inline-end-of',
+    'relative-inline-start-of',
+    'relative-layout-once',
+    'relative-left-of',
+    'relative-right-of',
+    'relative-top-of',
+    'resume-transition-name',
+    'right',
+    'row-gap',
+    'text-align',
+    'text-decoration',
+    'text-decoration-color',
+    'text-decoration-thickness',
+    'text-indent',
+    'text-overflow',
+    'text-shadow',
+    'text-stroke',
+    'text-stroke-color',
+    'text-stroke-width',
+    'top',
+    'transform',
+    'transform-origin',
+    'transition',
+    'transition-delay',
+    'transition-duration',
+    'transition-property',
+    'transition-timing-function',
+    'vertical-align',
+    'visibility',
+    'white-space',
+    'width',
+    'word-break',
+    'z-index'
+]);
+const LYNX_KEYWORDS = new Map(Object.entries({
+    '-x-animation-color-interpolation': [
+        'auto',
+        'srgb',
+        'linearrgb'
+    ],
+    '-x-app-region': [
+        'none',
+        'drag',
+        'no-drag'
+    ],
+    '-x-placeholder-font-style': [
+        'normal',
+        'italic',
+        'oblique'
+    ],
+    '-x-placeholder-font-weight': [
+        'normal',
+        'bold',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '900'
+    ],
+    'align-content': [
+        'flex-start',
+        'flex-end',
+        'center',
+        'stretch',
+        'space-between',
+        'space-around',
+        'start',
+        'end'
+    ],
+    'box-sizing': [
+        'border-box',
+        'content-box',
+        'auto'
+    ],
+    direction: [
+        'normal',
+        'lynx-rtl',
+        'rtl',
+        'ltr'
+    ],
+    display: [
+        'none',
+        'flex',
+        'grid',
+        'linear',
+        'relative',
+        'block',
+        'auto',
+        '-x-box'
+    ],
+    'flex-direction': [
+        'column',
+        'row',
+        'row-reverse',
+        'column-reverse'
+    ],
+    'flex-wrap': [
+        'wrap',
+        'nowrap',
+        'wrap-reverse'
+    ],
+    'font-optical-sizing': [
+        'none',
+        'auto'
+    ],
+    'font-style': [
+        'normal',
+        'italic',
+        'oblique'
+    ],
+    'font-weight': [
+        'normal',
+        'bold',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '900'
+    ],
+    hyphens: [
+        'none',
+        'manual',
+        'auto'
+    ],
+    'image-rendering': [
+        'auto',
+        'crisp-edges',
+        'pixelated'
+    ],
+    'justify-content': [
+        'flex-start',
+        'center',
+        'flex-end',
+        'space-between',
+        'space-around',
+        'space-evenly',
+        'stretch',
+        'start',
+        'end'
+    ],
+    'linear-cross-gravity': [
+        'none',
+        'start',
+        'end',
+        'center',
+        'stretch'
+    ],
+    'linear-gravity': [
+        'none',
+        'top',
+        'bottom',
+        'left',
+        'right',
+        'center-vertical',
+        'center-horizontal',
+        'space-between',
+        'start',
+        'end',
+        'center'
+    ],
+    'linear-layout-gravity': [
+        'none',
+        'top',
+        'bottom',
+        'left',
+        'right',
+        'center-vertical',
+        'center-horizontal',
+        'fill-vertical',
+        'fill-horizontal',
+        'center',
+        'stretch',
+        'start',
+        'end'
+    ],
+    'linear-orientation': [
+        'horizontal',
+        'vertical',
+        'horizontal-reverse',
+        'vertical-reverse',
+        'row',
+        'column',
+        'row-reverse',
+        'column-reverse'
+    ],
+    'pointer-events': [
+        'auto',
+        'none'
+    ],
+    position: [
+        'absolute',
+        'relative',
+        'fixed',
+        'sticky'
+    ],
+    'relative-center': [
+        'none',
+        'vertical',
+        'horizontal',
+        'both'
+    ],
+    'text-align': [
+        'left',
+        'center',
+        'right',
+        'start',
+        'end',
+        'justify'
+    ],
+    'text-overflow': [
+        'clip',
+        'ellipsis'
+    ],
+    visibility: [
+        'hidden',
+        'visible',
+        'none',
+        'collapse'
+    ],
+    'white-space': [
+        'normal',
+        'nowrap'
+    ],
+    'word-break': [
+        'normal',
+        'break-all',
+        'keep-all'
+    ]
+}).map(([property, keywords])=>[
+        property,
+        new Set(keywords)
+    ]));
+const COMPOSED_TRANSFORM = "translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate(var(--tw-rotate)) scale(var(--tw-scale-x), var(--tw-scale-y)) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)";
+const TRANSFORM_DEFAULTS = new Map([
+    [
+        '--tw-translate-x',
+        '0'
+    ],
+    [
+        '--tw-translate-y',
+        '0'
+    ],
+    [
+        '--tw-translate-z',
+        '0'
+    ],
+    [
+        '--tw-rotate',
+        '0deg'
+    ],
+    [
+        '--tw-scale-x',
+        '1'
+    ],
+    [
+        '--tw-scale-y',
+        '1'
+    ]
+]);
+const lowerDeclarations = (rule, channelVariables = new Set())=>{
+    const composed = [];
+    for (const declaration of rule.nodes.slice())if ('decl' === declaration.type) {
+        declaration.value = lowerColors(declaration.value, channelVariables);
+        if (lowerTransformProperty(declaration)) {
+            composed.push(declaration);
+            continue;
+        }
+        lowerValue(declaration);
+        expandLogical(declaration);
+    }
+    if (composed.length > 0) {
+        composed[composed.length - 1].before({
+            prop: 'transform',
+            value: COMPOSED_TRANSFORM
+        });
+        for (const declaration of composed)declaration.remove();
+    }
+    dropUnsupportedProperties(rule);
+    return {
+        composesTransform: composed.length > 0
+    };
+};
+const TRANSFORM_VARIABLES = /^--tw-(?:translate-[xyz]|rotate(?:-[xyz])?|skew-[xy]|scale-[xyz])$/;
+const lowerTransformVariables = (root)=>{
+    root.walkDecls(TRANSFORM_VARIABLES, (declaration)=>{
+        declaration.value = transformValue(declaration.prop, declaration.value);
+    });
+};
+const lowerTransformProperty = (declaration)=>{
+    const { prop } = declaration;
+    const values = splitSpaces(declaration.value);
+    switch(prop){
+        case 'translate':
+            if (!isTailwindComposition(values, '--tw-translate-')) {
+                const [x, y = '0', z = '0'] = 'none' === values[0] ? [
+                    '0',
+                    '0',
+                    '0'
+                ] : values;
+                setVariables(declaration, {
+                    '--tw-translate-x': x,
+                    '--tw-translate-y': y,
+                    '--tw-translate-z': z
+                });
+            }
+            break;
+        case 'rotate':
+            if (1 !== values.length) return false;
+            setVariables(declaration, {
+                '--tw-rotate': 'none' === values[0] ? '0deg' : values[0]
+            });
+            break;
+        case 'scale':
+            if (!isTailwindComposition(values, '--tw-scale-')) {
+                const [x, y = x] = 'none' === values[0] ? [
+                    '1',
+                    '1'
+                ] : values;
+                setVariables(declaration, {
+                    '--tw-scale-x': x,
+                    '--tw-scale-y': y
+                });
+            }
+            break;
+        case 'transform':
+            if (!isTailwindComposition(values, '--tw-')) return false;
+            break;
+        default:
+            return false;
+    }
+    return true;
+};
+const isTailwindComposition = (values, prefix)=>values.length > 0 && values.every((value)=>value.startsWith(`var(${prefix}`));
+const setVariables = (declaration, variables)=>{
+    for (const [prop, value] of Object.entries(variables))declaration.before({
+        prop,
+        value: transformValue(prop, value)
+    });
+};
+const transformValue = (prop, value)=>{
+    const folded = foldCalc(value);
+    if (!prop.startsWith('--tw-scale-')) return folded;
+    const unit = postcss_value_parser.unit(folded);
+    return unit && '%' === unit.unit ? String(Number(unit.number) / 100) : folded;
+};
+const splitSpaces = (value)=>postcss_value_parser(value).nodes.filter((node)=>'space' !== node.type && 'comment' !== node.type).map((node)=>postcss_value_parser.stringify(node));
+const lowerValue = (declaration)=>{
+    switch(declaration.prop){
+        case 'opacity':
+            {
+                const unit = postcss_value_parser.unit(declaration.value);
+                if (unit && '%' === unit.unit) declaration.value = String(Number(unit.number) / 100);
+                break;
+            }
+        case 'text-decoration-line':
+            declaration.prop = 'text-decoration';
+            break;
+        case 'transition-property':
+            declaration.value = lowerTransitionProperty(declaration.value);
+            break;
+        case '--tw-gradient-position':
+            declaration.value = lowerGradientPosition(declaration);
+            break;
+        default:
+            if (/\binfinity\b/i.test(declaration.value)) declaration.value = foldCalc(declaration.value);
+            declaration.value = clampHugeNumbers(declaration.value);
+            break;
+    }
+};
+const lowerTransitionProperty = (value)=>{
+    const properties = value.split(',').map((property)=>{
+        const name = property.trim().toLowerCase();
+        return [
+            'translate',
+            'rotate',
+            'scale'
+        ].includes(name) ? 'transform' : name;
+    }).filter((name)=>'all' === name || 'none' === name || LYNX_PROPERTIES.has(name));
+    return [
+        ...new Set(properties)
+    ].join(', ') || 'none';
+};
+const lowerGradientPosition = (declaration)=>{
+    const position = declaration.value.replace(/\s*\bin\s+[a-z0-9-]+(?:\s+(?:shorter|longer|increasing|decreasing)\s+hue)?/gi, '').trim();
+    if (position) return position;
+    let gradient = 'linear';
+    declaration.parent?.walkDecls('background-image', ({ value })=>{
+        gradient = /^(radial|conic)-gradient\(/.exec(value)?.[1] ?? gradient;
+    });
+    return ({
+        linear: 'to bottom',
+        radial: 'ellipse',
+        conic: 'from 0deg'
+    })[gradient];
+};
+const LOGICAL_PAIRS = {
+    'padding-inline': [
+        'padding-left',
+        'padding-right'
+    ],
+    'padding-block': [
+        'padding-top',
+        'padding-bottom'
+    ],
+    'margin-inline': [
+        'margin-left',
+        'margin-right'
+    ],
+    'margin-block': [
+        'margin-top',
+        'margin-bottom'
+    ],
+    'inset-inline': [
+        'left',
+        'right'
+    ],
+    'inset-block': [
+        'top',
+        'bottom'
+    ],
+    'border-inline-width': [
+        'border-left-width',
+        'border-right-width'
+    ],
+    'border-block-width': [
+        'border-top-width',
+        'border-bottom-width'
+    ],
+    'border-inline-style': [
+        'border-left-style',
+        'border-right-style'
+    ],
+    'border-block-style': [
+        'border-top-style',
+        'border-bottom-style'
+    ],
+    'border-inline-color': [
+        'border-left-color',
+        'border-right-color'
+    ],
+    'border-block-color': [
+        'border-top-color',
+        'border-bottom-color'
+    ]
+};
+const LOGICAL_BOTH_SIDES = {
+    'border-inline': [
+        'border-left',
+        'border-right'
+    ],
+    'border-block': [
+        'border-top',
+        'border-bottom'
+    ]
+};
+const LOGICAL_LONGHANDS = {
+    'padding-inline-start': 'padding-left',
+    'padding-inline-end': 'padding-right',
+    'padding-block-start': 'padding-top',
+    'padding-block-end': 'padding-bottom',
+    'margin-inline-start': 'margin-left',
+    'margin-inline-end': 'margin-right',
+    'margin-block-start': 'margin-top',
+    'margin-block-end': 'margin-bottom',
+    'inset-inline-start': 'left',
+    'inset-inline-end': 'right',
+    'inset-block-start': 'top',
+    'inset-block-end': 'bottom',
+    'border-inline-start': 'border-left',
+    'border-inline-end': 'border-right',
+    'border-block-start': 'border-top',
+    'border-block-end': 'border-bottom',
+    'border-inline-start-width': 'border-left-width',
+    'border-inline-end-width': 'border-right-width',
+    'border-block-start-width': 'border-top-width',
+    'border-block-end-width': 'border-bottom-width',
+    'border-inline-start-style': 'border-left-style',
+    'border-inline-end-style': 'border-right-style',
+    'border-block-start-style': 'border-top-style',
+    'border-block-end-style': 'border-bottom-style',
+    'border-inline-start-color': 'border-left-color',
+    'border-inline-end-color': 'border-right-color',
+    'border-block-start-color': 'border-top-color',
+    'border-block-end-color': 'border-bottom-color',
+    'border-start-start-radius': 'border-top-left-radius',
+    'border-start-end-radius': 'border-top-right-radius',
+    'border-end-start-radius': 'border-bottom-left-radius',
+    'border-end-end-radius': 'border-bottom-right-radius'
+};
+const expandLogical = (declaration)=>{
+    const { prop, value, important } = declaration;
+    const longhand = LOGICAL_LONGHANDS[prop];
+    if (longhand) {
+        declaration.prop = longhand;
+        return;
+    }
+    let expanded;
+    const pair = LOGICAL_PAIRS[prop];
+    const bothSides = LOGICAL_BOTH_SIDES[prop];
+    if (pair) {
+        const [start, end = start] = splitSpaces(value);
+        expanded = [
+            [
+                pair[0],
+                start
+            ],
+            [
+                pair[1],
+                end
+            ]
+        ];
+    } else if (bothSides) expanded = [
+        [
+            bothSides[0],
+            value
+        ],
+        [
+            bothSides[1],
+            value
+        ]
+    ];
+    else if ('inset' === prop) {
+        const [top, right = top, bottom = top, left = right] = splitSpaces(value);
+        expanded = [
+            [
+                'top',
+                top
+            ],
+            [
+                'right',
+                right
+            ],
+            [
+                'bottom',
+                bottom
+            ],
+            [
+                'left',
+                left
+            ]
+        ];
+    }
+    if (!expanded) return;
+    for (const [physical, physicalValue] of expanded)declaration.before({
+        prop: physical,
+        value: physicalValue,
+        important
+    });
+    declaration.remove();
+};
+const dropUnsupportedProperties = (rule)=>{
+    rule.each((node)=>{
+        if ('decl' !== node.type || node.prop.startsWith('--')) return;
+        const prop = node.prop.toLowerCase();
+        const keywords = LYNX_KEYWORDS.get(prop);
+        const value = node.value.trim().toLowerCase();
+        if (!LYNX_PROPERTIES.has(prop) || void 0 !== keywords && /^[a-z-]+$/.test(value) && !GLOBAL_KEYWORDS.has(value) && !keywords.has(value)) node.remove();
+    });
+};
+const GLOBAL_KEYWORDS = new Set([
+    'inherit',
+    'initial',
+    'unset',
+    'revert'
+]);
+const lowerSelectors = (rule)=>{
+    const selectors = rule.selectors.filter((selector)=>!/(?<!\\):host\b/.test(selector)).flatMap(unwrapWhereAndIs);
+    if (0 === selectors.length) return false;
+    rule.selectors = selectors.every((selector)=>NOT_LAST_CHILD.test(selector)) && mirrorBetweenChildren(rule) ? selectors.map((selector)=>selector.replace(NOT_LAST_CHILD, ' > * + *')) : selectors;
+    return true;
+};
+const unwrapWhereAndIs = (selector)=>{
+    const match = /^:(?:where|is)\(/i.exec(selector);
+    if (!match || closingParenthesis(selector, match[0].length) !== selector.length - 1) return [
+        selector
+    ];
+    return splitTopLevel(selector.slice(match[0].length, -1)).flatMap(unwrapWhereAndIs);
+};
+const closingParenthesis = (text, start)=>{
+    let depth = 1;
+    for(let index = start; index < text.length; index++){
+        const character = text[index];
+        if ('\\' === character) index++;
+        else if ('(' === character) depth++;
+        else if (')' === character && 0 === --depth) return index;
+    }
+    return -1;
+};
+const splitTopLevel = (list)=>{
+    const parts = [];
+    let depth = 0;
+    let current = '';
+    for(let index = 0; index < list.length; index++){
+        const character = list[index];
+        if ('\\' === character) {
+            current += list.slice(index, index + 2);
+            index++;
+            continue;
+        }
+        if ('(' === character) depth++;
+        else if (')' === character) depth--;
+        else if (',' === character && 0 === depth) {
+            parts.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += character;
+    }
+    parts.push(current.trim());
+    return parts;
+};
+const NOT_LAST_CHILD = /\s*>\s*:not\(:last-child\)$/;
+const OPPOSITE_SIDES = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+    'block-start': 'block-end',
+    'block-end': 'block-start',
+    'inline-start': 'inline-end',
+    'inline-end': 'inline-start'
+};
+const mirrorBetweenChildren = (rule)=>{
+    const sidesOnly = rule.nodes.every((node)=>'decl' !== node.type || node.prop.startsWith('--') || /^(margin|padding|border)-/.test(node.prop));
+    if (!sidesOnly) return false;
+    rule.walkDecls((declaration)=>{
+        if (declaration.prop.startsWith('--')) return;
+        declaration.prop = declaration.prop.replace(/\b(top|bottom|left|right|block-start|block-end|inline-start|inline-end)\b/, (side)=>OPPOSITE_SIDES[side]);
+    });
+    return true;
+};
+const flattenNesting = (root)=>{
+    root.each((node)=>{
+        flattenNode(node);
+    });
+};
+const flattenNode = (node)=>{
+    if ('rule' === node.type) flattenRule(node);
+    else if ('atrule' === node.type && node.nodes) node.each((child)=>{
+        flattenNode(child);
+    });
+};
+const flattenRule = (rule)=>{
+    let last = rule;
+    for (const child of rule.nodes.slice())if ('rule' === child.type) {
+        child.selectors = resolveNested(child.selectors, rule.selectors);
+        last.after(child);
+        last = flattenRule(child);
+    } else if ('atrule' === child.type) {
+        wrapDeclarations(child, rule);
+        last.after(child);
+        last = child;
+        flattenNode(child);
+    }
+    return last;
+};
+const wrapDeclarations = (atRule, rule)=>{
+    if (!atRule.nodes) return;
+    for (const child of atRule.nodes)if ('rule' === child.type) child.selectors = resolveNested(child.selectors, rule.selectors);
+    else if ('atrule' === child.type) wrapDeclarations(child, rule);
+    const declarations = atRule.nodes.filter((node)=>'decl' === node.type);
+    if (declarations.length > 0) {
+        const wrapper = rule.clone();
+        wrapper.removeAll();
+        wrapper.append(declarations);
+        atRule.prepend(wrapper);
+    }
+};
+const resolveNested = (selectors, parents)=>parents.flatMap((parent)=>selectors.map((selector)=>/(?<!\\)&/.test(selector) ? selector.replaceAll(/(?<!\\)&/g, parent) : `${parent} ${selector}`));
+const unwrapLayers = (container)=>{
+    container.each((node)=>{
+        if ('atrule' !== node.type) return;
+        if ('layer' === node.name.toLowerCase()) if (node.nodes) {
+            unwrapLayers(node);
+            node.replaceWith(node.nodes);
+        } else node.remove();
+        else if (node.nodes) unwrapLayers(node);
+    });
+};
+const takePropertyRegistrations = (root)=>{
+    const initialValues = new Map();
+    root.walkAtRules(/^property$/i, (atRule)=>{
+        atRule.walkDecls('initial-value', (declaration)=>{
+            initialValues.set(atRule.params.trim(), declaration.value);
+        });
+        atRule.remove();
+    });
+    root.walkAtRules(/^supports$/i, (atRule)=>{
+        const rules = atRule.nodes?.filter((node)=>'rule' === node.type) ?? [];
+        if (rules.length > 0 && rules.every((rule)=>rule.selector.includes('::backdrop'))) atRule.remove();
+    });
+    return initialValues;
+};
+const removeEmptyContainers = (container)=>{
+    container.each((node)=>{
+        if ('rule' !== node.type && 'atrule' !== node.type) return;
+        if (!node.nodes) return;
+        removeEmptyContainers(node);
+        if (node.nodes.every((child)=>'comment' === child.type)) node.remove();
+    });
+};
+const IMPLIED_KEYFRAME_VALUES = {
+    transform: 'none',
+    opacity: '1'
+};
+const completeKeyframes = (root)=>{
+    root.walkAtRules(/^(?:-webkit-)?keyframes$/i, (atRule)=>{
+        const offsets = new Set();
+        const properties = new Set();
+        atRule.walkRules((rule)=>{
+            for (const selector of rule.selectors)offsets.add({
+                from: '0%',
+                to: '100%'
+            }[selector.toLowerCase()] ?? selector);
+            rule.walkDecls(({ prop })=>{
+                if (prop in IMPLIED_KEYFRAME_VALUES) properties.add(prop);
+            });
+        });
+        const first = atRule.first;
+        if (0 === properties.size || first?.type !== 'rule') return;
+        for (const [offset, selector] of [
+            [
+                '0%',
+                'from'
+            ],
+            [
+                '100%',
+                'to'
+            ]
+        ]){
+            if (offsets.has(offset)) continue;
+            const keyframe = first.clone({
+                selector
+            });
+            keyframe.removeAll();
+            for (const prop of properties)keyframe.append({
+                prop,
+                value: IMPLIED_KEYFRAME_VALUES[prop]
+            });
+            if ('from' === selector) atRule.prepend(keyframe);
+            else atRule.append(keyframe);
+        }
+    });
+};
+const resolveNestedVariables = (root, registrations)=>{
+    const theme = themeVariables(root);
+    root.walkDecls(/^--/, (declaration)=>{
+        if (!declaration.value.includes('var(')) return;
+        const parsed = postcss_value_parser(declaration.value);
+        const lookup = (name)=>sameRuleValue(declaration, name) ?? theme.get(name) ?? registrations.get(name);
+        if (resolveInFunctions(parsed.nodes, false, lookup, new Set())) declaration.value = foldCalc(parsed.toString());
+    });
+};
+const themeVariables = (root)=>{
+    const variables = new Map();
+    root.walkRules((rule)=>{
+        if (rule.selectors.includes(':root')) rule.walkDecls(/^--/, ({ prop, value })=>{
+            variables.set(prop, value);
+        });
+    });
+    return variables;
+};
+const sameRuleValue = (declaration, name)=>{
+    let value;
+    declaration.parent.each((node)=>{
+        if ('decl' === node.type && node.prop === name && node !== declaration) value = node.value;
+    });
+    return value;
+};
+const resolveInFunctions = (nodes, insideFunction, lookup, seen)=>{
+    let changed = false;
+    for (const node of nodes){
+        if ('function' !== node.type) continue;
+        if ('var' !== node.value.toLowerCase()) {
+            changed = resolveInFunctions(node.nodes, true, lookup, seen) || changed;
+            continue;
+        }
+        const resolved = insideFunction ? resolveVariable(node, lookup, seen) : void 0;
+        if (void 0 === resolved) {
+            changed = resolveInFunctions(node.nodes, insideFunction, lookup, seen) || changed;
+            continue;
+        }
+        Object.assign(node, {
+            type: 'word',
+            value: resolved
+        });
+        changed = true;
+    }
+    return changed;
+};
+const resolveVariable = (node, lookup, seen)=>{
+    const name = node.nodes[0]?.value ?? '';
+    if (seen.has(name)) return;
+    const commaIndex = node.nodes.findIndex((child)=>'div' === child.type && ',' === child.value);
+    const fallback = -1 === commaIndex ? void 0 : postcss_value_parser.stringify(node.nodes.slice(commaIndex + 1)).trim();
+    const value = lookup(name) ?? fallback;
+    if (void 0 === value) return;
+    const parsed = postcss_value_parser(value);
+    resolveInFunctions(parsed.nodes, true, lookup, new Set([
+        ...seen,
+        name
+    ]));
+    return parsed.toString();
+};
+const TAILWIND_POSTCSS = '@tailwindcss/postcss';
+const tailwindForLynx = ()=>({
+        postcssPlugin: 'angular-lynx-tailwind',
+        OnceExit (root, { result, rule }) {
+            if (!compiledByTailwind(result)) return;
+            lowerForLynx(root, (selector)=>rule({
+                    selector
+                }));
+        }
+    });
+tailwindForLynx.postcss = true;
+const compiledByTailwind = (result)=>result.messages.some((message)=>message.plugin === TAILWIND_POSTCSS);
+const lowerForLynx = (root, createRule)=>{
+    flattenNesting(root);
+    unwrapLayers(root);
+    const registrations = takePropertyRegistrations(root);
+    const defaults = new Map(registrations);
+    const channelVariables = colorChannelVariables(root);
+    root.walkRules((rule)=>{
+        const inKeyframes = rule.parent?.type === 'atrule' && /keyframes$/i.test(rule.parent.name);
+        if (!inKeyframes && !lowerSelectors(rule)) return void rule.remove();
+        if (lowerDeclarations(rule, channelVariables).composesTransform) {
+            for (const [name, value] of TRANSFORM_DEFAULTS)if (!defaults.has(name)) defaults.set(name, value);
+        }
+    });
+    unwrapLoweredColorMixSupports(root);
+    resolveNestedVariables(root, registrations);
+    lowerTransformVariables(root);
+    completeKeyframes(root);
+    removeEmptyContainers(root);
+    if (defaults.size > 0) {
+        const defaultsRule = createRule('*');
+        for (const [prop, value] of defaults)defaultsRule.append({
+            prop,
+            value
+        });
+        const imports = root.nodes.filter((node)=>'atrule' === node.type && /^(charset|import)$/i.test(node.name));
+        if (imports.length > 0) imports[imports.length - 1].after(defaultsRule);
+        else root.prepend(defaultsRule);
+    }
+};
+const colorChannelVariables = (root)=>{
+    const names = new Set();
+    root.walkDecls(/^--.+-rgb$/, ({ prop })=>{
+        names.add(prop.slice(0, -4));
+    });
+    return names;
+};
+const unwrapLoweredColorMixSupports = (root)=>{
+    root.walkAtRules(/^supports$/i, (atRule)=>{
+        if (!atRule.params.includes('color-mix(') || !atRule.nodes) return;
+        let mixes = false;
+        atRule.walkDecls((declaration)=>{
+            mixes ||= declaration.value.includes('color-mix(');
+        });
+        if (!mixes) atRule.replaceWith(atRule.nodes);
+    });
+};
 const TAILWIND_CONFIG_FILES = [
     'tailwind.config.ts',
     'tailwind.config.js',
@@ -2294,17 +4119,28 @@ const TAILWIND_CONFIG_FILES = [
     'tailwind.config.cjs'
 ];
 const isTailwind = (plugin)=>'function' == typeof plugin ? 'tailwindcss' === plugin.name : plugin?.postcssPlugin === 'tailwindcss';
+const isTailwind4 = (plugin)=>plugin?.postcssPlugin === '@tailwindcss/postcss';
 const applyTailwind = (api)=>{
     const configFile = findUp(TAILWIND_CONFIG_FILES, process.cwd());
-    if (!configFile) return;
+    let warned = false;
     api.modifyRsbuildConfig((config, { mergeRsbuildConfig })=>mergeRsbuildConfig(config, {
             tools: {
                 postcss: ({ postcssOptions }, { addPlugins })=>{
-                    if ('object' == typeof postcssOptions && postcssOptions.plugins?.some(isTailwind)) return;
-                    const tailwindcss = createRequire(configFile)('tailwindcss');
-                    addPlugins(tailwindcss({
-                        config: configFile
-                    }));
+                    const configured = 'object' == typeof postcssOptions ? postcssOptions.plugins ?? [] : [];
+                    if (configFile && !configured.some(isTailwind)) {
+                        const require = createRequire(configFile);
+                        const { version } = require('tailwindcss/package.json');
+                        if (Number.parseInt(version, 10) < 4) {
+                            const tailwindcss = require('tailwindcss');
+                            addPlugins(tailwindcss({
+                                config: configFile
+                            }));
+                        } else if (!configured.some(isTailwind4) && !warned) {
+                            warned = true;
+                            api.logger.warn(`Found ${configFile}, but Tailwind CSS ${version} is installed, which doesn't run from a Tailwind config file. List @tailwindcss/postcss in a .postcssrc.json, or run \`ng generate @blotch/angular-lynx:add-tailwind\`.`);
+                        }
+                    }
+                    addPlugins(tailwindForLynx());
                 }
             }
         }));