@webstudio-is/css-engine 0.40.0 → 0.41.0

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

@@ -67,13 +67,14 @@ const toValue = (value, options = defaultOptions) => {
     return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
   }
   if (value.type === "image") {
-    return value.value.map(
-      (imageAsset) => `url(${imageAsset.value.path}) /* id=${imageAsset.value.id} */`
-    ).join(", ");
+    return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
   }
   if (value.type === "unparsed") {
     return value.value;
   }
+  if (value.type === "layers") {
+    return value.value.map((v) => toValue(v, options)).join(",");
+  }
   assertUnreachable(value, `Unknown value type`);
   throw new Error("Unknown value type");
 };

package/lib/core/to-value.js

@@ -44,13 +44,14 @@ const toValue = (value, options = defaultOptions) => {
     return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
   }
   if (value.type === "image") {
-    return value.value.map(
-      (imageAsset) => `url(${imageAsset.value.path}) /* id=${imageAsset.value.id} */`
-    ).join(", ");
+    return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
   }
   if (value.type === "unparsed") {
     return value.value;
   }
+  if (value.type === "layers") {
+    return value.value.map((v) => toValue(v, options)).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.40.0",
+  "version": "0.41.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.40.0"
+    "@webstudio-is/fonts": "^0.41.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
@@ -21,7 +21,7 @@
     "@types/react-dom": "^17.0.9",
     "jest": "^29.3.1",
     "typescript": "4.9.5",
-    "@webstudio-is/css-data": "^0.40.0",
+    "@webstudio-is/css-data": "^0.41.0",
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",

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

@@ -64,4 +64,40 @@ describe("Convert WS CSS Values to native CSS strings", () => {
     );
     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)" },
+        {
+          type: "image",
+          value: {
+            type: "asset",
+            value: {
+              type: "image",
+              path: "foo.png",
+
+              id: "1234567890",
+              projectId: "",
+              format: "",
+              size: 1212,
+              name: "img",
+              description: "",
+              location: "REMOTE",
+              createdAt: "",
+              meta: { width: 1, height: 2 },
+            },
+          },
+        },
+      ],
+    });
+
+    expect(value).toBe("auto,10px,calc(10px),url(foo.png) /* id=1234567890 */");
+  });
 });

package/src/core/to-value.ts

@@ -63,18 +63,17 @@ export const toValue = (
 
   if (value.type === "image") {
     // @todo image-set
-    return value.value
-      .map(
-        (imageAsset) =>
-          `url(${imageAsset.value.path}) /* id=${imageAsset.value.id} */`
-      )
-      .join(", ");
+    return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
   }
 
   if (value.type === "unparsed") {
     return value.value;
   }
 
+  if (value.type === "layers") {
+    return value.value.map((v) => toValue(v, options)).join(",");
+  }
+
   // Will give ts error in case of missing type
   assertUnreachable(value, `Unknown value type`);