fix: Fix preview on css variables defined on the current element (#4705)

## Description

probably somehow related to #4448



## Steps for reproduction

define --color variable at :root and on current element.

See background or color preview on the current element. 


## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

apps/builder/app/canvas/shared/styles.ts

@@ -32,6 +32,7 @@ import {
   $instances,
   $props,
   $registeredComponentMetas,
+  $selectedInstanceSelector,
   $selectedStyleState,
   $styleSourceSelections,
   $styles,
@@ -43,6 +44,7 @@ import { canvasApi } from "~/shared/canvas-api";
 import { $selectedInstance, $selectedPage } from "~/shared/awareness";
 import { findAllEditableInstanceSelector } from "~/shared/instance-utils";
 import type { InstanceSelector } from "~/shared/tree-utils";
+import { getVisibleElementsByInstanceSelector } from "~/shared/dom-utils";
 
 const userSheet = createRegularStyleSheet({ name: "user-styles" });
 const stateSheet = createRegularStyleSheet({ name: "state-styles" });
@@ -580,18 +582,26 @@ const subscribeStateStyles = () => {
 
 const subscribeEphemeralStyle = () => {
   // track custom properties added on previous ephemeral update
-  const appliedEphemeralDeclarations = new Map<string, StyleDecl>();
+  const appliedEphemeralDeclarations = new Map<
+    string,
+    [StyleDecl, HTMLElement[]]
+  >();
 
   return $ephemeralStyles.subscribe((ephemeralStyles) => {
     const instance = $selectedInstance.get();
-    if (instance === undefined) {
+    const instanceSelector = $selectedInstanceSelector.get();
+
+    if (instance === undefined || instanceSelector === undefined) {
       return;
     }
 
     // reset ephemeral styles
     if (ephemeralStyles.length === 0) {
       canvasApi.resetInert();
-      for (const styleDecl of appliedEphemeralDeclarations.values()) {
+      for (const [
+        styleDecl,
+        elements,
+      ] of appliedEphemeralDeclarations.values()) {
         // prematurely apply last known ephemeral update to user stylesheet
         // to avoid lag because of delay between deleting ephemeral style
         // and sending style patch (and rendering)
@@ -606,6 +616,10 @@ const subscribeEphemeralStyle = () => {
         document.documentElement.style.removeProperty(
           getEphemeralProperty(styleDecl)
         );
+
+        for (const element of elements) {
+          element.style.removeProperty(getEphemeralProperty(styleDecl));
+        }
       }
       userSheet.setTransformer($transformValue.get());
       userSheet.render();
@@ -624,6 +638,17 @@ const subscribeEphemeralStyle = () => {
           getEphemeralProperty(styleDecl),
           toValue(styleDecl.value, $transformValue.get())
         );
+
+        // We need to apply the custom property to the selected element as well.
+        // Otherwise, variables defined on it will not be visible on documentElement.
+        const elements = getVisibleElementsByInstanceSelector(instanceSelector);
+        for (const element of elements) {
+          element.style.setProperty(
+            getEphemeralProperty(styleDecl),
+            toValue(styleDecl.value, $transformValue.get())
+          );
+        }
+
         // render temporary rule for instance with var()
         // rendered with "all" breakpoint and without state
         // to reflect changes in canvas without user interaction
@@ -655,7 +680,7 @@ const subscribeEphemeralStyle = () => {
             });
           }
         }
-        appliedEphemeralDeclarations.set(styleDeclKey, styleDecl);
+        appliedEphemeralDeclarations.set(styleDeclKey, [styleDecl, elements]);
       }
       // avoid stylesheet rerendering on every ephemeral update
       if (ephemetalSheetUpdated) {