@fluixi/compiler 1.0.0-alpha.100

package/dist/transform/styles.js

@@ -0,0 +1,743 @@
+/**
+ * `<style>` and `<style scoped>` in a component.
+ *
+ * The compiler owns which component a style belongs to and the scoping; what the CSS means
+ * (`@apply`, utilities, variants, theme values, nesting) is the CSS engine's, reached through
+ * the `process` function the host passes in, the same engine and context the project's own CSS
+ * goes through. The host gets the processed CSS back and decides where it goes; the element
+ * itself leaves the template.
+ *
+ * Scoping marks every element the component renders with `data-fx-s="<id>"` at compile time
+ * (part of the static template, so client renders, SSR and hydration all carry it) and adds
+ * `[data-fx-s="<id>"]` to the last compound of each selector.
+ */
+import { encode } from '@jridgewell/sourcemap-codec';
+export const SCOPE_ATTR = 'data-fx-s';
+const FUNCTIONS = new Set(['FunctionDeclaration', 'FunctionExpression', 'ArrowFunctionExpression', 'ObjectMethod', 'ClassMethod']);
+/** Finds the style blocks of a module and compiles them. Without `options`, nothing happens. */
+export function collectStyles(program, sourceName, options, 
+/** Template tags by name (`html`, `$html`), and the `css` tags a module may use unimported (`$css`). */
+tags = { html: new Map([['html', 'html']]) }, 
+/** The module as the host knows it, for source maps that point into it. */
+module) {
+    const plan = {
+        scopes: [], templateOwners: new Map(), drop: new Set(), styles: [], diagnostics: [], edits: [], literals: [], references: [],
+        shadowClasses: new Map(),
+    };
+    if (!options)
+        return plan;
+    const literalsOf = findLiterals(program, options.cssModules ?? ['@fluixi/core', '@fluixi/dom'], plan, tags.css ?? []);
+    plan.names = literalsOf;
+    // A class method's class, for telling whether a render belongs to a shadow-DOM element.
+    const classOf = new Map();
+    const shadowOf = (owner) => {
+        const cls = classOf.get(owner);
+        return cls ? plan.shadowClasses.get(cls) : undefined;
+    };
+    const resolved = new Map();
+    // A `css`` value's nodes: each static piece processed on its own, interpolated values put
+    // in between, in order. Composition happens on the AST, so the cascade is the written one,
+    // and interpolation can only stand between rules.
+    const piecesToNodes = (quasis, expressions, at, stack) => {
+        const out = [];
+        for (let i = 0; i < quasis.length; i++) {
+            const text = (quasis[i].value.cooked ?? quasis[i].value.raw);
+            if (text.trim()) {
+                try {
+                    // The engine's positions count from the piece; the piece starts where its quasi does.
+                    const start = quasis[i].loc?.start;
+                    out.push(...options.process(text, sourceName).map((n) => (start ? shiftLoc(n, sourceName, start) : n)));
+                }
+                catch (error) {
+                    plan.diagnostics.push({ ...at, message: `CSS could not be processed: ${error.message}` });
+                    return null;
+                }
+            }
+            const expr = expressions[i];
+            if (!expr)
+                continue;
+            const value = expr.type === 'Identifier' ? resolveLiteral(expr.name, at, stack) : undefined;
+            if (value === undefined) {
+                plan.diagnostics.push({
+                    ...at,
+                    message: 'Only css`` values can be interpolated into styles, and only by name: ${base}. Dynamic values go through custom properties (style:--x={...} and var(--x)).',
+                });
+                return null;
+            }
+            if (value === null)
+                return null;
+            out.push(...value);
+        }
+        return out;
+    };
+    /** A literal's nodes; `undefined` when the name is not a style value at all. */
+    function resolveLiteral(name, at, stack) {
+        const imported = literalsOf.imports.get(name);
+        if (imported) {
+            const nodes = options?.imported?.get(`${imported.source}#${imported.name}`);
+            // Positions in a module the build named stay, for the map; any other is dropped.
+            if (nodes)
+                return nodes.map((n) => keepLocIn(n, options?.importedModules));
+            plan.references.push({ name: imported.name, source: imported.source, ...at });
+            // Without `imported` the host has not looked yet; with it, it looked and found nothing.
+            plan.diagnostics.push({
+                ...at,
+                message: options?.imported
+                    ? `${name} from ${imported.source} is not a css\`\` value the build could find.`
+                    : `${name} comes from ${imported.source}: style values from another module are resolved by the build.`,
+            });
+            return null;
+        }
+        const literal = literalsOf.literals.get(name);
+        if (!literal)
+            return undefined;
+        if (stack.includes(name)) {
+            plan.diagnostics.push({ ...at, message: `css\`\` values include each other: ${[...stack, name].join(' → ')}.` });
+            return null;
+        }
+        if (!resolved.has(name)) {
+            resolved.set(name, piecesToNodes(literal.quasi.quasis, literal.quasi.expressions, at, [...stack, name]));
+        }
+        return resolved.get(name);
+    }
+    for (const [name, literal] of literalsOf.literals) {
+        const at = { line: literal.loc?.start.line ?? 0, column: literal.loc?.start.column ?? 0 };
+        const nodes = resolveLiteral(name, at, []);
+        const id = hash(`${sourceName}:css:${name}`);
+        plan.edits.push({ start: literal.start, end: literal.end, code: `({ $fxStyle: ${JSON.stringify(id)} })` });
+        if (nodes)
+            plan.literals.push({ id, name, css: printStyle(nodes, options.minify), nodes });
+    }
+    const scopeOf = new Map();
+    const names = new Map();
+    // `const Card = () => …`: the component's name is the variable's.
+    const named = new Map();
+    const visit = (node, owners) => {
+        if (!node || typeof node !== 'object')
+            return;
+        if (node.type === 'VariableDeclarator' && node.id.type === 'Identifier' && node.init && FUNCTIONS.has(node.init.type)) {
+            named.set(node.init, node.id.name);
+        }
+        // A custom element's `render()` belongs to the class: the element is the component.
+        if ((node.type === 'ClassDeclaration' || node.type === 'ClassExpression') && node.id) {
+            for (const member of node.body.body)
+                if (member.type === 'ClassMethod')
+                    named.set(member, node.id.name);
+        }
+        if (node.type === 'ClassDeclaration' || node.type === 'ClassExpression') {
+            for (const member of node.body.body)
+                if (member.type === 'ClassMethod')
+                    classOf.set(member, node);
+            const shadow = staticMember(node, 'shadow');
+            if (shadow?.value && !(shadow.value.type === 'BooleanLiteral' && shadow.value.value === false)) {
+                plan.shadowClasses.set(node, { node, styles: staticMember(node, 'styles'), indexes: [] });
+            }
+        }
+        if (node.type === 'TaggedTemplateExpression' && node.tag.type === 'Identifier' && tags.html.get(node.tag.name) === 'html') {
+            const text = node.quasi.quasis.map((q) => q.value.raw).join('');
+            if (/<style[\s>]/.test(text)) {
+                const at = { line: node.loc?.start.line ?? 0, column: node.loc?.start.column ?? 0 };
+                const owner = owners[0];
+                if (!owner)
+                    plan.diagnostics.push({ ...at, message: '<style> has to be written inside a component.' });
+                else {
+                    const id = idFor(owner);
+                    const shadow = shadowOf(owner);
+                    plan.templateOwners.set(node.start, { id, component: functionName(owner, named) });
+                    // The blocks are compiled here, from the template's own pieces, so `${base}` resolves
+                    // as it does in JSX; the template compile only takes the elements out.
+                    for (const block of templateBlocks(node.quasi))
+                        compileBlock(block, block.scoped, owner, at);
+                }
+            }
+        }
+        const inner = FUNCTIONS.has(node.type) ? [...owners, node] : owners;
+        if (node.type === 'JSXElement' && isStyle(node)) {
+            handle(node, owners);
+            return;
+        }
+        for (const key of Object.keys(node)) {
+            if (key === 'loc' || key === 'leadingComments' || key === 'trailingComments' || key === 'innerComments')
+                continue;
+            const value = node[key];
+            if (Array.isArray(value))
+                for (const v of value)
+                    visit(v, inner);
+            else if (value && typeof value === 'object' && 'type' in value)
+                visit(value, inner);
+        }
+    };
+    const handle = (node, owners) => {
+        const at = { line: node.loc?.start.line ?? 0, column: node.loc?.start.column ?? 0 };
+        const pieces = blockPieces(node);
+        if (pieces === null) {
+            plan.diagnostics.push({
+                ...at,
+                message: '<style> needs its CSS as one template literal, <style>{`...`}</style>: JSX reads a bare `{` as an expression.',
+            });
+            return;
+        }
+        // The component is the outermost function around the block: inner callbacks (a list's
+        // render function) render the same component's elements.
+        const owner = owners[0];
+        if (!owner) {
+            plan.diagnostics.push({ ...at, message: '<style> has to be written inside a component.' });
+            return;
+        }
+        compileBlock(pieces, isScoped(node), owner, at);
+        plan.drop.add(node.start);
+    };
+    const compileBlock = (pieces, scoped, owner, at) => {
+        const component = functionName(owner, named);
+        const id = idFor(owner);
+        const processed = piecesToNodes(pieces.quasis, pieces.expressions, at, []);
+        if (!processed)
+            return;
+        let nodes = processed;
+        const shadow = shadowOf(owner);
+        // Everything in the block, composed values included, takes the one scope. A shadow root
+        // needs none: its styles do not reach out, and the page's do not reach in.
+        if (scoped && !shadow) {
+            if (!plan.scopes.some((s) => s.value === id))
+                plan.scopes.push({ start: owner.start, end: owner.end, value: id });
+            nodes = scopeNodes(nodes, id, (message) => plan.diagnostics.push({ ...at, message }));
+        }
+        const printed = module
+            ? printStyleWithMap(nodes, options.minify, sourceName, module, options.importedModules)
+            : { css: printStyle(nodes, options.minify) };
+        plan.styles.push({ id, scoped: scoped && !shadow, component, ...printed, ...(shadow ? { shadow: true } : {}), ...at });
+        if (shadow)
+            shadow.indexes.push(plan.styles.length - 1);
+    };
+    // One id per component: every block it has, scoped or not, JSX or template, shares it.
+    function idFor(owner) {
+        let id = scopeOf.get(owner);
+        if (!id) {
+            const component = functionName(owner, named);
+            const seen = names.get(component) ?? 0;
+            names.set(component, seen + 1);
+            id = hash(`${sourceName}:${component}${seen ? ':' + seen : ''}`);
+            scopeOf.set(owner, id);
+        }
+        return id;
+    }
+    visit(program, []);
+    return plan;
+}
+/**
+ * The template form: after lowering, a `<style>` is an element with raw text. It is taken out,
+ * compiled like a JSX block, and the template's other elements get the scope.
+ */
+export function applyTemplateStyles(ir, t) {
+    const walk = (node) => {
+        const children = node.children;
+        if (children) {
+            for (let i = children.length - 1; i >= 0; i--) {
+                const child = children[i];
+                if (child.kind === 'element' && child.tag === 'style' && t.owner)
+                    children.splice(i, 1);
+                else
+                    walk(child);
+            }
+        }
+        if (t.scope && node.kind === 'element' && node.tag !== 'style' && node.props && !node.props.some((p) => p.name === SCOPE_ATTR)) {
+            node.props.unshift({ name: SCOPE_ATTR, kind: 'attr', literal: t.scope });
+        }
+    };
+    walk(ir);
+}
+function staticMember(cls, name) {
+    return cls.body.body.find((m) => m.type === 'ClassProperty' && m.static && ((m.key.type === 'Identifier' && m.key.name === name) || (m.key.type === 'StringLiteral' && m.key.value === name)));
+}
+/**
+ * A shadow-DOM element's styles: once every block is compiled, each class's blocks and the
+ * `css`` values named in its `static styles` become `?inline` imports of their processed CSS
+ * (the text `static styles` takes), and the class's `static styles` lists them.
+ */
+/**
+ * Where a component's style blocks and css`` values are served: next to the component, a path
+ * ending in `.css`. Every CSS tool in the bundler then sees CSS, and none sees TSX: Vite 8
+ * matches its transforms on the path without the query, so `card.tsx?…` would read as a .tsx.
+ * `?inline` (Vite's own) asks for the CSS as a string, for a shadow root.
+ */
+export const styleIds = {
+    block: (owner, index) => `${owner}.fx-${index}.css`,
+    inline: (owner, index) => `${owner}.fx-${index}.css?inline`,
+    literal: (owner, name) => `${owner}.fx-literal-${name}.css?inline`,
+};
+export function finishShadowStyles(plan, code, moduleId) {
+    const edits = [];
+    const imports = [];
+    let next = 0;
+    const importOf = (specifier) => {
+        const local = `__fxShadow${next++}`;
+        imports.push(`import ${local} from ${JSON.stringify(specifier)};\n`);
+        return local;
+    };
+    for (const shadow of plan.shadowClasses.values()) {
+        const blocks = shadow.indexes.map((i) => importOf(styleIds.inline(moduleId, i)));
+        let value;
+        const prop = shadow.styles;
+        if (prop?.value) {
+            // `css`` values named in it become their CSS; anything else is left as written.
+            const start = prop.value.start;
+            let text = code.slice(start, prop.value.end);
+            const replacements = [];
+            walkIdentifiers(prop.value, (id) => {
+                const local = plan.names?.literals.has(id.name)
+                    ? importOf(styleIds.literal(moduleId, id.name))
+                    : plan.names?.imports.has(id.name) && !/\.css(\?|$)/.test(plan.names.imports.get(id.name).source)
+                        ? importOf(styleIds.literal(plan.names.imports.get(id.name).source, plan.names.imports.get(id.name).name))
+                        : undefined;
+                if (local)
+                    replacements.push({ at: id.start - start, length: id.name.length, with: local });
+            });
+            for (const r of replacements.sort((a, b) => b.at - a.at))
+                text = text.slice(0, r.at) + r.with + text.slice(r.at + r.length);
+            value = text;
+        }
+        if (!blocks.length && value === undefined)
+            continue;
+        if (prop?.value) {
+            const merged = blocks.length ? `[${value}, ${blocks.join(', ')}]` : value;
+            edits.push({ start: prop.value.start, end: prop.value.end, code: merged });
+        }
+        else if (blocks.length) {
+            const open = shadow.node.body.start + 1;
+            edits.push({ start: open, end: open, code: ` static styles = [${blocks.join(', ')}];` });
+        }
+    }
+    if (imports.length)
+        edits.push({ start: 0, end: 0, code: imports.join('') });
+    return edits;
+}
+function walkIdentifiers(node, visit) {
+    if (!node || typeof node !== 'object')
+        return;
+    if (node.type === 'Identifier')
+        return visit(node);
+    if (node.type === 'MemberExpression')
+        return walkIdentifiers(node.object, visit);
+    if (node.type === 'ObjectProperty')
+        return walkIdentifiers(node.value, visit);
+    for (const key of Object.keys(node)) {
+        if (key === 'loc')
+            continue;
+        const value = node[key];
+        if (Array.isArray(value))
+            for (const v of value)
+                walkIdentifiers(v, visit);
+        else if (value && typeof value === 'object' && 'type' in value)
+            walkIdentifiers(value, visit);
+    }
+}
+function isStyle(node) {
+    const name = node.openingElement.name;
+    return name.type === 'JSXIdentifier' && name.name === 'style';
+}
+function isScoped(node) {
+    return node.openingElement.attributes.some((a) => a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier' && a.name.name === 'scoped');
+}
+/** The block's template pieces, a string counting as one piece; `null` when it is anything else. */
+/**
+ * The `<style>` blocks of an html`` template, as pieces of its quasis: the CSS between the
+ * tags, with the `${…}` that stand in it. Each piece keeps the position it starts at.
+ */
+function templateBlocks(quasi) {
+    const blocks = [];
+    let open = null;
+    quasi.quasis.forEach((q, i) => {
+        const raw = q.value.raw;
+        let from = 0;
+        while (from <= raw.length) {
+            if (!open) {
+                const tag = /<style\b([^>]*)>/g;
+                tag.lastIndex = from;
+                const m = tag.exec(raw);
+                if (!m)
+                    break;
+                open = { quasis: [], expressions: [], scoped: /\bscoped\b/.test(m[1]) };
+                from = m.index + m[0].length;
+            }
+            const close = raw.indexOf('</style', from);
+            open.quasis.push(slicePiece(q, raw, from, close === -1 ? raw.length : close));
+            if (close === -1)
+                break;
+            blocks.push(open);
+            open = null;
+            from = close;
+        }
+        const expr = quasi.expressions[i];
+        if (open && expr)
+            open.expressions.push(expr);
+    });
+    return blocks;
+}
+function slicePiece(q, raw, from, to) {
+    const text = raw.slice(from, to);
+    const start = q.loc?.start;
+    if (!start)
+        return { type: 'TemplateElement', value: { raw: text, cooked: text } };
+    const before = raw.slice(0, from).split('\n');
+    const line = start.line + before.length - 1;
+    const column = before.length > 1 ? before[before.length - 1].length : start.column + from;
+    return { type: 'TemplateElement', value: { raw: text, cooked: text }, loc: { start: { line, column } } };
+}
+function blockPieces(node) {
+    const meaningful = node.children.filter((c) => !(c.type === 'JSXText' && !c.value.trim()));
+    if (meaningful.length === 0)
+        return { quasis: [], expressions: [] };
+    if (meaningful.length !== 1)
+        return null;
+    const only = meaningful[0];
+    if (only.type !== 'JSXExpressionContainer')
+        return null;
+    const expr = only.expression;
+    if (expr.type === 'StringLiteral')
+        return { quasis: [{ type: 'TemplateElement', value: { raw: expr.value, cooked: expr.value } }], expressions: [] };
+    if (expr.type === 'TemplateLiteral')
+        return { quasis: expr.quasis, expressions: expr.expressions };
+    return null;
+}
+/**
+ * The module's `css` binding and its `css`` declarations. The import is rewritten without
+ * `css`: every use is compiled away, and the engine has no business in a browser bundle.
+ */
+function findLiterals(program, modules, plan, intrinsic) {
+    const literals = new Map();
+    // Local name → where it comes from and the export it is (`import { base as b }`: b → base).
+    const imports = new Map();
+    const tags = new Set(intrinsic);
+    for (const statement of program.body ?? []) {
+        if (statement.type !== 'ImportDeclaration')
+            continue;
+        const source = statement.source.value;
+        const specifiers = statement.specifiers;
+        for (const sp of specifiers) {
+            if (sp.type === 'ImportSpecifier')
+                imports.set(sp.local.name, { source, name: sp.imported.name ?? sp.imported.value });
+        }
+        if (!modules.includes(source))
+            continue;
+        const css = specifiers.find((sp) => sp.type === 'ImportSpecifier' && (sp.imported.name ?? sp.imported.value) === 'css');
+        if (!css)
+            continue;
+        const local = css.local.name;
+        tags.add(local);
+        imports.delete(local);
+        plan.edits.push({ start: statement.start, end: statement.end, code: importWithout(statement, css) });
+    }
+    // A component that only composes imported values has no `css` import of its own: its
+    // imports still name where those values come from.
+    if (tags.size === 0)
+        return { literals, imports };
+    const visit = (node) => {
+        if (!node || typeof node !== 'object')
+            return;
+        if (node.type === 'VariableDeclarator' && node.id.type === 'Identifier' && node.init?.type === 'TaggedTemplateExpression' && node.init.tag.type === 'Identifier' && tags.has(node.init.tag.name)) {
+            literals.set(node.id.name, node.init);
+        }
+        for (const key of Object.keys(node)) {
+            if (key === 'loc')
+                continue;
+            const value = node[key];
+            if (Array.isArray(value))
+                for (const v of value)
+                    visit(v);
+            else if (value && typeof value === 'object' && 'type' in value)
+                visit(value);
+        }
+    };
+    visit(program);
+    return { literals, imports };
+}
+function importWithout(statement, removed) {
+    const rest = statement.specifiers.filter((sp) => sp !== removed);
+    const source = JSON.stringify(statement.source.value);
+    if (rest.length === 0)
+        return '';
+    const def = rest.find((sp) => sp.type === 'ImportDefaultSpecifier');
+    const ns = rest.find((sp) => sp.type === 'ImportNamespaceSpecifier');
+    const named = rest.filter((sp) => sp.type === 'ImportSpecifier').map((sp) => {
+        const imported = sp.imported.name ?? JSON.stringify(sp.imported.value);
+        return imported === sp.local.name ? imported : `${imported} as ${sp.local.name}`;
+    });
+    const parts = [def?.local.name, ns ? `* as ${ns.local.name}` : undefined, named.length ? `{ ${named.join(', ')} }` : undefined].filter(Boolean);
+    return `import ${parts.join(', ')} from ${source};`;
+}
+function functionName(fn, named) {
+    if ((fn.type === 'FunctionDeclaration' || fn.type === 'FunctionExpression') && fn.id)
+        return fn.id.name;
+    return named.get(fn) ?? 'anonymous';
+}
+/** FNV-1a, 32 bits, base 36: short, stable for the same file and component everywhere. */
+export function hash(text) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < text.length; i++) {
+        h ^= text.charCodeAt(i);
+        h = Math.imul(h, 0x01000193);
+    }
+    return (h >>> 0).toString(36);
+}
+// ─── Scoping ─────────────────────────────────────────────────────────────────
+// Selectors of these at-rules are not element selectors (`from`, `50%`) or there are none.
+const OPAQUE = /(^|-)keyframes$|^font-face$|^property$|^counter-style$|^page$|^font-feature-values$/;
+/** Adds the scope to every selector, through grouping at-rules; keyframes and the like are left. */
+export function scopeNodes(nodes, id, warn = () => { }) {
+    return nodes.map((node) => {
+        if (node.kind === 'rule')
+            return { ...node, selector: scopeSelector(node.selector, id, warn) };
+        if (node.kind === 'at-rule' && !OPAQUE.test(node.name))
+            return { ...node, nodes: scopeNodes(node.nodes, id, warn) };
+        return node;
+    });
+}
+/** Scopes a selector list: each complex selector gets the scope on its last compound. */
+export function scopeSelector(selector, id, warn = () => { }) {
+    return splitTop(selector, ',')
+        .map((complex) => scopeComplex(complex.trim(), `[${SCOPE_ATTR}="${id}"]`, warn))
+        .join(', ');
+}
+function scopeComplex(selector, attr, warn) {
+    if (/:host\b|::slotted\(/.test(selector)) {
+        warn(`\`${selector}\` only means something in a shadow root; in a light-DOM component it is left as written.`);
+        return selector;
+    }
+    const parts = compounds(selector);
+    // `:deep(x)` scopes what comes before it and leaves `x` free; `:global(x)` is never scoped.
+    const deep = parts.findIndex((p) => p.text.startsWith(':deep('));
+    if (deep !== -1) {
+        const inner = unwrap(parts[deep].text, ':deep(');
+        const before = parts.slice(0, deep);
+        if (before.length === 0)
+            return `${attr} ${inner}`;
+        const scopedBefore = scopeAt(before, before.length - 1, attr);
+        return `${join(scopedBefore)} ${inner}`;
+    }
+    let target = -1;
+    for (let i = parts.length - 1; i >= 0; i--) {
+        if (!parts[i].text.startsWith(':global(')) {
+            target = i;
+            break;
+        }
+    }
+    const out = target === -1 ? parts : scopeAt(parts, target, attr);
+    return join(out.map((p) => (p.text.startsWith(':global(') ? { ...p, text: unwrap(p.text, ':global(') } : p)));
+}
+function scopeAt(parts, index, attr) {
+    return parts.map((p, i) => (i === index ? { ...p, text: insertAttr(p.text, attr) } : p));
+}
+/** Puts the attribute before the compound's pseudo-elements and pseudo-classes: `a[s]:hover::before`. */
+function insertAttr(compound, attr) {
+    let depth = 0;
+    let quote = '';
+    for (let i = 0; i < compound.length; i++) {
+        const c = compound[i];
+        if (quote) {
+            if (c === '\\')
+                i++;
+            else if (c === quote)
+                quote = '';
+            continue;
+        }
+        if (c === '\\') {
+            i++;
+            continue;
+        }
+        if (c === '"' || c === "'")
+            quote = c;
+        else if (c === '(' || c === '[')
+            depth++;
+        else if (c === ')' || c === ']')
+            depth--;
+        else if (c === ':' && depth === 0 && i > 0)
+            return compound.slice(0, i) + attr + compound.slice(i);
+    }
+    return compound + attr;
+}
+function compounds(selector) {
+    const out = [];
+    let depth = 0;
+    let quote = '';
+    let current = '';
+    let combinator = '';
+    const push = () => {
+        if (current.trim())
+            out.push({ combinator: out.length ? combinator || ' ' : '', text: current.trim() });
+        current = '';
+        combinator = '';
+    };
+    for (let i = 0; i < selector.length; i++) {
+        const c = selector[i];
+        if (quote) {
+            current += c;
+            if (c === '\\')
+                current += selector[++i] ?? '';
+            else if (c === quote)
+                quote = '';
+            continue;
+        }
+        if (c === '\\') {
+            current += c + (selector[++i] ?? '');
+            continue;
+        }
+        if (c === '"' || c === "'")
+            quote = c;
+        if (c === '(' || c === '[')
+            depth++;
+        if (c === ')' || c === ']')
+            depth--;
+        if (depth === 0 && (c === '>' || c === '+' || c === '~')) {
+            push();
+            combinator = c;
+            continue;
+        }
+        if (depth === 0 && /\s/.test(c)) {
+            if (current.trim()) {
+                const keep = combinator;
+                push();
+                combinator = keep;
+            }
+            continue;
+        }
+        current += c;
+    }
+    push();
+    return out;
+}
+function join(parts) {
+    return parts.map((p, i) => (i === 0 ? p.text : p.combinator === ' ' ? ` ${p.text}` : ` ${p.combinator} ${p.text}`)).join('');
+}
+function unwrap(text, prefix) {
+    return text.slice(prefix.length, text.lastIndexOf(')')).trim() + text.slice(text.lastIndexOf(')') + 1);
+}
+function splitTop(selector, separator) {
+    const parts = [];
+    let depth = 0;
+    let quote = '';
+    let start = 0;
+    for (let i = 0; i < selector.length; i++) {
+        const c = selector[i];
+        if (quote) {
+            if (c === '\\')
+                i++;
+            else if (c === quote)
+                quote = '';
+        }
+        else if (c === '"' || c === "'")
+            quote = c;
+        else if (c === '\\')
+            i++;
+        else if (c === '(' || c === '[')
+            depth++;
+        else if (c === ')' || c === ']')
+            depth--;
+        else if (c === separator && depth === 0) {
+            parts.push(selector.slice(start, i));
+            start = i + 1;
+        }
+    }
+    parts.push(selector.slice(start));
+    return parts.filter((p) => p.trim());
+}
+// ─── Printing ────────────────────────────────────────────────────────────────
+function shiftLoc(node, source, start) {
+    const loc = node.loc && node.loc.source === source
+        ? { source, line: start.line + node.loc.line - 1, column: node.loc.line === 1 ? start.column + node.loc.column : node.loc.column }
+        : node.loc;
+    if (node.kind === 'rule' || node.kind === 'at-rule')
+        return { ...node, loc, nodes: node.nodes.map((n) => shiftLoc(n, source, start)) };
+    return { ...node, loc };
+}
+function keepLocIn(node, modules) {
+    const keep = node.loc !== undefined && modules?.has(node.loc.source) === true;
+    const { loc, ...rest } = node;
+    const kept = keep ? { ...rest, loc } : rest;
+    if (kept.kind === 'rule' || kept.kind === 'at-rule')
+        return { ...kept, nodes: kept.nodes.map((n) => keepLocIn(n, modules)) };
+    return kept;
+}
+/**
+ * Prints like `printStyle`, with a map from each rule and declaration back to where it was
+ * written in the module: the browser's devtools then show the `.tsx` line, not the generated CSS.
+ */
+export function printStyleWithMap(nodes, minify, sourceName, module, 
+/** Other modules rules came from (composed css`` values), by the name their positions carry. */
+others) {
+    const sources = [module];
+    const index = new Map([[sourceName, 0]]);
+    const sourceOf = (name) => {
+        if (index.has(name))
+            return index.get(name);
+        const other = others?.get(name);
+        if (!other)
+            return undefined;
+        index.set(name, sources.push(other) - 1);
+        return index.get(name);
+    };
+    const lines = [[]];
+    let css = '';
+    let column = 0;
+    const emit = (text) => {
+        for (const ch of text) {
+            css += ch;
+            if (ch === '\n') {
+                lines.push([]);
+                column = 0;
+            }
+            else
+                column++;
+        }
+    };
+    const mark = (loc) => {
+        const at = loc ? sourceOf(loc.source) : undefined;
+        if (loc && at !== undefined)
+            lines[lines.length - 1].push([column, at, loc.line - 1, loc.column]);
+    };
+    const write = (node, depth) => {
+        const pad = minify ? '' : '  '.repeat(depth);
+        const nl = minify ? '' : '\n';
+        const sp = minify ? '' : ' ';
+        emit(pad);
+        mark(node.loc);
+        if (node.kind === 'declaration') {
+            emit(`${node.property}:${sp}${node.value}${node.important ? `${sp}!important` : ''};${nl}`);
+        }
+        else if (node.kind === 'raw') {
+            emit(`${node.text}${nl}`);
+        }
+        else {
+            emit(`${node.kind === 'rule' ? node.selector : `@${node.name}${node.params ? ' ' + node.params : ''}`}${sp}{${nl}`);
+            for (const child of node.nodes)
+                write(child, depth + 1);
+            emit(`${pad}}${nl}`);
+        }
+    };
+    for (const node of nodes)
+        write(node, 0);
+    return { css, map: { version: 3, sources: sources.map((s) => s.id), sourcesContent: sources.map((s) => s.code), names: [], mappings: encode(lines) } };
+}
+export function printStyle(nodes, minify = false) {
+    const out = [];
+    const write = (node, depth) => {
+        const pad = minify ? '' : '  '.repeat(depth);
+        const nl = minify ? '' : '\n';
+        const sp = minify ? '' : ' ';
+        if (node.kind === 'declaration') {
+            out.push(`${pad}${node.property}:${sp}${node.value}${node.important ? `${sp}!important` : ''};${nl}`);
+        }
+        else if (node.kind === 'raw') {
+            out.push(`${pad}${node.text}${nl}`);
+        }
+        else {
+            const header = node.kind === 'rule' ? node.selector : `@${node.name}${node.params ? ' ' + node.params : ''}`;
+            out.push(`${pad}${header}${sp}{${nl}`);
+            for (const child of node.nodes)
+                write(child, depth + 1);
+            out.push(`${pad}}${nl}`);
+        }
+    };
+    for (const node of nodes)
+        write(node, 0);
+    return out.join('');
+}