Skip to content

fix: performance regression #5510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TrySound merged 1 commit into from
Dec 13, 2025
+64 −55
Merged

fix: performance regression #5510

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 64 additions & 55 deletions apps/builder/app/builder/shared/css-variable-utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -598,17 +598,75 @@ export const RenameCssVariableDialog = ({
);
};

export const DeleteUnusedCssVariablesDialog = () => {
const open = useStore($isDeleteUnusedCssVariablesDialogOpen);
const DeleteUnusedCssVariablesDialogContent = ({
onClose,
}: {
onClose: () => void;
}) => {
const unusedVariables = useStore($unusedCssVariables);
// Convert Set to Array for display
const unusedVariablesArray = Array.from(unusedVariables);

return (
<Flex gap="3" direction="column" css={{ padding: theme.panel.padding }}>
{unusedVariablesArray.length === 0 ? (
<Text>There are no unused CSS variables to delete.</Text>
) : (
<>
<Text>
Delete {unusedVariablesArray.length} unused CSS{" "}
{unusedVariablesArray.length === 1 ? "variable" : "variables"} from
the project?
</Text>
<Text
variant="mono"
css={{
maxHeight: 200,
overflowY: "auto",
backgroundColor: theme.colors.backgroundPanel,
borderRadius: theme.borderRadius[4],
wordBreak: "break-word",
}}
>
{unusedVariablesArray.join(", ")}
</Text>
</>
)}
<Flex direction="rowReverse" gap="2">
{unusedVariablesArray.length > 0 && (
<Button
color="destructive"
onClick={() => {
const deletedCount = deleteUnusedCssVariables();
onClose();
if (deletedCount === 0) {
toast.info("No unused CSS variables to delete");
} else {
toast.success(
`Deleted ${deletedCount} unused CSS ${deletedCount === 1 ? "variable" : "variables"}`
);
}
}}
>
Delete
</Button>
)}
<DialogClose>
<Button color="ghost">
{unusedVariablesArray.length > 0 ? "Cancel" : "Close"}
</Button>
</DialogClose>
</Flex>
</Flex>
);
};

export const DeleteUnusedCssVariablesDialog = () => {
const open = useStore($isDeleteUnusedCssVariablesDialogOpen);
const handleClose = () => {
$isDeleteUnusedCssVariablesDialogOpen.set(false);
};

// Convert Set to Array for display
const unusedVariablesArray = Array.from(unusedVariables);

return (
<Dialog
open={open}
Expand All @@ -625,56 +683,7 @@ export const DeleteUnusedCssVariablesDialog = () => {
}}
>
<DialogTitle>Delete unused CSS variables</DialogTitle>
<Flex gap="3" direction="column" css={{ padding: theme.panel.padding }}>
{unusedVariablesArray.length === 0 ? (
<Text>There are no unused CSS variables to delete.</Text>
) : (
<>
<Text>
Delete {unusedVariablesArray.length} unused CSS{" "}
{unusedVariablesArray.length === 1 ? "variable" : "variables"}{" "}
from the project?
</Text>
<Text
variant="mono"
css={{
maxHeight: 200,
overflowY: "auto",
backgroundColor: theme.colors.backgroundPanel,
borderRadius: theme.borderRadius[4],
wordBreak: "break-word",
}}
>
{unusedVariablesArray.join(", ")}
</Text>
</>
)}
<Flex direction="rowReverse" gap="2">
{unusedVariablesArray.length > 0 && (
<Button
color="destructive"
onClick={() => {
const deletedCount = deleteUnusedCssVariables();
handleClose();
if (deletedCount === 0) {
toast.info("No unused CSS variables to delete");
} else {
toast.success(
`Deleted ${deletedCount} unused CSS ${deletedCount === 1 ? "variable" : "variables"}`
);
}
}}
>
Delete
</Button>
)}
<DialogClose>
<Button color="ghost">
{unusedVariablesArray.length > 0 ? "Cancel" : "Close"}
</Button>
</DialogClose>
</Flex>
</Flex>
<DeleteUnusedCssVariablesDialogContent onClose={handleClose} />
</DialogContent>
</Dialog>
);
Expand Down