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

package/dist/module.d.mts

@@ -11,12 +11,6 @@ interface MazUiNuxtThemeOptions extends MazUiThemeOptions {
      * @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;
 }
 interface MazUiNuxtOptions {
     /**

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "4.0.0-beta.20",
+  "version": "4.0.0-beta.21",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "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,67 +21,72 @@ function getServerInitialColorMode(colorMode) {
   }
   return "auto";
 }
+function injectThemeCSSOnServer({
+  mode,
+  preset,
+  config
+}) {
+  const cssOptions = {
+    mode,
+    darkSelectorStrategy: config.darkModeStrategy ?? "class",
+    prefix: "maz"
+  };
+  const criticalCSS = generateCriticalCSS(preset, cssOptions);
+  useHead({
+    style: [
+      {
+        innerHTML: criticalCSS,
+        id: CSS_IDS.CRITICAL
+      }
+    ]
+  });
+  if (config.injectFullCSSOnServer) {
+    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);
   if (options?.overrides) {
     preset = mergePresets(preset, options.overrides);
   }
+  const isClientSideRendering = import.meta.client && !document.getElementById(CSS_IDS.CRITICAL);
   const config = {
     strategy: "hybrid",
     darkModeStrategy: "class",
     colorMode: options.mode && options.mode !== "both" ? options.mode : options.colorMode ?? "auto",
     mode: "both",
-    injectFullCSSOnServer: true,
+    injectFullCSSOnServer: false,
+    injectCriticalCSS: true,
+    injectFullCSS: true,
     ...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 (import.meta.server) {
+    injectThemeCSSOnServer({
+      mode: config.mode,
+      preset: config.preset,
+      config
     });
-    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"
-        }
-      });
-    }
   }
   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,
+    strategy: config.strategy,
+    darkModeStrategy: config.darkModeStrategy,
+    injectFullCSS: isClientSideRendering,
+    injectCriticalCSS: isClientSideRendering
   });
 });

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.21",
   "description": "Nuxt module for Maz-UI",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -50,14 +50,14 @@
     "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",
+    "@maz-ui/translations": "4.0.0-beta.21",
     "@nuxt/kit": "^4.0.1",
     "defu": "^6.1.4",
-    "maz-ui": "4.0.0-beta.20"
+    "maz-ui": "4.0.0-beta.21"
   },
   "devDependencies": {
     "@nuxt/devtools": "^2.6.2",
@@ -72,5 +72,5 @@
   "lint-staged": {
     "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
-  "gitHead": "f0744074a7967b3eba10a5f861c6ddea995a90c1"
+  "gitHead": "b1960589b8f969f4675251dd5e39eecaf98388b1"
 }