@webstudio-is/css-engine 0.36.0 → 0.41.0

package/lib/cjs/core/rules.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __accessCheck = (obj, member, msg) => {
   if (!member.has(obj))
@@ -48,8 +42,8 @@ __export(rules_exports, {
   StyleRule: () => StyleRule
 });
 module.exports = __toCommonJS(rules_exports);
-var import_hyphenate_style_name = __toESM(require("hyphenate-style-name"), 1);
 var import_to_value = require("./to-value");
+var import_to_property = require("./to-property");
 var _styleMap, _isDirty, _string, _onChange, _mediaType;
 class StylePropertyMap {
   constructor() {
@@ -87,7 +81,7 @@ class StylePropertyMap {
       if (value === void 0) {
         continue;
       }
-      block.push(`${(0, import_hyphenate_style_name.default)(property)}: ${(0, import_to_value.toValue)(value)}`);
+      block.push(`${(0, import_to_property.toProperty)(property)}: ${(0, import_to_value.toValue)(value)}`);
     }
     __privateSet(this, _string, block.join("; "));
     __privateSet(this, _isDirty, false);

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

@@ -0,0 +1,36 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var to_property_exports = {};
+__export(to_property_exports, {
+  toProperty: () => toProperty
+});
+module.exports = __toCommonJS(to_property_exports);
+var import_hyphenate_style_name = __toESM(require("hyphenate-style-name"), 1);
+const toProperty = (property) => {
+  if (property === "backgroundClip") {
+    return "-webkit-background-clip";
+  }
+  return (0, import_hyphenate_style_name.default)(property);
+};

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/rules.js

@@ -17,8 +17,8 @@ var __privateSet = (obj, member, value, setter) => {
   return value;
 };
 var _styleMap, _isDirty, _string, _onChange, _mediaType;
-import hyphenate from "hyphenate-style-name";
 import { toValue } from "./to-value";
+import { toProperty } from "./to-property";
 class StylePropertyMap {
   constructor() {
     __privateAdd(this, _styleMap, /* @__PURE__ */ new Map());
@@ -55,7 +55,7 @@ class StylePropertyMap {
       if (value === void 0) {
         continue;
       }
-      block.push(`${hyphenate(property)}: ${toValue(value)}`);
+      block.push(`${toProperty(property)}: ${toValue(value)}`);
     }
     __privateSet(this, _string, block.join("; "));
     __privateSet(this, _isDirty, false);

package/lib/core/to-property.js

@@ -0,0 +1,10 @@
+import hyphenate from "hyphenate-style-name";
+const toProperty = (property) => {
+  if (property === "backgroundClip") {
+    return "-webkit-background-clip";
+  }
+  return hyphenate(property);
+};
+export {
+  toProperty
+};

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.36.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.36.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.36.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/rules.ts

@@ -1,6 +1,6 @@
 import type { Style, StyleProperty, StyleValue } from "@webstudio-is/css-data";
-import hyphenate from "hyphenate-style-name";
 import { toValue } from "./to-value";
+import { toProperty } from "./to-property";
 
 class StylePropertyMap {
   #styleMap: Map<StyleProperty, StyleValue | undefined> = new Map();
@@ -37,7 +37,7 @@ class StylePropertyMap {
       if (value === undefined) {
         continue;
       }
-      block.push(`${hyphenate(property)}: ${toValue(value)}`);
+      block.push(`${toProperty(property)}: ${toValue(value)}`);
     }
     this.#string = block.join("; ");
     this.#isDirty = false;

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

@@ -0,0 +1,11 @@
+import { describe, test } from "@jest/globals";
+import { toProperty } from "./to-property";
+
+describe("toProperty", () => {
+  test("boxSizing", () => {
+    expect(toProperty("boxSizing")).toBe("box-sizing");
+  });
+  test("backgroundClip", () => {
+    expect(toProperty("backgroundClip")).toBe("-webkit-background-clip");
+  });
+});

package/src/core/to-property.ts

@@ -0,0 +1,12 @@
+import type { StyleProperty } from "@webstudio-is/css-data";
+import hyphenate from "hyphenate-style-name";
+
+export const toProperty = (property: StyleProperty) => {
+  // Currently its a non-standard property and is only officially supported via -webkit- prefix.
+  // Safari illegally supports it without the prefix.
+  // https://caniuse.com/background-clip-text
+  if (property === "backgroundClip") {
+    return "-webkit-background-clip";
+  }
+  return hyphenate(property);
+};

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`);