@gtkx/css 0.6.1 → 0.8.0

package/dist/css.js

@@ -1,5 +1,55 @@
 import { serializeStyles } from "@emotion/serialize";
 import { getGtkCache } from "./cache.js";
+function expandNestedRules(styles, className) {
+    const selector = `.${className}`;
+    const expandedStyles = styles.replace(/&/g, selector);
+    const rules = [];
+    let currentRule = "";
+    let braceDepth = 0;
+    let inSelector = false;
+    let mainProperties = "";
+    for (let i = 0; i < expandedStyles.length; i++) {
+        const char = expandedStyles[i];
+        if (char === "{") {
+            braceDepth++;
+            if (braceDepth === 1 && currentRule.includes(selector)) {
+                inSelector = true;
+                currentRule += char;
+            }
+            else {
+                currentRule += char;
+            }
+        }
+        else if (char === "}") {
+            braceDepth--;
+            currentRule += char;
+            if (braceDepth === 0 && inSelector) {
+                rules.push(currentRule.trim());
+                currentRule = "";
+                inSelector = false;
+            }
+        }
+        else if (braceDepth === 0 && char === "." && expandedStyles.slice(i).startsWith(selector)) {
+            if (mainProperties.length > 0 || currentRule.length > 0) {
+                mainProperties += currentRule;
+                currentRule = "";
+            }
+            currentRule += char;
+        }
+        else {
+            currentRule += char;
+        }
+    }
+    if (currentRule.trim()) {
+        mainProperties += currentRule;
+    }
+    const allRules = [];
+    if (mainProperties.trim()) {
+        allRules.push(`${selector}{${mainProperties.trim()}}`);
+    }
+    allRules.push(...rules);
+    return allRules.join("\n");
+}
 /**
  * Creates a CSS class from styles and injects them into GTK.
  * Works like Emotion's css function but outputs to GTK's CssProvider.
@@ -20,9 +70,10 @@ export const css = (...args) => {
     const serialized = serializeStyles(args, cache.registered);
     const className = `${cache.key}-${serialized.name}`;
     if (cache.inserted[serialized.name] === undefined) {
-        const cssRule = `.${className}{${serialized.styles}}`;
+        const cssRule = expandNestedRules(serialized.styles, className);
         cache.sheet.insert(cssRule);
         cache.inserted[serialized.name] = serialized.styles;
+        cache.registered[className] = serialized.styles;
     }
     return className;
 };

package/dist/style-sheet.js

@@ -1,6 +1,6 @@
 import { events } from "@gtkx/ffi";
-import { DisplayManager } from "@gtkx/ffi/gdk";
-import { CssProvider, StyleContext } from "@gtkx/ffi/gtk";
+import * as Gdk from "@gtkx/ffi/gdk";
+import * as Gtk from "@gtkx/ffi/gtk";
 const STYLE_PROVIDER_PRIORITY_APPLICATION = 600;
 let isGtkReady = false;
 const pendingSheets = [];
@@ -11,7 +11,15 @@ const flushPendingStyles = () => {
     }
     pendingSheets.length = 0;
 };
+const resetGtkState = () => {
+    isGtkReady = false;
+    // Re-register the start listener for the next start() call
+    events.once("start", flushPendingStyles);
+};
+// Initial registration
 events.once("start", flushPendingStyles);
+// Handle stop to reset state and prepare for potential restart
+events.on("stop", resetGtkState);
 /**
  * Custom StyleSheet implementation for Emotion that outputs to GTK's CssProvider.
  * Implements Emotion's StyleSheet interface to enable CSS-in-JS with GTK widgets.
@@ -30,10 +38,10 @@ export class StyleSheet {
     }
     ensureProvider() {
         if (!this.provider) {
-            this.provider = new CssProvider();
-            this.display = DisplayManager.get().getDefaultDisplay();
+            this.provider = new Gtk.CssProvider();
+            this.display = Gdk.DisplayManager.get().getDefaultDisplay();
             if (this.display) {
-                StyleContext.addProviderForDisplay(this.display, this.provider, STYLE_PROVIDER_PRIORITY_APPLICATION);
+                Gtk.StyleContext.addProviderForDisplay(this.display, this.provider, STYLE_PROVIDER_PRIORITY_APPLICATION);
                 this.isRegistered = true;
             }
         }
@@ -64,7 +72,7 @@ export class StyleSheet {
     }
     flush() {
         if (this.provider && this.display && this.isRegistered) {
-            StyleContext.removeProviderForDisplay(this.display, this.provider);
+            Gtk.StyleContext.removeProviderForDisplay(this.display, this.provider);
             this.isRegistered = false;
         }
         this.rules = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/css",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Emotion-style CSS-in-JS for GTKX applications",
   "keywords": [
     "gtk",
@@ -33,9 +33,9 @@
     "dist"
   ],
   "dependencies": {
-    "@emotion/cache": "11.14.0",
-    "@emotion/serialize": "1.3.3",
-    "@gtkx/ffi": "0.6.1"
+    "@emotion/cache": "^11.14.0",
+    "@emotion/serialize": "^1.3.3",
+    "@gtkx/ffi": "0.8.0"
   },
   "scripts": {
     "build": "tsc -b && cp ../../README.md .",