@studiocms/ui 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.",
   "repository": {
     "type": "git",
@@ -21,7 +21,8 @@
     "astro-ui-library",
     "astro-components",
     "studiocms",
-    "ui-library"
+    "ui-library",
+    "astro-integration"
   ],
   "homepage": "https://ui.studiocms.dev",
   "publishConfig": {
@@ -42,8 +43,9 @@
     "./types": "./src/types/index.ts"
   },
   "dependencies": {
+    "@iconify-json/heroicons": "^1.2.1",
     "@iconify/utils": "^2.1.33",
-    "@iconify-json/heroicons": "^1.2.1"
+    "pathe": "^1.1.2"
   },
   "peerDependencies": {
     "astro": "^4.5 || ^5.0.0-beta.0"

package/src/integration.ts

@@ -1,5 +1,6 @@
 import type { AstroIntegration } from 'astro';
 import { createResolver } from './utils/create-resolver';
+import { viteVirtualModulePluginBuilder } from './utils/virtual-module-plugin-builder';
 
 // biome-ignore lint/complexity/noBannedTypes: Will be implemented in v0.3.0
 type Options = {};
@@ -7,11 +8,23 @@ type Options = {};
 export default function integration(options: Options = {}): AstroIntegration {
 	const { resolve } = createResolver(import.meta.url);
 
+	const globalCss = viteVirtualModulePluginBuilder(
+		'studiocms:ui/global-css',
+		'sui-global-css',
+		`import '${resolve('./css/global.css')}'`
+	);
+
 	return {
 		name: '@studiocms/ui',
 		hooks: {
-			'astro:config:setup': ({ injectScript }) => {
-				injectScript('page-ssr', `import '${resolve('./css/global.css')}'`);
+			'astro:config:setup': ({ injectScript, updateConfig }) => {
+				updateConfig({
+					vite: {
+						plugins: [globalCss()],
+					},
+				});
+
+				injectScript('page-ssr', `import 'studiocms:ui/global-css';`);
 			},
 		},
 	};

package/src/utils/create-resolver.ts

@@ -1,5 +1,5 @@
-import { dirname, resolve } from 'node:path'; // Swapped out pathe for node:path to cut down on dependencies
 import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'pathe';
 
 /**
  * From the Astro Integration Kit (https://astro-integration-kit.netlify.app/).

package/src/utils/virtual-module-plugin-builder.ts

@@ -0,0 +1,37 @@
+import type { AstroConfig } from 'astro';
+
+type VitePlugin = Required<AstroConfig['vite']>['plugins'][number];
+
+/**
+ * Builds a Vite plugin that creates a virtual module.
+ *
+ * @param moduleId - The ID of the virtual module.
+ * @param name - The name of the plugin.
+ * @param moduleContent - The content of the virtual module.
+ * @returns A Vite plugin that resolves and loads the virtual module.
+ */
+export function viteVirtualModulePluginBuilder(
+	moduleId: string,
+	name: string,
+	moduleContent: string
+) {
+	return function modulePlugin(): VitePlugin {
+		const resolvedVirtualModuleId = `\0${moduleId}`; // Prefix with \0 to avoid conflicts
+
+		return {
+			name,
+			resolveId(id) {
+				if (id === moduleId) {
+					return resolvedVirtualModuleId;
+				}
+				return;
+			},
+			load(id) {
+				if (id === resolvedVirtualModuleId) {
+					return moduleContent;
+				}
+				return;
+			},
+		};
+	};
+}