vuetify-nuxt-module 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.15.0"
   },
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { addPluginTemplate, addTemplate, resolvePath, extendWebpackConfig, isNux
 import { isPackageExists, getPackageInfo } from 'local-pkg';
 import semver from 'semver';
 import { createFilter, version as version$1 } from 'vite';
-import fs, { existsSync, statSync } from 'node:fs';
+import fs, { existsSync, statSync, readFileSync, readdirSync, rmSync, mkdirSync, writeFileSync } from 'node:fs';
 import { isAbsolute, resolve, relative } from 'pathe';
 import defu from 'defu';
 import { transformAssetUrls } from 'vite-plugin-vuetify';
@@ -12,12 +12,13 @@ import destr from 'destr';
 import { parseQuery, parseURL } from 'ufo';
 import fsp, { readFile } from 'node:fs/promises';
 import path from 'upath';
-import { resolve as resolve$1, dirname, relative as relative$1 } from 'node:path';
+import { resolve as resolve$1, dirname, join, relative as relative$1 } from 'node:path';
 import { debounce } from 'perfect-debounce';
 import process from 'node:process';
 import { createConfigLoader } from 'unconfig';
+import { createHash } from 'node:crypto';
 
-const version = "1.0.0-alpha.4";
+const version = "1.0.0-alpha.5";
 
 const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
 const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `\0${VIRTUAL_VUETIFY_CONFIGURATION}`;
@@ -900,12 +901,11 @@ function vuetifySSRClientHintsPlugin(ctx) {
   };
 }
 
-function vuetifyStylesPlugin(options, viteVersion, _logger) {
+function vuetifyStylesPlugin(ctx) {
   let configFile;
-  let useLoadCache = false;
+  const options = { styles: ctx.moduleOptions.styles };
   const vuetifyBase = resolveVuetifyBase();
   const noneFiles = /* @__PURE__ */ new Set();
-  const loadCache = /* @__PURE__ */ new Map();
   let isNone = false;
   let sassVariables = false;
   let fileImport = false;
@@ -922,8 +922,7 @@ function vuetifyStylesPlugin(options, viteVersion, _logger) {
       }
       if (isObject(options.styles) && "configFile" in options.styles) {
         sassVariables = true;
-        useLoadCache = !config.isProduction && !!options.styles.experimental?.cache;
-        fileImport = semver.gt(viteVersion, "5.4.2");
+        fileImport = semver.gt(ctx.viteVersion, "5.4.2");
         configFile = await resolvePath(options.styles.configFile);
       } else {
         isNone = options.styles === "none";
@@ -941,18 +940,32 @@ function vuetifyStylesPlugin(options, viteVersion, _logger) {
         return idx === -1 ? source : source.slice(0, idx);
       }
       if (importer && source.endsWith(".css") && isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)) {
-        const resolution = await this.resolve(source, importer, { skipSelf: true, custom });
-        if (!resolution) {
-          return;
+        let resolutionId;
+        if (source.startsWith(".")) {
+          resolutionId = path.resolve(path.dirname(importer), source);
+        } else if (path.isAbsolute(source)) {
+          resolutionId = source;
+        } else {
+          const resolution = await this.resolve(source, importer, { skipSelf: true, custom });
+          if (resolution) {
+            resolutionId = resolution.id;
+          }
         }
-        const target = await resolveCss(resolution.id);
-        if (target.startsWith(PREFIX) || target.startsWith(SSR_PREFIX)) {
-          return target;
+        if (!resolutionId) {
+          return;
         }
+        const target = await resolveCss(resolutionId);
         if (isNone) {
           noneFiles.add(target);
           return target;
         }
+        if (ctx.stylesCachePath) {
+          const relative = path.relative(vuetifyBase, target);
+          const cacheFile = path.resolve(ctx.stylesCachePath, relative.replace(/\.s[ac]ss$/, ".css"));
+          if (fs.existsSync(cacheFile)) {
+            return cacheFile;
+          }
+        }
         return `${ssr ? SSR_PREFIX : PREFIX}${path.relative(vuetifyBase, target)}`;
       }
       return void 0;
@@ -961,35 +974,16 @@ function vuetifyStylesPlugin(options, viteVersion, _logger) {
       if (sassVariables) {
         const target = id.startsWith(PREFIX) ? path.resolve(vuetifyBase, id.slice(PREFIX.length)) : id.startsWith(SSR_PREFIX) ? path.resolve(vuetifyBase, id.slice(SSR_PREFIX.length)) : void 0;
         if (target) {
-          if (useLoadCache) {
-            const cached = loadCache.get(id);
-            if (cached) {
-              return cached;
-            }
-          }
           const suffix = /\.scss/.test(target) ? ";\n" : "\n";
-          const result = {
+          return {
             code: `@use "${toPath(configFile)}"${suffix}@use "${toPath(target)}"${suffix}`,
             map: {
               mappings: ""
             }
           };
-          if (useLoadCache) {
-            loadCache.set(id, result);
-          }
-          return result;
         }
       }
       return isNone && noneFiles.has(id) ? "" : void 0;
-    },
-    handleHotUpdate({ file }) {
-      if (!useLoadCache) {
-        return;
-      }
-      const normalizedFile = normalizePath(file);
-      if (normalizedFile === normalizePath(configFile || "") || normalizedFile.endsWith(".sass") || normalizedFile.endsWith(".scss")) {
-        loadCache.clear();
-      }
     }
   };
 }
@@ -1005,7 +999,12 @@ function resolveCssFactory() {
         if (!(error instanceof Error && "code" in error && error.code === "ENOENT")) {
           throw error;
         }
-        mapping = source.replace(/\.css$/, ".scss");
+        try {
+          mapping = source.replace(/\.css$/, ".scss");
+          await fsp.access(mapping, fs.constants.R_OK);
+        } catch {
+          mapping = source;
+        }
       }
       mappings.set(source, mapping);
     }
@@ -1127,7 +1126,7 @@ function configureVite(configKey, nuxt, ctx) {
     }
     viteInlineConfig.plugins.push(vuetifyImportPlugin({ autoImport }));
     if (ctx.moduleOptions.styles !== false && ctx.moduleOptions.styles !== "none") {
-      viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles: ctx.moduleOptions.styles }, ctx.viteVersion, ctx.logger));
+      viteInlineConfig.plugins.push(vuetifyStylesPlugin(ctx));
     }
     viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(ctx), vuetifyIconsPlugin(ctx), vuetifyDateConfigurationPlugin(ctx));
     if (ctx.ssrClientHints.enabled) {
@@ -1506,6 +1505,124 @@ function prepareSSRClientHints(baseUrl, ctx) {
   return clientHints;
 }
 
+async function prepareVuetifyStyles(nuxt, ctx) {
+  const stylesConfig = ctx.moduleOptions.styles;
+  if (!isObject(stylesConfig) || !("configFile" in stylesConfig)) {
+    return;
+  }
+  if (stylesConfig.experimental?.cache === false) {
+    return;
+  }
+  const vuetifyBase = resolveVuetifyBase();
+  let configFile;
+  let configContent = "";
+  if (stylesConfig.configFile) {
+    configFile = await resolvePath(stylesConfig.configFile);
+    if (existsSync(configFile)) {
+      configContent = readFileSync(configFile, "utf8");
+      if (!ctx.vuetifyFilesToWatch.includes(configFile)) {
+        ctx.vuetifyFilesToWatch.push(configFile);
+      }
+    }
+  }
+  if (!configFile) {
+    return;
+  }
+  const hash = createHash("sha256").update(ctx.vuetifyVersion).update(ctx.viteVersion).update(configContent).update(configFile).digest("hex").slice(0, 8);
+  const stylesDir = resolve$1(nuxt.options.rootDir, "node_modules/.cache/vuetify-nuxt-module/styles");
+  const cacheDir = join(stylesDir, hash);
+  ctx.stylesCachePath = cacheDir;
+  if (existsSync(stylesDir)) {
+    const dirents = readdirSync(stylesDir, { withFileTypes: true });
+    for (const dirent of dirents) {
+      if (dirent.isDirectory() && dirent.name !== hash) {
+        rmSync(join(stylesDir, dirent.name), { recursive: true, force: true });
+      }
+    }
+  }
+  if (existsSync(cacheDir)) {
+    return;
+  }
+  ctx.logger.info("Compiling Vuetify styles...");
+  let sass;
+  try {
+    sass = await import('sass');
+  } catch {
+    try {
+      sass = await import('sass-embedded');
+    } catch {
+      ctx.logger.warn('Could not load "sass" or "sass-embedded". Skipping styles pre-compilation.');
+      return;
+    }
+  }
+  const files = [];
+  findCssFiles(join(vuetifyBase, "lib/components"), files);
+  findCssFiles(join(vuetifyBase, "lib/styles"), files);
+  for (const file of files) {
+    const relativePath = relative$1(vuetifyBase, file);
+    const cacheFile = join(cacheDir, relativePath);
+    const sassFile = file.replace(/\.css$/, ".sass");
+    const scssFile = file.replace(/\.css$/, ".scss");
+    let targetFile;
+    if (existsSync(sassFile)) {
+      targetFile = sassFile;
+    } else if (existsSync(scssFile)) {
+      targetFile = scssFile;
+    }
+    if (targetFile) {
+      const dir = dirname(cacheFile);
+      if (!existsSync(dir)) {
+        mkdirSync(dir, { recursive: true });
+      }
+      const content = `@use "${normalizePath(configFile)}";
+@use "${normalizePath(targetFile)}";
+`;
+      try {
+        const result = sass.compileString(content, {
+          loadPaths: [
+            dirname(configFile),
+            dirname(targetFile),
+            resolve$1(vuetifyBase, ".."),
+            resolve$1(vuetifyBase, "../.."),
+            // In case of monorepo/hoisting issues, but standard is enough
+            vuetifyBase
+          ],
+          url: new URL(pathToFileURL(cacheFile).href)
+        });
+        writeFileSync(cacheFile, result.css, "utf8");
+      } catch (error) {
+        ctx.logger.error(`Failed to compile ${targetFile}:`, error);
+      }
+    }
+  }
+  const metadata = {
+    hash,
+    vuetifyVersion: ctx.vuetifyVersion,
+    viteVersion: ctx.viteVersion,
+    configFile,
+    createdAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  writeFileSync(join(cacheDir, "metadata.json"), JSON.stringify(metadata, null, 2), "utf8");
+}
+function findCssFiles(dir, fileList = []) {
+  if (!existsSync(dir)) {
+    return fileList;
+  }
+  const files = readdirSync(dir);
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const stat = statSync(filePath);
+    if (stat.isDirectory()) {
+      findCssFiles(filePath, fileList);
+    } else {
+      if (file.endsWith(".css")) {
+        fileList.push(filePath);
+      }
+    }
+  }
+  return fileList;
+}
+
 async function load(options, nuxt, ctx) {
   const {
     configuration,
@@ -1581,6 +1698,7 @@ async function load(options, nuxt, ctx) {
       }
     }
   }
+  await prepareVuetifyStyles(nuxt, ctx);
 }
 function registerWatcher(options, nuxt, ctx) {
   if (nuxt.options.dev) {
@@ -1680,6 +1798,7 @@ const module$1 = defineNuxtModule({
       componentsPromise: void 0,
       labComponentsPromise: void 0,
       vuetifyGte,
+      vuetifyVersion: currentVersion || "0.0.0",
       viteVersion
     };
     await load(options, nuxt, ctx);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -107,6 +107,8 @@
       "pathe",
       "perfect-debounce",
       "rollup",
+      "sass",
+      "sass-embedded",
       "upath",
       "ufo",
       "unconfig",