@webstudio-is/css-engine 0.46.0 → 0.48.0

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

@@ -28,7 +28,7 @@ const defaultOptions = {
 const assertUnreachable = (_arg, errorMessage) => {
   throw new Error(errorMessage);
 };
-const toValue = (value, options = defaultOptions) => {
+const toValue = (value, options = defaultOptions, isEditMode) => {
   if (value === void 0) {
     return "";
   }
@@ -47,9 +47,10 @@ const toValue = (value, options = defaultOptions) => {
     return [...value.value, import_fonts.DEFAULT_FONT_FALLBACK].join(", ");
   }
   if (value.type === "var") {
+    const isEditMode2 = true;
     const fallbacks = [];
     for (const fallback of value.fallbacks) {
-      fallbacks.push(toValue(fallback, options));
+      fallbacks.push(toValue(fallback, options, isEditMode2));
     }
     const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
     return `var(--${value.value}${fallbacksString})`;
@@ -67,16 +68,22 @@ const toValue = (value, options = defaultOptions) => {
     return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
   }
   if (value.type === "image") {
+    if (isEditMode && value.hidden) {
+      return "none";
+    }
     return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
   }
   if (value.type === "unparsed") {
+    if (isEditMode && value.hidden) {
+      return "none";
+    }
     return value.value;
   }
   if (value.type === "layers") {
-    return value.value.map((value2) => toValue(value2, options)).join(",");
+    return value.value.map((value2) => toValue(value2, options, isEditMode)).join(",");
   }
   if (value.type === "tuple") {
-    return value.value.map((value2) => toValue(value2, options)).join(" ");
+    return value.value.map((value2) => toValue(value2, options, isEditMode)).join(" ");
   }
   assertUnreachable(value, `Unknown value type`);
   throw new Error("Unknown value type");

package/lib/core/to-value.js

@@ -5,7 +5,7 @@ const defaultOptions = {
 const assertUnreachable = (_arg, errorMessage) => {
   throw new Error(errorMessage);
 };
-const toValue = (value, options = defaultOptions) => {
+const toValue = (value, options = defaultOptions, isEditMode) => {
   if (value === void 0) {
     return "";
   }
@@ -24,9 +24,10 @@ const toValue = (value, options = defaultOptions) => {
     return [...value.value, DEFAULT_FONT_FALLBACK].join(", ");
   }
   if (value.type === "var") {
+    const isEditMode2 = true;
     const fallbacks = [];
     for (const fallback of value.fallbacks) {
-      fallbacks.push(toValue(fallback, options));
+      fallbacks.push(toValue(fallback, options, isEditMode2));
     }
     const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
     return `var(--${value.value}${fallbacksString})`;
@@ -44,16 +45,22 @@ const toValue = (value, options = defaultOptions) => {
     return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
   }
   if (value.type === "image") {
+    if (isEditMode && value.hidden) {
+      return "none";
+    }
     return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
   }
   if (value.type === "unparsed") {
+    if (isEditMode && value.hidden) {
+      return "none";
+    }
     return value.value;
   }
   if (value.type === "layers") {
-    return value.value.map((value2) => toValue(value2, options)).join(",");
+    return value.value.map((value2) => toValue(value2, options, isEditMode)).join(",");
   }
   if (value.type === "tuple") {
-    return value.value.map((value2) => toValue(value2, options)).join(" ");
+    return value.value.map((value2) => toValue(value2, options, isEditMode)).join(" ");
   }
   assertUnreachable(value, `Unknown value type`);
   throw new Error("Unknown value type");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -9,25 +9,26 @@
     "hyphenate-style-name": "^1.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "@webstudio-is/fonts": "^0.46.0"
+    "@webstudio-is/fonts": "^0.48.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/react": "^6.5.14",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/react": "^6.5.16",
     "@types/hyphenate-style-name": "^1.0.0",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
     "jest": "^29.3.1",
     "typescript": "4.9.5",
-    "@webstudio-is/css-data": "^0.46.0",
+    "@webstudio-is/css-data": "^0.48.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"
   },
-  "exports": "./lib/index.js",
+  "exports": {
+    "source": "./src/index.ts",
+    "import": "./lib/index.js"
+  },
   "types": "src/index.ts",
   "files": [
     "lib/*",

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

@@ -1,4 +1,4 @@
-import { describe, test } from "@jest/globals";
+import { describe, test, expect } from "@jest/globals";
 import { toProperty } from "./to-property";
 
 describe("toProperty", () => {

package/src/core/to-value.ts

@@ -16,7 +16,8 @@ const assertUnreachable = (_arg: never, errorMessage: string) => {
 
 export const toValue = (
   value?: StyleValue,
-  options: ToCssOptions = defaultOptions
+  options: ToCssOptions = defaultOptions,
+  isEditMode?: boolean
 ): string => {
   if (value === undefined) {
     return "";
@@ -36,9 +37,11 @@ export const toValue = (
     return [...value.value, DEFAULT_FONT_FALLBACK].join(", ");
   }
   if (value.type === "var") {
+    // We use var() in edit mode only
+    const isEditMode = true;
     const fallbacks = [];
     for (const fallback of value.fallbacks) {
-      fallbacks.push(toValue(fallback, options));
+      fallbacks.push(toValue(fallback, options, isEditMode));
     }
     const fallbacksString =
       fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
@@ -62,20 +65,38 @@ export const toValue = (
   }
 
   if (value.type === "image") {
+    if (isEditMode && value.hidden) {
+      // 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
+      return "none";
+    }
+
     // @todo image-set
     return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
   }
 
   if (value.type === "unparsed") {
+    if (isEditMode && value.hidden) {
+      // 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
+      return "none";
+    }
+
     return value.value;
   }
 
   if (value.type === "layers") {
-    return value.value.map((value) => toValue(value, options)).join(",");
+    return value.value
+      .map((value) => toValue(value, options, isEditMode))
+      .join(",");
   }
 
   if (value.type === "tuple") {
-    return value.value.map((value) => toValue(value, options)).join(" ");
+    return value.value
+      .map((value) => toValue(value, options, isEditMode))
+      .join(" ");
   }
 
   // Will give ts error in case of missing type