@webstudio-is/css-engine 0.16.0 → 0.18.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.18.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -17,27 +17,26 @@
     "publish-to-npm": "bash ../../bin/publish-to-npm.sh"
   },
   "dependencies": {
+    "@webstudio-is/fonts": "*",
     "hyphenate-style-name": "^1.0.4",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "@webstudio-is/fonts": "*"
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-interactions": "^6.5.12",
-    "@storybook/addon-links": "^6.5.6",
-    "@storybook/builder-webpack4": "^6.5.6",
+    "@jest/globals": "^29.3.1",
     "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack4": "^6.5.6",
-    "@storybook/react": "^6.5.6",
+    "@storybook/react": "^6.5.14",
     "@storybook/testing-library": "^0.0.13",
-    "@webstudio-is/jest-config": "*",
+    "@types/hyphenate-style-name": "^1.0.0",
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9",
     "@webstudio-is/css-data": "*",
+    "@webstudio-is/jest-config": "*",
     "@webstudio-is/scripts": "*",
-    "typescript": "4.7.4",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9"
+    "@webstudio-is/storybook-config": "*",
+    "@webstudio-is/tsconfig": "*",
+    "jest": "^29.3.1",
+    "typescript": "4.7.4"
   },
   "exports": "./lib/index.js",
   "types": "src/index.ts",

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

@@ -1,3 +1,4 @@
+import { describe, beforeEach, test, expect } from "@jest/globals";
 import { CssEngine } from "./css-engine";
 
 const style0 = {
@@ -11,6 +12,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 +284,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;

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

@@ -1,3 +1,4 @@
+import { describe, test, expect } from "@jest/globals";
 import { toValue } from "./to-value";
 
 describe("Convert WS CSS Values to native CSS strings", () => {