@node-projects/web-component-designer-visualization-addons 0.1.28 → 0.1.29

package/README.md

@@ -15,5 +15,6 @@ It is used for example by the iobroker.webui.
 
 - long
 - blockly
+- @adobe/css-tools ( only if you use Bindingshelper.parseCssBindings() )
 
 ## Usage

package/dist/helpers/BindingsHelper.d.ts

@@ -42,7 +42,7 @@ export declare class BindingsHelper {
     getBindingAttributeName(element: Element, propertyName: string, propertyTarget: BindingTarget): string;
     getBindings(element: Element): Generator<namedBinding, void, unknown>;
     applyAllBindings(rootElement: ParentNode, relativeSignalPath: string, root: HTMLElement): (() => void)[];
-    parseCssBindings(sheet: CSSStyleSheet, element: Element, root: HTMLElement): void;
+    parseCssBindings(sheet: string, element: Element, root: HTMLElement): Promise<CSSStyleSheet>;
     parseCssBinding(value: string, element: Element, root: HTMLElement): string;
     applyBinding(element: Element, binding: namedBinding, relativeSignalPath: string, root: HTMLElement): () => void;
     private addTwoWayBinding;

package/dist/helpers/BindingsHelper.js

@@ -1,4 +1,4 @@
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { TypedEvent, cssFromString } from "@node-projects/base-custom-webcomponent";
 import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
 import { PropertiesHelper } from "@node-projects/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
 //;,[ are not allowed in bindings, so they could be used for a short form...
@@ -392,18 +392,23 @@ export class BindingsHelper {
         return retVal;
     }
     static #cssBindingsVarId = 0;
-    parseCssBindings(sheet, element, root) {
-        for (let r of sheet.cssRules) {
-            if (r instanceof CSSStyleRule) {
-                for (const s of r.style) {
-                    const v = r.style.getPropertyValue(s);
-                    if (v.includes(bindingPrefixInsideCss)) {
-                        const newValue = this.parseCssBinding(v, element, root);
-                        r.style.setProperty(s, newValue);
+    async parseCssBindings(sheet, element, root) {
+        const parser = (await import("@adobe/css-tools"));
+        const ast = parser.parse(sheet);
+        for (let r of ast.stylesheet.rules) {
+            if (r.type === parser.CssTypes.rule) {
+                for (const d of r.declarations) {
+                    if (d.type === parser.CssTypes.declaration) {
+                        if (d.value.includes(bindingPrefixInsideCss)) {
+                            const newValue = this.parseCssBinding(d.value, element, root);
+                            d.value = newValue;
+                        }
                     }
                 }
             }
         }
+        const newStyle = parser.stringify(ast, { indent: '', compress: true });
+        return cssFromString(newStyle);
     }
     parseCssBinding(value, element, root) {
         value = value.trim();

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "web-component-designer addon for visualizations",
   "name": "@node-projects/web-component-designer-visualization-addons",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",
@@ -13,15 +13,16 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@adobe/css-tools": "^4.3.3",
+    "@blockly/zoom-to-fit": "^5.0.11",
     "@node-projects/base-custom-webcomponent": ">=0.19.0",
-    "@node-projects/web-component-designer": ">=0.1.1",
-    "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.12",
-    "@node-projects/web-component-designer-codeview-monaco": ">=0.1.18",
     "@node-projects/propertygrid.webcomponent": ">=1.0.2",
     "@node-projects/splitview.webcomponent": ">=1.0.1",
-    "@blockly/zoom-to-fit": "^5.0.11",
+    "@node-projects/web-component-designer": ">=0.1.1",
+    "@node-projects/web-component-designer-codeview-monaco": ">=0.1.18",
+    "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.12",
     "blockly": "^10.4.2",
-    "long": "^5.2.3" 
+    "long": "^5.2.3"
   },
   "repository": {
     "type": "git",