scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-08-28 05:25:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 35

fix(ui): lint z-index utilities behind arbitrary Tailwind variants

Browse source 
The variant prefix pattern only understood word variants, so
data-[side=top]:z-50 or [&>*]:z-[5] slipped past the rule. Parse the
utility as everything after the last top-level colon (brackets and
parens nest) and also strip the important marker. Formats the two files
prettier flagged in CI
This commit is contained in:
ryan-crabbe-berri 2026-08-25 17:34:45 -07:00
parent 6385b6d801
commit 89d2d34453
3 changed files with 51 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
ui/litellm-dashboard/scripts/eslint-rules/no-ad-hoc-z-index.mjs
View file

@ -1,9 +1,30 @@
const AD_HOC_Z = /^(?:[\w-]+:)*-?z-(?:\d+|\[[^\]]*\]|\([^)]*\))$/;
const POPUP_Z = /^(?:[\w-]+:)*z-popup$/;
const AD_HOC_Z = /^-?z-(?:\d+|\[[^\]]*\]|\([^)]*\))$/;
const OPENERS = { "[": "]", "(": ")" };
const utilityOf = (token) => {
const closers = [];
const lastTopLevelColon = [...token].reduce((found, ch, i) => {
if (closers.length > 0 && ch === closers[closers.length - 1]) {
closers.pop();
return found;
}
if (ch in OPENERS) {
closers.push(OPENERS[ch]);
return found;
}
return ch === ":" && closers.length === 0 ? i : found;
}, -1);
return token
.slice(lastTopLevelColon + 1)
.replace(/^!/, "")
.replace(/!$/, "");
};
const classify = (token, allowPopupLayer) => {
if (AD_HOC_Z.test(token)) return "adHoc";
if (!allowPopupLayer && POPUP_Z.test(token)) return "popupReserved";
const utility = utilityOf(token);
if (AD_HOC_Z.test(utility)) return "adHoc";
if (!allowPopupLayer && utility === "z-popup") return "popupReserved";
return null;
};

5
ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
View file

@ -246,7 +246,10 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
)}
{isModalOpen && selectedKey && keyData && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-overlay" onClick={handleOutsideClick}>
<div
className="fixed inset-0 bg-black/50 flex items-center justify-center z-overlay"
onClick={handleOutsideClick}
>
<div className="bg-card rounded-lg shadow-xl relative w-11/12 max-w-6xl max-h-[90vh] overflow-y-auto min-h-[750px]">
{/* Close button */}
<button

24
ui/litellm-dashboard/tests/eslint-rules/no-ad-hoc-z-index.test.ts
View file

@ -21,10 +21,14 @@ ruleTester.run("no-ad-hoc-z-index", rule as never, {
'const c = "team-xyz-789";',
'const c = "bg-gray-50 text-gray-900";',
"const c = `flex ${open ? 'z-overlay' : ''}`;",
"const el = <div className=\"absolute z-floating\" />;",
'const el = <div className="absolute z-floating" />;',
"const style = { position: 'fixed', top: 0 };",
{ code: 'const c = "isolate z-popup";', options: [{ allowPopupLayer: true }] },
{ code: 'const c = "data-[side=top]:z-popup";', options: [{ allowPopupLayer: true }] },
{ code: 'const c = "[&:hover]:z-popup";', options: [{ allowPopupLayer: true }] },
'const c = "data-[side=top]:z-floating";',
'const c = "[&>[data-z-50]]:z-overlay";',
'const c = "z-overlay!";',
],
invalid: [
{ code: 'const c = "fixed inset-0 z-50";', errors: [{ messageId: "adHoc", data: { token: "z-50" } }] },
@ -36,12 +40,28 @@ ruleTester.run("no-ad-hoc-z-index", rule as never, {
{ code: 'const c = "z-(--my-z)";', errors: [{ messageId: "adHoc", data: { token: "z-(--my-z)" } }] },
{ code: 'const c = "md:z-50";', errors: [{ messageId: "adHoc", data: { token: "md:z-50" } }] },
{ code: 'const c = "hover:md:z-[2]";', errors: [{ messageId: "adHoc", data: { token: "hover:md:z-[2]" } }] },
{
code: 'const c = "data-[side=top]:z-50";',
errors: [{ messageId: "adHoc", data: { token: "data-[side=top]:z-50" } }],
},
{ code: 'const c = "[&>*]:z-[5]";', errors: [{ messageId: "adHoc", data: { token: "[&>*]:z-[5]" } }] },
{ code: 'const c = "[&:hover]:z-10";', errors: [{ messageId: "adHoc", data: { token: "[&:hover]:z-10" } }] },
{
code: 'const c = "group-data-[state=open]:z-(--x)";',
errors: [{ messageId: "adHoc", data: { token: "group-data-[state=open]:z-(--x)" } }],
},
{ code: 'const c = "!z-50";', errors: [{ messageId: "adHoc", data: { token: "!z-50" } }] },
{ code: 'const c = "md:z-50!";', errors: [{ messageId: "adHoc", data: { token: "md:z-50!" } }] },
{
code: 'const c = "data-[side=top]:z-popup";',
errors: [{ messageId: "popupReserved", data: { token: "data-[side=top]:z-popup" } }],
},
{
code: "const c = `max-h-full ${extra} z-[1100]`;",
errors: [{ messageId: "adHoc", data: { token: "z-[1100]" } }],
},
{
code: "const el = <div className=\"fixed inset-0 z-50\" />;",
code: 'const el = <div className="fixed inset-0 z-50" />;',
errors: [{ messageId: "adHoc", data: { token: "z-50" } }],
},
{