From f96eb5e8b794af75303a98fa38e5285bcf928614 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20=C4=8Cern=C3=BD?=
 <112722215+CernyMatej@users.noreply.github.com>
Date: Tue, 23 Jan 2024 10:47:34 +0100
Subject: [PATCH] feat(module): add option to disable global css styles (#1266)

---
 docs/content/1.getting-started/2.installation.md | 13 +++++++------
 src/module.ts                                    | 11 +++++++++--
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
index 15b803f654..1774227d74 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -227,12 +227,13 @@ You can also add the following to your `.vscode/settings.json` to enable Intelli
 
 ## Options
 
-| Key                      | Default                | Description                                      |
-| ------------------------ | ---------------------- | ------------------------------------------------ |
-| `prefix`                 | `u`                    | Define the prefix of the imported components.    |
-| `global`                 | `false`                | Expose components globally.                      |
-| `icons`                  | `['heroicons']`        | Icon collections to load.                        |
-| `safelistColors`         | `['primary']`          | Force safelisting of colors to need be purged.   |
+| Key                   | Default         | Description                                                                                                 |
+|-----------------------|-----------------|-------------------------------------------------------------------------------------------------------------|
+| `prefix`              | `u`             | Define the prefix of the imported components.                                                               |
+| `global`              | `false`         | Expose components globally.                                                                                 |
+| `icons`               | `['heroicons']` | Icon collections to load.                                                                                   |
+| `safelistColors`      | `['primary']`   | Force safelisting of colors to need be purged.                                                              |
+| `disableGlobalStyles` | `false`         | Disable [global CSS styles](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.css) injected by the module. |
 
 Configure options in your `nuxt.config.ts` as such:
 
diff --git a/src/module.ts b/src/module.ts
index caa560db49..2b70153a3f 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -54,6 +54,10 @@ export interface ModuleOptions {
   icons: CollectionNames[] | 'all' | IconsPluginOptions
 
   safelistColors?: string[]
+  /**
+   * Disables the global css styles added by the module.
+   */
+  disableGlobalStyles?: boolean
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -68,7 +72,8 @@ export default defineNuxtModule<ModuleOptions>({
   defaults: {
     prefix: 'U',
     icons: ['heroicons'],
-    safelistColors: ['primary']
+    safelistColors: ['primary'],
+    disableGlobalStyles: false
   },
   async setup (options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
@@ -80,7 +85,9 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.options.alias['#ui'] = runtimeDir
 
-    nuxt.options.css.push(resolve(runtimeDir, 'ui.css'))
+    if (!options.disableGlobalStyles) {
+      nuxt.options.css.push(resolve(runtimeDir, 'ui.css'))
+    }
 
     // @ts-ignore
     nuxt.hook('tailwindcss:config', function (tailwindConfig) {