@gtkx/css 0.14.0 → 0.16.0

package/README.md

@@ -71,6 +71,7 @@ render(<App />, "com.example.counter");
 - **React 19** — Hooks, concurrent features, and the component model you know
 - **Native GTK4 widgets** — Real native controls, not web components in a webview
 - **Adwaita support** — Modern GNOME styling with Libadwaita components
+- **Declarative animations** — Framer Motion-like API using native Adwaita animations
 - **Hot Module Replacement** — Fast refresh during development
 - **TypeScript first** — Full type safety with auto-generated bindings
 - **CSS-in-JS styling** — Familiar styling patterns adapted for GTK
@@ -80,11 +81,11 @@ render(<App />, "com.example.counter");
 
 Explore complete applications in the [`examples/`](./examples) directory:
 
-- **[browser](./examples/browser)** — Simple browser using WebKitWebView
 - **[gtk-demo](./examples/gtk-demo)** — Full replica of the official GTK demo app
 - **[hello-world](./examples/hello-world)** — Minimal application showing a counter
 - **[todo](./examples/todo)** — Full-featured todo application with Adwaita styling and testing
 - **[x-showcase](./examples/x-showcase)** — Showcase of all x.\* virtual components
+- **[browser](./examples/browser)** — Simple browser using WebKitWebView
 - **[deploying](./examples/deploying)** — Example of packaging and distributing a GTKX app
 
 ## Documentation

package/dist/css.d.ts

@@ -43,12 +43,12 @@ type CSSClassName = string & {
  */
 export declare const css: (...args: CSSInterpolation[]) => CSSClassName;
 /**
- * Combines multiple class names into a single space-separated string.
+ * 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 Space-separated string of valid class names
+ * @returns Array of valid class names
  *
  * @example
  * ```tsx
@@ -58,12 +58,12 @@ export declare const css: (...args: CSSInterpolation[]) => CSSClassName;
  * const active = css({ backgroundColor: "@accent_bg_color" });
  *
  * <GtkButton
- *   cssClasses={[cx(base, isActive && active, "custom-class")]}
+ *   cssClasses={cx(base, isActive && active, "custom-class")}
  *   label="Button"
  * />
  * ```
  */
-export declare const cx: (...classNames: (string | boolean | undefined | null)[]) => string;
+export declare const cx: (...classNames: (string | boolean | undefined | null)[]) => string[];
 /**
  * Injects global CSS styles without a wrapping class.
  *

package/dist/css.js

@@ -4,48 +4,37 @@ function expandNestedRules(styles, className) {
     const selector = `.${className}`;
     const expandedStyles = styles.replace(/&/g, selector);
     const rules = [];
-    let currentRule = "";
+    let topLevelProperties = "";
+    let currentSegment = "";
     let braceDepth = 0;
-    let inSelector = false;
-    let mainProperties = "";
     for (let i = 0; i < expandedStyles.length; i++) {
         const char = expandedStyles[i];
         if (char === "{") {
+            currentSegment += 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;
+            currentSegment += char;
+            if (braceDepth === 0) {
+                rules.push(currentSegment.trim());
+                currentSegment = "";
             }
         }
-        else if (braceDepth === 0 && char === "." && expandedStyles.slice(i).startsWith(selector)) {
-            if (mainProperties.length > 0 || currentRule.length > 0) {
-                mainProperties += currentRule;
-                currentRule = "";
-            }
-            currentRule += char;
+        else if (char === ";" && braceDepth === 0) {
+            topLevelProperties += currentSegment + char;
+            currentSegment = "";
         }
         else {
-            currentRule += char;
+            currentSegment += char;
         }
     }
-    if (currentRule.trim()) {
-        mainProperties += currentRule;
+    if (currentSegment.trim() && braceDepth === 0) {
+        topLevelProperties += currentSegment;
     }
     const allRules = [];
-    if (mainProperties.trim()) {
-        allRules.push(`${selector}{${mainProperties.trim()}}`);
+    if (topLevelProperties.trim()) {
+        allRules.push(`${selector}{${topLevelProperties.trim()}}`);
     }
     allRules.push(...rules);
     return allRules.join("\n");
@@ -99,12 +88,12 @@ export const css = (...args) => {
     return className;
 };
 /**
- * Combines multiple class names into a single space-separated string.
+ * 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 Space-separated string of valid class names
+ * @returns Array of valid class names
  *
  * @example
  * ```tsx
@@ -114,12 +103,12 @@ export const css = (...args) => {
  * const active = css({ backgroundColor: "@accent_bg_color" });
  *
  * <GtkButton
- *   cssClasses={[cx(base, isActive && active, "custom-class")]}
+ *   cssClasses={cx(base, isActive && active, "custom-class")}
  *   label="Button"
  * />
  * ```
  */
-export const cx = (...classNames) => classNames.filter((cn) => typeof cn === "string" && cn.length > 0).join(" ");
+export const cx = (...classNames) => classNames.filter((cn) => typeof cn === "string" && cn.length > 0);
 /**
  * Injects global CSS styles without a wrapping class.
  *

package/dist/style-sheet.js

@@ -12,7 +12,7 @@ const flushPendingStyles = () => {
 const registerStartListener = () => {
     events.once("start", flushPendingStyles);
 };
-if (!isStarted()) {
+if (!isStarted) {
     registerStartListener();
 }
 export class StyleSheet {
@@ -43,7 +43,7 @@ export class StyleSheet {
     }
     insert(rule) {
         this.rules.push(rule);
-        if (isStarted()) {
+        if (isStarted) {
             this.ensureProvider();
             this.updateProvider();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/css",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Emotion-style CSS-in-JS for GTKX applications",
   "keywords": [
     "gtkx",
@@ -39,10 +39,10 @@
   "dependencies": {
     "@emotion/cache": "^11.14.0",
     "@emotion/serialize": "^1.3.3",
-    "@gtkx/ffi": "0.14.0"
+    "@gtkx/ffi": "0.16.0"
   },
   "devDependencies": {
-    "@gtkx/vitest": "0.14.0"
+    "@gtkx/vitest": "0.16.0"
   },
   "scripts": {
     "build": "tsc -b && cp ../../README.md .",