@peachy/plugin-css 0.0.11

package/README.md

@@ -0,0 +1,31 @@
+# @peachy/plugin-css
+
+A Rolldown plugin that allows you to import CSS modules.
+
+## Usage
+
+First, create your CSS module:
+
+```css
+/* styles.css */
+.heroImage {
+  border-radius: 12px;
+  border: 1px solid;
+}
+```
+
+Then you can import it in your code and use it:
+
+```ts
+/* app.ts */
+
+import Gtk from "gi://Gtk?version=4.0";
+
+import styles from "./styles.css";
+
+const picture = new Gtk.Picture({
+  cssClasses: [styles.heroImage],
+});
+```
+
+Your image will now have a border and rounded corners.

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import { Plugin } from "rolldown";
+
+//#region src/index.d.ts
+declare function cssPlugin({
+  prod
+}: CssPluginOptions): Plugin;
+interface CssPluginOptions {
+  prod: boolean;
+}
+//#endregion
+export { CssPluginOptions, cssPlugin };

package/dist/index.mjs

@@ -0,0 +1,56 @@
+import { basename } from "node:path";
+import { transform } from "lightningcss";
+
+//#region src/index.ts
+function cssPlugin({ prod }) {
+	return {
+		name: "@peachy/plugin-css#modules",
+		load: {
+			filter: { id: /\.module\.css$/ },
+			async handler(id) {
+				const { code, map, exports = {} } = transform({
+					code: await this.fs.readFile(id),
+					minify: prod,
+					cssModules: true,
+					filename: id,
+					sourceMap: true
+				});
+				const originalBasename = basename(id);
+				const sourceMapName = originalBasename.replace(/\.module\.css$/, ".css.map");
+				const cssId = this.emitFile({
+					type: "asset",
+					fileName: originalBasename.replace(/\.module\.css$/, ".css"),
+					source: code + `\n\n/*# sourceMappingURL=${sourceMapName} */`
+				});
+				if (map) this.emitFile({
+					type: "asset",
+					fileName: sourceMapName,
+					source: map
+				});
+				const classNameMappings = Object.fromEntries(Object.entries(exports).map(([key, value]) => [key, value.name]));
+				return {
+					code: [
+						`import GLib from "gi://GLib?version=2.0";`,
+						`import Gtk from "gi://Gtk?version=4.0";`,
+						`import Gdk from "gi://Gdk?version=4.0";`,
+						`Gtk.init();`,
+						`const provider = new Gtk.CssProvider();`,
+						`provider.load_from_path(import.meta.ROLLUP_FILE_URL_${cssId})`,
+						`Gtk.StyleContext.add_provider_for_display(Gdk.Display.get_default(), provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);`,
+						`export default ${JSON.stringify(classNameMappings)};`
+					].join("\n"),
+					moduleType: "js"
+				};
+			}
+		},
+		renderChunk(code) {
+			return {
+				code: code.replace(/new\s+URL\(\s*['"]([^'"]+)['"]\s*,\s*import\.meta\.url\s*\)\.href/g, (_, path) => `GLib.build_filenamev([GLib.path_get_dirname(import.meta.url.slice(7)), '${path}'])`),
+				map: null
+			};
+		}
+	};
+}
+
+//#endregion
+export { cssPlugin };

package/dist/modules.d.mts

@@ -0,0 +1,5 @@
+//#region src/modules.d.ts
+declare module "*.module.css" {
+  const content: Record<string, string>;
+  export default content;
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@peachy/plugin-css",
+  "version": "0.0.11",
+  "description": "Import CSS files into your GJS applications",
+  "keywords": [],
+  "license": "MIT",
+  "author": "Angelo Verlain <hey@vixalien.com>",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    },
+    "./modules": {
+      "types": "./dist/modules.d.mts"
+    }
+  },
+  "dependencies": {
+    "lightningcss": "^1.31.1"
+  },
+  "devDependencies": {
+    "@types/node": "^25.2.2",
+    "rolldown": "1.0.0-rc.3",
+    "tsdown": "0.20.3",
+    "typescript": "^5.9.3",
+    "@peachy/internal-utilities": "0.0.0"
+  },
+  "peerDependencies": {
+    "rolldown": "1.0.0-beta.58"
+  },
+  "scripts": {
+    "build": "tsdown src/index.ts src/modules.d.ts --dts"
+  }
+}