|
| 1 | +import { defineRule, type ESTree } from "@oxlint/plugins"; |
| 2 | + |
| 3 | +// Roots whose open popup inserts Base UI focus guards right after the trigger. Select and |
| 4 | +// Combobox are safe: their hidden input always renders after the trigger, so it stays last. |
| 5 | +const POPUP_MODULE = /(?:^|\/)ui\/(?:menu|popover)$/u; |
| 6 | +const POPUP_ROOTS = new Set(["Menu", "Popover"]); |
| 7 | +// Utilities that style every child except the last one. |
| 8 | +const LAST_CHILD_UTILITY = /^-?space-[xy]-(?!0$)|^divide-[xy](?:$|-(?!0$|reverse$))/u; |
| 9 | + |
| 10 | +type JsxChild = ESTree.JSXElement["children"][number]; |
| 11 | + |
| 12 | +const isNode = (value: unknown): value is ESTree.Node => |
| 13 | + typeof value === "object" && value !== null && "type" in value; |
| 14 | + |
| 15 | +function walk(node: unknown, visit: (node: ESTree.Node) => void) { |
| 16 | + if (Array.isArray(node)) { |
| 17 | + for (const child of node) walk(child, visit); |
| 18 | + return; |
| 19 | + } |
| 20 | + if (!isNode(node)) return; |
| 21 | + visit(node); |
| 22 | + for (const [key, value] of Object.entries(node)) { |
| 23 | + if (key !== "parent") walk(value, visit); |
| 24 | + } |
| 25 | +} |
| 26 | + |
| 27 | +const elementName = (node: ESTree.Node) => |
| 28 | + node.type === "JSXElement" && node.openingElement.name.type === "JSXIdentifier" |
| 29 | + ? node.openingElement.name.name |
| 30 | + : undefined; |
| 31 | + |
| 32 | +/** Splits a class token into its variants and utility, ignoring colons inside brackets. */ |
| 33 | +function parseClass(token: string) { |
| 34 | + const variants: string[] = []; |
| 35 | + let depth = 0; |
| 36 | + let start = 0; |
| 37 | + for (let index = 0; index < token.length; index++) { |
| 38 | + const character = token[index]; |
| 39 | + if (character === "[" || character === "(") depth++; |
| 40 | + else if (character === "]" || character === ")") depth--; |
| 41 | + else if (character === ":" && depth === 0) { |
| 42 | + variants.push(token.slice(start, index)); |
| 43 | + start = index + 1; |
| 44 | + } |
| 45 | + } |
| 46 | + return { variants, utility: token.slice(start).replace(/^!|!$/gu, "") }; |
| 47 | +} |
| 48 | + |
| 49 | +// `*:`, `**:`, and arbitrary variants like `[&_ul]:` or `[&>li]:` style other elements. |
| 50 | +const targetsOtherElements = (variant: string) => |
| 51 | + variant === "*" || variant === "**" || /^\[.*&.*[\s_>+~]/u.test(variant); |
| 52 | + |
| 53 | +const isLastChildUtility = (token: string) => { |
| 54 | + const { variants, utility } = parseClass(token); |
| 55 | + return LAST_CHILD_UTILITY.test(utility) && !variants.some(targetsOtherElements); |
| 56 | +}; |
| 57 | + |
| 58 | +/** The first last-child utility anywhere in the element's className. */ |
| 59 | +function lastChildUtility(element: ESTree.JSXElement) { |
| 60 | + for (const attribute of element.openingElement.attributes) { |
| 61 | + if (attribute.type !== "JSXAttribute" || attribute.name.name !== "className") continue; |
| 62 | + const strings: string[] = []; |
| 63 | + walk(attribute.value, (node) => { |
| 64 | + if (node.type === "Literal" && typeof node.value === "string") strings.push(node.value); |
| 65 | + if (node.type === "TemplateElement") strings.push(node.value.cooked ?? node.value.raw); |
| 66 | + }); |
| 67 | + return strings.join(" ").split(/\s+/u).find(isLastChildUtility); |
| 68 | + } |
| 69 | + return undefined; |
| 70 | +} |
| 71 | + |
| 72 | +/** JSX an expression can render: both branches of a ternary, the right of `&&`, a map callback's result. */ |
| 73 | +function renderedBy(expression: ESTree.Node | null | undefined): ESTree.Node[] { |
| 74 | + if (!expression) return []; |
| 75 | + switch (expression.type) { |
| 76 | + case "ParenthesizedExpression": |
| 77 | + return renderedBy(expression.expression); |
| 78 | + case "JSXElement": |
| 79 | + return [expression]; |
| 80 | + case "JSXFragment": |
| 81 | + return possiblyLast(expression.children); |
| 82 | + case "ConditionalExpression": |
| 83 | + return [...renderedBy(expression.consequent), ...renderedBy(expression.alternate)]; |
| 84 | + case "LogicalExpression": |
| 85 | + return renderedBy(expression.right); |
| 86 | + case "CallExpression": { |
| 87 | + const callback = expression.arguments[0]; |
| 88 | + if (callback?.type !== "ArrowFunctionExpression" && callback?.type !== "FunctionExpression") |
| 89 | + return []; |
| 90 | + return callback.body ? returnedBy(callback.body) : []; |
| 91 | + } |
| 92 | + default: |
| 93 | + return [expression]; |
| 94 | + } |
| 95 | +} |
| 96 | + |
| 97 | +/** JSX a function body returns, ignoring nested functions. */ |
| 98 | +function returnedBy(body: ESTree.Node): ESTree.Node[] { |
| 99 | + if (body.type !== "BlockStatement") return renderedBy(body); |
| 100 | + const found: ESTree.Node[] = []; |
| 101 | + const visit = (node: unknown) => { |
| 102 | + if (Array.isArray(node)) return node.forEach(visit); |
| 103 | + if (!isNode(node)) return; |
| 104 | + if (node.type === "ReturnStatement") return found.push(...renderedBy(node.argument)); |
| 105 | + if (/Function/u.test(node.type)) return; |
| 106 | + for (const [key, value] of Object.entries(node)) if (key !== "parent") visit(value); |
| 107 | + }; |
| 108 | + visit(body.body); |
| 109 | + return found; |
| 110 | +} |
| 111 | + |
| 112 | +/** Whether a child can render nothing, letting an earlier sibling end up last. */ |
| 113 | +function mayRenderNothing(child: JsxChild) { |
| 114 | + if (child.type !== "JSXExpressionContainer") return false; |
| 115 | + const { expression } = child; |
| 116 | + if (expression.type === "LogicalExpression" || expression.type === "CallExpression") return true; |
| 117 | + return ( |
| 118 | + expression.type === "ConditionalExpression" && |
| 119 | + [expression.consequent, expression.alternate].some( |
| 120 | + (branch) => branch.type === "Literal" && branch.value === null, |
| 121 | + ) |
| 122 | + ); |
| 123 | +} |
| 124 | + |
| 125 | +/** Nodes that can end up as the last rendered child. */ |
| 126 | +function possiblyLast(children: ReadonlyArray<JsxChild>): ESTree.Node[] { |
| 127 | + const meaningful = children.filter( |
| 128 | + (child) => |
| 129 | + !(child.type === "JSXText" && child.value.trim() === "") && |
| 130 | + !(child.type === "JSXExpressionContainer" && child.expression.type === "JSXEmptyExpression"), |
| 131 | + ); |
| 132 | + const found: ESTree.Node[] = []; |
| 133 | + for (let index = meaningful.length - 1; index >= 0; index--) { |
| 134 | + const child = meaningful[index]!; |
| 135 | + found.push( |
| 136 | + ...(child.type === "JSXExpressionContainer" ? renderedBy(child.expression) : [child]), |
| 137 | + ); |
| 138 | + if (!mayRenderNothing(child)) break; |
| 139 | + } |
| 140 | + return found; |
| 141 | +} |
| 142 | + |
| 143 | +const isChildrenSlot = (node: ESTree.Node) => |
| 144 | + (node.type === "Identifier" && node.name === "children") || |
| 145 | + (node.type === "MemberExpression" && |
| 146 | + node.property.type === "Identifier" && |
| 147 | + node.property.name === "children"); |
| 148 | + |
| 149 | +/** Components declared in this file, by name, with the function each one renders from. */ |
| 150 | +function localComponents(program: ESTree.Program) { |
| 151 | + const components = new Map<string, ESTree.Node>(); |
| 152 | + walk(program, (node) => { |
| 153 | + if (node.type === "FunctionDeclaration" && node.id && /^[A-Z]/u.test(node.id.name)) { |
| 154 | + components.set(node.id.name, node); |
| 155 | + } |
| 156 | + if (node.type === "VariableDeclarator" && node.id.type === "Identifier") { |
| 157 | + // Unwrap memo(...) and forwardRef(...). |
| 158 | + let init: ESTree.Node | null = node.init; |
| 159 | + while (init?.type === "CallExpression" && init.arguments[0]) init = init.arguments[0]; |
| 160 | + if ( |
| 161 | + /^[A-Z]/u.test(node.id.name) && |
| 162 | + (init?.type === "ArrowFunctionExpression" || init?.type === "FunctionExpression") |
| 163 | + ) { |
| 164 | + components.set(node.id.name, init); |
| 165 | + } |
| 166 | + } |
| 167 | + }); |
| 168 | + return components; |
| 169 | +} |
| 170 | + |
| 171 | +export default defineRule({ |
| 172 | + meta: { |
| 173 | + type: "problem", |
| 174 | + docs: { |
| 175 | + description: |
| 176 | + "Disallow a popup root as the last child of a space-*/divide-* container; its focus guards shift the layout while it is open.", |
| 177 | + }, |
| 178 | + }, |
| 179 | + create(context) { |
| 180 | + return { |
| 181 | + Program(program) { |
| 182 | + const popups = new Set<string>(); |
| 183 | + for (const statement of program.body) { |
| 184 | + if (statement.type !== "ImportDeclaration") continue; |
| 185 | + if (!POPUP_MODULE.test(statement.source.value)) continue; |
| 186 | + for (const specifier of statement.specifiers) { |
| 187 | + if ( |
| 188 | + specifier.type === "ImportSpecifier" && |
| 189 | + specifier.imported.type === "Identifier" && |
| 190 | + POPUP_ROOTS.has(specifier.imported.name) |
| 191 | + ) { |
| 192 | + popups.add(specifier.local.name); |
| 193 | + } |
| 194 | + } |
| 195 | + } |
| 196 | + if (popups.size === 0) return; |
| 197 | + |
| 198 | + // Local components that render a popup root, or that place children last in a spaced container. |
| 199 | + const components = localComponents(program); |
| 200 | + const spacedSlots = new Map<string, string>(); |
| 201 | + for (const [name, fn] of components) { |
| 202 | + walk(fn, (node) => { |
| 203 | + if (node.type !== "JSXElement" || spacedSlots.has(name)) return; |
| 204 | + const utility = lastChildUtility(node); |
| 205 | + if (utility && possiblyLast(node.children).some(isChildrenSlot)) { |
| 206 | + spacedSlots.set(name, utility); |
| 207 | + } |
| 208 | + }); |
| 209 | + } |
| 210 | + let grew = true; |
| 211 | + while (grew) { |
| 212 | + grew = false; |
| 213 | + for (const [name, fn] of components) { |
| 214 | + if (popups.has(name) || !("body" in fn) || !isNode(fn.body)) continue; |
| 215 | + const roots = returnedBy(fn.body); |
| 216 | + if (roots.some((root) => popups.has(elementName(root) ?? ""))) { |
| 217 | + popups.add(name); |
| 218 | + grew = true; |
| 219 | + } |
| 220 | + } |
| 221 | + } |
| 222 | + |
| 223 | + walk(program, (node) => { |
| 224 | + if (node.type !== "JSXElement") return; |
| 225 | + const name = elementName(node); |
| 226 | + const utility = (name && spacedSlots.get(name)) ?? lastChildUtility(node); |
| 227 | + if (!utility) return; |
| 228 | + for (const child of possiblyLast(node.children)) { |
| 229 | + const popup = elementName(child); |
| 230 | + if (!popup || !popups.has(popup)) continue; |
| 231 | + context.report({ |
| 232 | + node: child, |
| 233 | + message: `<${popup}> can be the last child of a \`${utility}\` container. While its popup is open, Base UI inserts focus guards after the trigger, so \`${utility}\` starts spacing the trigger and the content below shifts. Use gap, or put the spacing on the siblings.`, |
| 234 | + }); |
| 235 | + } |
| 236 | + }); |
| 237 | + }, |
| 238 | + }; |
| 239 | + }, |
| 240 | +}); |
0 commit comments