@maz-ui/nuxt 4.0.0-beta.20 → 4.0.0-beta.22

package/dist/module.d.mts

@@ -10,13 +10,7 @@ interface MazUiNuxtThemeOptions extends MazUiThemeOptions {
      * @description Inject full CSS on server-side to prevent FOUC on client-side
      * @default true
      */
-    injectFullCSSOnServer?: boolean;
-    /**
-     * Spa mode
-     * @description Enable full CSS injection on client-side for app with SSR disabled on some pages
-     * @default false
-     */
-    spa?: boolean;
+    injectAllCSSOnServer?: boolean;
 }
 interface MazUiNuxtOptions {
     /**

package/dist/module.json

@@ -4,9 +4,9 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "4.0.0-beta.20",
+  "version": "4.0.0-beta.22",
   "builder": {
-    "@nuxt/module-builder": "1.0.1",
+    "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"
   }
 }

package/dist/module.mjs

@@ -99,8 +99,7 @@ const defaults = {
     strategy: "hybrid",
     darkModeStrategy: "class",
     colorMode: "auto",
-    mode: "both",
-    spa: false
+    mode: "both"
   },
   translations: {
     locale: "en",

package/dist/runtime/plugins/theme.js

@@ -1,7 +1,5 @@
-import { generateFullCSS, mergePresets } from "@maz-ui/themes";
 import { MazUiTheme } from "@maz-ui/themes/plugin";
-import { getPreset } from "@maz-ui/themes/utils";
-import { generateCriticalCSS } from "@maz-ui/themes/utils/css-generator";
+import { CSS_IDS, generateCriticalCSS, generateFullCSS, getPreset, mergePresets } from "@maz-ui/themes/utils";
 import { defineNuxtPlugin, useCookie, useHead, useRequestHeaders } from "nuxt/app";
 function getServerInitialColorMode(colorMode) {
   if (colorMode !== "auto") {
@@ -23,6 +21,35 @@ function getServerInitialColorMode(colorMode) {
   }
   return "auto";
 }
+function injectThemeCSS({
+  mode,
+  preset,
+  config
+}) {
+  const cssOptions = {
+    mode,
+    darkSelectorStrategy: config.darkModeStrategy ?? "class",
+    prefix: "maz"
+  };
+  const shouldInjectCriticalCSSOnServer = config.injectCriticalCSS && import.meta.server;
+  const criticalCSSAlreadyInjected = import.meta.client && document.getElementById(CSS_IDS.CRITICAL);
+  const shouldInjectCriticalCSSOnClient = config.injectCriticalCSS && import.meta.client && !criticalCSSAlreadyInjected;
+  if (shouldInjectCriticalCSSOnServer || shouldInjectCriticalCSSOnClient) {
+    const criticalCSS = generateCriticalCSS(preset, cssOptions);
+    useHead({
+      style: [{ innerHTML: criticalCSS, id: CSS_IDS.CRITICAL }]
+    });
+  }
+  const shouldInjectFullCSSOnServer = config.injectAllCSSOnServer && import.meta.server;
+  const fullCSSAlreadyInjected = import.meta.client && document.getElementById(CSS_IDS.FULL);
+  const shouldInjectFullCSSOnClient = config.injectFullCSS && import.meta.client && !fullCSSAlreadyInjected;
+  if (shouldInjectFullCSSOnServer || shouldInjectFullCSSOnClient) {
+    const fullCSS = generateFullCSS(preset, cssOptions);
+    useHead({
+      style: [{ innerHTML: fullCSS, id: CSS_IDS.FULL }]
+    });
+  }
+}
 export default defineNuxtPlugin(async ({ vueApp, $config }) => {
   const options = $config.public.mazUi.theme;
   let preset = await getPreset(options?.preset);
@@ -34,56 +61,34 @@ export default defineNuxtPlugin(async ({ vueApp, $config }) => {
     darkModeStrategy: "class",
     colorMode: options.mode && options.mode !== "both" ? options.mode : options.colorMode ?? "auto",
     mode: "both",
-    injectFullCSSOnServer: true,
+    injectAllCSSOnServer: false,
+    injectCriticalCSS: true,
+    injectFullCSS: true,
+    overrides: {},
     ...options,
     preset
   };
   const colorMode = config.mode !== "both" ? config.mode : getServerInitialColorMode(config.colorMode);
   const isDark = colorMode === "auto" && config.mode === "both" ? getServerInitialColorMode(config.colorMode) === "dark" : colorMode === "dark" || config.mode === "dark";
-  const themeState = {
-    currentPreset: config.preset,
-    colorMode,
-    mode: config.mode,
-    isDark,
-    strategy: config.strategy,
-    darkModeStrategy: config.darkModeStrategy
-  };
-  if (import.meta.server) {
-    const cssOptions = {
-      mode: themeState.mode,
-      darkSelectorStrategy: config.darkModeStrategy ?? "class",
-      prefix: "maz"
-    };
-    const criticalCSS = generateCriticalCSS(themeState.currentPreset, cssOptions);
+  if (isDark && config.darkModeStrategy === "class") {
     useHead({
-      style: [
-        {
-          innerHTML: criticalCSS,
-          id: "maz-theme-critical"
-        }
-      ]
+      htmlAttrs: {
+        class: "dark"
+      }
     });
-    if (config.injectFullCSSOnServer) {
-      const fullCSS = generateFullCSS(themeState.currentPreset, cssOptions);
-      useHead({
-        style: [{ innerHTML: fullCSS, id: "maz-theme-full" }]
-      });
-    }
-    if (isDark && config.darkModeStrategy === "class") {
-      useHead({
-        htmlAttrs: {
-          class: "dark"
-        }
-      });
-    }
   }
+  injectThemeCSS({
+    mode: config.mode,
+    preset: config.preset,
+    config
+  });
   MazUiTheme.install(vueApp, {
-    ...config,
-    preset: themeState.currentPreset,
-    colorMode: themeState.colorMode,
-    strategy: themeState.strategy,
-    darkModeStrategy: themeState.darkModeStrategy,
-    injectFullCSS: config.spa ? true : !config.injectFullCSSOnServer,
-    injectCriticalCSS: !!config.spa
+    colorMode,
+    preset: config.preset,
+    strategy: config.strategy,
+    darkModeStrategy: config.darkModeStrategy,
+    mode: config.mode,
+    injectFullCSS: false,
+    injectCriticalCSS: false
   });
 });

package/dist/runtime/plugins/translations.js

@@ -3,7 +3,7 @@ import { defineNuxtPlugin } from "nuxt/app";
 export default defineNuxtPlugin(async ({ vueApp, $config }) => {
   const translationsOptions = $config.public.mazUi.translations || {};
   const i18n = MazTranslations.install(vueApp, translationsOptions);
-  if (process.server) {
+  if (import.meta.server) {
     const locale = translationsOptions.locale || "en";
     const fallbackLocale = translationsOptions.fallbackLocale || "en";
     try {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/nuxt",
   "type": "module",
-  "version": "4.0.0-beta.20",
+  "version": "4.0.0-beta.22",
   "description": "Nuxt module for Maz-UI",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -50,27 +50,27 @@
     "dev": "nuxt-module-build build --stub && nuxt-module-build prepare",
     "lint": "cross-env NODE_ENV=production eslint .",
     "lint:fix": "pnpm lint --fix",
-    "typecheck": "vue-tsc --noEmit --skipLibCheck"
+    "typecheck": "nuxi typecheck"
   },
   "dependencies": {
-    "@maz-ui/themes": "4.0.0-beta.19",
-    "@maz-ui/translations": "4.0.0-beta.19",
-    "@nuxt/kit": "^4.0.1",
+    "@maz-ui/themes": "4.0.0-beta.22",
+    "@maz-ui/translations": "4.0.0-beta.21",
+    "@nuxt/kit": "^4.0.2",
     "defu": "^6.1.4",
-    "maz-ui": "4.0.0-beta.20"
+    "maz-ui": "4.0.0-beta.22"
   },
   "devDependencies": {
     "@nuxt/devtools": "^2.6.2",
     "@nuxt/eslint-config": "^1.7.1",
-    "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/schema": "^4.0.1",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.0.2",
     "@nuxt/test-utils": "^3.19.2",
-    "nuxt": "^4.0.1",
+    "nuxt": "^4.0.2",
     "typescript": "~5.8.3",
     "vitest": "^3.2.4"
   },
   "lint-staged": {
     "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
-  "gitHead": "f0744074a7967b3eba10a5f861c6ddea995a90c1"
+  "gitHead": "372f6e17aca4c1391167abe40af57fd2175a82a5"
 }