@webstudio-is/css-engine 0.35.0 → 0.40.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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.35.0",
+  "version": "0.40.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.35.0"
+    "@webstudio-is/fonts": "^0.40.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.35.0",
+    "@webstudio-is/css-data": "^0.40.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);
+};