@webstudio-is/css-engine 0.52.0 → 0.54.0

package/lib/cjs/core/compare-media.js

@@ -22,6 +22,9 @@ __export(compare_media_exports, {
 });
 module.exports = __toCommonJS(compare_media_exports);
 const compareMedia = (optionA, optionB) => {
+  if (optionA?.minWidth === void 0 && optionA?.maxWidth !== void 0 || optionB?.minWidth === void 0 && optionB?.maxWidth !== void 0) {
+    return 1;
+  }
   if (optionA?.minWidth !== void 0 && optionB?.minWidth !== void 0) {
     return optionA.minWidth - optionB.minWidth;
   }

package/lib/cjs/core/css-engine.js

@@ -69,10 +69,10 @@ class CssEngine {
     }
     return mediaRule;
   }
-  addStyleRule(selectorText, rule) {
+  addStyleRule(selectorText, rule, transformValue) {
     const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
     __privateSet(this, _isDirty, true);
-    const styleRule = new import_rules.StyleRule(selectorText, rule.style);
+    const styleRule = new import_rules.StyleRule(selectorText, rule.style, transformValue);
     styleRule.onChange = __privateGet(this, _onChangeRule);
     if (mediaRule === void 0) {
       throw new Error("No media rule found");

package/lib/cjs/core/find-applicable-media.js

@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var find_applicable_media_exports = {};
+__export(find_applicable_media_exports, {
+  findApplicableMedia: () => findApplicableMedia
+});
+module.exports = __toCommonJS(find_applicable_media_exports);
+var import_compare_media = require("./compare-media");
+var import_match_media = require("./match-media");
+const findApplicableMedia = (media, width) => {
+  const sortedMedia = media.sort(import_compare_media.compareMedia).reverse();
+  for (const options of sortedMedia) {
+    if ((0, import_match_media.matchMedia)(options, width)) {
+      return options;
+    }
+  }
+};

package/lib/cjs/core/index.js

@@ -28,3 +28,4 @@ __reExport(core_exports, require("./to-value"), module.exports);
 __reExport(core_exports, require("./match-media"), module.exports);
 __reExport(core_exports, require("./equal-media"), module.exports);
 __reExport(core_exports, require("./compare-media"), module.exports);
+__reExport(core_exports, require("./find-applicable-media"), module.exports);

package/lib/cjs/core/rules.js

@@ -44,12 +44,14 @@ __export(rules_exports, {
 module.exports = __toCommonJS(rules_exports);
 var import_to_value = require("./to-value");
 var import_to_property = require("./to-property");
-var _styleMap, _isDirty, _string, _onChange, _mediaType;
+var _styleMap, _isDirty, _string, _transformValue, _onChange, _mediaType;
 class StylePropertyMap {
-  constructor() {
+  constructor(transformValue) {
     __privateAdd(this, _styleMap, /* @__PURE__ */ new Map());
     __privateAdd(this, _isDirty, false);
     __privateAdd(this, _string, "");
+    __privateAdd(this, _transformValue, void 0);
+    __privateSet(this, _transformValue, transformValue);
   }
   set(property, value) {
     __privateGet(this, _styleMap).set(property, value);
@@ -81,7 +83,9 @@ class StylePropertyMap {
       if (value === void 0) {
         continue;
       }
-      block.push(`${(0, import_to_property.toProperty)(property)}: ${(0, import_to_value.toValue)(value)}`);
+      block.push(
+        `${(0, import_to_property.toProperty)(property)}: ${(0, import_to_value.toValue)(value, __privateGet(this, _transformValue))}`
+      );
     }
     __privateSet(this, _string, block.join("; "));
     __privateSet(this, _isDirty, false);
@@ -91,12 +95,13 @@ class StylePropertyMap {
 _styleMap = new WeakMap();
 _isDirty = new WeakMap();
 _string = new WeakMap();
+_transformValue = new WeakMap();
 class StyleRule {
-  constructor(selectorText, style) {
+  constructor(selectorText, style, transformValue) {
     __privateAdd(this, _onChange, () => {
       this.onChange?.();
     });
-    this.styleMap = new StylePropertyMap();
+    this.styleMap = new StylePropertyMap(transformValue);
     this.selectorText = selectorText;
     let property;
     for (property in style) {

package/lib/cjs/core/to-value.js

@@ -22,34 +22,41 @@ __export(to_value_exports, {
 });
 module.exports = __toCommonJS(to_value_exports);
 var import_fonts = require("@webstudio-is/fonts");
-const defaultOptions = {
-  withFallback: true
-};
 const assertUnreachable = (_arg, errorMessage) => {
   throw new Error(errorMessage);
 };
-const toValue = (value, options = defaultOptions) => {
-  if (value === void 0) {
+const fallbackTransform = (styleValue) => {
+  if (styleValue.type === "fontFamily") {
+    const firstFontFamily = styleValue.value[0];
+    const fallbacks = import_fonts.SYSTEM_FONTS.get(firstFontFamily);
+    const fontFamily = [...styleValue.value];
+    if (Array.isArray(fallbacks)) {
+      fontFamily.push(...fallbacks);
+    } else {
+      fontFamily.push(import_fonts.DEFAULT_FONT_FALLBACK);
+    }
+    return {
+      type: "fontFamily",
+      value: fontFamily
+    };
+  }
+};
+const toValue = (styleValue, transformValue) => {
+  if (styleValue === void 0) {
     return "";
   }
+  const transformedValue = transformValue?.(styleValue) ?? fallbackTransform(styleValue);
+  const value = transformedValue ?? styleValue;
   if (value.type === "unit") {
     return value.value + (value.unit === "number" ? "" : value.unit);
   }
   if (value.type === "fontFamily") {
-    if (options.withFallback === false) {
-      return value.value[0];
-    }
-    const family = value.value[0];
-    const fallbacks = import_fonts.SYSTEM_FONTS.get(family);
-    if (Array.isArray(fallbacks)) {
-      return [...value.value, ...fallbacks].join(", ");
-    }
-    return [...value.value, import_fonts.DEFAULT_FONT_FALLBACK].join(", ");
+    return value.value.join(", ");
   }
   if (value.type === "var") {
     const fallbacks = [];
     for (const fallback of value.fallbacks) {
-      fallbacks.push(toValue(fallback, options));
+      fallbacks.push(toValue(fallback, transformValue));
     }
     const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
     return `var(--${value.value}${fallbacksString})`;
@@ -67,10 +74,10 @@ const toValue = (value, options = defaultOptions) => {
     return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
   }
   if (value.type === "image") {
-    if (value.hidden) {
+    if (value.hidden || value.value.type !== "url") {
       return "none";
     }
-    return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
+    return `url(${value.value.url})`;
   }
   if (value.type === "unparsed") {
     if (value.hidden) {
@@ -79,10 +86,10 @@ const toValue = (value, options = defaultOptions) => {
     return value.value;
   }
   if (value.type === "layers") {
-    return value.value.map((value2) => toValue(value2, options)).join(",");
+    return value.value.map((value2) => toValue(value2, transformValue)).join(",");
   }
   if (value.type === "tuple") {
-    return value.value.map((value2) => toValue(value2, options)).join(" ");
+    return value.value.map((value2) => toValue(value2, transformValue)).join(" ");
   }
   assertUnreachable(value, `Unknown value type`);
   throw new Error("Unknown value type");

package/lib/core/compare-media.js

@@ -1,4 +1,7 @@
 const compareMedia = (optionA, optionB) => {
+  if (optionA?.minWidth === void 0 && optionA?.maxWidth !== void 0 || optionB?.minWidth === void 0 && optionB?.maxWidth !== void 0) {
+    return 1;
+  }
   if (optionA?.minWidth !== void 0 && optionB?.minWidth !== void 0) {
     return optionA.minWidth - optionB.minWidth;
   }

package/lib/core/css-engine.js

@@ -51,10 +51,10 @@ class CssEngine {
     }
     return mediaRule;
   }
-  addStyleRule(selectorText, rule) {
+  addStyleRule(selectorText, rule, transformValue) {
     const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
     __privateSet(this, _isDirty, true);
-    const styleRule = new StyleRule(selectorText, rule.style);
+    const styleRule = new StyleRule(selectorText, rule.style, transformValue);
     styleRule.onChange = __privateGet(this, _onChangeRule);
     if (mediaRule === void 0) {
       throw new Error("No media rule found");

package/lib/core/find-applicable-media.js

@@ -0,0 +1,13 @@
+import { compareMedia } from "./compare-media";
+import { matchMedia } from "./match-media";
+const findApplicableMedia = (media, width) => {
+  const sortedMedia = media.sort(compareMedia).reverse();
+  for (const options of sortedMedia) {
+    if (matchMedia(options, width)) {
+      return options;
+    }
+  }
+};
+export {
+  findApplicableMedia
+};

package/lib/core/index.js

@@ -4,6 +4,7 @@ export * from "./to-value";
 export * from "./match-media";
 export * from "./equal-media";
 export * from "./compare-media";
+export * from "./find-applicable-media";
 export {
   CssEngine
 };

package/lib/core/rules.js

@@ -16,14 +16,16 @@ var __privateSet = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var _styleMap, _isDirty, _string, _onChange, _mediaType;
+var _styleMap, _isDirty, _string, _transformValue, _onChange, _mediaType;
 import { toValue } from "./to-value";
 import { toProperty } from "./to-property";
 class StylePropertyMap {
-  constructor() {
+  constructor(transformValue) {
     __privateAdd(this, _styleMap, /* @__PURE__ */ new Map());
     __privateAdd(this, _isDirty, false);
     __privateAdd(this, _string, "");
+    __privateAdd(this, _transformValue, void 0);
+    __privateSet(this, _transformValue, transformValue);
   }
   set(property, value) {
     __privateGet(this, _styleMap).set(property, value);
@@ -55,7 +57,9 @@ class StylePropertyMap {
       if (value === void 0) {
         continue;
       }
-      block.push(`${toProperty(property)}: ${toValue(value)}`);
+      block.push(
+        `${toProperty(property)}: ${toValue(value, __privateGet(this, _transformValue))}`
+      );
     }
     __privateSet(this, _string, block.join("; "));
     __privateSet(this, _isDirty, false);
@@ -65,12 +69,13 @@ class StylePropertyMap {
 _styleMap = new WeakMap();
 _isDirty = new WeakMap();
 _string = new WeakMap();
+_transformValue = new WeakMap();
 class StyleRule {
-  constructor(selectorText, style) {
+  constructor(selectorText, style, transformValue) {
     __privateAdd(this, _onChange, () => {
       this.onChange?.();
     });
-    this.styleMap = new StylePropertyMap();
+    this.styleMap = new StylePropertyMap(transformValue);
     this.selectorText = selectorText;
     let property;
     for (property in style) {

package/lib/core/to-value.js

@@ -1,32 +1,39 @@
 import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
-const defaultOptions = {
-  withFallback: true
-};
 const assertUnreachable = (_arg, errorMessage) => {
   throw new Error(errorMessage);
 };
-const toValue = (value, options = defaultOptions) => {
-  if (value === void 0) {
+const fallbackTransform = (styleValue) => {
+  if (styleValue.type === "fontFamily") {
+    const firstFontFamily = styleValue.value[0];
+    const fallbacks = SYSTEM_FONTS.get(firstFontFamily);
+    const fontFamily = [...styleValue.value];
+    if (Array.isArray(fallbacks)) {
+      fontFamily.push(...fallbacks);
+    } else {
+      fontFamily.push(DEFAULT_FONT_FALLBACK);
+    }
+    return {
+      type: "fontFamily",
+      value: fontFamily
+    };
+  }
+};
+const toValue = (styleValue, transformValue) => {
+  if (styleValue === void 0) {
     return "";
   }
+  const transformedValue = transformValue?.(styleValue) ?? fallbackTransform(styleValue);
+  const value = transformedValue ?? styleValue;
   if (value.type === "unit") {
     return value.value + (value.unit === "number" ? "" : value.unit);
   }
   if (value.type === "fontFamily") {
-    if (options.withFallback === false) {
-      return value.value[0];
-    }
-    const family = value.value[0];
-    const fallbacks = SYSTEM_FONTS.get(family);
-    if (Array.isArray(fallbacks)) {
-      return [...value.value, ...fallbacks].join(", ");
-    }
-    return [...value.value, DEFAULT_FONT_FALLBACK].join(", ");
+    return value.value.join(", ");
   }
   if (value.type === "var") {
     const fallbacks = [];
     for (const fallback of value.fallbacks) {
-      fallbacks.push(toValue(fallback, options));
+      fallbacks.push(toValue(fallback, transformValue));
     }
     const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
     return `var(--${value.value}${fallbacksString})`;
@@ -44,10 +51,10 @@ const toValue = (value, options = defaultOptions) => {
     return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
   }
   if (value.type === "image") {
-    if (value.hidden) {
+    if (value.hidden || value.value.type !== "url") {
       return "none";
     }
-    return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
+    return `url(${value.value.url})`;
   }
   if (value.type === "unparsed") {
     if (value.hidden) {
@@ -56,10 +63,10 @@ const toValue = (value, options = defaultOptions) => {
     return value.value;
   }
   if (value.type === "layers") {
-    return value.value.map((value2) => toValue(value2, options)).join(",");
+    return value.value.map((value2) => toValue(value2, transformValue)).join(",");
   }
   if (value.type === "tuple") {
-    return value.value.map((value2) => toValue(value2, options)).join(" ");
+    return value.value.map((value2) => toValue(value2, transformValue)).join(" ");
   }
   assertUnreachable(value, `Unknown value type`);
   throw new Error("Unknown value type");

package/lib/types/core/css-engine.d.ts

@@ -1,5 +1,6 @@
 import type { CssRule } from "@webstudio-is/css-data";
 import { MediaRule, PlaintextRule, StyleRule, type FontFaceOptions, type MediaRuleOptions } from "./rules";
+import type { TransformValue } from "./to-value";
 export type CssEngineOptions = {
     name?: string;
 };
@@ -7,7 +8,7 @@ export declare class CssEngine {
     #private;
     constructor({ name }: CssEngineOptions);
     addMediaRule(id: string, options?: MediaRuleOptions): MediaRule;
-    addStyleRule(selectorText: string, rule: CssRule): StyleRule;
+    addStyleRule(selectorText: string, rule: CssRule, transformValue?: TransformValue): StyleRule;
     addPlaintextRule(cssText: string): PlaintextRule | Map<string, PlaintextRule>;
     addFontFaceRule(options: FontFaceOptions): number;
     clear(): void;

package/lib/types/core/find-applicable-media.d.ts

@@ -0,0 +1,2 @@
+import type { MediaRuleOptions } from "./rules";
+export declare const findApplicableMedia: <Media extends MediaRuleOptions>(media: Media[], width: number) => Media | undefined;

package/lib/types/core/find-applicable-media.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/core/index.d.ts

@@ -5,3 +5,4 @@ export * from "./to-value";
 export * from "./match-media";
 export * from "./equal-media";
 export * from "./compare-media";
+export * from "./find-applicable-media";

package/lib/types/core/rules.d.ts

@@ -1,10 +1,12 @@
 import type { Style, StyleProperty, StyleValue } from "@webstudio-is/css-data";
+import { type TransformValue } from "./to-value";
 declare class StylePropertyMap {
     #private;
     onChange?: () => void;
+    constructor(transformValue?: TransformValue);
     set(property: StyleProperty, value?: StyleValue): void;
     has(property: StyleProperty): boolean;
-    keys(): IterableIterator<"color" | "left" | "right" | "top" | "bottom" | "contain" | "clip" | "content" | "filter" | "float" | "fontFamily" | "width" | "height" | `--${string}` | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex">;
+    keys(): IterableIterator<"color" | "left" | "right" | "top" | "bottom" | "contain" | "clip" | "content" | `--${string}` | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex">;
     delete(property: StyleProperty): void;
     clear(): void;
     toString(): string;
@@ -14,7 +16,7 @@ export declare class StyleRule {
     styleMap: StylePropertyMap;
     selectorText: string;
     onChange?: () => void;
-    constructor(selectorText: string, style: Style);
+    constructor(selectorText: string, style: Style, transformValue?: TransformValue);
     get cssText(): string;
 }
 export type MediaRuleOptions = {

package/lib/types/core/to-value.d.ts

@@ -1,6 +1,3 @@
 import type { StyleValue } from "@webstudio-is/css-data";
-type ToCssOptions = {
-    withFallback: boolean;
-};
-export declare const toValue: (value?: StyleValue, options?: ToCssOptions) => string;
-export {};
+export type TransformValue = (styleValue: StyleValue) => undefined | StyleValue;
+export declare const toValue: (styleValue: undefined | StyleValue, transformValue?: TransformValue) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.52.0",
+  "version": "0.54.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -9,7 +9,7 @@
     "hyphenate-style-name": "^1.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "@webstudio-is/fonts": "^0.52.0"
+    "@webstudio-is/fonts": "^0.54.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
@@ -19,11 +19,12 @@
     "@types/react-dom": "^17.0.9",
     "jest": "^29.3.1",
     "typescript": "5.0.3",
-    "@webstudio-is/css-data": "^0.52.0",
+    "@webstudio-is/asset-uploader": "^0.54.0",
+    "@webstudio-is/css-data": "^0.54.0",
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.1"
+    "@webstudio-is/tsconfig": "^1.0.3"
   },
   "exports": {
     "source": "./src/index.ts",

package/src/core/compare-media.test.ts

@@ -20,6 +20,7 @@ describe("Compare media", () => {
 
   test("webflow", () => {
     const initial = [
+      {},
       { maxWidth: 991 },
       { maxWidth: 767 },
       { maxWidth: 479 },
@@ -28,6 +29,7 @@ describe("Compare media", () => {
       { minWidth: 1920 },
     ];
     const sorted = [
+      {},
       { maxWidth: 991 },
       { maxWidth: 767 },
       { maxWidth: 479 },

package/src/core/compare-media.ts

@@ -8,11 +8,22 @@ export const compareMedia = (
   optionA: MediaRuleOptions,
   optionB: MediaRuleOptions
 ) => {
+  // Ensures a media with no min/max is always first
+  if (
+    (optionA?.minWidth === undefined && optionA?.maxWidth !== undefined) ||
+    (optionB?.minWidth === undefined && optionB?.maxWidth !== undefined)
+  ) {
+    return 1;
+  }
+  // Both are defined by minWidth, put the bigger one first
   if (optionA?.minWidth !== undefined && optionB?.minWidth !== undefined) {
     return optionA.minWidth - optionB.minWidth;
   }
+  // Both are defined by maxWidth, put the smaller one first
   if (optionA?.maxWidth !== undefined && optionB?.maxWidth !== undefined) {
     return optionB.maxWidth - optionA.maxWidth;
   }
+
+  // Media with maxWith should render before minWith just to have the same sorting visually in the UI as in CSSOM.
   return "minWidth" in optionA ? 1 : -1;
 };

package/src/core/css-engine.test.ts

@@ -1,4 +1,5 @@
 import { describe, beforeEach, test, expect } from "@jest/globals";
+import type { Assets } from "@webstudio-is/asset-uploader";
 import { CssEngine } from "./css-engine";
 
 const style0 = {
@@ -349,4 +350,61 @@ describe("CssEngine", () => {
       }"
     `);
   });
+
+  test("render images with injected asset url", () => {
+    const assets: Assets = new Map([
+      [
+        "1234",
+        {
+          type: "image",
+          path: "foo.png",
+          id: "1234567890",
+          projectId: "",
+          format: "",
+          size: 1212,
+          name: "img",
+          description: "",
+          location: "REMOTE",
+          createdAt: "",
+          meta: { width: 1, height: 2 },
+        },
+      ],
+    ]);
+    const rule = engine.addStyleRule(
+      ".c",
+      {
+        style: {
+          backgroundImage: {
+            type: "image",
+            value: {
+              type: "asset",
+              value: "1234",
+            },
+          },
+        },
+        breakpoint: "0",
+      },
+      (styleValue) => {
+        if (styleValue.type === "image" && styleValue.value.type === "asset") {
+          const asset = assets.get(styleValue.value.value);
+          if (asset === undefined) {
+            return { type: "keyword", value: "none" };
+          }
+          return {
+            type: "image",
+            value: {
+              type: "url",
+              url: asset.path,
+            },
+          };
+        }
+      }
+    );
+    rule.styleMap.delete("display");
+    expect(engine.cssText).toMatchInlineSnapshot(`
+      "@media all {
+        .c { background-image: url(foo.png) }
+      }"
+    `);
+  });
 });

package/src/core/css-engine.ts

@@ -10,6 +10,7 @@ import {
 import { compareMedia } from "./compare-media";
 import { StyleElement } from "./style-element";
 import { StyleSheet } from "./style-sheet";
+import type { TransformValue } from "./to-value";
 
 const defaultMediaRuleId = "__default-media-rule__";
 
@@ -36,10 +37,14 @@ export class CssEngine {
     }
     return mediaRule;
   }
-  addStyleRule(selectorText: string, rule: CssRule) {
+  addStyleRule(
+    selectorText: string,
+    rule: CssRule,
+    transformValue?: TransformValue
+  ) {
     const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
     this.#isDirty = true;
-    const styleRule = new StyleRule(selectorText, rule.style);
+    const styleRule = new StyleRule(selectorText, rule.style, transformValue);
     styleRule.onChange = this.#onChangeRule;
     if (mediaRule === undefined) {
       // Should be impossible to reach.

package/src/core/find-applicable-media.test.ts

@@ -0,0 +1,43 @@
+import { describe, test, expect } from "@jest/globals";
+import { findApplicableMedia } from "./find-applicable-media";
+
+const media = [
+  {},
+  { maxWidth: 991 },
+  { maxWidth: 767 },
+  { maxWidth: 479 },
+  { minWidth: 1280 },
+  { minWidth: 1440 },
+  { minWidth: 1920 },
+];
+
+describe("Find applicable media", () => {
+  test("200", () => {
+    expect(findApplicableMedia([...media], 200)).toStrictEqual({
+      maxWidth: 479,
+    });
+  });
+  test("479", () => {
+    expect(findApplicableMedia([...media], 479)).toStrictEqual({
+      maxWidth: 479,
+    });
+  });
+  test("480", () => {
+    expect(findApplicableMedia([...media], 480)).toStrictEqual({
+      maxWidth: 767,
+    });
+  });
+  test("1279", () => {
+    expect(findApplicableMedia([...media], 1279)).toStrictEqual({});
+  });
+  test("1280", () => {
+    expect(findApplicableMedia([...media], 1280)).toStrictEqual({
+      minWidth: 1280,
+    });
+  });
+  test("1440", () => {
+    expect(findApplicableMedia([...media], 1440)).toStrictEqual({
+      minWidth: 1440,
+    });
+  });
+});

package/src/core/find-applicable-media.ts

@@ -0,0 +1,20 @@
+import { compareMedia } from "./compare-media";
+import { matchMedia } from "./match-media";
+import type { MediaRuleOptions } from "./rules";
+
+// Find media rule that matches the given width when rendered.
+export const findApplicableMedia = <Media extends MediaRuleOptions>(
+  media: Array<Media>,
+  width: number
+) => {
+  const sortedMedia = media
+    .sort(compareMedia)
+    // Reverse order is needed because the last rule in CSSOM has higher source order specificity.
+    .reverse();
+
+  for (const options of sortedMedia) {
+    if (matchMedia(options, width)) {
+      return options;
+    }
+  }
+};

package/src/core/index.ts

@@ -11,3 +11,4 @@ export * from "./to-value";
 export * from "./match-media";
 export * from "./equal-media";
 export * from "./compare-media";
+export * from "./find-applicable-media";

package/src/core/match-media.ts

@@ -1,5 +1,6 @@
 import type { MediaRuleOptions } from "./rules";
 
+// This will match a breakpoint that has no min/max.
 export const matchMedia = (options: MediaRuleOptions, width: number) => {
   const minWidth = options.minWidth ?? Number.MIN_SAFE_INTEGER;
   const maxWidth = options.maxWidth ?? Number.MAX_SAFE_INTEGER;

package/src/core/rules.ts

@@ -1,12 +1,16 @@
 import type { Style, StyleProperty, StyleValue } from "@webstudio-is/css-data";
-import { toValue } from "./to-value";
+import { toValue, type TransformValue } from "./to-value";
 import { toProperty } from "./to-property";
 
 class StylePropertyMap {
   #styleMap: Map<StyleProperty, StyleValue | undefined> = new Map();
   #isDirty = false;
   #string = "";
+  #transformValue?: TransformValue;
   onChange?: () => void;
+  constructor(transformValue?: TransformValue) {
+    this.#transformValue = transformValue;
+  }
   set(property: StyleProperty, value?: StyleValue) {
     this.#styleMap.set(property, value);
     this.#isDirty = true;
@@ -37,7 +41,9 @@ class StylePropertyMap {
       if (value === undefined) {
         continue;
       }
-      block.push(`${toProperty(property)}: ${toValue(value)}`);
+      block.push(
+        `${toProperty(property)}: ${toValue(value, this.#transformValue)}`
+      );
     }
     this.#string = block.join("; ");
     this.#isDirty = false;
@@ -49,8 +55,12 @@ export class StyleRule {
   styleMap;
   selectorText;
   onChange?: () => void;
-  constructor(selectorText: string, style: Style) {
-    this.styleMap = new StylePropertyMap();
+  constructor(
+    selectorText: string,
+    style: Style,
+    transformValue?: TransformValue
+  ) {
+    this.styleMap = new StylePropertyMap(transformValue);
     this.selectorText = selectorText;
     let property: StyleProperty;
     for (property in style) {

package/src/core/to-value.test.ts

@@ -1,4 +1,5 @@
 import { describe, test, expect } from "@jest/globals";
+import type { Assets } from "@webstudio-is/asset-uploader";
 import { toValue } from "./to-value";
 
 describe("Convert WS CSS Values to native CSS strings", () => {
@@ -54,51 +55,85 @@ describe("Convert WS CSS Values to native CSS strings", () => {
     expect(value).toBe("Courier New, monospace");
   });
 
-  test("withFallback=false", () => {
+  test("Transform font family value to override default fallback", () => {
     const value = toValue(
       {
         type: "fontFamily",
         value: ["Courier New"],
       },
-      { withFallback: false }
+      (styleValue) => {
+        if (styleValue.type === "fontFamily") {
+          return {
+            type: "fontFamily",
+            value: [styleValue.value[0]],
+          };
+        }
+      }
     );
     expect(value).toBe("Courier New");
   });
 
   test("array", () => {
-    const value = toValue({
-      type: "layers",
-      value: [
-        {
-          type: "keyword",
-          value: "auto",
-        },
-        { type: "unit", value: 10, unit: "px" },
-        { type: "unparsed", value: "calc(10px)" },
+    const assets: Assets = new Map([
+      [
+        "1234567890",
         {
           type: "image",
-          value: {
-            type: "asset",
-            value: {
-              type: "image",
-              path: "foo.png",
+          path: "foo.png",
 
-              id: "1234567890",
-              projectId: "",
-              format: "",
-              size: 1212,
-              name: "img",
-              description: "",
-              location: "REMOTE",
-              createdAt: "",
-              meta: { width: 1, height: 2 },
-            },
-          },
+          id: "1234567890",
+          projectId: "",
+          format: "",
+          size: 1212,
+          name: "img",
+          description: "",
+          location: "REMOTE",
+          createdAt: "",
+          meta: { width: 1, height: 2 },
         },
       ],
-    });
+    ]);
+
+    const value = toValue(
+      {
+        type: "layers",
+        value: [
+          {
+            type: "keyword",
+            value: "auto",
+          },
+          { type: "unit", value: 10, unit: "px" },
+          { type: "unparsed", value: "calc(10px)" },
+          {
+            type: "image",
+            value: {
+              type: "asset",
+              value: "1234567890",
+            },
+          },
+        ],
+      },
+      (styleValue) => {
+        if (styleValue.type === "image" && styleValue.value.type === "asset") {
+          const asset = assets.get(styleValue.value.value);
+          if (asset === undefined) {
+            return {
+              type: "keyword",
+              value: "none",
+            };
+          }
+          return {
+            type: "image",
+            value: {
+              type: "url",
+              url: asset.path,
+            },
+          };
+        }
+      }
+    );
 
-    expect(value).toBe("auto,10px,calc(10px),url(foo.png) /* id=1234567890 */");
+    expect(value).toBe("auto,10px,calc(10px),url(foo.png)");
   });
 
   test("tuple", () => {

package/src/core/to-value.ts

@@ -1,44 +1,50 @@
 import type { StyleValue } from "@webstudio-is/css-data";
 import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
 
-type ToCssOptions = {
-  withFallback: boolean;
-};
-
-const defaultOptions = {
-  withFallback: true,
-};
+export type TransformValue = (styleValue: StyleValue) => undefined | StyleValue;
 
 // exhaustive check, should never happen in runtime as ts would give error
 const assertUnreachable = (_arg: never, errorMessage: string) => {
   throw new Error(errorMessage);
 };
 
+const fallbackTransform: TransformValue = (styleValue) => {
+  if (styleValue.type === "fontFamily") {
+    const firstFontFamily = styleValue.value[0];
+    const fallbacks = SYSTEM_FONTS.get(firstFontFamily);
+    const fontFamily: string[] = [...styleValue.value];
+    if (Array.isArray(fallbacks)) {
+      fontFamily.push(...fallbacks);
+    } else {
+      fontFamily.push(DEFAULT_FONT_FALLBACK);
+    }
+    return {
+      type: "fontFamily",
+      value: fontFamily,
+    };
+  }
+};
+
 export const toValue = (
-  value?: StyleValue,
-  options: ToCssOptions = defaultOptions
+  styleValue: undefined | StyleValue,
+  transformValue?: TransformValue
 ): string => {
-  if (value === undefined) {
+  if (styleValue === undefined) {
     return "";
   }
+  const transformedValue =
+    transformValue?.(styleValue) ?? fallbackTransform(styleValue);
+  const value = transformedValue ?? styleValue;
   if (value.type === "unit") {
     return value.value + (value.unit === "number" ? "" : value.unit);
   }
   if (value.type === "fontFamily") {
-    if (options.withFallback === false) {
-      return value.value[0];
-    }
-    const family = value.value[0];
-    const fallbacks = SYSTEM_FONTS.get(family);
-    if (Array.isArray(fallbacks)) {
-      return [...value.value, ...fallbacks].join(", ");
-    }
-    return [...value.value, DEFAULT_FONT_FALLBACK].join(", ");
+    return value.value.join(", ");
   }
   if (value.type === "var") {
     const fallbacks = [];
     for (const fallback of value.fallbacks) {
-      fallbacks.push(toValue(fallback, options));
+      fallbacks.push(toValue(fallback, transformValue));
     }
     const fallbacksString =
       fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
@@ -62,7 +68,7 @@ export const toValue = (
   }
 
   if (value.type === "image") {
-    if (value.hidden) {
+    if (value.hidden || value.value.type !== "url") {
       // We assume that property is background-image and use this to hide background layers
       // In the future we might want to have a more generic way to hide values
       // i.e. have knowledge about property-name, as none is property specific
@@ -70,7 +76,7 @@ export const toValue = (
     }
 
     // @todo image-set
-    return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
+    return `url(${value.value.url})`;
   }
 
   if (value.type === "unparsed") {
@@ -85,11 +91,11 @@ export const toValue = (
   }
 
   if (value.type === "layers") {
-    return value.value.map((value) => toValue(value, options)).join(",");
+    return value.value.map((value) => toValue(value, transformValue)).join(",");
   }
 
   if (value.type === "tuple") {
-    return value.value.map((value) => toValue(value, options)).join(" ");
+    return value.value.map((value) => toValue(value, transformValue)).join(" ");
   }
 
   // Will give ts error in case of missing type