vueless 1.1.1-beta.9 → 1.2.1-beta.0

package/utils/node/helper.js

@@ -3,7 +3,7 @@ import path from "node:path";
 import { cwd } from "node:process";
 import { pathToFileURL } from "node:url";
 import { existsSync, statSync } from "node:fs";
-import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { mkdir, readdir, rmdir, readFile, writeFile } from "node:fs/promises";
 
 import { vuelessConfig, getMergedConfig } from "./vuelessConfig.js";
 
@@ -11,15 +11,14 @@ import {
   COMPONENTS,
   JAVASCRIPT_EXT,
   TYPESCRIPT_EXT,
-  VUELESS_CONFIGS_CACHED_DIR,
-  VUELESS_MERGED_CONFIGS_CACHED_DIR,
-} from "../../constants.js";
-
-import {
   SUPPRESS_TS_CHECK,
+  VUELESS_CONFIG_DIR,
   COMPONENTS_INDEX_EXPORT,
   COMPONENTS_INDEX_COMMENT,
-} from "../../bin/constants.js";
+  VUELESS_CONFIGS_CACHED_DIR,
+  VUELESS_MERGED_CONFIGS_CACHED_DIR,
+  CONFIG_INDEX_FILE_NAME,
+} from "../../constants.js";
 
 export async function getDirFiles(dirPath, ext, { recursive = true, exclude = [] } = {}) {
   let fileNames = [];
@@ -68,6 +67,7 @@ export async function getDirFiles(dirPath, ext, { recursive = true, exclude = []
 
 export function getNuxtDirs() {
   return [
+    path.join(cwd(), "app"),
     path.join(cwd(), "composables"),
     path.join(cwd(), "components"),
     path.join(cwd(), "layouts"),
@@ -87,7 +87,7 @@ export function getVueDirs() {
 }
 
 export function getVuelessConfigDirs() {
-  return [path.join(cwd(), ".vueless")];
+  return [path.join(cwd(), VUELESS_CONFIG_DIR)];
 }
 
 export async function getMergedComponentConfig(name) {
@@ -157,25 +157,64 @@ export async function buildTSFile(entryPath, configOutFile) {
   });
 }
 
-export async function autoImportUserConfigs() {
-  const vuelessConfigDir = path.join(cwd(), ".vueless");
+export async function removeFolderIfEmpty(dirPath) {
+  if (existsSync(dirPath)) {
+    const files = await readdir(dirPath);
+
+    if (!files.length) {
+      await rmdir(dirPath);
+    }
+  }
+}
+
+/**
+ * Detects if TypeScript is a dependency in the project's package.json
+ * @returns {Promise<boolean>} True if TypeScript is found in dependencies or devDependencies
+ */
+export async function detectTypeScript() {
+  try {
+    const packageJsonPath = path.join(cwd(), "package.json");
+    const packageJsonContent = await readFile(packageJsonPath, "utf-8");
+    const pkg = JSON.parse(packageJsonContent);
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
 
-  const indexTsPath = path.join(vuelessConfigDir, "index.ts");
-  const indexJsPath = path.join(vuelessConfigDir, "index.js");
+    return Boolean(deps.typescript);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (error) {
+    return false;
+  }
+}
 
-  const hasTsIndex = existsSync(indexTsPath);
-  const indexFilePath = hasTsIndex ? indexTsPath : indexJsPath;
-  const fileExt = hasTsIndex ? TYPESCRIPT_EXT : JAVASCRIPT_EXT;
+/**
+ * Automatically imports user configuration files from a specified directory, generates index file entries for them,
+ * and writes the configuration index file in the appropriate format (TypeScript or JavaScript).
+ *
+ * @param {string} [basePath=""] The base directory path where the user configuration files are located.
+ * @return {Promise<void>} A promise that resolves when the configuration import and index file generation is completed.
+ */
+export async function autoImportUserConfigs(basePath = "") {
+  const vuelessConfigDir = path.join(cwd(), basePath, VUELESS_CONFIG_DIR);
+
+  const indexTsPath = path.join(vuelessConfigDir, `${CONFIG_INDEX_FILE_NAME}${TYPESCRIPT_EXT}`);
+  const indexJsPath = path.join(vuelessConfigDir, `${CONFIG_INDEX_FILE_NAME}${JAVASCRIPT_EXT}`);
+
+  const hasTypeScript = await detectTypeScript();
+
+  const indexFilePath = hasTypeScript ? indexTsPath : indexJsPath;
+  const fileExt = hasTypeScript ? TYPESCRIPT_EXT : JAVASCRIPT_EXT;
 
   const configFiles = await getDirFiles(vuelessConfigDir, fileExt, {
     recursive: true,
-    exclude: ["index.ts", "index.js"],
+    exclude: [
+      `${CONFIG_INDEX_FILE_NAME}${TYPESCRIPT_EXT}`,
+      `${CONFIG_INDEX_FILE_NAME}${JAVASCRIPT_EXT}`,
+    ],
   });
 
   const componentConfigFiles = configFiles.filter((filePath) => {
     const fileName = path.basename(filePath);
 
-    return /^U\w+\.config\.(ts|js)$/.test(fileName);
+    return /^U\w+\.(ts|js)$/.test(fileName);
   });
 
   const imports = [];
@@ -184,12 +223,11 @@ export async function autoImportUserConfigs() {
   if (componentConfigFiles.length) {
     for (const configFilePath of componentConfigFiles) {
       const fileName = path.basename(configFilePath, path.extname(configFilePath));
-      const componentName = fileName.replace(".config", "");
       const relativePath = path.relative(vuelessConfigDir, configFilePath);
       const importPath = "./" + relativePath.replace(/\\/g, "/");
 
-      imports.push(`import ${componentName} from "${importPath}";`);
-      componentEntries.push(`  ${componentName},`);
+      imports.push(`import ${fileName} from "${importPath}";`);
+      componentEntries.push(`  ${fileName},`);
     }
   }
 
@@ -197,17 +235,25 @@ export async function autoImportUserConfigs() {
     await mkdir(vuelessConfigDir, { recursive: true });
   }
 
-  await writeFile(
-    indexFilePath,
-    generateConfigIndexContent(imports, componentEntries, hasTsIndex),
-    "utf-8",
-  );
+  const indexFileContent = await generateConfigIndexContent(imports, componentEntries);
+
+  await writeFile(indexFilePath, indexFileContent, "utf-8");
 }
 
-function generateConfigIndexContent(imports = [], componentEntries = [], isTypeScript) {
+/**
+ * Generates the content for a configuration index file by combining imports, component entries,
+ * and TypeScript-related handling.
+ *
+ * @param {string[]} imports - An array of import statements to include in the configuration index file.
+ * @param {string[]} componentEntries - An array of component entry definitions to export in the configuration index file.
+ * @return {Promise<string>} The constructed configuration indexes file content as a string.
+ */
+export async function generateConfigIndexContent(imports = [], componentEntries = []) {
   const importsSection = imports.length ? `\n${imports.join("\n")}\n\n` : "";
   const entriesSection = componentEntries.length ? `\n${componentEntries.join("\n")}\n` : "";
-  const suppressTsCheck = isTypeScript ? `${SUPPRESS_TS_CHECK}\n` : "";
+
+  const hasTypeScript = await detectTypeScript();
+  const suppressTsCheck = hasTypeScript ? `${SUPPRESS_TS_CHECK}\n` : "";
 
   return `${suppressTsCheck}${COMPONENTS_INDEX_COMMENT}\n${importsSection}${COMPONENTS_INDEX_EXPORT.replace(
     "{}",

package/utils/node/loaderIcon.d.ts

@@ -0,0 +1,7 @@
+export function createIconsCache({ env, debug, targetFiles }?: string): Promise<void>;
+export function removeIconsCache(basePath: string, isVuelessEnv?: boolean): Promise<void>;
+export function copyIconsCache(basePath: string, isVuelessEnv?: boolean): Promise<void>;
+export function generateIconExports(): string;
+export function reloadServerOnIconsCacheUpdate(server: Object): void;
+export function extractIconLines(content: string): string[];
+export function isIconChanged(currentLines: string[], previousLines: string[]): boolean;

package/utils/node/loaderIcon.js

@@ -77,18 +77,20 @@ export async function createIconsCache({ env, debug = false, targetFiles = [] }
 
 /**
  * Remove cached icons.
- * @param {string} mirrorCacheDir
+ * @param {string} basePath
+ * @param {boolean} isVuelessEnv
  * @returns {Promise<void>}
  */
-export async function removeIconsCache(mirrorCacheDir) {
+export async function removeIconsCache(basePath, isVuelessEnv = false) {
   const cachePath = path.join(cwd(), ICONS_CACHED_DIR);
 
   if (fs.existsSync(cachePath)) {
     await rm(cachePath, { recursive: true, force: true });
   }
 
-  if (mirrorCacheDir) {
-    const mirrorCacheIconsPath = path.join(cwd(), mirrorCacheDir, ICONS_DIR);
+  if (basePath) {
+    const iconsDir = isVuelessEnv ? ICONS_DIR : ICONS_CACHED_DIR;
+    const mirrorCacheIconsPath = path.join(cwd(), basePath, iconsDir);
 
     if (fs.existsSync(mirrorCacheIconsPath)) {
       await rm(mirrorCacheIconsPath, { recursive: true, force: true });
@@ -98,14 +100,16 @@ export async function removeIconsCache(mirrorCacheDir) {
 
 /**
  * Copy cached icons in the provided folder by path.
- * @param {string} mirrorCacheDir
+ * @param {string} basePath
+ * @param {boolean} isVuelessEnv
  * @returns {Promise<void>}
  */
-export async function copyIconsCache(mirrorCacheDir) {
+export async function copyIconsCache(basePath, isVuelessEnv = false) {
   const cachePath = path.join(cwd(), ICONS_CACHED_DIR);
 
-  if (mirrorCacheDir && fs.existsSync(cachePath)) {
-    const mirrorPath = path.join(cwd(), mirrorCacheDir, ICONS_DIR);
+  if (basePath && fs.existsSync(cachePath)) {
+    const iconsDir = isVuelessEnv ? ICONS_DIR : ICONS_CACHED_DIR;
+    const mirrorPath = path.join(cwd(), basePath, iconsDir);
 
     await cp(cachePath, mirrorPath, { recursive: true });
   }

package/utils/node/loaderSvg.d.ts

@@ -0,0 +1 @@
+export function loadSvg(id: any, options: any): Promise<string | undefined>;

package/utils/node/mergeConfigs.d.ts

@@ -0,0 +1,13 @@
+export function createMergeConfigs(cx: any): ({ defaultConfig, globalConfig, propsConfig, config, isVariants, }: {
+    defaultConfig: any;
+    globalConfig: any;
+    propsConfig: any;
+    config?: {} | undefined;
+    isVariants?: boolean | undefined;
+}) => {};
+export function createGetMergedConfig(cx: any): ({ defaultConfig, globalConfig, propsConfig, unstyled }: {
+    defaultConfig: any;
+    globalConfig: any;
+    propsConfig: any;
+    unstyled: any;
+}) => {};

package/utils/node/storybook.d.ts

@@ -0,0 +1,2 @@
+export function defineConfigWithVueless(config: Object): Promise<Object>;
+export function getVuelessStoriesGlob(vuelessEnv: string, basePath: string): Promise<string[]>;

package/utils/node/storybook.js

@@ -0,0 +1,94 @@
+import { getVuelessConfig } from "./vuelessConfig.js";
+import { autoImportUserConfigs } from "./helper.js";
+import {
+  COMPONENTS,
+  DIRECTIVES,
+  INTERNAL_ENV,
+  VUELESS_LOCAL_DIR,
+  VUELESS_PACKAGE_DIR,
+} from "../../constants.js";
+
+/**
+ * Defines the config for Storybook.
+ *
+ * @param {Object} config - The config object.
+ * @return {Promise<Object>} A promise that resolves to the modified config object.
+ */
+export function defineConfigWithVueless(config) {
+  return (async () => ({
+    ...config,
+    stories: [
+      ...config.stories,
+      ...(await getVuelessStoriesGlob(config?.vuelessEnv, config?.basePath)),
+    ],
+    addons: [
+      ...new Set([
+        ...(config.addons || []),
+        "@storybook/addon-docs",
+        "@storybook/addon-links",
+        "@vueless/storybook-dark-mode",
+        "@storybook/addon-themes",
+      ]),
+    ],
+    staticDirs: ["public"],
+    framework: {
+      ...config.framework,
+      name: "@storybook/vue3-vite",
+      options: {
+        ...config.framework?.options,
+        builder: {
+          ...config.framework?.options?.builder,
+          viteConfigPath: ".storybook/vite.config.js",
+        },
+      },
+    },
+    env: (envConfig) => ({
+      ...envConfig,
+      BASE_URL: "/",
+    }),
+  }))();
+}
+
+/**
+ * Retrieves the glob pattern for Vueless stories based on the provided Vueless environment.
+ *
+ * @param {string} vuelessEnv - The Vueless environment.
+ * @param {string} basePath - The Project base path.
+ * @return {Promise<string[]>} A promise that resolves to an array of glob patterns for Vueless stories.
+ */
+export async function getVuelessStoriesGlob(vuelessEnv, basePath) {
+  /* Auto import user configs. */
+  await autoImportUserConfigs(basePath);
+
+  const vuelessSrcDir = vuelessEnv === INTERNAL_ENV ? VUELESS_LOCAL_DIR : VUELESS_PACKAGE_DIR;
+  const vuelessConfig = await getVuelessConfig();
+  const storiesGlob = [];
+
+  for (const [directiveName, directiveDir] of Object.entries(DIRECTIVES)) {
+    const directiveGlobalConfig = vuelessConfig.directives?.[directiveName];
+    const isHiddenStoriesByDirective = directiveGlobalConfig === false;
+    const isHiddenStoriesByKey = directiveGlobalConfig?.storybook === false;
+
+    if (isHiddenStoriesByDirective || isHiddenStoriesByKey) {
+      continue;
+    }
+
+    storiesGlob.push(`../${vuelessSrcDir}/${directiveDir}/storybook/stories.{js,ts}`);
+    storiesGlob.push(`../${vuelessSrcDir}/${directiveDir}/storybook/docs.mdx`);
+  }
+
+  for (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
+    const componentGlobalConfig = vuelessConfig.components?.[componentName];
+    const isHiddenStoriesByComponent = componentGlobalConfig === false;
+    const isHiddenStoriesByKey = componentGlobalConfig?.storybook === false;
+
+    if (isHiddenStoriesByComponent || isHiddenStoriesByKey) {
+      continue;
+    }
+
+    storiesGlob.push(`../${vuelessSrcDir}/${componentDir}/storybook/stories.{js,ts}`);
+    storiesGlob.push(`../${vuelessSrcDir}/${componentDir}/storybook/docs.mdx`);
+  }
+
+  return storiesGlob;
+}

package/utils/node/tailwindSafelist.d.ts

@@ -0,0 +1,6 @@
+export function clearTailwindSafelist(): Promise<void>;
+export function createTailwindSafelist({ env, srcDir, targetFiles }?: {
+    env: string;
+    srcDir: string;
+    targetFiles?: string[] | undefined;
+}): Promise<void>;

package/utils/node/vuelessConfig.d.ts

@@ -0,0 +1,9 @@
+export function getVuelessConfig(basePath?: string): Promise<Object>;
+export let vuelessConfig: {};
+export const cx: import("cva").CX;
+export const getMergedConfig: ({ defaultConfig, globalConfig, propsConfig, unstyled }: {
+    defaultConfig: any;
+    globalConfig: any;
+    propsConfig: any;
+    unstyled: any;
+}) => {};

package/utils/node/vuelessConfig.js

@@ -3,10 +3,10 @@ import path from "node:path";
 import { cwd } from "node:process";
 import { pathToFileURL } from "node:url";
 import { defineConfig } from "cva";
-import { createGetMergedConfig } from "./mergeConfigs.js";
 import { merge } from "lodash-es";
 import { extendTailwindMerge } from "tailwind-merge";
 
+import { createGetMergedConfig } from "./mergeConfigs.js";
 import { buildTSFile } from "./helper.js";
 import {
   VUELESS_CACHE_DIR,
@@ -15,21 +15,33 @@ import {
   NESTED_COMPONENT_PATTERN_REG_EXP,
 } from "../../constants.js";
 
+export let vuelessConfig = {};
+
 /**
  * Load Vueless config from the project root.
  * IIFE is used to prevent top level await issue.
  */
-export let vuelessConfig = {};
-
 (async () => {
-  const configPathJs = path.join(cwd(), `${VUELESS_CONFIG_FILE_NAME}.js`);
-  const configPathTs = path.join(cwd(), `${VUELESS_CONFIG_FILE_NAME}.ts`);
-  const configOutPath = path.join(cwd(), `${VUELESS_CACHE_DIR}/${VUELESS_CONFIG_FILE_NAME}.mjs`);
+  vuelessConfig = await getVuelessConfig();
+})();
 
-  if (!fs.existsSync(configPathJs) && !fs.existsSync(configPathTs)) {
-    vuelessConfig = {};
+/**
+ * Retrieves the Vueless config from the project root.
+ *
+ * This method checks for the existence of a `vueless.config.{js,ts}` file in the project root.
+ * If the file exists, it reads the config and returns it as an object.
+ * @param {string} basePath - The application base path.
+ *
+ * @return {Promise<Object>} A promise that resolves to the Vueless configuration object.
+ */
+export async function getVuelessConfig(basePath = "") {
+  const configPathJs = path.join(cwd(), basePath, `${VUELESS_CONFIG_FILE_NAME}.js`);
+  const configPathTs = path.join(cwd(), basePath, `${VUELESS_CONFIG_FILE_NAME}.ts`);
+  // eslint-disable-next-line prettier/prettier
+  const configOutPath = path.join(cwd(), basePath, `${VUELESS_CACHE_DIR}/${VUELESS_CONFIG_FILE_NAME}.mjs`);
 
-    return;
+  if (!fs.existsSync(configPathJs) && !fs.existsSync(configPathTs)) {
+    return {};
   }
 
   fs.existsSync(configPathJs) && (await buildTSFile(configPathJs, configOutPath));
@@ -38,16 +50,23 @@ export let vuelessConfig = {};
   if (fs.existsSync(configOutPath)) {
     const module = await import(pathToFileURL(configOutPath));
 
-    vuelessConfig = module.default;
+    return module.default;
   }
-})();
+}
 
+/* Merge tailwind classes with removing duplicates. */
 const twMerge = extendTailwindMerge(merge(TAILWIND_MERGE_EXTENSION, vuelessConfig.tailwindMerge));
 
+/**
+ * Export cx (class merge) method:
+ * – extended with tailwind-merge
+ * – remove all Vueless nested component names ({U...} strings) from the class list string.
+ */
 export const { cx } = defineConfig({
   hooks: {
     onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_PATTERN_REG_EXP, ""),
   },
 });
 
+/* Get merged config based on config merging strategy. */
 export const getMergedConfig = createGetMergedConfig(cx);

package/utils/node/vuelessResolver.d.ts

@@ -0,0 +1,13 @@
+export namespace componentResolver {
+    let type: string;
+    function resolve(componentName: any): {
+        from: string;
+    } | undefined;
+}
+export namespace directiveResolver {
+    let type_1: string;
+    export { type_1 as type };
+    export function resolve(directive: any): {
+        from: string;
+    } | undefined;
+}

package/utils/node/vuelessResolver.js

@@ -8,25 +8,41 @@
  Docs: https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#importing-from-ui-libraries
  */
 
-import { COMPONENTS } from "../../constants.js";
+import { COMPONENTS, DIRECTIVES } from "../../constants.js";
 
-export function componentResolver(componentName) {
-  const folder = COMPONENTS[componentName];
+/**
+ * Resolver for Vueless components.
+ * @param {string} componentName
+ * @return {Object} Component path
+ */
+export const componentResolver = {
+  type: "component",
+  resolve(componentName) {
+    const folder = COMPONENTS[componentName];
 
-  if (folder) {
-    return {
-      from: `vueless/${folder}/${componentName}.vue`,
-    };
-  }
-}
+    if (folder) {
+      return {
+        from: `vueless/${folder}/${componentName}.vue`,
+      };
+    }
+  },
+};
 
+/**
+ * Resolver for Vueless directives.
+ * @param {string} directiveName
+ * @return {Object} Directive path
+ */
 export const directiveResolver = {
   type: "directive",
-  resolve(name) {
-    const folder = name[0].toLowerCase() + name.slice(1);
+  resolve(directive) {
+    const directiveName = `v${directive}`;
+    const folder = DIRECTIVES[directiveName];
 
-    return {
-      from: `vueless/directives/${folder}/v${name}.ts`,
-    };
+    if (folder) {
+      return {
+        from: `vueless/${folder}/${directiveName}.ts`,
+      };
+    }
   },
 };

package/utils/node/webTypes.d.ts

@@ -0,0 +1 @@
+export function buildWebTypes(srcDir: any): Promise<void>;

package/utils/node/webTypes.js

@@ -6,7 +6,9 @@ export async function buildWebTypes(srcDir) {
 
     await build(vuelessConfig, srcDir);
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.warn(error);
+    if (error.code !== "ERR_MODULE_NOT_FOUND") {
+      // eslint-disable-next-line no-console
+      console.warn(error);
+    }
   }
 }

package/utils/platform.ts

@@ -1,4 +1,4 @@
-import { isCSR } from "./helper.ts";
+import { isCSR } from "./helper";
 
 interface ModernNavigator extends Navigator {
   standalone: string;

package/utils/storybook.ts

@@ -1,4 +1,4 @@
-import { COMPONENTS } from "../constants.js";
+import { COMPONENTS } from "../constants";
 
 import type {
   WebTypes,
@@ -8,7 +8,7 @@ import type {
   SlotBinding,
   ExposeProperty,
   UnknownObject,
-} from "../types.ts";
+} from "../types";
 
 interface Types {
   [key: string]: ArgType | undefined;

package/utils/theme.ts

@@ -1,7 +1,7 @@
 import { cloneDeep, merge } from "lodash-es";
 
-import { vuelessConfig } from "./ui.ts";
-import { isCSR, setCookie } from "./helper.ts";
+import { vuelessConfig } from "./ui";
+import { isCSR, setCookie } from "./helper";
 
 import {
   PX_IN_REM,
@@ -33,7 +33,7 @@ import {
   TEXT_DECREMENT,
   DISABLED_OPACITY,
   DEFAULT_DISABLED_OPACITY,
-} from "../constants.js";
+} from "../constants";
 
 import type {
   NeutralColors,
@@ -43,8 +43,8 @@ import type {
   ThemeConfigOutline,
   ThemeConfigRounding,
   VuelessCssVariables,
-} from "../types.ts";
-import { ColorMode } from "../types.ts";
+} from "../types";
+import { ColorMode } from "../types";
 
 declare interface RootCSSVariableOptions {
   primary: PrimaryColors | string;
@@ -78,7 +78,7 @@ function toggleColorModeClass() {
  * @param {boolean} isCachedAutoMode
  * @return {string} current color mode
  */
-function setColorMode(mode: `${ColorMode}`, isCachedAutoMode?: boolean): string {
+function setColorMode(mode: `${ColorMode}`, isCachedAutoMode: boolean = false): string {
   const colorMode = mode || getStored(COLOR_MODE_KEY) || vuelessConfig.colorMode || ColorMode.Light;
 
   isCachedAutoMode = isCachedAutoMode ?? !!Number(getStored(AUTO_MODE_KEY));
@@ -314,10 +314,10 @@ function getText(text?: ThemeConfig["text"]) {
   };
 
   const mergedText = {
-    xs: runtimeText.xs === undefined ? textXs : definedText.xs,
-    sm: runtimeText.sm === undefined ? textSm : definedText.sm,
-    md: runtimeText.md === undefined ? textMd : definedText.md,
-    lg: runtimeText.lg === undefined ? textLg : definedText.lg,
+    xs: runtimeText.xs === undefined && globalText.xs === undefined ? textXs : definedText.xs,
+    sm: runtimeText.sm === undefined && globalText.sm === undefined ? textSm : definedText.sm,
+    md: runtimeText.md === undefined && globalText.md === undefined ? textMd : definedText.md,
+    lg: runtimeText.lg === undefined && globalText.lg === undefined ? textLg : definedText.lg,
   };
 
   if (isCSR && text) {
@@ -346,8 +346,8 @@ function getOutlines(outline?: ThemeConfig["outline"]) {
     lg: `vl-${OUTLINE}-lg`,
   };
 
-  const runtimeOutline = primitiveToObject(outline) as ThemeConfigText;
-  const globalOutline = primitiveToObject(vuelessConfig.outline) as ThemeConfigText;
+  const runtimeOutline = primitiveToObject(outline) as ThemeConfigOutline;
+  const globalOutline = primitiveToObject(vuelessConfig.outline) as ThemeConfigOutline;
 
   const outlineMd = Math.max(0, Number(runtimeOutline.md ?? globalOutline.md ?? DEFAULT_OUTLINE));
   const outlineSm = Math.max(0, outlineMd - OUTLINE_DECREMENT);
@@ -363,11 +363,13 @@ function getOutlines(outline?: ThemeConfig["outline"]) {
     lg: Math.max(0, Number(runtimeOutline.lg ?? getStored(storageKey.lg) ?? globalOutline.lg ?? 0)),
   };
 
+  /* eslint-disable prettier/prettier */
   const mergedOutline = {
-    sm: runtimeOutline.sm === undefined ? outlineSm : definedOutline.sm,
-    md: runtimeOutline.md === undefined ? outlineMd : definedOutline.md,
-    lg: runtimeOutline.lg === undefined ? outlineLg : definedOutline.lg,
+    sm: runtimeOutline.sm === undefined && globalOutline.sm === undefined ? outlineSm : definedOutline.sm,
+    md: runtimeOutline.md === undefined && globalOutline.md === undefined ? outlineMd : definedOutline.md,
+    lg: runtimeOutline.lg === undefined && globalOutline.lg === undefined ? outlineLg : definedOutline.lg,
   };
+  /* eslint-enable prettier/prettier */
 
   if (isCSR && outline) {
     setCookie(storageKey.sm, String(mergedOutline.sm));
@@ -419,13 +421,13 @@ function getRoundings(rounding?: ThemeConfig["rounding"]) {
     md: Math.max(0, Number(runtimeRounding.md ?? getStored(storageKey.md) ?? globalRounding.md ?? 0)),
     lg: Math.max(0, Number(runtimeRounding.lg ?? getStored(storageKey.lg) ?? globalRounding.lg ?? 0)),
   };
-  /* eslint-enable prettier/prettier */
 
   const mergedRounding = {
-    sm: runtimeRounding.sm === undefined ? roundingSm : definedRounding.sm,
-    md: runtimeRounding.md === undefined ? roundingMd : definedRounding.md,
-    lg: runtimeRounding.lg === undefined ? roundingLg : definedRounding.lg,
+    sm: runtimeRounding.sm === undefined && globalRounding.sm === undefined ? roundingSm : definedRounding.sm,
+    md: runtimeRounding.md === undefined && globalRounding.md === undefined ? roundingMd : definedRounding.md,
+    lg: runtimeRounding.lg === undefined && globalRounding.lg === undefined ? roundingLg : definedRounding.lg,
   };
+  /* eslint-enable prettier/prettier */
 
   if (isCSR && rounding) {
     setCookie(storageKey.sm, String(mergedRounding.sm));