Allow users to import the globalCSS themselves

.changeset/kind-olives-cross.md

@@ -0,0 +1,12 @@
+---
+"@studiocms/ui": patch
+---
+
+Add option to disable global CSS injection and allow users to import the global css themselves.
+
+Basic Example of how to import:
+```astro
+---
+import "studiocms:ui/global-css";
+---
+```

.vscode/settings.json

@@ -28,6 +28,7 @@
     "themetoggle",
     "Thum",
     "tsconfigs",
+    "twoslash",
     "vite",
     "withstudiocms"
   ]

docs/.gitignore

@@ -22,7 +22,7 @@ pnpm-debug.log*
 .DS_Store
 
 # Changelog documentation
-src/content/docs/docs/changelog.md
+docs/changelog.md
 
 # Eleventy cache
 .cache/

docs/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "pnpm make-changelog && astro dev",
+    "dev": "astro dev",
     "start": "pnpm dev",
     "check": "astro check",
     "build": "pnpm make-changelog && astro build",
@@ -28,7 +28,7 @@
     "@types/mdast": "^4.0.4",
     "astro": "catalog:",
     "astro-embed": "^0.9.0",
-    "expressive-code-twoslash": "^0.3.0",
+    "expressive-code-twoslash": "^0.3.1",
     "hast": "1.0.0",
     "hast-util-select": "^6.0.3",
     "hast-util-to-string": "^3.0.1",

docs/src/content/docs/docs/changelog.md

@@ -8,6 +8,26 @@ editUrl: false
 This document contains release notes for the `@studiocms/ui` package.
 For more information, see the [CHANGELOG file](https://github.com/withstudiocms/ui/blob/main/packages/studiocms_ui/CHANGELOG.md)
 
+## 0.4.6
+
+- [#52](https://github.com/withstudiocms/ui/pull/52) [`65eea2c`](https://github.com/withstudiocms/ui/commit/65eea2cff78c2c38314de9b3fe4b65173c81ea90) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Update Input component to allow search type
+
+## 0.4.5
+
+- [#50](https://github.com/withstudiocms/ui/pull/50) [`51d5565`](https://github.com/withstudiocms/ui/commit/51d556504790741ad3b6cd23092b9be0a92e8157) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - fix weird icon sizing during build
+
+## 0.4.4
+
+- [#48](https://github.com/withstudiocms/ui/pull/48) [`4a43e03`](https://github.com/withstudiocms/ui/commit/4a43e031b2395ca1cf72c8343638f5836178944e) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Fix Icon component requiring functions from Iconify Utils lib during runtime as well as extend usage possibilities.
+
+  NEW:
+
+  - `IconBase` component exported from `studiocms:ui/components` which allows passing custom image collections from Iconify.
+
+  Updated:
+
+  - `Icon` component to use this new system.
+
 ## 0.4.3
 
 - [#46](https://github.com/withstudiocms/ui/pull/46) [`29ea967`](https://github.com/withstudiocms/ui/commit/29ea967c2cee935715de0f4787b603d69997e84b) Thanks [@louisescher](https://github.com/louisescher)! - Fixes icons getting cut off in certain circumstances and changes dropdown links to include icons

docs/src/content/docs/docs/guides/customization.mdx

@@ -41,6 +41,35 @@ If you make significant changes to the colors, remember to also adjust the light
 Below, you will find all the CSS variables used in StudioCMS UI. Always make sure to provide them as 
 HSL values without commas. You can use them in your CSS like this: `background-color: hsl(var(--background-base));`.
 
+## Disabling CSS Injection
+
+If you want to disable the CSS injection, you can do so by setting the `noInjectCSS` option to `true`:
+
+```ts twoslash showLinenumbers title="astro.config.mjs" {7}
+import { defineConfig } from 'astro/config';
+import ui from '@studiocms/ui';
+
+export default defineConfig({
+  integrations: [
+    ui({
+      noInjectCSS: true,
+    })
+  ]
+});
+```
+
+You can then include the CSS in your project manually. This is useful if you want to mix StudioCMS UI with other CSS frameworks, or if you are using the UI styling only for a subset of your components.
+
+```astro showLinenumbers title="src/layouts/SUILayout.astro"
+---
+// Using the virtual module to import the CSS file (recommended)
+import "studiocms:ui/global-css";
+
+// Alternatively, import the CSS file directly from the package
+import "@studiocms/ui/css/global.css";
+---
+```
+
 ## Interactive Editing
 
 You can edit the colors in your own project during development using the dev toolbar. In the toolbar, you will find a 

packages/studiocms_ui/src/index.ts

@@ -13,6 +13,16 @@ type Options = {
 	 * @link https://ui.studiocms.dev/docs/guides/customization/
 	 */
 	customCss?: string;
+
+	/**
+	 * Disable CSS Generation and require manual addition of the global CSS
+	 *
+	 * @example
+	 * ```ts
+	 * import 'studiocms:ui/global-css';
+	 * ```
+	 */
+	noInjectCSS?: boolean;
 };
 
 export default function integration(options: Options = {}): AstroIntegration {
@@ -98,7 +108,9 @@ export default function integration(options: Options = {}): AstroIntegration {
 					},
 				});
 
-				injectScript('page-ssr', `import 'studiocms:ui/global-css';`);
+				if (!options.noInjectCSS) {
+					injectScript('page-ssr', `import 'studiocms:ui/global-css';`);
+				}
 
 				if (options.customCss) {
 					injectScript('page-ssr', `import 'studiocms:ui/custom-css';`);