@react-x11/components 0.9.0 → 0.11.0

package/dist/html/css/parse.js

@@ -14,153 +14,785 @@
 // Selector *matching* is still `css-select`'s (see cascade.ts). Parsing a
 // stylesheet is easy; matching `li:nth-child(2n+1) > a[href^="/"]` correctly
 // and quickly is not, and that is the part worth importing.
+import { resolveUrl } from '../url.js';
 import { parseLength } from './values.js';
+import { hasVar, unbalanced, validVars } from './vars.js';
 const IMPORTANT_RE = /!\s*important\s*$/i;
+/** A layer's name: identifiers joined by dots. */
+const LAYER_NAME = /^-?[_a-zA-Z\u00a0-\uffff][\w\u00a0-\uffff-]*(?:\.-?[_a-zA-Z\u00a0-\uffff][\w\u00a0-\uffff-]*)*$/;
+/** The at-rules that are rules with a block — which an `@import` after them
+ *  is too late for. */
+const BLOCK_AT_RULES = new Set([
+    'media',
+    'supports',
+    'font-face',
+    'page',
+    'keyframes',
+    '-webkit-keyframes',
+    'counter-style',
+    'layer',
+    'container',
+    'property',
+    'font-feature-values',
+]);
 /**
  * Parse a stylesheet. `order` continues across sheets, so the caller passes
  * a running counter and the cascade's document-order tie-break holds across
  * the whole document rather than restarting per `<style>`.
+ *
+ * The structure is CSS Syntax's: an at-rule is an at-keyword up to its `;`
+ * or its block, a style rule is everything up to its block, and what lies
+ * between is read a component value at a time — a string, an escape, a
+ * bracketed block with its match — so a brace or a semicolon in a string, in
+ * an escape or inside brackets never ends anything. A rule whose selector is
+ * not one is dropped whole, and so is a group with any selector in it that
+ * is not one (CSS 2.1 4.1.7).
  */
-export function parseStylesheet(text, startOrder = 0) {
-    const sheet = { rules: [], imports: [], breakpoints: [] };
+export function parseStylesheet(text, startOrder = 0, 
+/** The document's layers, by their full names, ranked in the order the
+ *  document first names them: one map across all of its sheets, since a
+ *  layer one sheet names first is the same layer in the next. */
+layers = new Map(), 
+/** The URL the sheet's own relative URLs resolve against — its own, or
+ *  the document's for a `<style>` — or null to leave them as written.
+ *  Every `url()`, `@import` and `@font-face` source comes out absolute. */
+base = null) {
+    text = withoutComments(text);
+    const sheet = {
+        rules: [],
+        imports: [],
+        breakpoints: [],
+        fontFaces: [],
+    };
     let order = startOrder;
     const breakpoints = new Set();
-    const walk = (source, media) => {
+    // `@import` counts only ahead of every other rule, `@charset` aside
+    let importsAllowed = true;
+    /** A layer's rank, named for the first time if it has not been. */
+    const rankOf = (name) => {
+        let rank = layers.get(name);
+        if (rank === undefined) {
+            rank = layers.size;
+            layers.set(name, rank);
+        }
+        return rank;
+    };
+    /** The path of ranks down to a layer, `a.b` inside `outer` being three
+     *  levels, and the layer's full name. */
+    const enter = (name, layer, path) => {
+        const ranks = layer ? [...layer] : [];
+        let full = path;
+        for (const part of name.split('.')) {
+            full = full ? `${full}.${part}` : part;
+            ranks.push(rankOf(full));
+        }
+        return [ranks, full];
+    };
+    let anonymous = 0;
+    const walk = (source, media, layer = null, path = '') => {
         let i = 0;
         const n = source.length;
         while (i < n) {
             i = skipTrivia(source, i);
             if (i >= n)
                 break;
-            if (source[i] === '@') {
+            if (source[i] === '@' && startsIdent(source, i + 1)) {
                 const at = readAtRule(source, i);
                 i = at.end;
                 const name = at.name.toLowerCase();
+                if (name === 'charset')
+                    continue;
                 if (name === 'import') {
-                    const url = importUrl(at.prelude);
-                    if (url)
-                        sheet.imports.push(url);
+                    if (importsAllowed && media === null) {
+                        const url = importUrl(at.prelude);
+                        if (url && importApplies(at.prelude)) {
+                            sheet.imports.push(resolveUrl(url, base));
+                        }
+                    }
+                    continue;
+                }
+                // Only a rule that is one closes the imports: `@media;`, `@page;`
+                // and an at-rule nobody knows are dropped as though never written.
+                if (at.block !== null && BLOCK_AT_RULES.has(name)) {
+                    importsAllowed = false;
                 }
-                else if (name === 'media' && at.block !== null) {
+                if (name === 'media' && at.block !== null) {
                     const conditions = parseMediaQuery(at.prelude);
                     for (const c of conditions) {
                         if (c.min !== undefined)
                             breakpoints.add(c.min);
                         if (c.max !== undefined)
-                            breakpoints.add(c.max + 1);
+                            breakpoints.add(c.max + MAX_EDGE);
                     }
                     // A nested `@media` intersects with the one above it; pushing a
                     // level rather than merging keeps "all of these blocks hold" exact
                     // when two of them overlap.
-                    walk(at.block, media ? [...media, conditions] : [conditions]);
+                    walk(at.block, media ? [...media, conditions] : [conditions], layer, path);
                 }
                 else if (name === 'supports' && at.block !== null) {
                     // Everything in a `@supports` block is markup this renderer either
                     // understands or ignores per-declaration, so entering it is closer
                     // to right than skipping it.
-                    walk(at.block, media);
+                    walk(at.block, media, layer, path);
+                }
+                else if (name === 'layer') {
+                    // `@layer a, b;` names layers, and so fixes their order, and
+                    // `@layer a { … }` puts rules in one; one with no name is a layer
+                    // of its own. Tailwind 4 writes all of its CSS in four of them.
+                    const names = at.prelude
+                        .split(',')
+                        .map((part) => part.trim())
+                        .filter(Boolean);
+                    if (!names.every((part) => LAYER_NAME.test(part)))
+                        continue;
+                    if (at.block === null) {
+                        for (const part of names)
+                            enter(part, layer, path);
+                    }
+                    else if (names.length <= 1) {
+                        const [ranks, full] = enter(names[0] ?? `\u0000${anonymous++}`, layer, path);
+                        walk(at.block, media, ranks, full);
+                    }
+                }
+                else if (name === 'font-face' && at.block !== null) {
+                    const face = parseFontFace(at.block, base, media);
+                    if (face)
+                        sheet.fontFaces.push(face);
+                }
+                else if (name === 'counter-style' && at.block !== null) {
+                    (sheet.counterStyles ??= []).push({
+                        prelude: at.prelude,
+                        declarations: parseDeclarations(at.block),
+                    });
                 }
-                // @font-face, @keyframes, @page, @charset: nothing to do, and the
-                // block was already consumed.
+                // @keyframes, @page: nothing to do, and the block was already
+                // consumed.
                 continue;
             }
-            const braceAt = findBrace(source, i);
-            if (braceAt < 0)
+            // A style rule runs to its block, whatever comes first: a stray `;`
+            // or an `@` that names nothing is part of its selector, which then is
+            // not one, and the rule goes with it.
+            const blockAt = scanTo(source, i, '{');
+            if (blockAt >= n)
                 break;
-            const prelude = source.slice(i, braceAt).trim();
-            const block = readBlock(source, braceAt);
+            const prelude = source.slice(i, blockAt).trim();
+            const block = readBlock(source, blockAt);
             i = block.end;
-            if (!prelude)
+            const selectors = rawSelectors(prelude);
+            if (!selectors)
                 continue;
-            const declarations = parseDeclarations(block.body);
-            if (!declarations.length)
+            importsAllowed = false;
+            styleRule(selectors, block.body, media, layer, path, 0);
+        }
+    };
+    /**
+     * A style rule, and the rules nested in it (CSS Nesting 1): a rule inside
+     * a rule's block is relative to it, `&` standing for it and a selector
+     * without one a descendant of it, and an `@media`, `@supports` or
+     * `@layer` inside one holds declarations for the same selectors, under
+     * its condition. Tailwind 4 writes its variants so — `md:flex` is
+     * `.md\:flex { @media (width >= 48rem) { display: flex } }`, and
+     * `hover:` is `&:hover` — and they were dropped with the rule. Each
+     * nested rule comes after its parent's declarations in the cascade's
+     * order, as it comes after them in the sheet.
+     */
+    const styleRule = (selectors, body, media, layer, path, depth) => {
+        // the plain case, a block with nothing nested in it
+        if (!body.includes('{')) {
+            emit(selectors, parseDeclarations(body), media, layer);
+            return;
+        }
+        const { declarations, nested } = splitNested(body);
+        emit(selectors, parseDeclarations(declarations), media, layer);
+        if (depth >= MAX_NESTING)
+            return;
+        for (const item of nested) {
+            if (item.kind === 'rule') {
+                const inner = nestedSelectors(item.prelude, selectors);
+                if (inner)
+                    styleRule(inner, item.body, media, layer, path, depth + 1);
                 continue;
-            for (const selector of splitSelectors(prelude)) {
-                if (!selector)
-                    continue;
-                sheet.rules.push({
-                    selector,
-                    specificity: specificityOf(selector),
-                    order: order++,
-                    declarations,
-                    media,
-                });
             }
+            const name = item.name.toLowerCase();
+            if (item.block === null)
+                continue;
+            if (name === 'media') {
+                const conditions = parseMediaQuery(item.prelude);
+                for (const c of conditions) {
+                    if (c.min !== undefined)
+                        breakpoints.add(c.min);
+                    if (c.max !== undefined)
+                        breakpoints.add(c.max + MAX_EDGE);
+                }
+                styleRule(selectors, item.block, media ? [...media, conditions] : [conditions], layer, path, depth + 1);
+            }
+            else if (name === 'supports') {
+                styleRule(selectors, item.block, media, layer, path, depth + 1);
+            }
+            else if (name === 'layer' && LAYER_NAME.test(item.prelude.trim())) {
+                const [ranks, full] = enter(item.prelude.trim(), layer, path);
+                styleRule(selectors, item.block, media, ranks, full, depth + 1);
+            }
+        }
+    };
+    const emit = (selectors, declarations, media, layer) => {
+        if (!declarations.length)
+            return;
+        if (base !== null) {
+            for (const d of declarations)
+                d.value = absoluteUrls(d.value, base);
+        }
+        for (const raw of selectors) {
+            const selector = raw.includes('\\') ? forMatcher(raw) : raw;
+            sheet.rules.push({
+                selector,
+                specificity: specificityOf(selector),
+                order: order++,
+                declarations,
+                media,
+                layer,
+            });
         }
     };
     walk(text, null);
     sheet.breakpoints = [...breakpoints].sort((a, b) => a - b);
     return sheet;
 }
+/**
+ * A style sheet with its comments taken out, strings left alone. CSS drops a
+ * comment wherever it stands (CSS 2.1 4.1.9) — between rules, which the
+ * scanner already skipped, but also inside a selector: `div /* note *\/ {`
+ * kept the note in the selector, the matcher refused it, and the rule was
+ * dropped whole. In a selector a comment is replaced by nothing, as the
+ * tokenizer does: `.a/**\/.b` is one compound selector. In a declaration
+ * it is replaced by a space, since there it still ends the token before it:
+ * `1/**\/0px` is two values and no length, and `-/**\/10px` is no
+ * negative one. `decls` says the text starts inside a declaration block,
+ * which a `style` attribute does.
+ */
+function withoutComments(text, decls = false) {
+    if (!text.includes('/*'))
+        return text;
+    let out = '';
+    let from = 0;
+    let quote = '';
+    // for each open block, whether it holds declarations rather than rules
+    const blocks = [];
+    let prelude = 0;
+    // whether the rule being read is an at-rule, once its first token says
+    let atRule = null;
+    for (let i = 0; i < text.length; i += 1) {
+        const c = text[i];
+        if (quote) {
+            if (c === '\\')
+                i = escapeEnd(text, i) - 1;
+            else if (c === quote || c === '\n')
+                quote = '';
+            continue;
+        }
+        if (atRule === null && !isSpace(c) && !(c === '/' && text[i + 1] === '*')) {
+            atRule = c === '@';
+        }
+        if (c === '\\') {
+            // an escape: `\/*` is a slash and an asterisk, not a comment
+            i += 1;
+        }
+        else if (c === '"' || c === "'") {
+            quote = c;
+        }
+        else if ((c === 'u' || c === 'U') &&
+            text[i + 3] === '(' &&
+            text.slice(i, i + 3).toLowerCase() === 'url' &&
+            !isNameChar(text[i - 1])) {
+            // an unquoted url is one token, `/*` and all: `url(a/*b)` is no
+            // comment, and taken for one it ran on through the rest of the sheet
+            i = urlEnd(text, i + 3) - 1;
+        }
+        else if (c === '{') {
+            const inDecls = blocks.length ? blocks[blocks.length - 1] : decls;
+            blocks.push(inDecls || !opensRuleList(text, prelude, i));
+            prelude = i + 1;
+            atRule = null;
+        }
+        else if (c === '}') {
+            blocks.pop();
+            prelude = i + 1;
+            atRule = null;
+        }
+        else if (c === ';') {
+            prelude = i + 1;
+            atRule = null;
+        }
+        else if (c === '/' && text[i + 1] === '*') {
+            const close = text.indexOf('*/', i + 2);
+            const inDecls = blocks.length ? blocks[blocks.length - 1] : decls;
+            // `@media/**\/all` is `@media all`
+            out += text.slice(from, i) + (inDecls || atRule ? ' ' : '');
+            i = close < 0 ? text.length : close + 1;
+            from = i + 1;
+        }
+    }
+    return out + text.slice(from);
+}
+/** Whether the block a `{` at `end` opens holds rules rather than
+ *  declarations: a conditional or grouping at-rule's does. */
+function opensRuleList(text, from, end) {
+    let j = from;
+    while (j < end && (isSpace(text[j]) || text[j] === '/')) {
+        if (text[j] === '/' && text[j + 1] === '*') {
+            const close = text.indexOf('*/', j + 2);
+            j = close < 0 ? end : close + 2;
+        }
+        else if (text[j] === '/') {
+            break;
+        }
+        else {
+            j += 1;
+        }
+    }
+    return text[j] === '@' && RULE_LIST_AT.test(text.slice(j + 1, end));
+}
+const RULE_LIST_AT = /^(?:media|supports|document|-moz-document|layer|container|scope|starting-style)(?![\w-])/i;
 /**
  * Parse a declaration block — also the parser for a `style=""` attribute,
- * which is the same grammar with no braces around it.
+ * which is the same grammar with no braces around it. CSS Syntax's list of
+ * declarations: a name, a colon, and everything up to the next `;` that no
+ * string or bracket holds; an at-rule in the list is read to its `;` or its
+ * block and dropped; anything else is dropped to the next `;`. A value with
+ * a `!` left in it once `!important` is taken off is not a value.
  */
 export function parseDeclarations(text) {
+    // a `style` attribute comes here without the sheet's pass over comments
+    text = withoutComments(text, true);
     const out = [];
     let i = 0;
     const n = text.length;
     while (i < n) {
-        i = skipTrivia(text, i);
-        if (i >= n)
-            break;
-        // A nested block inside a declaration list is something this does not
-        // understand (a nested rule, an `@media` inside a rule); skip it whole
-        // rather than reading its declarations as if they were the parent's.
-        const colon = findChar(text, i, ':', ';{');
-        if (colon < 0) {
-            const semi = findChar(text, i, ';', '');
-            if (semi < 0)
-                break;
-            i = semi + 1;
+        const c = text[i];
+        if (isSpace(c) || c === ';') {
+            i += 1;
             continue;
         }
-        const prop = text.slice(i, colon).trim().toLowerCase();
-        const valueEnd = findChar(text, colon + 1, ';', '');
-        const end = valueEnd < 0 ? n : valueEnd;
-        let value = text.slice(colon + 1, end).trim();
-        i = end + 1;
-        if (!prop || !value)
+        if (c === '@' && startsIdent(text, i + 1)) {
+            i = readAtRule(text, i).end;
             continue;
-        const important = IMPORTANT_RE.test(value);
-        if (important)
-            value = value
-                .replace(IMPORTANT_RE, '')
-                .replace(/\s*!\s*$/, '')
-                .trim();
-        if (!value)
-            continue;
-        out.push({ prop, value, important });
+        }
+        const end = scanTo(text, i, ';');
+        if (startsIdent(text, i)) {
+            const name = readIdent(text, i);
+            let colon = name.end;
+            while (colon < end && isSpace(text[colon]))
+                colon += 1;
+            if (text[colon] === ':') {
+                const raw = text.slice(colon + 1, end);
+                let value = raw.trim();
+                const important = IMPORTANT_RE.test(value);
+                if (important)
+                    value = value.replace(IMPORTANT_RE, '').trim();
+                const custom = name.value.startsWith('--');
+                // `--` alone is no custom property's name, and a bracket closed
+                // that nothing opened makes a value none
+                if ((value || custom) &&
+                    !hasBang(value) &&
+                    name.value !== '--' &&
+                    !(custom && unbalanced(value))) {
+                    const declaration = {
+                        // a custom property's name is case-sensitive
+                        prop: custom ? name.value : name.value.toLowerCase(),
+                        value: unescapeValue(value),
+                        important,
+                    };
+                    if (custom)
+                        declaration.custom = true;
+                    if (hasVar(value)) {
+                        // a `var()` that is none is a declaration that is none — read
+                        // untrimmed, since a newline in a string the end left open
+                        // makes a bad string, where the end alone closes it
+                        if (!validVars(raw)) {
+                            i = end + 1;
+                            continue;
+                        }
+                        declaration.vars = true;
+                    }
+                    out.push(declaration);
+                }
+            }
+        }
+        i = end + 1;
     }
     return out;
 }
 /** Split `a, b > c, d` on top-level commas. */
 export function splitSelectors(prelude) {
     const out = [];
-    let depth = 0;
-    let quote = '';
     let start = 0;
-    for (let i = 0; i < prelude.length; i += 1) {
-        const c = prelude[i];
-        if (quote) {
-            if (c === quote && prelude[i - 1] !== '\\')
-                quote = '';
-            continue;
-        }
-        if (c === '"' || c === "'")
-            quote = c;
-        else if (c === '(' || c === '[')
-            depth += 1;
-        else if (c === ')' || c === ']')
-            depth = Math.max(0, depth - 1);
-        else if (c === ',' && depth === 0) {
+    let i = 0;
+    while (i < prelude.length) {
+        if (prelude[i] === ',') {
             out.push(prelude.slice(start, i).trim());
             start = i + 1;
+            i += 1;
+        }
+        else {
+            i = opens(prelude.charCodeAt(i)) ? componentEnd(prelude, i) : i + 1;
         }
     }
     out.push(prelude.slice(start).trim());
     return out.filter(Boolean);
 }
+/**
+ * A rule's selectors, or null where any of them is not a selector — an
+ * empty one in the list, an identifier that starts with a digit, a
+ * combinator with nothing after it — and the rule is dropped whole.
+ */
+export function selectorList(prelude) {
+    const raw = rawSelectors(prelude);
+    return raw && raw.map((s) => (s.includes('\\') ? forMatcher(s) : s));
+}
+/** A rule's selectors as written, or null where any of them is not one:
+ *  what `selectorList` hands the matcher before its escapes are read, and
+ *  what a nested rule's `&` stands for. */
+function rawSelectors(prelude) {
+    if (!prelude)
+        return null;
+    const out = [];
+    let start = 0;
+    let i = 0;
+    const push = (end) => {
+        const selector = prelude.slice(start, end).trim();
+        if (!selector || !isSelector(selector))
+            return false;
+        out.push(selector);
+        return true;
+    };
+    while (i < prelude.length) {
+        if (prelude[i] === ',') {
+            if (!push(i))
+                return null;
+            start = i + 1;
+            i += 1;
+        }
+        else {
+            i = opens(prelude.charCodeAt(i)) ? componentEnd(prelude, i) : i + 1;
+        }
+    }
+    return push(prelude.length) ? out : null;
+}
+/**
+ * A selector's escapes as css-select reads them right. Its hex escapes go
+ * in lower case: css-what takes the space that ends `\\6C ` for a
+ * descendant combinator, where after `\\6c ` it does not. And in a string
+ * an escaped newline goes, since it only continues the line (CSS 2.1
+ * 4.3.7): `[title="a\\` and a newline and `b"]` is `[title="ab"]`.
+ */
+function forMatcher(selector) {
+    let quote = '';
+    let out = '';
+    for (let i = 0; i < selector.length; i += 1) {
+        const c = selector[i];
+        if (c === '\\') {
+            const end = escapeEnd(selector, i);
+            const escape = selector.slice(i, end);
+            if (/^\\[0-9a-f]/i.test(escape)) {
+                // the hex digits, and the one space that may end them
+                out += escape.toLowerCase().replace(/\s+$/, ' ');
+            }
+            else if (!(quote && /^\\[\n\r\f]/.test(escape))) {
+                out += escape;
+            }
+            i = end - 1;
+            continue;
+        }
+        if (quote) {
+            if (c === quote)
+                quote = '';
+        }
+        else if (c === '"' || c === "'") {
+            quote = c;
+        }
+        out += c;
+    }
+    return out;
+}
+/**
+ * Whether a selector parses as one: compounds of type, universal, class,
+ * id, attribute and pseudo selectors, each name a CSS identifier, joined by
+ * combinators. What a selector *means* — which pseudo-classes exist — is
+ * the matcher's to decide; this only refuses what no grammar would read.
+ */
+function isSelector(s) {
+    const n = s.length;
+    let i = 0;
+    let expectCompound = true;
+    // a pseudo-element ends its selector (CSS 2.1 5.10): `p:first-line p`
+    // is none, and neither is `p:first-line[id]` — but for the user action
+    // pseudo-classes Selectors 4 lets follow one, as in `a::before:hover`
+    let ended = false;
+    while (i < n) {
+        const c = s[i];
+        if (isSpace(c)) {
+            i += 1;
+            continue;
+        }
+        if (ended)
+            return false;
+        if (c === '>' || c === '+' || c === '~') {
+            if (expectCompound)
+                return false;
+            expectCompound = true;
+            i += 1;
+            continue;
+        }
+        // one compound: simple selectors with nothing between them
+        const from = i;
+        while (i < n && !isSpace(s[i]) && !'>+~'.includes(s[i])) {
+            const d = s[i];
+            if (ended &&
+                !(d === ':' &&
+                    s[i + 1] !== ':' &&
+                    USER_ACTIONS.test(readIdent(s, i + 1).value))) {
+                return false;
+            }
+            if (d === '*' || d === '|') {
+                i += 1;
+            }
+            else if (d === '.' || d === '#') {
+                if (!startsIdent(s, i + 1))
+                    return false;
+                i = identEnd(s, i + 1);
+            }
+            else if (d === '[') {
+                let j = i + 1;
+                while (j < n && isSpace(s[j]))
+                    j += 1;
+                if (s[j] === '*' || s[j] === '|')
+                    j += 1;
+                if (s[j] === '|')
+                    j += 1;
+                if (!startsIdent(s, j))
+                    return false;
+                const end = componentEnd(s, i);
+                if (s[end - 1] !== ']')
+                    return false;
+                // an operator needs a value after it: `[title~=]` is no selector,
+                // and takes its group with it (CSS 2.1 4.1.7)
+                let k = identEnd(s, j);
+                if (s[k] === '|' && s[k + 1] !== '=' && startsIdent(s, k + 1)) {
+                    k = identEnd(s, k + 1);
+                }
+                while (k < end - 1 && isSpace(s[k]))
+                    k += 1;
+                if (k < end - 1) {
+                    if (s[k] === '=')
+                        k += 1;
+                    else if ('~|^$*'.includes(s[k]) && s[k + 1] === '=')
+                        k += 2;
+                    else
+                        return false;
+                    while (k < end - 1 && isSpace(s[k]))
+                        k += 1;
+                    if (k >= end - 1)
+                        return false;
+                }
+                i = end;
+            }
+            else if (d === ':') {
+                const element = s[i + 1] === ':';
+                const at = element ? i + 2 : i + 1;
+                if (!startsIdent(s, at))
+                    return false;
+                const name = readIdent(s, at);
+                // ASCII's case only (CSS 2.1 4.1.3): Unicode's makes `:lin\u212A`,
+                // with a Kelvin sign, `:link`
+                const lower = asciiLower(name.value);
+                if (!knownPseudo(lower, element))
+                    return false;
+                if (element || LEGACY_PSEUDO_ELEMENTS.test(lower))
+                    ended = true;
+                i = name.end;
+                if (s[i] === '(') {
+                    const end = componentEnd(s, i);
+                    if (s[end - 1] !== ')')
+                        return false;
+                    if (!element && !argumentFits(lower, s.slice(i + 1, end - 1))) {
+                        return false;
+                    }
+                    i = end;
+                }
+                else if (!element && NEEDS_ARGUMENT.has(lower))
+                    return false;
+            }
+            else if (startsIdent(s, i) && i === from) {
+                i = identEnd(s, i);
+            }
+            else {
+                return false;
+            }
+        }
+        expectCompound = false;
+    }
+    return !expectCompound;
+}
+/**
+ * Whether a pseudo-class takes the argument it is given: one where it
+ * takes one — `:lang()` names no language, and makes its group invalid as
+ * an unknown name does — and none where it takes none. `:is()` and
+ * `:where()` forgive an empty list; a vendor's are its own affair.
+ */
+function argumentFits(name, argument) {
+    if (name.startsWith('-'))
+        return true;
+    if (NEEDS_ARGUMENT.has(name)) {
+        return name === 'is' || name === 'where' || /\S/.test(argument);
+    }
+    return MAY_TAKE_ARGUMENT.has(name);
+}
+/** A name with its ASCII letters in lower case, and no other letter's. */
+export function asciiLower(name) {
+    return name.replace(/[A-Z]+/g, (upper) => upper.toLowerCase());
+}
+/** The pseudo-classes that are functions, and are nothing without it. */
+const NEEDS_ARGUMENT = new Set([
+    'contains',
+    'dir',
+    'has',
+    'host-context',
+    'icontains',
+    'is',
+    'lang',
+    'matches',
+    'not',
+    'nth-child',
+    'nth-col',
+    'nth-last-child',
+    'nth-last-col',
+    'nth-last-of-type',
+    'nth-of-type',
+    'state',
+    'where',
+]);
+/** The ones that are a pseudo-class with an argument or without. */
+const MAY_TAKE_ARGUMENT = new Set(['current', 'future', 'host', 'past']);
+/**
+ * Whether a pseudo-class or pseudo-element is one: an unknown one makes its
+ * selector invalid, and with it the group (CSS 2.1 4.1.7) — which is also
+ * what a browser does with another engine's `:-moz-…`. A vendor prefix is
+ * let through: which of them a browser knows is its own affair.
+ */
+function knownPseudo(name, element) {
+    if (name.startsWith('-'))
+        return true;
+    if (element)
+        return PSEUDO_ELEMENTS.has(name);
+    return PSEUDO_CLASSES.has(name) || LEGACY_PSEUDO_ELEMENTS.test(name);
+}
+const PSEUDO_ELEMENTS = new Set([
+    'before',
+    'after',
+    'first-line',
+    'first-letter',
+    'selection',
+    'placeholder',
+    'marker',
+    'backdrop',
+    'file-selector-button',
+    'cue',
+    'part',
+    'slotted',
+    'spelling-error',
+    'grammar-error',
+    'target-text',
+    'highlight',
+    'details-content',
+]);
+const PSEUDO_CLASSES = new Set([
+    // css-select's own, which the matcher answers and the docs promise
+    'button',
+    'checkbox',
+    'file',
+    'header',
+    'icontains',
+    'image',
+    'input',
+    'parent',
+    'password',
+    'radio',
+    'reset',
+    'selected',
+    'submit',
+    'text',
+    // CSS's
+    'active',
+    'any-link',
+    'autofill',
+    'blank',
+    'checked',
+    'closed',
+    'contains',
+    'current',
+    'default',
+    'defined',
+    'dir',
+    'disabled',
+    'empty',
+    'enabled',
+    'first',
+    'first-child',
+    'first-of-type',
+    'focus',
+    'focus-visible',
+    'focus-within',
+    'fullscreen',
+    'future',
+    'has',
+    'host',
+    'host-context',
+    'hover',
+    'in-range',
+    'indeterminate',
+    'invalid',
+    'is',
+    'lang',
+    'last-child',
+    'last-of-type',
+    'left',
+    'link',
+    'local-link',
+    'matches',
+    'modal',
+    'not',
+    'nth-child',
+    'nth-col',
+    'nth-last-child',
+    'nth-last-col',
+    'nth-last-of-type',
+    'nth-of-type',
+    'only-child',
+    'only-of-type',
+    'open',
+    'optional',
+    'out-of-range',
+    'past',
+    'paused',
+    'picture-in-picture',
+    'placeholder-shown',
+    'playing',
+    'popover-open',
+    'read-only',
+    'read-write',
+    'required',
+    'right',
+    'root',
+    'scope',
+    'state',
+    'target',
+    'target-within',
+    'user-invalid',
+    'user-valid',
+    'valid',
+    'visited',
+    'where',
+]);
 /**
  * Specificity, packed. Counted from the selector text rather than from a
  * parse: `#a` is an id, `.a`/`[a]`/`:a` is a class, a bare name is a type,
@@ -170,6 +802,9 @@ export function splitSelectors(prelude) {
  * specificity is their argument's. The approximation costs an author who
  * writes `:is(#id)` and expects it to beat a class; nothing else.
  */
+const LEGACY_PSEUDO_ELEMENTS = /^(?:before|after|first-line|first-letter)$/i;
+/** The pseudo-classes that may follow a pseudo-element. */
+const USER_ACTIONS = /^(?:hover|active|focus|focus-visible|focus-within)$/i;
 export function specificityOf(selector) {
     let ids = 0;
     let classes = 0;
@@ -180,31 +815,42 @@ export function specificityOf(selector) {
         const c = selector[i];
         if (c === '#') {
             ids += 1;
-            i = skipIdent(selector, i + 1);
+            i = identEnd(selector, i + 1);
         }
         else if (c === '.') {
             classes += 1;
-            i = skipIdent(selector, i + 1);
+            i = identEnd(selector, i + 1);
         }
         else if (c === '[') {
             classes += 1;
-            i = skipBalanced(selector, i, '[', ']');
+            i = componentEnd(selector, i);
         }
         else if (c === ':') {
             if (selector[i + 1] === ':') {
                 types += 1;
-                i = skipIdent(selector, i + 2);
+                i = identEnd(selector, i + 2);
             }
             else {
-                classes += 1;
-                i = skipIdent(selector, i + 1);
+                const name = readIdent(selector, i + 1);
+                // CSS 2 spelled the four pseudo-elements it had with one colon
+                if (LEGACY_PSEUDO_ELEMENTS.test(name.value)) {
+                    types += 1;
+                }
+                else {
+                    classes += 1;
+                }
+                i = name.end;
                 if (selector[i] === '(')
-                    i = skipBalanced(selector, i, '(', ')');
+                    i = componentEnd(selector, i);
             }
         }
-        else if (isIdentStart(c)) {
+        else if (c === '*' || c === '|') {
+            // the universal selector, and a namespace's bar, count nothing
+            i += 1;
+        }
+        else if (startsIdent(selector, i)) {
             types += 1;
-            i = skipIdent(selector, i);
+            i = identEnd(selector, i);
         }
         else {
             i += 1;
@@ -238,135 +884,765 @@ function skipTrivia(text, from) {
 function isSpace(c) {
     return c === ' ' || c === '\t' || c === '\n' || c === '\r' || c === '\f';
 }
-function isIdentStart(c) {
-    return /[a-zA-Z_\-*|\\]/.test(c);
+/** A character an identifier may start with, before escapes: a letter, an
+ *  underscore, anything past ASCII. */
+function isNameStart(c) {
+    if (c === undefined)
+        return false;
+    const code = c.charCodeAt(0);
+    return ((code >= 0x61 && code <= 0x7a) ||
+        (code >= 0x41 && code <= 0x5a) ||
+        code === 0x5f ||
+        code >= 0x80);
 }
-function skipIdent(text, from) {
-    let i = from;
-    while (i < text.length && /[a-zA-Z0-9_\-\\]/.test(text[i]))
-        i += 1;
+function isNameChar(c) {
+    if (c === undefined)
+        return false;
+    const code = c.charCodeAt(0);
+    return isNameStart(c) || (code >= 0x30 && code <= 0x39) || code === 0x2d;
+}
+/** Whether a backslash at `at` escapes what follows — not a newline, and
+ *  not the end of the text. */
+function isEscape(text, at) {
+    return text[at] === '\\' && at + 1 < text.length && text[at + 1] !== '\n';
+}
+/**
+ * Whether an identifier starts at `at` (CSS Syntax 4.3.10): a name-start
+ * character or an escape, after at most one hyphen — or two hyphens. Every
+ * character this accepts, `readIdent` steps over: a scan that finds an
+ * identifier and then reads none of it never moves again, which is how a
+ * `*` selector once hung the application.
+ */
+export function startsIdent(text, at) {
+    const c = text[at];
+    if (c === '-') {
+        const d = text[at + 1];
+        return isNameStart(d) || d === '-' || isEscape(text, at + 1);
+    }
+    return isNameStart(c) || isEscape(text, at);
+}
+/** Where an identifier from `at` ends, its escapes stepped over. */
+function identEnd(text, at) {
+    let i = at;
+    while (i < text.length) {
+        const code = text.charCodeAt(i);
+        if ((code >= 0x61 && code <= 0x7a) ||
+            (code >= 0x41 && code <= 0x5a) ||
+            (code >= 0x30 && code <= 0x39) ||
+            code === 0x2d ||
+            code === 0x5f ||
+            code >= 0x80) {
+            i += 1;
+        }
+        else if (code === 0x5c && isEscape(text, i)) {
+            i = readEscape(text, i).end;
+        }
+        else {
+            break;
+        }
+    }
     return i;
 }
-function skipBalanced(text, from, open, close) {
-    let depth = 0;
-    let quote = '';
-    for (let i = from; i < text.length; i += 1) {
-        const c = text[i];
-        if (quote) {
-            if (c === quote && text[i - 1] !== '\\')
-                quote = '';
-            continue;
+/** An identifier from `at`, its escapes resolved, and where it ends. */
+export function readIdent(text, at) {
+    const end = identEnd(text, at);
+    const raw = text.slice(at, end);
+    if (!raw.includes('\\'))
+        return { value: raw, end };
+    let value = '';
+    let i = at;
+    while (i < end) {
+        if (text[i] === '\\') {
+            const escape = readEscape(text, i);
+            value += escape.char;
+            i = escape.end;
         }
-        if (c === '"' || c === "'")
-            quote = c;
-        else if (c === open)
-            depth += 1;
-        else if (c === close) {
-            depth -= 1;
-            if (depth === 0)
-                return i + 1;
+        else {
+            value += text[i];
+            i += 1;
         }
     }
+    return { value, end };
+}
+/** The character an escape at `at` stands for, and where it ends: up to six
+ *  hex digits and one white space after them, or the next character. */
+function readEscape(text, at) {
+    let i = at + 1;
+    let hex = '';
+    while (hex.length < 6 && i < text.length && /[0-9a-fA-F]/.test(text[i])) {
+        hex += text[i];
+        i += 1;
+    }
+    if (!hex)
+        return { char: text[i] ?? '�', end: i + 1 };
+    if (text[i] === '\r' && text[i + 1] === '\n')
+        i += 2;
+    else if (isSpace(text[i] ?? ''))
+        i += 1;
+    const code = parseInt(hex, 16);
+    const char = code === 0 || code > 0x10ffff || (code >= 0xd800 && code <= 0xdfff)
+        ? '�'
+        : String.fromCodePoint(code);
+    return { char, end: i };
+}
+/**
+ * Where the component value starting at `at` ends (CSS Syntax 5.4.7): a
+ * string to its closing quote (or the line that breaks it), an escape, a
+ * `url(…)` to its parenthesis, a bracketed block to its match — whatever
+ * closing brackets of another kind it holds — and otherwise one character.
+ * Every scan below goes through this, so a brace in a string, a bracket
+ * escaped with a backslash and a semicolon in `url(a;b)` are what they are
+ * everywhere at once.
+ */
+function componentEnd(text, at) {
+    const c = text[at];
+    if (c === '"' || c === "'")
+        return stringEnd(text, at);
+    if (c === '\\')
+        return isEscape(text, at) ? readEscape(text, at).end : at + 1;
+    if (c === '(' || c === '[' || c === '{')
+        return blockEnd(text, at);
+    if ((c === 'u' || c === 'U') &&
+        text[at + 3] === '(' &&
+        text.slice(at, at + 3).toLowerCase() === 'url' &&
+        !isNameChar(text[at - 1])) {
+        return urlEnd(text, at + 3);
+    }
+    return at + 1;
+}
+function stringEnd(text, at) {
+    const quote = text[at];
+    let i = at + 1;
+    while (i < text.length) {
+        const c = text[i];
+        if (c === quote)
+            return i + 1;
+        // a newline ends a string that has not ended: it is a bad string, and
+        // the newline is not in it
+        if (c === '\n' || c === '\r' || c === '\f')
+            return i;
+        i = c === '\\' ? escapeEnd(text, i) : i + 1;
+    }
     return text.length;
 }
-/** The next `{` that is not inside a string, comment or bracket. */
-function findBrace(text, from) {
-    let quote = '';
-    let bracket = 0;
-    for (let i = from; i < text.length; i += 1) {
+/** Where a backslash at `at` stops meaning something inside a string: a
+ *  newline after it continues the line, and an escape — six hex digits and
+ *  the white space after them included — is read whole. */
+/** Where an escape at `at` ends: past its hex digits and the one space
+ *  that may close them, or past the character it escapes. */
+export function escapeEnd(text, at) {
+    if (text[at + 1] === '\r' && text[at + 2] === '\n')
+        return at + 3;
+    if (isEscape(text, at))
+        return readEscape(text, at).end;
+    return Math.min(text.length, at + 2);
+}
+function blockEnd(text, at) {
+    const open = text.charCodeAt(at);
+    const close = open === 0x28 ? 0x29 : open === 0x5b ? 0x5d : 0x7d;
+    let i = at + 1;
+    while (i < text.length) {
+        const code = text.charCodeAt(i);
+        if (code === close)
+            return i + 1;
+        // a closing bracket of another kind inside is only a token
+        i = opens(code) ? componentEnd(text, i) : i + 1;
+    }
+    return text.length;
+}
+/** Whether a character starts a component value longer than itself: a
+ *  quote, an escape, an opening bracket, or the `u` of a `url(`. Every other
+ *  character is its own, which is what keeps a scan a loop over codes. */
+function opens(code) {
+    return (code === 0x22 ||
+        code === 0x27 ||
+        code === 0x5c ||
+        code === 0x28 ||
+        code === 0x5b ||
+        code === 0x7b ||
+        code === 0x75 ||
+        code === 0x55);
+}
+/** `url(` at the parenthesis: a quoted argument is a function like any
+ *  other; an unquoted one runs to its `)` with its escapes. */
+/** Where a `url(` whose parenthesis is at `paren` ends: past its `)`. */
+export function urlEnd(text, paren) {
+    let i = paren + 1;
+    while (i < text.length && isSpace(text[i]))
+        i += 1;
+    if (text[i] === '"' || text[i] === "'")
+        return blockEnd(text, paren);
+    while (i < text.length) {
         const c = text[i];
-        if (quote) {
-            if (c === quote && text[i - 1] !== '\\')
-                quote = '';
-            continue;
+        if (c === ')')
+            return i + 1;
+        i += c === '\\' ? 2 : 1;
+    }
+    return text.length;
+}
+/**
+ * A `url(…)` as CSS Syntax 3 reads it (4.3.6): quoted, a string, which the
+ * end of the sheet may close as it closes the parenthesis; or unquoted, to
+ * its `)`, with white space only around it and its escapes resolved. `null`
+ * for `none`, or a url of nothing. `undefined` for a bad url — a quote, a
+ * parenthesis or white space inside an unquoted one, or anything after a
+ * quoted one's string — which makes the declaration it is in invalid.
+ */
+export function parseUrl(value) {
+    const v = value.trim();
+    if (!v || v.toLowerCase() === 'none')
+        return null;
+    if (!/^url\(/i.test(v))
+        return unquote(v) || null;
+    let i = 4;
+    while (i < v.length && isSpace(v[i]))
+        i += 1;
+    let out = '';
+    const quote = v[i];
+    if (quote === '"' || quote === "'") {
+        i += 1;
+        while (i < v.length && v[i] !== quote) {
+            if (v[i] === '\\') {
+                if (v[i + 1] === '\n') {
+                    i += 2;
+                    continue;
+                }
+                const escape = readEscape(v, i);
+                out += escape.char;
+                i = escape.end;
+            }
+            else {
+                out += v[i];
+                i += 1;
+            }
         }
-        if (c === '"' || c === "'")
-            quote = c;
-        else if (c === '/' && text[i + 1] === '*') {
-            const close = text.indexOf('*/', i + 2);
-            i = close < 0 ? text.length : close + 1;
+        i += 1;
+        while (i < v.length && isSpace(v[i]))
+            i += 1;
+        if (i < v.length && v[i] !== ')')
+            return undefined;
+        return rest(v, i) ? undefined : out || null;
+    }
+    while (i < v.length && v[i] !== ')') {
+        const c = v[i];
+        if (isSpace(c)) {
+            while (i < v.length && isSpace(v[i]))
+                i += 1;
+            if (i < v.length && v[i] !== ')')
+                return undefined;
+            break;
         }
-        else if (c === '(' || c === '[')
-            bracket += 1;
-        else if (c === ')' || c === ']')
-            bracket = Math.max(0, bracket - 1);
-        else if (c === '{' && bracket === 0)
+        if (c === '"' || c === "'" || c === '(')
+            return undefined;
+        if (c === '\\') {
+            if (!isEscape(v, i))
+                return undefined;
+            const escape = readEscape(v, i);
+            out += escape.char;
+            i = escape.end;
+            continue;
+        }
+        out += c;
+        i += 1;
+    }
+    return rest(v, i) ? undefined : out || null;
+}
+/** Whether anything follows a url's `)` at `at`: `url(a) repeat` is no
+ *  image, and the declaration it is in is invalid. */
+function rest(v, at) {
+    return at + 1 < v.length && v.slice(at + 1).trim() !== '';
+}
+function unquote(value) {
+    const v = value.trim();
+    if (v.length >= 2 &&
+        (v[0] === '"' || v[0] === "'") &&
+        v[v.length - 1] === v[0]) {
+        return v.slice(1, -1);
+    }
+    return v;
+}
+/** The first `target` from `at` that no string, escape or bracket holds, or
+ *  the length of the text. */
+function scanTo(text, at, target) {
+    const want = target.charCodeAt(0);
+    let i = at;
+    while (i < text.length) {
+        const code = text.charCodeAt(i);
+        if (code === want)
             return i;
-        else if (c === ';' && bracket === 0)
-            return -1; // a stray declaration
+        i = opens(code) ? componentEnd(text, i) : i + 1;
     }
-    return -1;
+    return text.length;
 }
-/** Find `target` at depth zero, stopping at any of `stopAt`. */
-function findChar(text, from, target, stopAt) {
-    let quote = '';
-    let depth = 0;
-    for (let i = from; i < text.length; i += 1) {
-        const c = text[i];
-        if (quote) {
-            if (c === quote && text[i - 1] !== '\\')
-                quote = '';
+/** Whether a `!` stands in a value outside its strings and brackets. */
+function hasBang(value) {
+    if (!value.includes('!'))
+        return false;
+    for (let at = scanTo(value, 0, '!'); at < value.length;) {
+        // `<!--` is a token of its own, which a custom property may hold
+        if (value[at - 1] !== '<' || !value.startsWith('--', at + 1))
+            return true;
+        at = scanTo(value, at + 1, '!');
+    }
+    return false;
+}
+/**
+ * A value with its escapes resolved outside its strings and `url()`s:
+ * `\67reen` is `green`. A string keeps its escapes for whoever reads its
+ * text, `content` among them.
+ */
+function unescapeValue(value) {
+    if (!value.includes('\\'))
+        return value;
+    let out = '';
+    let i = 0;
+    while (i < value.length) {
+        if (isEscape(value, i)) {
+            // Resolved where it stands for a name character; any other it is part
+            // of an identifier that a value parser should see as one, not as the
+            // tab or the semicolon it names — `red \9` is not `red`.
+            const escape = readEscape(value, i);
+            out += isNameChar(escape.char) ? escape.char : value.slice(i, escape.end);
+            i = escape.end;
             continue;
         }
-        if (c === '"' || c === "'")
-            quote = c;
-        else if (c === '/' && text[i + 1] === '*') {
-            const close = text.indexOf('*/', i + 2);
-            i = close < 0 ? text.length : close + 1;
+        const end = componentEnd(value, i);
+        out += value.slice(i, end);
+        i = end;
+    }
+    return out;
+}
+/**
+ * A `{…}` block: its body, and where the text goes on after it. The end of
+ * a style sheet closes a block still open (CSS 2.1 4.2), so a block the end
+ * cut off is everything after its brace. Cutting its last character as if
+ * it were the `}` made `color: blue` `color: blu` — and left an unclosed
+ * `rgb(` to reach paint whole or not, by where the sheet's whitespace fell.
+ */
+function readBlock(text, braceAt) {
+    const end = blockEnd(text, braceAt);
+    const closed = text[end - 1] === '}' && end - 1 > braceAt;
+    return { body: text.slice(braceAt + 1, closed ? end - 1 : end), end };
+}
+/** An at-rule: its name, and everything up to its `;` or its block. */
+function readAtRule(text, at) {
+    const name = readIdent(text, at + 1);
+    let i = name.end;
+    while (i < text.length && text[i] !== ';' && text[i] !== '{') {
+        i = opens(text.charCodeAt(i)) ? componentEnd(text, i) : i + 1;
+    }
+    const prelude = text.slice(name.end, i).trim();
+    if (text[i] === '{') {
+        const block = readBlock(text, i);
+        return { name: name.value, prelude, block: block.body, end: block.end };
+    }
+    return {
+        name: name.value,
+        prelude,
+        block: null,
+        end: Math.min(text.length, i + 1),
+    };
+}
+/** Where a width past a maximum starts, for the widths a restyle is due
+ *  at: a sixty-fourth of a pixel past it, where the widths a display scale
+ *  divides a device width into (`640.5` at 2x) fall on the right side. */
+const MAX_EDGE = 1 / 64;
+/**
+ * A width range in Media Queries 4's syntax — `(width >= 48rem)`, `(60rem >
+ * width)`, `(40rem <= width < 60rem)` — as the widths it holds between, or
+ * null for a term that is not one. A strict bound is a sixty-fourth of a
+ * pixel inside the value, where a viewport's width never lands.
+ */
+function widthRange(term) {
+    const inner = /^\(\s*(.*?)\s*\)$/.exec(term)?.[1];
+    if (!inner || !/[<>=]/.test(inner))
+        return null;
+    const parts = inner.split(/\s*(<=|>=|<|>|=)\s*/);
+    const isWidth = (part) => part.toLowerCase() === 'width';
+    const out = {};
+    // `width OP value`, with the operator read from the width's side
+    const bound = (op, value) => {
+        const len = parseLength(value, ZERO_UNITS);
+        if (typeof len !== 'number')
+            return false;
+        const edge = 1 / 64;
+        if (op === '>=' || op === '=')
+            out.min = Math.max(out.min ?? 0, len);
+        if (op === '>')
+            out.min = Math.max(out.min ?? 0, len + edge);
+        if (op === '<=' || op === '=')
+            out.max = Math.min(out.max ?? Infinity, len);
+        if (op === '<')
+            out.max = Math.min(out.max ?? Infinity, len - edge);
+        return true;
+    };
+    const flip = {
+        '<': '>',
+        '<=': '>=',
+        '>': '<',
+        '>=': '<=',
+        '=': '=',
+    };
+    if (parts.length === 3 && isWidth(parts[0])) {
+        return bound(parts[1], parts[2]) ? out : null;
+    }
+    if (parts.length === 3 && isWidth(parts[2])) {
+        return bound(flip[parts[1]], parts[0]) ? out : null;
+    }
+    if (parts.length === 5 && isWidth(parts[2])) {
+        return bound(flip[parts[1]], parts[0]) && bound(parts[3], parts[4])
+            ? out
+            : null;
+    }
+    return null;
+}
+/** How deep rules may nest before the ones further in are dropped: far
+ *  past anything written by hand or by a framework, and short of what a
+ *  generated sheet could make of the stack. */
+const MAX_NESTING = 16;
+/**
+ * A style rule's block, parted into its declarations and the rules nested
+ * in it. A declaration runs to its `;` and a nested rule to its block,
+ * whichever comes first — `color: red;` and `a:hover { … }` — and a custom
+ * property is a declaration whatever its value holds.
+ */
+function splitNested(body) {
+    let declarations = '';
+    const nested = [];
+    let i = 0;
+    while (i < body.length) {
+        i = skipTrivia(body, i);
+        if (i >= body.length)
+            break;
+        if (body[i] === ';') {
+            i += 1;
+            continue;
         }
-        else if (c === '(' || c === '[' || c === '{')
-            depth += 1;
-        else if (c === ')' || c === ']' || c === '}') {
-            if (depth === 0 && stopAt.includes(c))
-                return -1;
-            depth -= 1;
+        if (body[i] === '@' && startsIdent(body, i + 1)) {
+            const at = readAtRule(body, i);
+            nested.push({
+                kind: 'at',
+                name: at.name,
+                prelude: at.prelude,
+                block: at.block,
+            });
+            i = at.end;
+            continue;
         }
-        else if (depth === 0) {
-            if (c === target)
-                return i;
-            if (stopAt.includes(c))
-                return -1;
+        const semi = scanTo(body, i, ';');
+        const brace = scanTo(body, i, '{');
+        if (brace < semi && !CUSTOM_DECLARATION.test(body.slice(i, brace))) {
+            const block = readBlock(body, brace);
+            nested.push({
+                kind: 'rule',
+                prelude: body.slice(i, brace).trim(),
+                body: block.body,
+            });
+            i = block.end;
+            continue;
         }
+        declarations += `${body.slice(i, semi)};`;
+        i = semi + 1;
     }
-    return -1;
+    return { declarations, nested };
 }
-function readBlock(text, braceAt) {
-    const end = skipBalanced(text, braceAt, '{', '}');
-    return { body: text.slice(braceAt + 1, Math.max(braceAt + 1, end - 1)), end };
+const CUSTOM_DECLARATION = /^\s*--[\w-]*\s*:/;
+/**
+ * A nested rule's selectors against its parent's, as written (CSS Nesting
+ * 1, 3): a selector that starts with `&` is the parent's with the rest
+ * after it, `&:hover` the parent hovered; any other `&` is `:is()` of the
+ * parent; one with none is relative to the parent, a descendant unless it
+ * starts with a combinator. Null where one of them comes to no selector.
+ */
+function nestedSelectors(prelude, parents) {
+    const out = [];
+    for (const part of splitTopLevel(prelude, ',')) {
+        const written = part.trim();
+        if (!written)
+            return null;
+        const own = hasNesting(written) ? written : `& ${written}`;
+        for (const parent of parents) {
+            const resolved = own[0] === '&' &&
+                !hasNesting(own.slice(1)) &&
+                !/^[\w-]/.test(own.slice(1))
+                ? parent + own.slice(1)
+                : replaceNesting(own, `:is(${parent})`);
+            if (!isSelector(resolved))
+                return null;
+            out.push(resolved);
+        }
+    }
+    return out;
 }
-function readAtRule(text, at) {
-    const nameEnd = skipIdent(text, at + 1);
-    const name = text.slice(at + 1, nameEnd);
-    let i = nameEnd;
+/** Whether a selector has a `&` outside its strings and escapes. */
+function hasNesting(selector) {
+    return replaceNesting(selector, '') !== selector;
+}
+/** A selector with every `&` outside its strings and escapes replaced. */
+function replaceNesting(selector, by) {
+    if (!selector.includes('&'))
+        return selector;
+    let out = '';
     let quote = '';
-    let depth = 0;
-    for (; i < text.length; i += 1) {
-        const c = text[i];
-        if (quote) {
-            if (c === quote && text[i - 1] !== '\\')
+    for (let i = 0; i < selector.length; i += 1) {
+        const c = selector[i];
+        if (c === '\\') {
+            out += selector.slice(i, i + 2);
+            i += 1;
+        }
+        else if (quote) {
+            if (c === quote)
                 quote = '';
-            continue;
+            out += c;
         }
-        if (c === '"' || c === "'")
+        else if (c === '"' || c === "'") {
             quote = c;
-        else if (c === '(' || c === '[')
-            depth += 1;
-        else if (c === ')' || c === ']')
-            depth = Math.max(0, depth - 1);
-        else if (depth === 0 && (c === ';' || c === '{'))
-            break;
+            out += c;
+        }
+        else
+            out += c === '&' ? by : c;
     }
-    const prelude = text.slice(nameEnd, i).trim();
-    if (text[i] === '{') {
-        const block = readBlock(text, i);
-        return { name, prelude, block: block.body, end: block.end };
+    return out;
+}
+/** A list's items at the top level: no string, escape or bracket parts
+ *  them. */
+function splitTopLevel(text, at) {
+    const out = [];
+    let start = 0;
+    let i = 0;
+    while (i < text.length) {
+        if (text[i] === at) {
+            out.push(text.slice(start, i));
+            start = i + 1;
+            i += 1;
+        }
+        else {
+            i = opens(text.charCodeAt(i)) ? componentEnd(text, i) : i + 1;
+        }
     }
-    return { name, prelude, block: null, end: Math.min(text.length, i + 1) };
+    out.push(text.slice(start));
+    return out;
 }
 function importUrl(prelude) {
     const m = /^\s*(?:url\(\s*)?["']?([^"')\s]+)["']?\s*\)?/.exec(prelude);
     return m ? m[1] : null;
 }
+/** Whether an `@import`'s media list, the rest of its prelude after the
+ *  URL, lets it apply here: a list that only names other media, `print` or
+ *  `braille`, leaves the sheet out (CSS 2.1 6.3). A list that depends on the
+ *  width is taken to apply; an import is fetched once, not per width. */
+function importApplies(prelude) {
+    const m = /^\s*(?:url\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)|"[^"]*"|'[^']*')(.*)$/s.exec(prelude);
+    const list = m?.[1].trim();
+    if (!list)
+        return true;
+    return parseMediaQuery(list).some((c) => c.staticPass !== false);
+}
+/**
+ * A declaration value with every `url()` in it made absolute against `base`
+ * — inside a function too, `image-set()` or a `var()` fallback, and never
+ * inside a string. `url(#id)`, a reference into the document itself, is left
+ * as it is, as are a `data:` URL, absolute already, and a url that is none.
+ */
+export function absoluteUrls(value, base) {
+    if (!/url\(/i.test(value))
+        return value;
+    let out = '';
+    let from = 0;
+    let i = 0;
+    while (i < value.length) {
+        const c = value[i];
+        if (c === '"' || c === "'") {
+            i = stringEnd(value, i);
+            continue;
+        }
+        if (c === '\\') {
+            i = escapeEnd(value, i);
+            continue;
+        }
+        if ((c === 'u' || c === 'U') &&
+            value[i + 3] === '(' &&
+            value.slice(i, i + 3).toLowerCase() === 'url' &&
+            !isNameChar(value[i - 1])) {
+            const end = urlEnd(value, i + 3);
+            const url = parseUrl(value.slice(i, end));
+            if (typeof url === 'string' && url[0] !== '#' && !/^data:/i.test(url)) {
+                const resolved = resolveUrl(url, base);
+                if (resolved !== url) {
+                    out += value.slice(from, i) + cssUrl(resolved);
+                    from = end;
+                }
+            }
+            i = end;
+            continue;
+        }
+        i += 1;
+    }
+    return from === 0 ? value : out + value.slice(from);
+}
+/** A URL as a `url()` that reads back as it: quoted, with the characters a
+ *  string cannot hold as they are escaped. */
+function cssUrl(url) {
+    const escaped = url.replace(/[\\"\n]/g, (c) => c === '\n' ? '\\a ' : `\\${c}`);
+    return `url("${escaped}")`;
+}
+/** The generic families: a `@font-face` may not take one's name, and one
+ *  that did would take over every element that asks for it. */
+const GENERIC_FAMILIES = new Set([
+    'serif',
+    'sans-serif',
+    'monospace',
+    'cursive',
+    'fantasy',
+    'system-ui',
+    'ui-serif',
+    'ui-sans-serif',
+    'ui-monospace',
+    'ui-rounded',
+    'math',
+    'emoji',
+    'fangsong',
+    '-apple-system',
+    'blinkmacsystemfont',
+    'inherit',
+    'initial',
+    'unset',
+    'revert',
+    'default',
+]);
+/**
+ * A `@font-face` block, or null when it names no family, or no source this
+ * can ask for: `local()` names a face the system has, which this does not
+ * look up, and a family that is only `local()`s is left to the system as it
+ * would be anyway.
+ */
+function parseFontFace(block, base, media) {
+    let family = null;
+    let src = null;
+    let weight = [400, 400];
+    let style = 'normal';
+    let unicodeRange = null;
+    // a descriptor that is not one is dropped, as a declaration is, and the
+    // one before it stands
+    for (const d of parseDeclarations(block)) {
+        if (d.prop === 'font-family') {
+            family = faceFamily(d.value) ?? family;
+        }
+        else if (d.prop === 'src') {
+            src = d.value;
+        }
+        else if (d.prop === 'font-weight') {
+            weight = faceWeight(d.value) ?? weight;
+        }
+        else if (d.prop === 'font-style') {
+            const v = d.value.trim().toLowerCase();
+            if (v === 'normal')
+                style = 'normal';
+            else if (v === 'italic' || /^oblique\b/.test(v))
+                style = 'italic';
+        }
+        else if (d.prop === 'unicode-range') {
+            unicodeRange = unicodeRanges(d.value) ?? unicodeRange;
+        }
+    }
+    if (!family || src === null)
+        return null;
+    const sources = [];
+    for (const part of splitTopLevel(src, ',')) {
+        const item = part.trim();
+        if (!/^url\(/i.test(item))
+            continue;
+        const end = urlEnd(item, 3);
+        const url = parseUrl(item.slice(0, end));
+        if (typeof url !== 'string')
+            continue;
+        // `format("woff2")`, the older `format(woff2)`, or a list of them, of
+        // which the first says enough
+        const hint = /format\(\s*(?:"([^"]*)"|'([^']*)'|([\w-]+))/i.exec(item.slice(end));
+        const format = hint ? (hint[1] ?? hint[2] ?? hint[3]).toLowerCase() : null;
+        sources.push({ url: resolveUrl(url, base), format });
+    }
+    if (!sources.length)
+        return null;
+    return { family, sources, weight, style, unicodeRange, media };
+}
+/** A `@font-face`'s one family name: a string, or identifiers, which one
+ *  space joins. Not a list, and not a generic family's name. */
+function faceFamily(value) {
+    const v = value.trim();
+    let name;
+    if (v[0] === '"' || v[0] === "'") {
+        if (stringEnd(v, 0) !== v.length)
+            return null;
+        name = unquote(v).trim();
+    }
+    else {
+        const words = v.split(/\s+/);
+        for (const word of words) {
+            if (!startsIdent(word, 0) || readIdent(word, 0).end !== word.length) {
+                return null;
+            }
+        }
+        name = words.join(' ');
+    }
+    if (!name || name.includes(','))
+        return null;
+    return GENERIC_FAMILIES.has(name.toLowerCase()) ? null : name;
+}
+/** A `@font-face`'s `font-weight`: one weight, or the range a variable face
+ *  covers. `auto` — the file's own range — is taken to be every weight. */
+function faceWeight(value) {
+    const parts = value.trim().toLowerCase().split(/\s+/);
+    const one = (p) => {
+        if (p === 'normal')
+            return 400;
+        if (p === 'bold')
+            return 700;
+        if (!/^\d+(?:\.\d+)?$/.test(p))
+            return null;
+        const n = Number(p);
+        return n >= 1 && n <= 1000 ? n : null;
+    };
+    if (parts.length === 1) {
+        if (parts[0] === 'auto')
+            return [1, 1000];
+        const w = one(parts[0]);
+        return w === null ? null : [w, w];
+    }
+    if (parts.length !== 2)
+        return null;
+    const a = one(parts[0]);
+    const b = one(parts[1]);
+    if (a === null || b === null)
+        return null;
+    return a <= b ? [a, b] : [b, a];
+}
+/** `unicode-range`: `U+26`, `U+0-7F`, `U+4??` — inclusive ranges, or null
+ *  when any part is not one, and the descriptor is dropped. */
+function unicodeRanges(value) {
+    const out = [];
+    for (const part of value.split(',')) {
+        const m = /^\s*u\+([0-9a-f?]{1,6})(?:-([0-9a-f]{1,6}))?\s*$/i.exec(part);
+        if (!m)
+            return null;
+        let lo;
+        let hi;
+        if (m[1].includes('?')) {
+            if (m[2] || !/^[0-9a-f]*\?+$/i.test(m[1]))
+                return null;
+            lo = parseInt(m[1].replace(/\?/g, '0'), 16);
+            hi = parseInt(m[1].replace(/\?/g, 'f'), 16);
+        }
+        else {
+            lo = parseInt(m[1], 16);
+            hi = m[2] ? parseInt(m[2], 16) : lo;
+        }
+        if (hi < lo || lo > 0x10ffff)
+            return null;
+        out.push([lo, Math.min(hi, 0x10ffff)]);
+    }
+    return out.length ? out : null;
+}
 /**
  * A `@media` prelude, reduced to the width and colour-scheme tests this can
  * honour. Each comma group is one condition and they are OR-ed; within a
@@ -387,6 +1663,19 @@ export function parseMediaQuery(prelude) {
                 .replace(/^only\s+/i, '');
             if (!term)
                 continue;
+            // Media Queries 4's ranges, which Tailwind 4 writes its breakpoints
+            // in: `(width >= 48rem)`, `(40rem <= width < 60rem)`
+            const range = widthRange(term);
+            if (range) {
+                if (range.min !== undefined) {
+                    condition.min = Math.max(condition.min ?? 0, range.min);
+                }
+                if (range.max !== undefined) {
+                    condition.max = Math.min(condition.max ?? Infinity, range.max);
+                }
+                sawWidth = true;
+                continue;
+            }
             const feature = /^\(\s*([a-z-]+)\s*:\s*([^)]+?)\s*\)$/i.exec(term);
             if (feature) {
                 const key = feature[1].toLowerCase();
@@ -429,7 +1718,11 @@ export function parseMediaQuery(prelude) {
             const type = term.toLowerCase();
             if (type === 'screen' || type === 'all')
                 continue;
-            if (type === 'print' || type === 'speech')
+            // any other medium is not this one: `print`, `speech`, and the ones
+            // CSS 2.1 named that Media Queries retired, `braille`, `embossed`,
+            // `handheld`, `projection`, `tty`, `tv`. A term that is no name is
+            // left as it was.
+            if (/^[a-z-]+$/.test(type))
                 pass = false;
         }
         if (negated) {