@webstudio-is/css-engine 0.16.0 → 0.17.0

package/lib/cjs/core/rules.cjs

@@ -65,6 +65,14 @@ class StylePropertyMap {
   has(property) {
     return __privateGet(this, _styleMap).has(property);
   }
+  keys() {
+    return __privateGet(this, _styleMap).keys();
+  }
+  delete(property) {
+    __privateGet(this, _styleMap).delete(property);
+    __privateSet(this, _isDirty, true);
+    this.onChange?.();
+  }
   clear() {
     __privateGet(this, _styleMap).clear();
     __privateSet(this, _isDirty, true);

package/lib/core/rules.js

@@ -33,6 +33,14 @@ class StylePropertyMap {
   has(property) {
     return __privateGet(this, _styleMap).has(property);
   }
+  keys() {
+    return __privateGet(this, _styleMap).keys();
+  }
+  delete(property) {
+    __privateGet(this, _styleMap).delete(property);
+    __privateSet(this, _isDirty, true);
+    this.onChange?.();
+  }
   clear() {
     __privateGet(this, _styleMap).clear();
     __privateSet(this, _isDirty, true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",

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

@@ -11,6 +11,11 @@ const style1 = {
   display: { type: "keyword", value: "flex" },
 } as const;
 
+const style2 = {
+  display: { type: "keyword", value: "block" },
+  color: { type: "keyword", value: "black" },
+} as const;
+
 const mediaRuleOptions1 = { minWidth: 300 } as const;
 const mediaId1 = "1";
 
@@ -278,4 +283,30 @@ describe("CssEngine", () => {
     engine.clear();
     expect(engine.cssText).toMatchInlineSnapshot(`""`);
   });
+
+  test("get all rule style keys", () => {
+    const rule = engine.addStyleRule(".c", {
+      style: style2,
+      breakpoint: "0",
+    });
+    expect(Array.from(rule.styleMap.keys())).toMatchInlineSnapshot(`
+      [
+        "display",
+        "color",
+      ]
+    `);
+  });
+
+  test("delete style from rule", () => {
+    const rule = engine.addStyleRule(".c", {
+      style: style2,
+      breakpoint: "0",
+    });
+    rule.styleMap.delete("display");
+    expect(engine.cssText).toMatchInlineSnapshot(`
+      "@media all {
+        .c { color: black }
+      }"
+    `);
+  });
 });

package/src/core/rules.ts

@@ -15,6 +15,14 @@ class StylePropertyMap {
   has(property: StyleProperty) {
     return this.#styleMap.has(property);
   }
+  keys() {
+    return this.#styleMap.keys();
+  }
+  delete(property: StyleProperty) {
+    this.#styleMap.delete(property);
+    this.#isDirty = true;
+    this.onChange?.();
+  }
   clear() {
     this.#styleMap.clear();
     this.#isDirty = true;