@webstudio-is/css-engine 0.47.0 → 0.49.0

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

@@ -67,9 +67,15 @@ const toValue = (value, options = defaultOptions) => {
     return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
   }
   if (value.type === "image") {
+    if (value.hidden) {
+      return "none";
+    }
     return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
   }
   if (value.type === "unparsed") {
+    if (value.hidden) {
+      return "none";
+    }
     return value.value;
   }
   if (value.type === "layers") {

package/lib/core/to-value.js

@@ -44,9 +44,15 @@ const toValue = (value, options = defaultOptions) => {
     return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
   }
   if (value.type === "image") {
+    if (value.hidden) {
+      return "none";
+    }
     return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
   }
   if (value.type === "unparsed") {
+    if (value.hidden) {
+      return "none";
+    }
     return value.value;
   }
   if (value.type === "layers") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.47.0",
+  "version": "0.49.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -9,23 +9,26 @@
     "hyphenate-style-name": "^1.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "@webstudio-is/fonts": "^0.47.0"
+    "@webstudio-is/fonts": "^0.49.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
-    "@storybook/react": "^6.5.14",
+    "@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.47.0",
+    "@webstudio-is/css-data": "^0.49.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-value.ts

@@ -62,11 +62,25 @@ export const toValue = (
   }
 
   if (value.type === "image") {
+    if (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 (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;
   }