feat(module): add option to disable global css styles (#1266)

nuxt · Jan 23, 2024 · f96eb5e · f96eb5e · vercel · Jan 23, 2024
1 parent 865c492
commit f96eb5e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git 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
@@ -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) {