@gtkx/css 0.1.45 → 0.1.47

package/README.md

@@ -68,7 +68,7 @@ export const App = () => {
       defaultHeight={300}
       onCloseRequest={quit}
     >
-      <Box orientation={Orientation.VERTICAL} spacing={12} margin={20}>
+      <Box orientation={Orientation.VERTICAL} spacing={12} marginStart={20} marginEnd={20} marginTop={20} marginBottom={20}>
         <Label.Root label={`Count: ${count}`} />
         <Button
           label="Increment"

package/dist/cache.d.ts

@@ -1,2 +1,6 @@
 import type { EmotionCache } from "@emotion/cache";
+/**
+ * Creates and returns a singleton Emotion cache configured for GTK.
+ * Uses StyleSheet to inject styles into GTK's CssProvider.
+ */
 export declare const getGtkCache: () => EmotionCache;

package/dist/cache.js

@@ -1,6 +1,10 @@
 import createCache from "@emotion/cache";
 import { StyleSheet } from "./style-sheet.js";
 let gtkCache = null;
+/**
+ * Creates and returns a singleton Emotion cache configured for GTK.
+ * Uses StyleSheet to inject styles into GTK's CssProvider.
+ */
 export const getGtkCache = () => {
     if (!gtkCache) {
         const sheet = new StyleSheet({ key: "gtkx" });

package/dist/css.d.ts

@@ -2,7 +2,47 @@ import type { CSSInterpolation } from "@emotion/serialize";
 type CSSClassName = string & {
     __brand: "css";
 };
+/**
+ * Creates a CSS class from styles and injects them into GTK.
+ * Works like Emotion's css function but outputs to GTK's CssProvider.
+ *
+ * @example
+ * ```tsx
+ * const buttonStyle = css`
+ *   background: @theme_bg_color;
+ *   padding: 12px;
+ *   border-radius: 6px;
+ * `;
+ *
+ * <Button cssClasses={[buttonStyle]}>Styled Button</Button>
+ * ```
+ */
 export declare const css: (...args: CSSInterpolation[]) => CSSClassName;
+/**
+ * Merges multiple class names, filtering out falsy values.
+ *
+ * @example
+ * ```tsx
+ * const combined = cx(baseStyle, isActive && activeStyle, 'manual-class');
+ * <Button cssClasses={[combined]}>Button</Button>
+ * ```
+ */
 export declare const cx: (...classNames: (string | boolean | undefined | null)[]) => string;
+/**
+ * Injects global CSS styles.
+ * Note: In GTK, these styles apply to all widgets on the display.
+ *
+ * @example
+ * ```tsx
+ * injectGlobal`
+ *   window {
+ *     background: @theme_bg_color;
+ *   }
+ *   button {
+ *     border-radius: 6px;
+ *   }
+ * `;
+ * ```
+ */
 export declare const injectGlobal: (...args: CSSInterpolation[]) => void;
 export {};

package/dist/css.js

@@ -1,5 +1,20 @@
 import { serializeStyles } from "@emotion/serialize";
 import { getGtkCache } from "./cache.js";
+/**
+ * Creates a CSS class from styles and injects them into GTK.
+ * Works like Emotion's css function but outputs to GTK's CssProvider.
+ *
+ * @example
+ * ```tsx
+ * const buttonStyle = css`
+ *   background: @theme_bg_color;
+ *   padding: 12px;
+ *   border-radius: 6px;
+ * `;
+ *
+ * <Button cssClasses={[buttonStyle]}>Styled Button</Button>
+ * ```
+ */
 export const css = (...args) => {
     const cache = getGtkCache();
     const serialized = serializeStyles(args, cache.registered);
@@ -11,7 +26,32 @@ export const css = (...args) => {
     }
     return className;
 };
+/**
+ * Merges multiple class names, filtering out falsy values.
+ *
+ * @example
+ * ```tsx
+ * const combined = cx(baseStyle, isActive && activeStyle, 'manual-class');
+ * <Button cssClasses={[combined]}>Button</Button>
+ * ```
+ */
 export const cx = (...classNames) => classNames.filter((cn) => typeof cn === "string" && cn.length > 0).join(" ");
+/**
+ * Injects global CSS styles.
+ * Note: In GTK, these styles apply to all widgets on the display.
+ *
+ * @example
+ * ```tsx
+ * injectGlobal`
+ *   window {
+ *     background: @theme_bg_color;
+ *   }
+ *   button {
+ *     border-radius: 6px;
+ *   }
+ * `;
+ * ```
+ */
 export const injectGlobal = (...args) => {
     const cache = getGtkCache();
     const serialized = serializeStyles(args, cache.registered);

package/dist/style-sheet.d.ts

@@ -5,6 +5,12 @@ type StyleSheetOptions = {
     speedy?: boolean;
     prepend?: boolean;
 };
+/**
+ * Custom StyleSheet implementation for Emotion that outputs to GTK's CssProvider.
+ * Implements Emotion's StyleSheet interface to enable CSS-in-JS with GTK widgets.
+ *
+ * Rules are queued until GTK is initialized, then applied automatically.
+ */
 export declare class StyleSheet {
     key: string;
     private rules;

package/dist/style-sheet.js

@@ -12,6 +12,12 @@ const flushPendingStyles = () => {
     pendingSheets.length = 0;
 };
 events.once("start", flushPendingStyles);
+/**
+ * Custom StyleSheet implementation for Emotion that outputs to GTK's CssProvider.
+ * Implements Emotion's StyleSheet interface to enable CSS-in-JS with GTK widgets.
+ *
+ * Rules are queued until GTK is initialized, then applied automatically.
+ */
 export class StyleSheet {
     key;
     rules = [];

package/package.json

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