Cover more cases

Author: TrySound

apps/builder/app/builder/features/style-panel/shared/model.tsx

@@ -6,6 +6,7 @@ import { propertiesData } from "@webstudio-is/css-data";
 import {
   compareMedia,
   hyphenateProperty,
+  matchMedia,
   toVarFallback,
   type CssProperty,
   type StyleValue,
@@ -41,6 +42,7 @@ import {
   type InstancePath,
 } from "~/shared/awareness";
 import type { InstanceSelector } from "~/shared/tree-utils";
+import { $canvasWidth } from "~/builder/shared/nano-states";
 
 const $presetStyles = computed($registeredComponentMetas, (metas) => {
   const presetStyles = new Map<string, StyleValue>();
@@ -111,16 +113,28 @@ const $instanceComponents = computed(
 );
 
 export const $matchingBreakpoints = computed(
-  [$breakpoints, $selectedBreakpoint],
-  (breakpoints, selectedBreakpoint) => {
-    const sortedBreakpoints = Array.from(breakpoints.values()).sort(
-      compareMedia
-    );
+  [$breakpoints, $selectedBreakpoint, $canvasWidth],
+  (breakpoints, selectedBreakpoint, canvasWidth) => {
+    // zero is not correct, need to use current width for base breakpoint
+    // add always add base
+    const selectedWidth =
+      selectedBreakpoint?.minWidth ??
+      selectedBreakpoint?.maxWidth ??
+      canvasWidth ??
+      0;
+    const sortedBreakpoints = Array.from(breakpoints.values())
+      .sort(compareMedia)
+      .sort((left, right) => {
+        // put selected breakpoint always in the end
+        // to make style from matching breakpoints remote
+        const leftScore = left.id === selectedBreakpoint?.id ? 1 : 0;
+        const rightScore = right.id === selectedBreakpoint?.id ? 1 : 0;
+        return leftScore - rightScore;
+      });
     const matchingBreakpoints: Breakpoint["id"][] = [];
     for (const breakpoint of sortedBreakpoints) {
-      matchingBreakpoints.push(breakpoint.id);
-      if (breakpoint.id === selectedBreakpoint?.id) {
-        break;
+      if (matchMedia(breakpoint, selectedWidth)) {
+        matchingBreakpoints.push(breakpoint.id);
       }
     }
     return matchingBreakpoints;

apps/builder/app/shared/style-object-model.test.tsx

@@ -1638,12 +1638,13 @@ describe("compute matching breakpoints", () => {
       ])
     );
     $selectedBreakpointId.set("desktop");
-    const computedStyleDecl = getComputedStyleDecl({
-      model: _$model.get(),
-      instanceSelector: ["body"],
-      property: "color",
-    });
-    expect(computedStyleDecl.computedValue).toEqual({
+    expect(
+      getComputedStyleDecl({
+        model: _$model.get(),
+        instanceSelector: ["body"],
+        property: "color",
+      }).computedValue
+    ).toEqual({
       type: "keyword",
       value: "red",
     });
@@ -1670,18 +1671,19 @@ describe("compute matching breakpoints", () => {
       ])
     );
     $selectedBreakpointId.set("desktop");
-    const computedStyleDecl = getComputedStyleDecl({
-      model: _$model.get(),
-      instanceSelector: ["body"],
-      property: "color",
-    });
-    expect(computedStyleDecl.computedValue).toEqual({
+    expect(
+      getComputedStyleDecl({
+        model: _$model.get(),
+        instanceSelector: ["body"],
+        property: "color",
+      }).computedValue
+    ).toEqual({
       type: "keyword",
       value: "black",
     });
   });
 
-  test("mixed min-width and max-width breakpoints", () => {
+  test("mixed min-width and max-width with selected min-width", () => {
     const model = createModel({
       css: `
         @media mobile {
@@ -1702,14 +1704,66 @@ describe("compute matching breakpoints", () => {
       ])
     );
     $selectedBreakpointId.set("desktop");
-    const computedStyleDecl = getComputedStyleDecl({
-      model: _$model.get(),
-      instanceSelector: ["body"],
-      property: "color",
+    expect(
+      getComputedStyleDecl({
+        model: _$model.get(),
+        instanceSelector: ["body"],
+        property: "color",
+      }).computedValue
+    ).toEqual({
+      type: "keyword",
+      value: "black",
     });
-    expect(computedStyleDecl.computedValue).toEqual({
+    $selectedBreakpointId.set("base");
+    expect(
+      getComputedStyleDecl({
+        model: _$model.get(),
+        instanceSelector: ["body"],
+        property: "color",
+      }).source
+    ).toEqual(
+      expect.objectContaining({ name: "remote", breakpointId: "mobile" })
+    );
+  });
+
+  test("mixed min-width and max-width with selected max-width", () => {
+    const model = createModel({
+      css: `
+        @media desktop {
+          bodyLocal {
+            color: red;
+          }
+        }
+      `,
+      jsx: <$.Body ws:id="body" ws:tag="body" class="bodyLocal"></$.Body>,
+    });
+    $styles.set(model.styles);
+    $styleSourceSelections.set(model.styleSourceSelections);
+    $breakpoints.set(
+      new Map([
+        ["desktop", { id: "desktop", label: "", minWidth: 991 }],
+        ["base", { id: "base", label: "" }],
+        ["mobile", { id: "mobile", label: "", maxWidth: 479 }],
+      ])
+    );
+    $selectedBreakpointId.set("mobile");
+    expect(
+      getComputedStyleDecl({
+        model: _$model.get(),
+        instanceSelector: ["body"],
+        property: "color",
+      }).computedValue
+    ).toEqual({
       type: "keyword",
       value: "black",
     });
+    $selectedBreakpointId.set("base");
+    expect(
+      getComputedStyleDecl({
+        model: _$model.get(),
+        instanceSelector: ["body"],
+        property: "color",
+      }).source
+    ).toEqual(expect.objectContaining({ name: "default" }));
   });
 });