@gtkx/css 0.18.1 → 0.18.3

package/dist/cache.d.ts

@@ -1,2 +1,3 @@
 import type { EmotionCache } from "@emotion/cache";
 export declare const getGtkCache: () => EmotionCache;
+//# sourceMappingURL=cache.d.ts.map

package/dist/cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.d.ts","sourceRoot":"","sources":["../src/cache.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAMnD,eAAO,MAAM,WAAW,QAAO,YAa9B,CAAC"}

package/dist/cache.js

@@ -12,3 +12,4 @@ export const getGtkCache = () => {
     }
     return gtkCache;
 };
+//# sourceMappingURL=cache.js.map

package/dist/cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.js","sourceRoot":"","sources":["../src/cache.ts"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,IAAI,QAAQ,GAAwB,IAAI,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAiB,EAAE;IAC1C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACZ,MAAM,KAAK,GAAG,IAAI,UAAU,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;QAE9C,QAAQ,GAAG,WAAW,CAAC;YACnB,GAAG,EAAE,MAAM;YACX,SAAS,EAAE,IAAI;SAClB,CAAC,CAAC;QAEH,QAAQ,CAAC,KAAK,GAAG,KAAyC,CAAC;IAC/D,CAAC;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC"}

package/dist/css.d.ts

@@ -91,3 +91,4 @@ export declare const cx: (...classNames: (string | boolean | undefined | null)[]
  */
 export declare const injectGlobal: (...args: CSSInterpolation[]) => void;
 export {};
+//# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAI3D;;GAEG;AACH,KAAK,YAAY,GAAG,MAAM,GAAG;IAAE,OAAO,EAAE,KAAK,CAAA;CAAE,CAAC;AA6ChD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,GAAG,GAAI,GAAG,MAAM,gBAAgB,EAAE,KAAG,YAcjD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,EAAE,GAAI,GAAG,YAAY,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,KAAG,MAAM,EACE,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,MAAM,gBAAgB,EAAE,KAAG,IAQ1D,CAAC"}

package/dist/css.js

@@ -142,3 +142,4 @@ export const injectGlobal = (...args) => {
         cache.inserted[`global-${serialized.name}`] = serialized.styles;
     }
 };
+//# sourceMappingURL=css.js.map

package/dist/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { css, cx, injectGlobal } from "./css.js";
 import "./style-sheet.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,kBAAkB,CAAC"}

package/dist/index.js

@@ -1,2 +1,3 @@
 export { css, cx, injectGlobal } from "./css.js";
 import "./style-sheet.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,kBAAkB,CAAC"}

package/dist/style-sheet.d.ts

@@ -23,3 +23,4 @@ export declare class StyleSheet {
     hydrate(_elements: unknown[]): void;
 }
 export {};
+//# sourceMappingURL=style-sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style-sheet.d.ts","sourceRoot":"","sources":["../src/style-sheet.ts"],"names":[],"mappings":"AAIA,KAAK,iBAAiB,GAAG;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAqBF,qBAAa,UAAU;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,KAAK,CAAgB;IAC7B,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,eAAe,CAAS;gBAEpB,OAAO,EAAE,iBAAiB;IAItC,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,cAAc;IAUtB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAW1B,gBAAgB,IAAI,IAAI;IAQxB,KAAK,IAAI,IAAI;IAab,OAAO,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI;CACtC"}

package/dist/style-sheet.js

@@ -82,3 +82,4 @@ export class StyleSheet {
     }
     hydrate(_elements) { }
 }
+//# sourceMappingURL=style-sheet.js.map

package/dist/style-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-sheet.js","sourceRoot":"","sources":["../src/style-sheet.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/css",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "description": "Emotion-based CSS-in-JS for GTKX applications",
   "keywords": [
     "gtkx",
@@ -33,16 +33,20 @@
       "default": "./dist/index.js"
     }
   },
+  "sideEffects": [
+    "./dist/index.js"
+  ],
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
     "@emotion/cache": "^11.14.0",
     "@emotion/serialize": "^1.3.3",
-    "@gtkx/ffi": "0.18.1"
+    "@gtkx/ffi": "0.18.3"
   },
   "devDependencies": {
-    "@gtkx/vitest": "0.18.1"
+    "@gtkx/vitest": "0.18.3"
   },
   "scripts": {
     "build": "tsc -b && cp ../../README.md .",

package/src/cache.ts

@@ -0,0 +1,20 @@
+import type { EmotionCache } from "@emotion/cache";
+import createCache from "@emotion/cache";
+import { StyleSheet } from "./style-sheet.js";
+
+let gtkCache: EmotionCache | null = null;
+
+export const getGtkCache = (): EmotionCache => {
+    if (!gtkCache) {
+        const sheet = new StyleSheet({ key: "gtkx" });
+
+        gtkCache = createCache({
+            key: "gtkx",
+            container: null,
+        });
+
+        gtkCache.sheet = sheet as unknown as typeof gtkCache.sheet;
+    }
+
+    return gtkCache;
+};

package/src/css.ts

@@ -0,0 +1,162 @@
+import type { CSSInterpolation } from "@emotion/serialize";
+import { serializeStyles } from "@emotion/serialize";
+import { getGtkCache } from "./cache.js";
+
+/**
+ * Branded type for CSS class names generated by {@link css}.
+ */
+type CSSClassName = string & { __brand: "css" };
+
+function expandNestedRules(styles: string, className: string): string {
+    const selector = `.${className}`;
+    const expandedStyles = styles.replace(/&/g, selector);
+
+    const rules: string[] = [];
+    let topLevelProperties = "";
+    let currentSegment = "";
+    let braceDepth = 0;
+
+    for (let i = 0; i < expandedStyles.length; i++) {
+        const char = expandedStyles[i];
+
+        if (char === "{") {
+            currentSegment += char;
+            braceDepth++;
+        } else if (char === "}") {
+            braceDepth--;
+            currentSegment += char;
+            if (braceDepth === 0) {
+                rules.push(currentSegment.trim());
+                currentSegment = "";
+            }
+        } else if (char === ";" && braceDepth === 0) {
+            topLevelProperties += currentSegment + char;
+            currentSegment = "";
+        } else {
+            currentSegment += char;
+        }
+    }
+
+    if (currentSegment.trim() && braceDepth === 0) {
+        topLevelProperties += currentSegment;
+    }
+
+    const allRules: string[] = [];
+    if (topLevelProperties.trim()) {
+        allRules.push(`${selector}{${topLevelProperties.trim()}}`);
+    }
+    allRules.push(...rules);
+
+    return allRules.join("\n");
+}
+
+/**
+ * Creates a CSS class from style definitions.
+ *
+ * Uses Emotion's CSS-in-JS system adapted for GTK CSS. Supports nested selectors
+ * using `&` for the parent selector reference.
+ *
+ * @param args - CSS style definitions (objects, template literals, or interpolations)
+ * @returns A unique class name to use with `cssClasses` prop
+ *
+ * @example
+ * ```tsx
+ * import { css } from "@gtkx/css";
+ *
+ * const buttonStyle = css({
+ *   padding: "8px 16px",
+ *   borderRadius: "4px",
+ *   "&:hover": {
+ *     backgroundColor: "@accent_bg_color",
+ *   },
+ * });
+ *
+ * <GtkButton cssClasses={[buttonStyle]} label="Styled Button" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Template literal syntax
+ * const labelStyle = css`
+ *   font-size: 14px;
+ *   color: @theme_text_color;
+ * `;
+ * ```
+ *
+ * @see {@link cx} for combining class names
+ * @see {@link injectGlobal} for global styles
+ */
+export const css = (...args: CSSInterpolation[]): CSSClassName => {
+    const cache = getGtkCache();
+    const serialized = serializeStyles(args, cache.registered);
+
+    const className = `${cache.key}-${serialized.name}`;
+
+    if (cache.inserted[serialized.name] === undefined) {
+        const cssRule = expandNestedRules(serialized.styles, className);
+        cache.sheet.insert(cssRule);
+        cache.inserted[serialized.name] = serialized.styles;
+        cache.registered[className] = serialized.styles;
+    }
+
+    return className as CSSClassName;
+};
+
+/**
+ * Combines multiple class names into an array for use with cssClasses prop.
+ *
+ * Filters out falsy values, allowing conditional class application.
+ *
+ * @param classNames - Class names, booleans, undefined, or null values
+ * @returns Array of valid class names
+ *
+ * @example
+ * ```tsx
+ * import { css, cx } from "@gtkx/css";
+ *
+ * const base = css({ padding: "8px" });
+ * const active = css({ backgroundColor: "@accent_bg_color" });
+ *
+ * <GtkButton
+ *   cssClasses={cx(base, isActive && active, "custom-class")}
+ *   label="Button"
+ * />
+ * ```
+ */
+export const cx = (...classNames: (string | boolean | undefined | null)[]): string[] =>
+    classNames.filter((cn): cn is string => typeof cn === "string" && cn.length > 0);
+
+/**
+ * Injects global CSS styles without a wrapping class.
+ *
+ * Use for application-wide styles, CSS variables, or styling native GTK widgets.
+ *
+ * @param args - CSS style definitions
+ *
+ * @example
+ * ```tsx
+ * import { injectGlobal } from "@gtkx/css";
+ *
+ * injectGlobal`
+ *   window {
+ *     background-color: @theme_bg_color;
+ *   }
+ *
+ *   .title-1 {
+ *     font-size: 24px;
+ *     font-weight: bold;
+ *   }
+ * `;
+ * ```
+ *
+ * @see {@link css} for scoped class-based styles
+ */
+export const injectGlobal = (...args: CSSInterpolation[]): void => {
+    const cache = getGtkCache();
+    const serialized = serializeStyles(args, cache.registered);
+
+    if (cache.inserted[`global-${serialized.name}`] === undefined) {
+        cache.sheet.insert(serialized.styles);
+        cache.inserted[`global-${serialized.name}`] = serialized.styles;
+    }
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export { css, cx, injectGlobal } from "./css.js";
+
+import "./style-sheet.js";

package/src/style-sheet.ts

@@ -0,0 +1,111 @@
+import { events, isStarted } from "@gtkx/ffi";
+import * as Gdk from "@gtkx/ffi/gdk";
+import * as Gtk from "@gtkx/ffi/gtk";
+
+type StyleSheetOptions = {
+    key: string;
+    container?: unknown;
+    nonce?: string;
+    speedy?: boolean;
+    prepend?: boolean;
+};
+
+const STYLE_PROVIDER_PRIORITY_APPLICATION = 600;
+
+const pendingSheets: StyleSheet[] = [];
+
+const flushPendingStyles = (): void => {
+    for (const sheet of pendingSheets) {
+        sheet.applyQueuedRules();
+    }
+    pendingSheets.length = 0;
+};
+
+const registerStartListener = (): void => {
+    events.once("start", flushPendingStyles);
+};
+
+if (!isStarted()) {
+    registerStartListener();
+}
+
+export class StyleSheet {
+    key: string;
+    private rules: string[] = [];
+    private provider: Gtk.CssProvider | null = null;
+    private display: Gdk.Display | null = null;
+    private isRegistered = false;
+    private hasPendingRules = false;
+    private updateScheduled = false;
+
+    constructor(options: StyleSheetOptions) {
+        this.key = options.key;
+    }
+
+    private ensureProvider(): void {
+        if (!this.provider) {
+            this.provider = new Gtk.CssProvider();
+            this.display = Gdk.DisplayManager.get().getDefaultDisplay();
+
+            if (this.display) {
+                Gtk.StyleContext.addProviderForDisplay(
+                    this.display,
+                    this.provider,
+                    STYLE_PROVIDER_PRIORITY_APPLICATION,
+                );
+                this.isRegistered = true;
+            }
+        }
+    }
+
+    private updateProvider(): void {
+        if (this.provider && this.rules.length > 0) {
+            const css = this.rules.join("\n");
+            this.provider.loadFromString(css);
+        }
+    }
+
+    private scheduleUpdate(): void {
+        if (this.updateScheduled) return;
+        this.updateScheduled = true;
+        queueMicrotask(() => {
+            this.updateScheduled = false;
+            this.ensureProvider();
+            this.updateProvider();
+        });
+    }
+
+    insert(rule: string): void {
+        this.rules.push(rule);
+
+        if (isStarted()) {
+            this.scheduleUpdate();
+        } else if (!this.hasPendingRules) {
+            this.hasPendingRules = true;
+            pendingSheets.push(this);
+        }
+    }
+
+    applyQueuedRules(): void {
+        if (this.rules.length > 0) {
+            this.ensureProvider();
+            this.updateProvider();
+        }
+        this.hasPendingRules = false;
+    }
+
+    flush(): void {
+        if (this.provider && this.display && this.isRegistered) {
+            Gtk.StyleContext.removeProviderForDisplay(this.display, this.provider);
+            this.isRegistered = false;
+        }
+
+        this.rules = [];
+        this.provider = null;
+        this.display = null;
+        this.hasPendingRules = false;
+        this.updateScheduled = false;
+    }
+
+    hydrate(_elements: unknown[]): void {}
+}