@gjsify/rolldown-plugin-gjsify 0.3.15 → 0.3.16

package/lib/app/gjs.js

@@ -122,7 +122,11 @@ export const setupForGjs = async (input) => {
         }),
         blueprintPlugin(),
         deepkitPlugin({ reflection: input.pluginOptions.reflection }),
-        cssAsStringPlugin(),
+        // GTK4's CSS engine is much older than browser engines — its
+        // parser predates nesting + many modern selectors. Targeting
+        // `firefox: 60 << 16` makes lightningcss flatten the source
+        // into the subset GTK4 understands.
+        cssAsStringPlugin({ targets: { firefox: 60 << 16 } }),
         nodeModulesPathRewritePlugin({ bundleDir }),
         processStubPlugin({ userBanner: input.userBanner }),
         // resolveShebangLine returns null when disabled (false/undefined) and

package/lib/plugins/css-as-string.d.ts

@@ -1,2 +1,19 @@
 import type { Plugin } from 'rolldown';
-export declare function cssAsStringPlugin(): Plugin;
+export interface CssAsStringOptions {
+    /**
+     * lightningcss browser targets passed to `bundleAsync`. When set,
+     * nesting + modern syntax are lowered for the given engines. The
+     * GJS orchestrator defaults this to `{ firefox: 60 << 16 }` to
+     * match the GTK4 CSS parser. Omit or leave undefined to skip
+     * lowering (output stays as-authored except for `@import` inlining).
+     */
+    targets?: import('lightningcss').Targets;
+    /**
+     * When true (default), `@import` statements are resolved by
+     * lightningcss `bundleAsync`. Set false to fall back to a plain
+     * `readFile` — useful only when you want to keep `@import` strings
+     * verbatim in the bundled JS (rare).
+     */
+    bundle?: boolean;
+}
+export declare function cssAsStringPlugin(options?: CssAsStringOptions): Plugin;

package/lib/plugins/css-as-string.js

@@ -12,18 +12,27 @@
 //
 // — the canonical pattern for `Gtk.CssProvider` under GJS.
 //
-// `@import` resolution is left to the user / CSS preprocessor. For simple
-// app CSS this is fine; for @import-heavy CSS, run a preprocessor (e.g.
-// sass / postcss) ahead of `gjsify build` so the input file is already
-// flat.
+// `@import` resolution + nesting/modern-syntax lowering are handled via
+// lightningcss `bundleAsync`. The defaults work for the common case
+// (resolve `@import`s, no targeting); the `--app gjs` orchestrator passes
+// `targets: { firefox: 60 << 16 }` so nesting + modern selectors get
+// flattened to GTK4-CSS-engine-compatible output. Targeting is opt-in —
+// a missing `targets` keeps the source pristine.
+//
+// `lightningcss` is a regular dependency of this package; the plugin
+// imports it lazily so missing-arch installs surface the underlying
+// load error instead of crashing every gjsify build.
 import { readFile } from 'node:fs/promises';
-export function cssAsStringPlugin() {
+export function cssAsStringPlugin(options = {}) {
+    const { targets, bundle = true } = options;
     return {
         name: 'gjsify-css-as-string',
         load: {
             filter: { id: /\.css$/ },
             async handler(id) {
-                const code = await readFile(id, 'utf8');
+                const code = bundle
+                    ? new TextDecoder('utf-8').decode(await loadAndBundleCss(id, targets))
+                    : await readFile(id, 'utf8');
                 return {
                     code: `export default ${JSON.stringify(code)};`,
                     moduleType: 'js',
@@ -32,3 +41,13 @@ export function cssAsStringPlugin() {
         },
     };
 }
+async function loadAndBundleCss(filename, targets) {
+    const { bundleAsync } = await import('lightningcss');
+    const result = await bundleAsync({
+        filename,
+        targets,
+        minify: false,
+        errorRecovery: true,
+    });
+    return result.code;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/rolldown-plugin-gjsify",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "description": "Rolldown / Rollup / Vite plugin orchestrator for GJS, Node, and Browser targets",
   "type": "module",
   "main": "lib/index.js",
@@ -42,10 +42,10 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@gjsify/resolve-npm": "^0.3.15",
-    "@gjsify/rolldown-plugin-deepkit": "^0.3.15",
-    "@gjsify/rolldown-plugin-pnp": "^0.3.15",
-    "@gjsify/vite-plugin-blueprint": "^0.3.15",
+    "@gjsify/resolve-npm": "^0.3.16",
+    "@gjsify/rolldown-plugin-deepkit": "^0.3.16",
+    "@gjsify/rolldown-plugin-pnp": "^0.3.16",
+    "@gjsify/vite-plugin-blueprint": "^0.3.16",
     "@rollup/pluginutils": "^5.1.4",
     "acorn": "^8.14.0",
     "acorn-walk": "^8.3.4",

package/src/app/gjs.ts

@@ -165,7 +165,11 @@ export const setupForGjs = async (input: GjsFactoryInput): Promise<GjsBuildConfi
         }),
         blueprintPlugin() as RolldownPluginOption,
         deepkitPlugin({ reflection: input.pluginOptions.reflection }),
-        cssAsStringPlugin(),
+        // GTK4's CSS engine is much older than browser engines — its
+        // parser predates nesting + many modern selectors. Targeting
+        // `firefox: 60 << 16` makes lightningcss flatten the source
+        // into the subset GTK4 understands.
+        cssAsStringPlugin({ targets: { firefox: 60 << 16 } }),
         nodeModulesPathRewritePlugin({ bundleDir }),
         processStubPlugin({ userBanner: input.userBanner }),
         // resolveShebangLine returns null when disabled (false/undefined) and

package/src/plugins/css-as-string.ts

@@ -12,21 +12,48 @@
 //
 // — the canonical pattern for `Gtk.CssProvider` under GJS.
 //
-// `@import` resolution is left to the user / CSS preprocessor. For simple
-// app CSS this is fine; for @import-heavy CSS, run a preprocessor (e.g.
-// sass / postcss) ahead of `gjsify build` so the input file is already
-// flat.
+// `@import` resolution + nesting/modern-syntax lowering are handled via
+// lightningcss `bundleAsync`. The defaults work for the common case
+// (resolve `@import`s, no targeting); the `--app gjs` orchestrator passes
+// `targets: { firefox: 60 << 16 }` so nesting + modern selectors get
+// flattened to GTK4-CSS-engine-compatible output. Targeting is opt-in —
+// a missing `targets` keeps the source pristine.
+//
+// `lightningcss` is a regular dependency of this package; the plugin
+// imports it lazily so missing-arch installs surface the underlying
+// load error instead of crashing every gjsify build.
 
 import { readFile } from 'node:fs/promises';
 import type { Plugin } from 'rolldown';
 
-export function cssAsStringPlugin(): Plugin {
+export interface CssAsStringOptions {
+    /**
+     * lightningcss browser targets passed to `bundleAsync`. When set,
+     * nesting + modern syntax are lowered for the given engines. The
+     * GJS orchestrator defaults this to `{ firefox: 60 << 16 }` to
+     * match the GTK4 CSS parser. Omit or leave undefined to skip
+     * lowering (output stays as-authored except for `@import` inlining).
+     */
+    targets?: import('lightningcss').Targets;
+    /**
+     * When true (default), `@import` statements are resolved by
+     * lightningcss `bundleAsync`. Set false to fall back to a plain
+     * `readFile` — useful only when you want to keep `@import` strings
+     * verbatim in the bundled JS (rare).
+     */
+    bundle?: boolean;
+}
+
+export function cssAsStringPlugin(options: CssAsStringOptions = {}): Plugin {
+    const { targets, bundle = true } = options;
     return {
         name: 'gjsify-css-as-string',
         load: {
             filter: { id: /\.css$/ },
             async handler(id: string) {
-                const code = await readFile(id, 'utf8');
+                const code = bundle
+                    ? new TextDecoder('utf-8').decode(await loadAndBundleCss(id, targets))
+                    : await readFile(id, 'utf8');
                 return {
                     code: `export default ${JSON.stringify(code)};`,
                     moduleType: 'js' as const,
@@ -35,3 +62,17 @@ export function cssAsStringPlugin(): Plugin {
         },
     };
 }
+
+async function loadAndBundleCss(
+    filename: string,
+    targets: import('lightningcss').Targets | undefined,
+): Promise<Uint8Array> {
+    const { bundleAsync } = await import('lightningcss');
+    const result = await bundleAsync({
+        filename,
+        targets,
+        minify: false,
+        errorRecovery: true,
+    });
+    return result.code;
+}