@webstudio-is/css-engine 0.19.0 → 0.21.0

package/lib/cjs/core/create-css-engine.cjs

@@ -22,6 +22,6 @@ __export(create_css_engine_exports, {
 });
 module.exports = __toCommonJS(create_css_engine_exports);
 var import_css_engine = require("./css-engine");
-const createCssEngine = () => {
-  return new import_css_engine.CssEngine();
+const createCssEngine = (options = {}) => {
+  return new import_css_engine.CssEngine(options);
 };

package/lib/cjs/core/css-engine.cjs

@@ -45,7 +45,7 @@ var import_style_sheet = require("./style-sheet");
 var _element, _mediaRules, _plainRules, _fontFaceRules, _sheet, _isDirty, _cssText, _onChangeRule;
 const defaultMediaRuleId = "__default-media-rule__";
 class CssEngine {
-  constructor() {
+  constructor({ name }) {
     __privateAdd(this, _element, void 0);
     __privateAdd(this, _mediaRules, /* @__PURE__ */ new Map());
     __privateAdd(this, _plainRules, /* @__PURE__ */ new Map());
@@ -56,7 +56,7 @@ class CssEngine {
     __privateAdd(this, _onChangeRule, () => {
       __privateSet(this, _isDirty, true);
     });
-    __privateSet(this, _element, new import_style_element.StyleElement());
+    __privateSet(this, _element, new import_style_element.StyleElement(name));
     __privateSet(this, _sheet, new import_style_sheet.StyleSheet(__privateGet(this, _element)));
   }
   addMediaRule(id, options) {

package/lib/cjs/core/style-element.cjs

@@ -39,10 +39,12 @@ __export(style_element_exports, {
   StyleElement: () => StyleElement
 });
 module.exports = __toCommonJS(style_element_exports);
-var _element;
+var _element, _name;
 class StyleElement {
-  constructor() {
+  constructor(name = "") {
     __privateAdd(this, _element, void 0);
+    __privateAdd(this, _name, void 0);
+    __privateSet(this, _name, name);
   }
   get isMounted() {
     return __privateGet(this, _element)?.parentElement != null;
@@ -50,7 +52,7 @@ class StyleElement {
   mount() {
     if (this.isMounted === false) {
       __privateSet(this, _element, document.createElement("style"));
-      __privateGet(this, _element).setAttribute("data-webstudio", "");
+      __privateGet(this, _element).setAttribute("data-webstudio", __privateGet(this, _name));
       document.head.appendChild(__privateGet(this, _element));
     }
   }
@@ -67,3 +69,4 @@ class StyleElement {
   }
 }
 _element = new WeakMap();
+_name = new WeakMap();

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

@@ -66,6 +66,11 @@ const toValue = (value, options = defaultOptions) => {
   if (value.type === "rgb") {
     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(", ");
+  }
   assertUnreachable(value, `Unknown value type`);
   throw new Error("Unknown value type");
 };

package/lib/core/create-css-engine.js

@@ -1,6 +1,6 @@
 import { CssEngine } from "./css-engine";
-const createCssEngine = () => {
-  return new CssEngine();
+const createCssEngine = (options = {}) => {
+  return new CssEngine(options);
 };
 export {
   createCssEngine

package/lib/core/css-engine.js

@@ -27,7 +27,7 @@ import { StyleElement } from "./style-element";
 import { StyleSheet } from "./style-sheet";
 const defaultMediaRuleId = "__default-media-rule__";
 class CssEngine {
-  constructor() {
+  constructor({ name }) {
     __privateAdd(this, _element, void 0);
     __privateAdd(this, _mediaRules, /* @__PURE__ */ new Map());
     __privateAdd(this, _plainRules, /* @__PURE__ */ new Map());
@@ -38,7 +38,7 @@ class CssEngine {
     __privateAdd(this, _onChangeRule, () => {
       __privateSet(this, _isDirty, true);
     });
-    __privateSet(this, _element, new StyleElement());
+    __privateSet(this, _element, new StyleElement(name));
     __privateSet(this, _sheet, new StyleSheet(__privateGet(this, _element)));
   }
   addMediaRule(id, options) {

package/lib/core/style-element.js

@@ -16,10 +16,12 @@ var __privateSet = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var _element;
+var _element, _name;
 class StyleElement {
-  constructor() {
+  constructor(name = "") {
     __privateAdd(this, _element, void 0);
+    __privateAdd(this, _name, void 0);
+    __privateSet(this, _name, name);
   }
   get isMounted() {
     return __privateGet(this, _element)?.parentElement != null;
@@ -27,7 +29,7 @@ class StyleElement {
   mount() {
     if (this.isMounted === false) {
       __privateSet(this, _element, document.createElement("style"));
-      __privateGet(this, _element).setAttribute("data-webstudio", "");
+      __privateGet(this, _element).setAttribute("data-webstudio", __privateGet(this, _name));
       document.head.appendChild(__privateGet(this, _element));
     }
   }
@@ -44,6 +46,7 @@ class StyleElement {
   }
 }
 _element = new WeakMap();
+_name = new WeakMap();
 export {
   StyleElement
 };

package/lib/core/to-value.js

@@ -43,6 +43,11 @@ const toValue = (value, options = defaultOptions) => {
   if (value.type === "rgb") {
     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(", ");
+  }
   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.19.0",
+  "version": "0.21.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.19.0"
+    "@webstudio-is/fonts": "^0.21.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
@@ -21,7 +21,7 @@
     "@types/react-dom": "^17.0.9",
     "jest": "^29.3.1",
     "typescript": "4.7.4",
-    "@webstudio-is/css-data": "^0.19.0",
+    "@webstudio-is/css-data": "^0.21.0",
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",

package/src/core/create-css-engine.ts

@@ -1,5 +1,5 @@
-import { CssEngine } from "./css-engine";
+import { CssEngine, type CssEngineOptions } from "./css-engine";
 
-export const createCssEngine = () => {
-  return new CssEngine();
+export const createCssEngine = (options: CssEngineOptions = {}) => {
+  return new CssEngine(options);
 };

package/src/core/css-engine.stories.tsx

@@ -12,7 +12,7 @@ const mediaRuleOptions0 = { minWidth: 0 } as const;
 const mediaId = "0";
 
 export const Basic = () => {
-  const engine = new CssEngine();
+  const engine = new CssEngine({ name: "test" });
   engine.addMediaRule(mediaId, mediaRuleOptions0);
   const rule = engine.addStyleRule(".test", {
     style: style0,

package/src/core/css-engine.test.ts

@@ -24,7 +24,7 @@ describe("CssEngine", () => {
   let engine: CssEngine;
 
   const reset = () => {
-    engine = new CssEngine();
+    engine = new CssEngine({ name: "test" });
   };
 
   beforeEach(reset);

package/src/core/css-engine.ts

@@ -12,6 +12,8 @@ import { StyleSheet } from "./style-sheet";
 
 const defaultMediaRuleId = "__default-media-rule__";
 
+export type CssEngineOptions = { name?: string };
+
 export class CssEngine {
   #element;
   #mediaRules: Map<string, MediaRule> = new Map();
@@ -20,8 +22,8 @@ export class CssEngine {
   #sheet: StyleSheet;
   #isDirty = false;
   #cssText = "";
-  constructor() {
-    this.#element = new StyleElement();
+  constructor({ name }: CssEngineOptions) {
+    this.#element = new StyleElement(name);
     this.#sheet = new StyleSheet(this.#element);
   }
   addMediaRule(id: string, options?: MediaRuleOptions) {

package/src/core/style-element.ts

@@ -1,12 +1,16 @@
 export class StyleElement {
   #element?: HTMLStyleElement;
+  #name: string;
+  constructor(name = "") {
+    this.#name = name;
+  }
   get isMounted() {
     return this.#element?.parentElement != null;
   }
   mount() {
     if (this.isMounted === false) {
       this.#element = document.createElement("style");
-      this.#element.setAttribute("data-webstudio", "");
+      this.#element.setAttribute("data-webstudio", this.#name);
       document.head.appendChild(this.#element);
     }
   }

package/src/core/to-value.ts

@@ -61,6 +61,16 @@ export const toValue = (
     return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
   }
 
+  if (value.type === "image") {
+    // @todo image-set
+    return value.value
+      .map(
+        (imageAsset) =>
+          `url(${imageAsset.value.path}) /* id=${imageAsset.value.id} */`
+      )
+      .join(", ");
+  }
+
   // Will give ts error in case of missing type
   assertUnreachable(value, `Unknown value type`);