build: Release 03-12-2025

.github/actions/vercel/action.yaml

@@ -76,7 +76,11 @@ runs:
         export GITHUB_SHA=${{ inputs.sha }}
         export GITHUB_REF_NAME=${{ inputs.ref-name }}
 
-        pnpx vercel build
+        if [ "${{ inputs.environment }}" = "production" ]; then
+          pnpx vercel build --prod
+        else
+          pnpx vercel build
+        fi
       shell: bash
 
     - name: Patch
@@ -103,17 +107,27 @@ runs:
     - name: Deploy
       id: deploy
       run: |
-        pnpx vercel deploy \
-        --prebuilt \
-        --token ${{ inputs.vercel-token }} \
-        2> >(tee info.txt >&2) | tee domain.txt
+        if [ "${{ inputs.environment }}" = "production" ]; then
+          pnpx vercel deploy \
+          --prebuilt \
+          --prod \
+          --skip-domain \
+          --token ${{ inputs.vercel-token }} \
+          2> >(tee info.txt >&2) | tee domain.txt
+        else
+          pnpx vercel deploy \
+          --prebuilt \
+          --token ${{ inputs.vercel-token }} \
+          2> >(tee info.txt >&2) | tee domain.txt
+        fi
 
         echo "domain=$(cat ./domain.txt)" >> $GITHUB_OUTPUT
         echo "inspect-url=$(cat info.txt | grep 'Inspect:' | awk '{print $2}')" >> $GITHUB_OUTPUT
 
       shell: bash
 
     - name: Set Alias
+      if: ${{ inputs.environment != 'production' }}
       id: alias
       run: |
         ALIAS="${{ steps.branch.outputs.value }}"

.github/workflows/vercel-deploy-staging.yml

@@ -62,6 +62,18 @@ jobs:
           sha: ${{ github.sha }}
           environment: ${{ matrix.environment }}
 
+      - uses: ./.github/actions/vercel
+        if: matrix.environment == 'staging'
+        id: vercel-prod
+        name: Deploy to Vercel
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+          ref-name: ${{ github.ref_name }}
+          sha: ${{ github.sha }}
+          environment: "production"
+
       - name: Debug Vercel Outputs
         run: |
           echo "domain=${{ steps.vercel.outputs.domain }}"
@@ -74,6 +86,13 @@ jobs:
           description: "[${{ matrix.environment }}] Vercel logs"
           url: "${{ steps.vercel.outputs.inspect-url }}"
 
+      - uses: ./.github/actions/add-status
+        if: matrix.environment == 'staging'
+        with:
+          title: "⏰ [${{ matrix.environment }}] Vercel Production Inspection"
+          description: "[${{ matrix.environment }}] Vercel production logs"
+          url: "${{ steps.vercel-prod.outputs.inspect-url }}"
+
       - uses: ./.github/actions/add-status
         with:
           title: "⭐ [${{ matrix.environment }}] Apps Webstudio URL"

apps/builder/app/builder/shared/css-variable-utils.tsx

@@ -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}
@@ -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>
   );