@maz-ui/nuxt 4.1.7-beta.4 → 4.1.7-beta.5

package/dist/module.json

@@ -4,9 +4,9 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "4.1.7-beta.4",
+  "version": "4.1.7-beta.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
-    "unbuild": "3.6.0"
+    "unbuild": "3.6.1"
   }
 }

package/dist/runtime/plugins/theme.js

@@ -1,14 +1,22 @@
 import { MazUiTheme } from "@maz-ui/themes/plugin";
-import { CSS_IDS, generateCriticalCSS, generateFullCSS, getPreset, mergePresets } from "@maz-ui/themes/utils";
+import { CSS_ID, generateCSS, getPreset, mergePresets } from "@maz-ui/themes/utils";
+import { getSystemColorMode } from "@maz-ui/themes/utils/get-color-mode";
 import { defineNuxtPlugin, useCookie, useHead, useRequestHeaders } from "nuxt/app";
-function getServerInitialColorMode(colorMode) {
-  if (colorMode !== "auto") {
-    return colorMode;
-  }
+function getSavedColorMode() {
   const colorModeCookie = useCookie("maz-color-mode");
   if (colorModeCookie.value && ["light", "dark", "auto"].includes(colorModeCookie.value)) {
     return colorModeCookie.value;
   }
+  return void 0;
+}
+function getInitialColorMode(colorMode) {
+  if (colorMode && ["light", "dark"].includes(colorMode)) {
+    return colorMode;
+  }
+  const savedColorMode = getSavedColorMode();
+  if (savedColorMode && ["light", "dark"].includes(savedColorMode)) {
+    return savedColorMode;
+  }
   if (import.meta.server) {
     const headers = useRequestHeaders();
     if (headers["sec-ch-prefers-color-scheme"] === "dark") {
@@ -18,40 +26,41 @@ function getServerInitialColorMode(colorMode) {
     if (userAgent?.includes("dark")) {
       return "dark";
     }
+  } else {
+    const systemColorMode = getSystemColorMode();
+    if (systemColorMode === "dark") {
+      return "dark";
+    }
   }
   return "auto";
 }
-function injectThemeCSS({
-  mode,
-  preset,
-  config
-}) {
+function injectThemeCSS(config) {
   const cssOptions = {
-    mode,
+    mode: config.mode,
     darkSelectorStrategy: config.darkModeStrategy ?? "class",
-    prefix: "maz"
+    prefix: "maz",
+    darkClass: config.darkClass ?? "dark"
   };
-  if (config.injectCriticalCSS) {
-    const criticalCSS = generateCriticalCSS(preset, cssOptions);
+  if (config.injectCriticalCSS && !config.injectAllCSSOnServer) {
+    const criticalCSS = generateCSS(config.preset, {
+      ...cssOptions,
+      onlyCritical: true
+    });
     useHead({
-      style: [{ innerHTML: criticalCSS, id: CSS_IDS.CRITICAL }]
+      style: [{ innerHTML: criticalCSS, id: CSS_ID }]
     });
   }
   if (config.injectAllCSSOnServer) {
-    const fullCSS = generateFullCSS(preset, cssOptions);
+    const fullCSS = generateCSS(config.preset, cssOptions);
     useHead({
-      style: [{ innerHTML: fullCSS, id: CSS_IDS.FULL }]
+      style: [{ innerHTML: fullCSS, id: CSS_ID }]
     });
   }
 }
 function getInjectCSSStates(config) {
-  const criticalCSSAlreadyInjected = import.meta.client && !!document.getElementById(CSS_IDS.CRITICAL);
-  const shouldInjectCriticalCSSOnClient = !!config.injectCriticalCSS && import.meta.client && !criticalCSSAlreadyInjected;
-  const fullCSSAlreadyInjected = import.meta.client && !!document.getElementById(CSS_IDS.FULL);
-  const shouldInjectFullCSSOnClient = !!config.injectFullCSS && import.meta.client && !fullCSSAlreadyInjected;
+  const isCSSAlreadyInjected = import.meta.client && !!document.getElementById(CSS_ID);
   return {
-    shouldInjectCriticalCSSOnClient,
-    shouldInjectFullCSSOnClient
+    shouldInjectCSSOnClient: !!config.injectAllCSSOnServer && import.meta.client && !isCSSAlreadyInjected
   };
 }
 export default defineNuxtPlugin(async ({ vueApp, $config }) => {
@@ -62,8 +71,9 @@ export default defineNuxtPlugin(async ({ vueApp, $config }) => {
   }
   const config = {
     strategy: "hybrid",
+    darkClass: "dark",
     darkModeStrategy: "class",
-    colorMode: options.mode && options.mode !== "both" ? options.mode : options.colorMode ?? "auto",
+    colorMode: getSavedColorMode() ?? options.colorMode ?? "auto",
     mode: "both",
     injectAllCSSOnServer: false,
     injectCriticalCSS: true,
@@ -72,30 +82,24 @@ export default defineNuxtPlugin(async ({ vueApp, $config }) => {
     ...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 isDark = config.colorMode === "auto" && config.mode === "both" ? getInitialColorMode(config.colorMode) === "dark" : config.colorMode === "dark" || config.mode === "dark";
   if (isDark && config.darkModeStrategy === "class") {
     useHead({
       htmlAttrs: {
-        class: "dark"
+        class: config.darkClass
       }
     });
   }
-  const { shouldInjectCriticalCSSOnClient, shouldInjectFullCSSOnClient } = getInjectCSSStates(config);
   if (import.meta.server) {
-    injectThemeCSS({
-      mode: config.mode,
-      preset: config.preset,
-      config
-    });
+    injectThemeCSS(config);
   }
+  const { shouldInjectCSSOnClient } = getInjectCSSStates(config);
   MazUiTheme.install?.(vueApp, {
-    colorMode,
-    preset: config.preset,
-    strategy: config.strategy,
-    darkModeStrategy: config.darkModeStrategy,
-    mode: config.mode,
-    injectFullCSS: shouldInjectFullCSSOnClient,
-    injectCriticalCSS: shouldInjectCriticalCSSOnClient
+    ...config,
+    colorMode: getSavedColorMode() ?? config.colorMode,
+    // @ts-expect-error _isDark is a private property
+    _isDark: isDark,
+    injectFullCSS: !config.injectAllCSSOnServer || shouldInjectCSSOnClient,
+    injectCriticalCSS: shouldInjectCSSOnClient
   });
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/nuxt",
   "type": "module",
-  "version": "4.1.7-beta.4",
+  "version": "4.1.7-beta.5",
   "description": "Nuxt module for Maz-UI",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -55,23 +55,23 @@
     "nuxt": ">=3.4.0 <5.0.0"
   },
   "dependencies": {
-    "@maz-ui/themes": "4.1.7-beta.3",
-    "@maz-ui/translations": "4.1.7-beta.3",
-    "@nuxt/kit": "^4.0.3",
+    "@maz-ui/themes": "4.1.7-beta.5",
+    "@maz-ui/translations": "4.1.7-beta.5",
+    "@nuxt/kit": "^4.1.2",
     "defu": "^6.1.4",
-    "maz-ui": "4.1.7-beta.4"
+    "maz-ui": "4.1.7-beta.5"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^2.6.2",
+    "@nuxt/devtools": "^2.6.3",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.0.3",
+    "@nuxt/schema": "^4.1.2",
     "@nuxt/test-utils": "^3.19.2",
-    "nuxt": "^4.0.3",
+    "nuxt": "^4.1.2",
     "typescript": "~5.9.2",
     "vitest": "^3.2.4"
   },
   "lint-staged": {
     "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
-  "gitHead": "5183ff1053430303793c92b606480965b39cfde3"
+  "gitHead": "2d4dcc4af1a60bfe158759bd9a94777b1a58861f"
 }