@gtkx/css 0.1.22 → 0.1.24

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="logo.svg" alt="GTKX Logo" width="128" height="128">
+  <img src="https://raw.githubusercontent.com/eugeniodepalo/gtkx/HEAD/logo.svg" alt="GTKX Logo" width="128" height="128">
 </p>
 
 <h1 align="center">GTKX</h1>

package/dist/gtk-style-sheet.d.ts

@@ -0,0 +1,23 @@
+type StyleSheetOptions = {
+    key: string;
+    container?: unknown;
+    nonce?: string;
+    speedy?: boolean;
+    prepend?: boolean;
+};
+export declare class GtkStyleSheet {
+    key: string;
+    private rules;
+    private provider;
+    private display;
+    private isRegistered;
+    private hasPendingRules;
+    constructor(options: StyleSheetOptions);
+    private ensureProvider;
+    private updateProvider;
+    insert(rule: string): void;
+    applyQueuedRules(): void;
+    flush(): void;
+    hydrate(_elements: unknown[]): void;
+}
+export {};

package/dist/gtk-style-sheet.js

@@ -0,0 +1,70 @@
+import { events } from "@gtkx/ffi";
+import { DisplayManager } from "@gtkx/ffi/gdk";
+import { CssProvider, StyleContext } from "@gtkx/ffi/gtk";
+const STYLE_PROVIDER_PRIORITY_APPLICATION = 600;
+let isGtkReady = false;
+const pendingSheets = [];
+const flushPendingStyles = () => {
+    isGtkReady = true;
+    for (const sheet of pendingSheets) {
+        sheet.applyQueuedRules();
+    }
+    pendingSheets.length = 0;
+};
+events.once("start", flushPendingStyles);
+export class GtkStyleSheet {
+    key;
+    rules = [];
+    provider = null;
+    display = null;
+    isRegistered = false;
+    hasPendingRules = false;
+    constructor(options) {
+        this.key = options.key;
+    }
+    ensureProvider() {
+        if (!this.provider) {
+            this.provider = new CssProvider();
+            this.display = DisplayManager.get().getDefaultDisplay();
+            if (this.display) {
+                StyleContext.addProviderForDisplay(this.display, this.provider, STYLE_PROVIDER_PRIORITY_APPLICATION);
+                this.isRegistered = true;
+            }
+        }
+    }
+    updateProvider() {
+        if (this.provider && this.rules.length > 0) {
+            const css = this.rules.join("\n");
+            this.provider.loadFromString(css);
+        }
+    }
+    insert(rule) {
+        this.rules.push(rule);
+        if (isGtkReady) {
+            this.ensureProvider();
+            this.updateProvider();
+        }
+        else if (!this.hasPendingRules) {
+            this.hasPendingRules = true;
+            pendingSheets.push(this);
+        }
+    }
+    applyQueuedRules() {
+        if (this.rules.length > 0) {
+            this.ensureProvider();
+            this.updateProvider();
+        }
+        this.hasPendingRules = false;
+    }
+    flush() {
+        if (this.provider && this.display && this.isRegistered) {
+            StyleContext.removeProviderForDisplay(this.display, this.provider);
+            this.isRegistered = false;
+        }
+        this.rules = [];
+        this.provider = null;
+        this.display = null;
+        this.hasPendingRules = false;
+    }
+    hydrate(_elements) { }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/css",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "Emotion-style CSS-in-JS for GTKX applications",
   "keywords": [
     "gtk",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@emotion/cache": "11.14.0",
     "@emotion/serialize": "1.3.3",
-    "@gtkx/ffi": "0.1.22"
+    "@gtkx/ffi": "0.1.24"
   },
   "scripts": {
     "build": "tsc -b && cp ../../README.md .",