Show computed styles with alt

webstudio-is · Oct 12, 2024 · 498a50a · 498a50a
1 parent 0cf9873
commit 498a50a
Showing 1 changed file with 26 additions and 16 deletions.
diff --git a/apps/builder/app/builder/features/style-panel/property-label.tsx b/apps/builder/app/builder/features/style-panel/property-label.tsx
@@ -1,3 +1,4 @@
+import { atom } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { useState, type ReactNode } from "react";
 import { AlertIcon, ResetIcon } from "@webstudio-is/icons";
@@ -35,23 +36,31 @@ import { useComputedStyles } from "./shared/model";
 import { StyleSourceBadge } from "./style-source";
 import { createBatchUpdate } from "./shared/use-style-data";
 
-const renderCss = (styles: ComputedStyleDecl[]) => {
+const $isAltPressed = atom(false);
+if (typeof window !== "undefined") {
+  addEventListener("keydown", (event) => {
+    if (event.key === "Alt") {
+      $isAltPressed.set(true);
+    }
+  });
+  addEventListener("keyup", (event) => {
+    if (event.key === "Alt") {
+      $isAltPressed.set(false);
+    }
+  });
+}
+
+const renderCss = (styles: ComputedStyleDecl[], isComputed: boolean) => {
   let css = "";
-  let usedCss = "";
-  let hasComputedValues = false;
-  for (const computedStyleDecl of styles) {
-    const property = hyphenateProperty(computedStyleDecl.property);
-    const cascaded = toValue(computedStyleDecl.cascadedValue);
-    const used = toValue(computedStyleDecl.usedValue);
-    css += `${property}: ${cascaded};\n`;
-    usedCss += `${property}: ${used};\n`;
-    if (cascaded !== used) {
-      hasComputedValues = true;
+  for (const styleDecl of styles) {
+    const property = hyphenateProperty(styleDecl.property);
+    let value;
+    if (isComputed && isFeatureEnabled("cssVars")) {
+      value = toValue(styleDecl.usedValue);
+    } else {
+      value = toValue(styleDecl.cascadedValue);
     }
-  }
-  if (hasComputedValues && isFeatureEnabled("cssVars")) {
-    css += `\n/* is computed into */\n`;
-    css += usedCss;
+    css += `${property}: ${value};\n`;
   }
   return css;
 };
@@ -74,6 +83,7 @@ export const PropertyInfo = ({
   const virtualInstances = useStore($virtualInstances);
   const styleSources = useStore($styleSources);
   const metas = useStore($registeredComponentMetas);
+  const isAltPressed = useStore($isAltPressed);
 
   let resettable = false;
   const breakpointSet = new Set<string>();
@@ -131,7 +141,7 @@ export const PropertyInfo = ({
         userSelect="text"
         css={{ whiteSpace: "break-spaces", cursor: "text" }}
       >
-        {code ?? renderCss(styles)}
+        {code ?? renderCss(styles, isAltPressed)}
       </Text>
       <Text>{description}</Text>
       {(styleSourceNameSet.size > 0 || instanceSet.size > 0) && (