Failed attempt to use @bramus/style-observer

package-lock.json

@@ -9,6 +9,7 @@
       "version": "3.0.0-alpha.7",
       "license": "MIT",
       "dependencies": {
+        "@bramus/style-observer": "^1.3.0",
         "@ctrl/tinycolor": "^4.1.0",
         "@floating-ui/dom": "^1.6.12",
         "@shoelace-style/animations": "^1.2.0",
@@ -676,6 +677,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/@bramus/style-observer": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@bramus/style-observer/-/style-observer-1.3.0.tgz",
+      "integrity": "sha512-IQjYId9X7xgz0NeKGatC37lqsdS+cE5bfdB9jKh7+zJnA9BqENee2C48boDIRQrTED4JxleRZGhTY86S1/l7QA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@cspell/cspell-bundled-dicts": {
       "version": "6.31.3",
       "resolved": "https://registry.npmjs.org/@cspell/cspell-bundled-dicts/-/cspell-bundled-dicts-6.31.3.tgz",

package.json

@@ -64,6 +64,7 @@
     "node": ">=14.17.0"
   },
   "dependencies": {
+    "@bramus/style-observer": "^1.3.0",
     "@ctrl/tinycolor": "^4.1.0",
     "@floating-ui/dom": "^1.6.12",
     "@shoelace-style/animations": "^1.2.0",

src/components/icon/icon.css

@@ -31,3 +31,24 @@ svg {
   width: 1em;
   justify-content: center;
 }
+
+@property --wa-icon-family {
+  syntax: '<custom-ident> | auto';
+  inherits: true;
+  initial-value: 'auto';
+}
+@property --wa-icon-variant {
+  syntax: '<custom-ident> | auto';
+  inherits: true;
+  initial-value: 'auto';
+}
+@property --wa-icon-library {
+  syntax: '<custom-ident> | auto';
+  inherits: true;
+  initial-value: 'auto';
+}
+@property --wa-icon-name {
+  syntax: '<custom-ident> | auto';
+  inherits: true;
+  initial-value: 'auto';
+}

src/internal/webawesome-element.ts

@@ -1,3 +1,4 @@
+import { CSSStyleObserver } from '@bramus/style-observer';
 import type { CSSResult, CSSResultGroup, PropertyDeclaration, PropertyValues } from 'lit';
 import { LitElement, isServer, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -193,6 +194,26 @@ export default class WebAwesomeElement extends LitElement {
       return;
     }
 
+    if (!Self.styleObserver) {
+      // First time, init stuff
+      // First, replace `true` with actual CSS property names
+      for (let [name, cssProperty] of Self.cssAttributeProperties) {
+        if (cssProperty === true) {
+          // Default name
+          cssProperty = `--${this.tagName.toLowerCase()}-${name}`;
+          Self.cssAttributeProperties.set(name, cssProperty);
+        }
+      }
+      // Then we observe them
+      let cssProperties = [...Self.cssAttributeProperties.values()] as string[];
+      console.log(cssProperties);
+
+      Self.styleObserver = new CSSStyleObserver(cssProperties, (...args) => {
+        console.log(...args);
+        this.updateCSSProperties();
+      });
+    }
+
     this.#computedStyle ??= getComputedStyle(this);
 
     const tagName = this.tagName.toLowerCase();
@@ -203,7 +224,7 @@ export default class WebAwesomeElement extends LitElement {
         cssProperty = cssProperty === true ? `--${tagName}-${name}` : cssProperty;
         const value = this.#computedStyle?.getPropertyValue(cssProperty);
 
-        if (value) {
+        if (value && value !== 'auto') {
           this.#setVia[name] = 'css';
           this.#setting.add(name);
           // @ts-ignore
@@ -218,6 +239,7 @@ export default class WebAwesomeElement extends LitElement {
 
   // Subclasses will get their own copy automagically (see below)
   protected static cssAttributeProperties = new Map<PropertyKey, true | string>();
+  protected static styleObserver: CSSStyleObserver | undefined;
 
   static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
     super.createProperty(name, options);