synthesisui 0.16.82 → 0.16.84

package/dist/doctor/css-modules.js

@@ -0,0 +1,535 @@
+/**
+ * CSS MODULES - the largest source of style in a real repo, and the one nothing read.
+ *
+ * Enumerated before a line of this was written, which is the rule that produced it
+ * (dono, 01/08). In `apps/web-dashboard`:
+ *
+ *     530     module stylesheets, 32,947 lines
+ *   3,978     simple class selectors     each one a part, under the author's own name
+ *   5,777     real CSS declarations      against 0.2 per component read before this
+ *   1,623     (28%) point at var(--their-token)
+ *      51     dark rules via [data-theme], all in one stylesheet
+ *     154     keyframes
+ *      47     descendant selectors
+ *      45     media queries
+ *      29     states
+ *       0     `composes:` - no inheritance to resolve
+ *
+ * 239 of 317 components (75%) style this way, and they arrived with ZERO declarations.
+ * A person importing that app would get 283 empty components and conclude the product
+ * is broken, which is a reasonable conclusion to reach.
+ *
+ * IT IS MORE RELIABLE THAN READING TAILWIND, not less. There is no utility table to
+ * maintain and nothing is inferred from a name: the declaration is already CSS, and the
+ * part name is the word the author typed. The mapping is arithmetic:
+ *
+ *     Loader.tsx        import styles from './Chat.module.css'
+ *                       <div className={styles.loader}>          → the base
+ *                         <div className={styles.spinner}>       → part "spinner"
+ *                         <p className={styles.loadingMessage}>  → part "loading-message"
+ *
+ *     Chat.module.css   .loader { display:flex; gap:8px }
+ *                       .spinner { width:20px; animation:spinPulse 4s }
+ *                       .loadingMessage { … }
+ *
+ * THE INTERPOLATED TEMPLATE IS THE SAME FAMILY, which the enumeration also settled. Of
+ * 200 real `className={`…`}` occurrences, 165 are a literal plus `${styles.x}` and 85
+ * are `${cond ? styles.a : styles.b}` - a variant, with the condition naming the prop
+ * and both branches naming a class in this file. Exactly one is a ternary between two
+ * string literals. So this reader covers a family I had written off as impossible.
+ */
+/** A CSS pseudo-class or attribute, mapped to the state name the contract uses. */
+const STATE_OF = [
+    [/:hover\b/, "hover"],
+    [/:focus-visible\b/, "focusVisible"],
+    [/:focus-within\b/, "focus"],
+    [/:focus\b/, "focus"],
+    [/:active\b/, "active"],
+    [/:disabled\b|\[disabled\]/, "disabled"],
+    [/:checked\b|\[data-checked\]|\[aria-checked="?true"?\]/, "checked"],
+    [/\[aria-selected="?true"?\]|\[data-selected\]/, "selected"],
+    [/\[open\]|\[aria-expanded="?true"?\]|\[data-state="?open"?\]/, "open"],
+    [/:invalid\b|\[aria-invalid="?true"?\]/, "invalid"],
+    [/:read-only\b|\[readonly\]/, "readOnly"],
+    [/::placeholder\b/, "placeholder"],
+    [/:nth-child\(even\)/, "even"],
+    [/:nth-child\(odd\)/, "odd"],
+    [/:first-child\b/, "first"],
+    [/:last-child\b/, "last"],
+    [/:empty\b/, "empty"],
+];
+/** `[data-theme="dark"]`, `.dark`, `[data-scheme=dark]` - how a project says dark. */
+const DARK = /\[data-theme=["']?dark["']?\]|\[data-scheme=["']?dark["']?\]|(^|\s)\.dark(\s|$)/;
+/** `kebab-case` → `camelCase`, which is the only spelling the contract accepts. */
+export function camel(prop) {
+    return prop.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+/** `.loadingMessage` → `loading-message`. THEIR word, only re-spelled for a class. */
+export function partName(authored) {
+    return authored
+        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+        .toLowerCase()
+        .replace(/[^a-z0-9-]/g, "-")
+        .replace(/-+/g, "-")
+        .replace(/^-|-$/g, "");
+}
+/** Comments out, so a `{` inside one cannot end a block early. */
+function stripCssComments(css) {
+    return css.replace(/\/\*[\s\S]*?\*\//g, "");
+}
+function rules(css, media = null, out = []) {
+    let i = 0;
+    while (i < css.length) {
+        const open = css.indexOf("{", i);
+        if (open === -1)
+            break;
+        const head = css.slice(i, open).trim();
+        // Balance to the matching close, because an at-rule contains whole rules.
+        let depth = 0;
+        let close = -1;
+        for (let j = open; j < css.length; j++) {
+            if (css[j] === "{")
+                depth += 1;
+            else if (css[j] === "}") {
+                depth -= 1;
+                if (depth === 0) {
+                    close = j;
+                    break;
+                }
+            }
+        }
+        if (close === -1)
+            break;
+        const body = css.slice(open + 1, close);
+        if (head.startsWith("@")) {
+            const at = /^@media\b/.test(head) ? head : null;
+            if (/^@(?:media|supports|layer)\b/.test(head)) {
+                rules(body, at ?? media, out);
+            }
+            else {
+                // `@keyframes` and friends: the caller reads them whole.
+                out.push({ selector: head, body, media });
+            }
+        }
+        else if (head) {
+            out.push({ selector: head, body, media });
+        }
+        i = close + 1;
+    }
+    return out;
+}
+/** `prop: value;` pairs, in the camelCase the contract uses. */
+function declarations(body) {
+    const out = {};
+    // Only the top level: a nested rule's declarations belong to that rule.
+    const flat = body.replace(/\{[^{}]*\}/g, "").replace(/[^;]*\{/g, "");
+    for (const piece of flat.split(";")) {
+        const colon = piece.indexOf(":");
+        if (colon === -1)
+            continue;
+        const prop = piece.slice(0, colon).trim();
+        const value = piece.slice(colon + 1).trim();
+        if (!/^-?[a-z][a-z-]*$/.test(prop) || !value)
+            continue;
+        // A value that could break out of the stylesheet is not a value we carry.
+        if (/[<>{}@]/.test(value))
+            continue;
+        out[camel(prop)] = value;
+    }
+    return out;
+}
+/** `min-width: 768px` out of a media query, or null for anything else. */
+function minWidthOf(media) {
+    if (!media)
+        return null;
+    const m = /min-width\s*:\s*([\d.]+(?:px|rem|em))/i.exec(media);
+    return m ? m[1] : null;
+}
+const CLASS_TOKEN = /\.(-?[_a-zA-Z][\w-]*)/g;
+/** Every class the selector names, in order - the last one is the target. */
+function classesIn(selector) {
+    CLASS_TOKEN.lastIndex = 0;
+    return [...selector.matchAll(CLASS_TOKEN)].map((m) => m[1]);
+}
+function emptyClass() {
+    return {
+        base: {},
+        states: {},
+        dark: {},
+        at: {},
+        darkStates: {},
+        children: [],
+    };
+}
+/**
+ * One module stylesheet, read.
+ *
+ * `declared` resolves a `var(--their-token)` to the ref for the token they named, the
+ * same way the utility reader does - so the value travels as `{radius.md}` rather than
+ * as a literal, and the recipe re-themes.
+ */
+export function readModuleCss(css) {
+    const out = { classes: {}, keyframes: {}, unslotted: [] };
+    const clean = stripCssComments(css);
+    for (const rule of rules(clean)) {
+        if (rule.selector.startsWith("@keyframes")) {
+            const name = rule.selector.replace(/^@keyframes\s+/, "").trim();
+            if (name)
+                out.keyframes[name] = rule.body.trim();
+            continue;
+        }
+        if (rule.selector.startsWith("@")) {
+            out.unslotted.push(rule.selector);
+            continue;
+        }
+        // A comma-separated selector is several rules with one body.
+        for (const one of rule.selector.split(",")) {
+            const selector = one.trim();
+            if (!selector)
+                continue;
+            const names = classesIn(selector);
+            if (names.length === 0) {
+                // An element or `:root` selector styles something this reader cannot attach to
+                // a component. Said out loud rather than dropped.
+                out.unslotted.push(selector);
+                continue;
+            }
+            const target = names[names.length - 1];
+            const entry = out.classes[target] ?? emptyClass();
+            out.classes[target] = entry;
+            // A descendant selector records the RELATION as well as the styles: `.panel
+            // .title` says title lives inside panel, which is the anatomy for free.
+            if (names.length > 1) {
+                const parent = names[names.length - 2];
+                const above = out.classes[parent] ?? emptyClass();
+                if (!above.children.includes(target))
+                    above.children.push(target);
+                out.classes[parent] = above;
+            }
+            const block = declarations(rule.body);
+            if (Object.keys(block).length === 0)
+                continue;
+            const isDark = DARK.test(selector);
+            const state = STATE_OF.find(([re]) => re.test(selector))?.[1] ?? null;
+            const width = minWidthOf(rule.media);
+            if (width) {
+                // A breakpoint layer wins over the state split: `@media … { .x:hover }` is rare
+                // enough that carrying it as the breakpoint's block is the honest simplification,
+                // and the selector is reported when it is neither.
+                entry.at[width] = { ...entry.at[width], ...block };
+                continue;
+            }
+            if (isDark && state) {
+                entry.darkStates[state] = { ...entry.darkStates[state], ...block };
+                continue;
+            }
+            if (isDark) {
+                entry.dark = { ...entry.dark, ...block };
+                continue;
+            }
+            if (state) {
+                entry.states[state] = { ...entry.states[state], ...block };
+                continue;
+            }
+            entry.base = { ...entry.base, ...block };
+        }
+    }
+    return out;
+}
+// ---------------------------------------------------------------------------
+// The other half: which element wears which class
+// ---------------------------------------------------------------------------
+/** `import styles from "./X.module.css"` - the local name and the file. */
+const MODULE_IMPORT = /import\s+([A-Za-z_$][\w$]*)\s+from\s+["']([^"']*\.module\.(?:css|scss|sass|less))["']/g;
+export function moduleImports(source) {
+    MODULE_IMPORT.lastIndex = 0;
+    return [...source.matchAll(MODULE_IMPORT)].map((m) => ({
+        local: m[1],
+        specifier: m[2],
+    }));
+}
+/**
+ * A generic in type position, not an element.
+ *
+ * The same discriminator the utility reader uses, for the same reason: JSX follows `(`,
+ * `{`, `>`, a newline, a keyword or nothing, while a type argument follows an
+ * identifier. `return <Foo />` is the keyword case, so the keyword list is here too.
+ */
+const JSX_BEFORE = /\b(return|case|default|await|yield|typeof|in|of|do|else|new)$/;
+function looksLikeTypeArg(source, at) {
+    for (let i = at - 1; i >= 0; i--) {
+        const c = source[i];
+        if (c === " " || c === "\t")
+            continue;
+        if (!/[A-Za-z0-9_)\]]/.test(c))
+            return false;
+        return !JSX_BEFORE.test(source.slice(Math.max(0, i - 11), i + 1));
+    }
+    return false;
+}
+function scanTags(source) {
+    const out = [];
+    for (let i = 0; i < source.length; i++) {
+        if (source[i] !== "<")
+            continue;
+        const closing = source[i + 1] === "/";
+        const nameAt = i + (closing ? 2 : 1);
+        const name = /^[A-Za-z][\w.]*/.exec(source.slice(nameAt, nameAt + 64))?.[0];
+        if (!name)
+            continue;
+        if (!closing && looksLikeTypeArg(source, i))
+            continue;
+        let depth = 0;
+        let quote = null;
+        let end = -1;
+        for (let j = nameAt + name.length; j < source.length; j++) {
+            const ch = source[j];
+            if (quote) {
+                if (ch === "\\")
+                    j += 1;
+                else if (ch === quote)
+                    quote = null;
+                continue;
+            }
+            if (ch === '"' || ch === "'" || ch === "`") {
+                quote = ch;
+                continue;
+            }
+            if (ch === "{")
+                depth += 1;
+            else if (ch === "}")
+                depth -= 1;
+            else if (ch === ">" && depth === 0) {
+                end = j;
+                break;
+            }
+        }
+        if (end === -1)
+            continue;
+        const body = source.slice(nameAt + name.length, end);
+        if (closing) {
+            out.push({ at: i, kind: "close", tag: name, body: "" });
+        }
+        else {
+            out.push({ at: i, kind: "open", tag: name, body });
+            // Self-closing opens and closes at once.
+            if (body.trimEnd().endsWith("/")) {
+                out.push({ at: i + 1, kind: "close", tag: name, body: "" });
+            }
+        }
+        i = end;
+    }
+    return out;
+}
+/**
+ * Which class each element wears, and how deep it sits.
+ *
+ * The FIRST element carrying a module class is the component's own surface; everything
+ * below it is a part. That is the same rule the utility reader follows with
+ * `rootClasses`, applied to a different way of spelling a class.
+ */
+export function readModuleUsage(source, local) {
+    const out = [];
+    const ref = new RegExp(`\\b${local}\\.([A-Za-z_$][\\w$]*)`, "g");
+    const bracket = new RegExp(`\\b${local}\\[`, "g");
+    // Depth by counting opens and closes as they appear, which is enough for well-formed
+    // JSX and degrades to a flat list rather than to a wrong tree.
+    const events = scanTags(source);
+    let depth = 0;
+    for (const event of events) {
+        if (event.kind === "close") {
+            depth = Math.max(0, depth - 1);
+            continue;
+        }
+        const body = event.body;
+        if (bracket.test(body)) {
+            // `styles[key]` picks a class at runtime, and the class is not in the source.
+            // Impossible rather than hard, so it is not attempted.
+            bracket.lastIndex = 0;
+        }
+        ref.lastIndex = 0;
+        const named = [...body.matchAll(ref)].map((m) => m[1]);
+        if (named.length > 0) {
+            /**
+             * THE TERNARY IS A VARIANT, and the enumeration is why this is here: 85 of 200
+             * real interpolated templates are `${cond ? styles.a : styles.b}`. The condition
+             * names the prop; each branch names a class in this file.
+             */
+            const variants = [];
+            const TERNARY = new RegExp(`([!A-Za-z_$][\\w$.!]*)\\s*\\?\\s*(?:${local}\\.([\\w$]+)|["'][^"']*["'])\\s*:\\s*(?:${local}\\.([\\w$]+)|["'][^"']*["'])`, "g");
+            for (const t of body.matchAll(TERNARY)) {
+                const prop = t[1].replace(/^!/, "").split(".").pop() ?? "";
+                if (!prop)
+                    continue;
+                variants.push({
+                    prop,
+                    whenTrue: t[2] ?? null,
+                    whenFalse: t[3] ?? null,
+                });
+            }
+            // The resting class is the first one that is not a ternary branch.
+            const inTernary = new Set(variants.flatMap((v) => [v.whenTrue, v.whenFalse].filter(Boolean)));
+            const resting = named.find((n) => !inTernary.has(n)) ?? named[0];
+            out.push({ className: resting, depth, tag: event.tag, variants });
+        }
+        depth += 1;
+    }
+    return out;
+}
+// ---------------------------------------------------------------------------
+// The bridge: a module read + its usage, as one Transcription
+// ---------------------------------------------------------------------------
+/**
+ * ONE FUNNEL, so a module-styled component arrives in exactly the shape a
+ * utility-styled one does.
+ *
+ * Everything downstream - the anatomy tree, the floor, the compiler, the vitrine -
+ * already knows how to read a `Transcription`. Adding a second shape beside it would
+ * mean every consumer learning a second one, and a consumer that learns half is how
+ * "valid and unread" happens.
+ *
+ * `declared` resolves `var(--their-token)` to the ref for the token they named, the same
+ * way the utility reader does, so the value re-themes instead of being frozen.
+ */
+export function transcribeModule(read, usage, declared) {
+    const resolve = (block) => {
+        const out = {};
+        for (const [prop, value] of Object.entries(block)) {
+            out[prop] = value.replace(/var\(\s*(--[a-zA-Z0-9_-]+)\s*(?:,[^)]*)?\)/g, (whole, name) => declared.has(name) ? tokenRefFor(name) : whole);
+        }
+        return out;
+    };
+    const sorted = [...usage].sort((a, b) => a.depth - b.depth);
+    const root = sorted[0];
+    const parts = {};
+    const layers = [];
+    let count = 0;
+    const take = (className) => {
+        const c = read.classes[className];
+        if (!c)
+            return null;
+        const base = resolve(c.base);
+        const dark = resolve(c.dark);
+        const states = {};
+        for (const [state, block] of Object.entries(c.states)) {
+            states[state] = resolve(block);
+        }
+        count +=
+            Object.keys(base).length +
+                Object.keys(dark).length +
+                Object.values(states).reduce((n, b) => n + Object.keys(b).length, 0);
+        return { base, dark, states, own: c };
+    };
+    const rootTaken = root ? take(root.className) : null;
+    for (const u of sorted) {
+        const taken = u === root ? rootTaken : take(u.className);
+        if (!taken)
+            continue;
+        if (u !== root) {
+            parts[partName(u.className)] = {
+                base: taken.base,
+                dark: taken.dark,
+                states: taken.states,
+            };
+        }
+        // A breakpoint block and a dark state are LAYERS, because neither the flat map nor
+        // the dark half can hold a condition of two halves.
+        for (const [width, block] of Object.entries(taken.own.at)) {
+            const style = resolve(block);
+            if (Object.keys(style).length === 0)
+                continue;
+            count += Object.keys(style).length;
+            layers.push({ at: width, style });
+        }
+        for (const [state, block] of Object.entries(taken.own.darkStates)) {
+            const style = resolve(block);
+            if (Object.keys(style).length === 0)
+                continue;
+            count += Object.keys(style).length;
+            layers.push({ when: { state, scheme: "dark" }, style });
+        }
+        /**
+         * `${selected ? styles.selected : styles.notSelected}` - a variant, read from the
+         * markup. Both branches name a class in this file, so both become a layer under the
+         * prop the condition names.
+         */
+        for (const v of u.variants) {
+            for (const [option, className] of [
+                ["true", v.whenTrue],
+                ["false", v.whenFalse],
+            ]) {
+                if (!className)
+                    continue;
+                const branch = read.classes[className];
+                if (!branch)
+                    continue;
+                const style = resolve(branch.base);
+                if (Object.keys(style).length === 0)
+                    continue;
+                count += Object.keys(style).length;
+                layers.push({ when: { variant: { [v.prop]: option } }, style });
+            }
+        }
+    }
+    /**
+     * The tree, from the depth the markup put each element at. `children` of the root are
+     * everything one level down; deeper than that is folded up rather than guessed, because
+     * the depth counter degrades to a flat list on malformed JSX and a wrong tree is worse
+     * than a shallow one.
+     */
+    const tree = sorted
+        .filter((u) => u !== root)
+        .map((u) => ({ as: formFor(u.tag), part: partName(u.className) }));
+    return {
+        base: rootTaken?.base ?? {},
+        dark: rootTaken?.dark ?? {},
+        states: rootTaken?.states ?? {},
+        layers,
+        parts,
+        tree,
+        keyframes: read.keyframes,
+        read: count,
+    };
+}
+/** The html tag → the preview form. The same nine the anatomy contract accepts. */
+function formFor(tag) {
+    if (/^(img|picture|video|canvas|svg)$/.test(tag))
+        return "image";
+    if (/^h[1-6]$/.test(tag))
+        return "heading";
+    if (/^(button|a)$/.test(tag))
+        return "button";
+    if (/^(input|textarea|select)$/.test(tag))
+        return "field";
+    if (/^(span|p|label|strong|em|small|li|td|th|dt|dd)$/.test(tag))
+        return "text";
+    if (/^(ul|ol|table|tbody|thead|tr|section|article|nav|aside|header|footer|form|main|div)$/.test(tag)) {
+        return "stack";
+    }
+    // A capitalised tag is a component of theirs, and the frontier reader decides what it
+    // reaches - not this.
+    return /^[A-Z]/.test(tag) ? "component" : "stack";
+}
+/**
+ * A declared custom property as a token ref in the document's namespace. Their name is
+ * the path, which is "your names travel unchanged" one level deeper.
+ */
+function tokenRefFor(name) {
+    const bare = name.replace(/^--/, "");
+    if (bare.startsWith("color-")) {
+        const rest = bare.slice("color-".length);
+        const m = /^(.*)-(\d{2,4})$/.exec(rest);
+        return m ? `{color.${m[1]}.${m[2]}}` : `{color.${rest}}`;
+    }
+    if (bare.startsWith("radius-"))
+        return `{radius.${bare.slice(7)}}`;
+    if (bare.startsWith("spacing-"))
+        return `{spacing.${bare.slice(8)}}`;
+    if (bare.startsWith("shadow-"))
+        return `{shadow.${bare.slice(7)}}`;
+    if (bare.startsWith("text-"))
+        return `{typography.scale.${bare.slice(5)}.fontSize}`;
+    if (bare.startsWith("font-"))
+        return `{typography.families.${bare.slice(5)}}`;
+    return `var(${name})`;
+}

package/dist/doctor/transcribe.js

@@ -235,6 +235,20 @@ export function readUtility(utility, declared) {
     const keyword = TYPE_KEYWORD[core];
     if (keyword)
         return keyword;
+    /**
+     * BORDER WIDTH - `border`, `border-2`, `border-b`, `border-t-4`.
+     *
+     * `border-b border-lightgray-300` on a real table row gave up the colour and lost the
+     * WIDTH, so the row reproduced its border colour and no border (spec, 01/08). Tailwind
+     * splits the two across separate utilities and only one of them was in a table.
+     */
+    const width = BORDER_WIDTH.exec(core);
+    if (width) {
+        const side = width[1] ? BORDER_SIDE[width[1]] : "";
+        const property = side ? `border${side}Width` : "borderWidth";
+        const value = width[2] ? `${width[2]}px` : "1px";
+        return { property, value };
+    }
     /**
      * AN ARBITRARY VALUE POINTING AT ONE OF THEIR OWN TOKENS.
      *
@@ -258,8 +272,22 @@ export function readUtility(utility, declared) {
     if (bracket !== -1 && core.endsWith("]")) {
         const head = core.slice(0, bracket);
         const inner = core.slice(bracket + 2, -1);
-        const property = COLOR_PROPERTY[head] ?? SPACING_PROPERTY[head] ?? BRACKET_PROPERTY[head];
         const value = resolveArbitrary(inner, declared);
+        /**
+         * `text-[…]` IS AMBIGUOUS AND THE VALUE DECIDES.
+         *
+         * `text-[1.8em]` is a font size and `text-[#fff]` is a colour, and the head alone
+         * cannot tell them apart. Reading the head first put `fontSize: 1.8em` into `color`
+         * on a real `Text` component - a wrong value, which is worse than a missing one
+         * (probe, 01/08). The same ambiguity the scale branch below already resolves.
+         */
+        const property = head === "text"
+            ? value && LOOKS_LIKE_LENGTH.test(value.value)
+                ? "fontSize"
+                : COLOR_PROPERTY.text
+            : (COLOR_PROPERTY[head] ??
+                SPACING_PROPERTY[head] ??
+                BRACKET_PROPERTY[head]);
         if (property && value) {
             return { property, value: value.value, token: value.token };
         }
@@ -380,6 +408,19 @@ export function readUtility(utility, declared) {
  * `rounded-[…]` is a radius, `shadow-[…]` an elevation, `text-[…]` ambiguous by design
  * (a colour or a size) and resolved by what the value looks like.
  */
+/** `border`, `border-2`, `border-b`, `border-b-2` - a width, never a colour. The colour
+ *  is a separate utility (`border-ocean-500`) and the colour table already reads it. */
+const BORDER_WIDTH = /^border(?:-([xytrbl]))?(?:-(\d+))?$/;
+const BORDER_SIDE = {
+    t: "Top",
+    r: "Right",
+    b: "Bottom",
+    l: "Left",
+    x: "Inline",
+    y: "Block",
+};
+/** A length or a token ref to one - not a colour. `1.8em`, `20px`, `{typography.…}`. */
+const LOOKS_LIKE_LENGTH = /^-?[\d.]+(?:px|rem|em|ch|ex|vw|vh|vmin|vmax|%|pt|cm|mm|in)$|^\{(?:typography|spacing|radius)\.|^(?:calc|clamp|min|max)\(/;
 const BRACKET_PROPERTY = {
     rounded: "borderRadius",
     shadow: "boxShadow",
@@ -454,6 +495,51 @@ function refFor(name) {
  * `group-data-[checked]:` value written into the resting state would be a look
  * the component never has.
  */
+/**
+ * `style={{ … }}` - 7 of 35 components in a real library and 73 of 317 in a real app.
+ *
+ * A literal, so it re-themes nowhere - and that is exactly why it travels. v1 is a
+ * MIRROR and v2 is where a literal becomes a token they approve, which is the rule this
+ * pipeline already runs on everywhere else. The alternative is the component arriving
+ * empty, and an empty component is not more honest than a literal one (dono, 01/08).
+ *
+ * Only the FIRST inline style in the file, matching what `rootClasses` does: it is the
+ * element the component returns, and everything deeper is a part this reader does not
+ * attempt.
+ */
+const INLINE_STYLE = /style=\{\{([^{}]*(?:\{[^{}]*\}[^{}]*)*)\}\}/;
+export function readInlineStyle(source) {
+    const m = INLINE_STYLE.exec(source);
+    if (!m)
+        return {};
+    const out = {};
+    for (const piece of m[1].split(",")) {
+        const colon = piece.indexOf(":");
+        if (colon === -1)
+            continue;
+        const prop = piece
+            .slice(0, colon)
+            .trim()
+            .replace(/^["']|["']$/g, "");
+        let value = piece.slice(colon + 1).trim();
+        // A value computed at runtime is not in the source, so there is nothing to read.
+        if (!value || /[`$]|\?|=>|\(/.test(value))
+            continue;
+        value = value.replace(/^["']|["']$/g, "");
+        if (!/^[a-zA-Z][\w]*$/.test(prop))
+            continue;
+        if (/[<>{}@;]/.test(value))
+            continue;
+        // React accepts a bare number for a length property and means pixels.
+        if (/^-?\d+(\.\d+)?$/.test(value) && !UNITLESS.test(prop)) {
+            value = `${value}px`;
+        }
+        out[prop] = value;
+    }
+    return out;
+}
+/** Properties React leaves unitless, so a bare number is not pixels. */
+const UNITLESS = /^(opacity|zIndex|flex|flexGrow|flexShrink|order|lineHeight|fontWeight|zoom|columnCount|fillOpacity|strokeOpacity|animationIterationCount)$/;
 export function transcribe(classes, declared) {
     const out = {
         base: {},