feat(nuxt): inject uno.css adjustable (#3448)

unocss · Dec 27, 2023 · da0e476 · da0e476
1 parent f3b58ac
commit da0e476
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/packages/nuxt/src/index.ts b/packages/nuxt/src/index.ts
@@ -8,7 +8,7 @@ import VitePlugin from '@unocss/vite'
 import type { NuxtPlugin } from '@nuxt/schema'
 import { loadConfig } from '@unocss/config'
 import type { UserConfig } from '@unocss/core'
-import { resolveOptions } from './options'
+import { resolveInjectPosition, resolveOptions } from './options'
 import type { UnocssNuxtOptions } from './types'
 
 export { UnocssNuxtOptions }
@@ -25,6 +25,7 @@ export default defineNuxtModule<UnocssNuxtOptions>({
     autoImport: true,
     preflight: false,
     components: true,
+    injectPosition: 'first',
 
     // presets
     uno: true,
@@ -37,15 +38,20 @@ export default defineNuxtModule<UnocssNuxtOptions>({
     // preset shortcuts
     resolveOptions(options)
 
-    options.mode ??= 'global'
-    const InjectModes: VitePluginConfig['mode'][] = ['global', 'dist-chunk']
-
     if (options.autoImport) {
+      options.mode ??= 'global'
+      const InjectModes: VitePluginConfig['mode'][] = ['global', 'dist-chunk']
+      nuxt.options.css = nuxt.options.css ?? []
+
+      if (InjectModes.includes(options.mode) && !nuxt.options.css.includes('uno.css')) {
+        const position = resolveInjectPosition(nuxt.options.css, options.injectPosition)
+        nuxt.options.css.splice(position, 0, 'uno.css')
+      }
+
       addPluginTemplate({
         filename: 'unocss.mjs',
         getContents: () => {
           const lines = [
-            InjectModes.includes(options.mode) ? 'import \'uno.css\'' : '',
             isNuxt2()
               ? 'export default () => {}'
               : 'import { defineNuxtPlugin } from \'#imports\'; export default defineNuxtPlugin(() => {})',

diff --git a/packages/nuxt/src/options.ts b/packages/nuxt/src/options.ts
@@ -36,3 +36,26 @@ export function resolveOptions(options: UnocssNuxtOptions) {
       options.content.pipeline.exclude.push(/\?macro=true/)
   }
 }
+
+export function resolveInjectPosition(css: string[], position: UnocssNuxtOptions['injectPosition']) {
+  if (typeof (position) === 'number')
+    return ~~Math.min(position, css.length + 1)
+
+  if (typeof (position) === 'string') {
+    switch (position) {
+      case 'first': return 0
+      case 'last': return css.length
+      default: throw new Error(`invalid literal: ${position}`)
+    }
+  }
+
+  if (position?.after !== undefined) {
+    const index = css.indexOf(position.after)
+    if (index === -1)
+      throw new Error(`\`after\` position specifies a file which does not exists on CSS stack: ${position.after}`)
+
+    return index + 1
+  }
+
+  throw new Error(`invalid position: ${JSON.stringify(position)}`)
+}
diff --git a/packages/nuxt/src/types.ts b/packages/nuxt/src/types.ts
@@ -30,6 +30,13 @@ export interface UnocssNuxtOptions extends UserConfig {
    */
   preflight?: boolean
 
+  /**
+   * Adjust the position of the `uno.css` injection. (Depends on `mode`)
+   *
+   * @default 'first'
+   */
+  injectPosition?: 'first' | 'last' | number | { after?: string }
+
   /**
    * Installing UnoCSS components
    * - `<UnoIcon>`