create-vuetify 2.3.1 → 2.4.0

package/template/typescript/nuxt/modules/vuetify.ts

@@ -2,8 +2,10 @@ import { defineNuxtModule } from '@nuxt/kit'
 import type { Options as ModuleOptions } from '@vuetify/loader-shared'
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 import path from 'upath'
-import { resolveVuetifyBase, isObject } from '@vuetify/loader-shared'
+import { isObject, resolveVuetifyBase } from '@vuetify/loader-shared'
 import { pathToFileURL } from 'node:url'
+import fs from 'node:fs'
+import fsp from 'node:fs/promises'
 
 export type { ModuleOptions }
 
@@ -14,7 +16,7 @@ export default defineNuxtModule<ModuleOptions>({
     configKey: 'vuetify',
   },
   defaults: () => ({ styles: true }),
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     let configFile: string | undefined
     const vuetifyBase = resolveVuetifyBase()
     const noneFiles = new Set<string>()
@@ -22,8 +24,9 @@ export default defineNuxtModule<ModuleOptions>({
     let sassVariables = false
     const PREFIX = 'vuetify-styles/'
     const SSR_PREFIX = `/@${PREFIX}`
+    const resolveCss = resolveCssFactory()
 
-    nuxt.hook('vite:extendConfig', (viteInlineConfig) => {
+    nuxt.hook('vite:extendConfig', viteInlineConfig => {
       // add vuetify transformAssetUrls
       viteInlineConfig.vue ??= {}
       viteInlineConfig.vue.template ??= {}
@@ -39,6 +42,8 @@ export default defineNuxtModule<ModuleOptions>({
       viteInlineConfig.css.preprocessorOptions ??= {}
       viteInlineConfig.css.preprocessorOptions.sass ??= {}
       viteInlineConfig.css.preprocessorOptions.sass.api = 'modern-compiler'
+      viteInlineConfig.css.preprocessorOptions.scss ??= {}
+      viteInlineConfig.css.preprocessorOptions.scss.api = 'modern-compiler'
 
       viteInlineConfig.plugins.push({
         name: 'vuetify:nuxt:styles',
@@ -59,7 +64,7 @@ export default defineNuxtModule<ModuleOptions>({
         },
         async resolveId (source, importer, { custom, ssr }) {
           if (source.startsWith(PREFIX) || source.startsWith(SSR_PREFIX)) {
-            if (source.endsWith('.sass')) {
+            if (source.match(/\.s[ca]ss$/)) {
               return source
             }
 
@@ -74,8 +79,7 @@ export default defineNuxtModule<ModuleOptions>({
             )
           ) {
             if (options.styles === 'sass') {
-              const target = source.replace(/\.css$/, '.sass')
-              return this.resolve(target, importer, { skipSelf: true, custom })
+              return this.resolve(await resolveCss(source), importer, { skipSelf: true, custom })
             }
 
             const resolution = await this.resolve(source, importer, { skipSelf: true, custom })
@@ -83,7 +87,7 @@ export default defineNuxtModule<ModuleOptions>({
             if (!resolution)
               return undefined
 
-            const target = resolution.id.replace(/\.css$/, '.sass')
+            const target = await resolveCss(resolution.id)
             if (isNone) {
               noneFiles.add(target)
               return target
@@ -94,7 +98,7 @@ export default defineNuxtModule<ModuleOptions>({
 
           return undefined
         },
-        load(id){
+        load (id){
           if (sassVariables) {
             const target = id.startsWith(PREFIX)
               ? path.resolve(vuetifyBase, id.slice(PREFIX.length))
@@ -103,8 +107,9 @@ export default defineNuxtModule<ModuleOptions>({
                 : undefined
 
             if (target) {
+              const suffix = target.match(/\.scss/) ? ';\n' : '\n'
               return {
-                code: `@use "${configFile}"\n@use "${pathToFileURL(target).href}"`,
+                code: `@use "${configFile}"${suffix}@use "${pathToFileURL(target).href}"${suffix}`,
                 map: {
                   mappings: '',
                 },
@@ -116,9 +121,29 @@ export default defineNuxtModule<ModuleOptions>({
         },
       })
     })
-  }
+  },
 })
 
+function resolveCssFactory () {
+  const mappings = new Map<string, string>()
+  return async (source: string) => {
+    let mapping = mappings.get(source)
+    if (!mapping) {
+      try {
+        mapping = source.replace(/\.css$/, '.sass')
+        await fsp.access(mapping, fs.constants.R_OK)
+      }
+      catch (err) {
+        if (!(err instanceof Error && 'code' in err && err.code === 'ENOENT'))
+          throw err
+        mapping = source.replace(/\.css$/, '.scss')
+      }
+      mappings.set(source, mapping)
+    }
+    return mapping
+  }
+}
+
 function isSubdir (root: string, test: string) {
   const relative = path.relative(root, test)
   return relative && !relative.startsWith('..') && !path.isAbsolute(relative)

package/template/typescript/nuxt/pages/index.vue

@@ -5,4 +5,3 @@
 <template>
   <HelloWorld />
 </template>
-

package/template/typescript/nuxt/plugins/vuetify-nuxt.ts

@@ -1,6 +1,6 @@
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(nuxtApp => {
   // check https://vuetify-nuxt-module.netlify.app/guide/nuxt-runtime-hooks.html
-  nuxtApp.hook('vuetify:before-create', (options) => {
+  nuxtApp.hook('vuetify:before-create', options => {
     if (import.meta.client) {
       console.log('vuetify:before-create', options)
     }

package/template/typescript/nuxt/plugins/vuetify.ts

@@ -1,6 +1,6 @@
 import { createVuetify } from 'vuetify'
 
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(nuxtApp => {
   const vuetify = createVuetify({
     // WARNING: when switching ssr option in nuxt.config.ts file you need to manually change it here
     ssr: true,

package/dist/output.cjs

@@ -1,303 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
-
-// src/index.ts
-var import_path3 = require("path");
-var import_fs3 = require("fs");
-
-// src/utils/prompts.ts
-var import_path = require("path");
-var import_fs = require("fs");
-
-// src/utils/presets.ts
-var defaultContext = {
-  useEslint: false,
-  useRouter: false,
-  useStore: false
-};
-var baseContext = {
-  ...defaultContext,
-  useEslint: true,
-  useRouter: true
-};
-var essentialsContext = {
-  ...baseContext,
-  useStore: true
-};
-var presets = {
-  base: baseContext,
-  default: defaultContext,
-  essentials: essentialsContext
-};
-
-// src/utils/prompts.ts
-var import_kolorist = require("kolorist");
-var import_prompts = __toESM(require("prompts"), 1);
-var import_validate_npm_package_name = __toESM(require("validate-npm-package-name"), 1);
-var promptQuestions = (context) => [
-  {
-    name: "projectName",
-    type: "text",
-    message: "Project name:",
-    initial: "vuetify-project",
-    validate: (v) => {
-      const { errors } = (0, import_validate_npm_package_name.default)(String(v).trim());
-      return !(errors && errors.length) || `Package ${errors[0]}`;
-    }
-  },
-  {
-    name: "canOverwrite",
-    active: "Yes",
-    inactive: "No",
-    initial: false,
-    type: (_, { projectName }) => {
-      const projectPath = (0, import_path.join)(context.cwd, projectName);
-      return !(0, import_fs.existsSync)(projectPath) || (0, import_fs.readdirSync)(projectPath).length === 0 ? null : "toggle";
-    },
-    message: (prev) => `The project path: ${(0, import_path.resolve)(context.cwd, prev)} already exists, would you like to overwrite this directory?`
-  },
-  {
-    name: "usePreset",
-    type: context.usePreset ? null : "select",
-    message: "Which preset would you like to install?",
-    initial: 1,
-    choices: [
-      { title: "Default (Vuetify)", value: "default" },
-      { title: "Base (Vuetify, VueRouter)", value: "base" },
-      { title: "Essentials (Vuetify, VueRouter, Pinia)", value: "essentials" },
-      { title: "Custom (Choose your features)", value: "custom" }
-    ]
-  },
-  {
-    name: "useTypeScript",
-    type: context.useTypeScript ? null : "toggle",
-    message: "Use TypeScript?",
-    active: "Yes",
-    inactive: "No",
-    initial: false
-  },
-  {
-    name: "useRouter",
-    type: (_, { usePreset }) => usePreset !== "custom" && context.usePreset !== "custom" ? null : "toggle",
-    message: "Use Vue Router?",
-    active: "Yes",
-    inactive: "No",
-    initial: false
-  },
-  {
-    name: "useStore",
-    type: (_, { usePreset }) => usePreset !== "custom" && context.usePreset !== "custom" ? null : "toggle",
-    message: "Use Pinia?",
-    active: "Yes",
-    inactive: "No",
-    initial: false
-  },
-  {
-    name: "useEslint",
-    type: (_, { usePreset }) => usePreset !== "custom" && context.usePreset !== "custom" ? null : "toggle",
-    message: "Use ESLint?",
-    active: "Yes",
-    inactive: "No",
-    initial: false
-  },
-  {
-    name: "usePackageManager",
-    type: "select",
-    message: "Would you like to install dependencies with yarn, npm, pnpm, or bun?",
-    initial: 0,
-    choices: [
-      { title: "yarn", value: "yarn" },
-      { title: "npm", value: "npm" },
-      { title: "pnpm", value: "pnpm" },
-      { title: "bun", value: "bun" },
-      { title: "none", value: null }
-    ]
-  }
-];
-var promptOptions = {
-  onCancel: () => {
-    throw new Error((0, import_kolorist.red)("\u2716") + " Operation cancelled");
-  }
-};
-var initPrompts = async (context) => {
-  if (context.usePreset && context.usePreset !== "custom") {
-    context = {
-      ...context,
-      ...presets[context.usePreset]
-    };
-  }
-  const answers = await (0, import_prompts.default)(promptQuestions(context), promptOptions);
-  return {
-    ...context,
-    ...answers
-  };
-};
-
-// src/index.ts
-var import_kolorist2 = require("kolorist");
-var import_minimist = __toESM(require("minimist"), 1);
-
-// src/utils/installDependencies.ts
-var import_child_process = require("child_process");
-function installDependencies(projectRoot, packageManager) {
-  const cmd = packageManager === "npm" ? "npm install" : packageManager === "yarn" ? "yarn" : packageManager === "bun" ? "bun install" : "pnpm install";
-  const spawn = (0, import_child_process.spawnSync)(cmd, {
-    cwd: projectRoot,
-    stdio: ["inherit", "inherit", "pipe"],
-    shell: true
-  });
-  if (spawn.error) {
-    throw spawn.error;
-  }
-}
-
-// src/utils/renderTemplate.ts
-var import_fs2 = require("fs");
-var import_path2 = require("path");
-
-// src/utils/deepMerge.ts
-var isObject = (v) => {
-  return v === Object(v) && v !== null && !Array.isArray(v);
-};
-var deepMerge = (...sources) => sources.reduce((acc, curr) => {
-  Object.keys(curr).forEach((key) => {
-    if (Array.isArray(acc[key]) && Array.isArray(curr[key])) {
-      acc[key] = Array.from(new Set(acc[key].concat(curr[key])));
-    } else if (isObject(acc[key]) && isObject(curr[key])) {
-      acc[key] = deepMerge(acc[key], curr[key]);
-    } else {
-      acc[key] = curr[key];
-    }
-  });
-  return acc;
-}, {});
-
-// src/utils/renderTemplate.ts
-function mergePkg(source, destination) {
-  const target = JSON.parse((0, import_fs2.readFileSync)(destination, "utf8"));
-  const src = JSON.parse((0, import_fs2.readFileSync)(source, "utf8"));
-  const mergedPkg = deepMerge(target, src);
-  const keysToSort = ["devDependencies", "dependencies"];
-  keysToSort.forEach((k) => {
-    mergedPkg[k] = Object.keys(mergedPkg[k]).sort().reduce((a, c) => (a[c] = mergedPkg[k][c], a), {});
-  });
-  (0, import_fs2.writeFileSync)(destination, JSON.stringify(mergedPkg, null, 2) + "\n");
-}
-function renderDirectory(source, destination) {
-  (0, import_fs2.mkdirSync)(destination, { recursive: true });
-  (0, import_fs2.readdirSync)(source).forEach((path) => renderTemplate((0, import_path2.resolve)(source, path), (0, import_path2.resolve)(destination, path)));
-}
-function renderFile(source, destination) {
-  const filename = (0, import_path2.basename)(source);
-  if (filename.startsWith("_"))
-    destination = (0, import_path2.resolve)((0, import_path2.dirname)(destination), filename.replace("_", "."));
-  if (filename === "package.json")
-    mergePkg(source, destination);
-  else
-    (0, import_fs2.copyFileSync)(source, destination);
-}
-function renderTemplate(source, destination) {
-  if ((0, import_fs2.statSync)(source).isDirectory()) {
-    renderDirectory(source, destination);
-  } else {
-    renderFile(source, destination);
-  }
-}
-
-// src/index.ts
-var validPresets = ["base", "custom", "default", "essentials"];
-async function run() {
-  const argv = (0, import_minimist.default)(process.argv.slice(2), {
-    alias: {
-      "typescript": ["ts"]
-    }
-  });
-  if (argv.preset && !validPresets.includes(argv.preset)) {
-    throw new Error(`'${argv.preset}' is not a valid preset. Valid presets are: ${validPresets.join(", ")}.`);
-  }
-  const banner = "\x1B[38;2;22;151;246mV\x1B[39m\x1B[38;2;22;147;242mu\x1B[39m\x1B[38;2;22;144;238me\x1B[39m\x1B[38;2;22;140;234mt\x1B[39m\x1B[38;2;23;136;229mi\x1B[39m\x1B[38;2;23;133;225mf\x1B[39m\x1B[38;2;23;129;221my\x1B[39m\x1B[38;2;23;125;217m.\x1B[39m\x1B[38;2;23;121;213mj\x1B[39m\x1B[38;2;23;118;209ms\x1B[39m \x1B[38;2;24;114;204m-\x1B[39m \x1B[38;2;24;110;200mM\x1B[39m\x1B[38;2;24;107;196ma\x1B[39m\x1B[38;2;24;103;192mt\x1B[39m\x1B[38;2;32;110;197me\x1B[39m\x1B[38;2;39;118;202mr\x1B[39m\x1B[38;2;47;125;207mi\x1B[39m\x1B[38;2;54;132;211ma\x1B[39m\x1B[38;2;62;140;216ml\x1B[39m \x1B[38;2;70;147;221mC\x1B[39m\x1B[38;2;77;154;226mo\x1B[39m\x1B[38;2;85;161;231mm\x1B[39m\x1B[38;2;93;169;236mp\x1B[39m\x1B[38;2;100;176;240mo\x1B[39m\x1B[38;2;108;183;245mn\x1B[39m\x1B[38;2;115;191;250me\x1B[39m\x1B[38;2;123;198;255mn\x1B[39m\x1B[38;2;126;199;255mt\x1B[39m \x1B[38;2;129;201;255mF\x1B[39m\x1B[38;2;133;202;255mr\x1B[39m\x1B[38;2;136;204;255ma\x1B[39m\x1B[38;2;139;205;255mm\x1B[39m\x1B[38;2;142;207;255me\x1B[39m\x1B[38;2;145;208;255mw\x1B[39m\x1B[38;2;149;210;255mo\x1B[39m\x1B[38;2;152;211;255mr\x1B[39m\x1B[38;2;155;212;255mk\x1B[39m \x1B[38;2;158;214;255mf\x1B[39m\x1B[38;2;161;215;255mo\x1B[39m\x1B[38;2;164;217;255mr\x1B[39m \x1B[38;2;168;218;255mV\x1B[39m\x1B[38;2;171;220;255mu\x1B[39m\x1B[38;2;174;221;255me\x1B[39m";
-  console.log(`
-${banner}
-`);
-  const context = {
-    canOverwrite: false,
-    cwd: process.cwd(),
-    projectName: "vuetify-project",
-    useRouter: false,
-    useTypeScript: argv.typescript,
-    usePreset: argv.preset,
-    useStore: void 0,
-    usePackageManager: void 0
-  };
-  const {
-    canOverwrite,
-    cwd,
-    projectName,
-    useTypeScript,
-    usePackageManager,
-    usePreset,
-    useStore,
-    useEslint,
-    useRouter
-  } = await initPrompts(context);
-  const projectRoot = (0, import_path3.join)(cwd, projectName);
-  if (canOverwrite) {
-    (0, import_fs3.rmSync)(projectRoot, { recursive: true });
-  }
-  (0, import_fs3.mkdirSync)(projectRoot);
-  (0, import_fs3.writeFileSync)((0, import_path3.resolve)(projectRoot, "package.json"), JSON.stringify({ name: projectName }, null, 2));
-  const jsOrTs = useTypeScript ? "typescript" : "javascript";
-  let templatePath = (0, import_path3.resolve)(__dirname, "../template", jsOrTs);
-  console.log("\n\u25CC Generating scaffold...");
-  if (usePreset !== "custom") {
-    renderTemplate((0, import_path3.resolve)(templatePath, usePreset), projectRoot);
-  } else {
-    renderTemplate((0, import_path3.resolve)(templatePath, "default"), projectRoot);
-    templatePath = (0, import_path3.resolve)(templatePath, usePreset);
-    if (useEslint) {
-      renderTemplate((0, import_path3.resolve)(templatePath, "eslint"), projectRoot);
-    }
-    if (useRouter) {
-      renderTemplate((0, import_path3.resolve)(templatePath, "router"), projectRoot);
-    }
-    if (useStore) {
-      renderTemplate((0, import_path3.resolve)(templatePath, "store"), projectRoot);
-      if (useRouter) {
-        renderTemplate((0, import_path3.resolve)(templatePath, "router-pinia"), projectRoot);
-      }
-    }
-  }
-  if (usePackageManager) {
-    console.log(`\u25CC Installing dependencies with ${usePackageManager}...
-`);
-    installDependencies(projectRoot, usePackageManager);
-  }
-  console.log(`
-${projectName} has been generated at ${projectRoot}
-`);
-}
-run().then(() => {
-  console.log("Discord community: https://community.vuetifyjs.com");
-  console.log("Github: https://github.com/vuetifyjs/vuetify");
-  console.log("Support Vuetify: https://github.com/sponsors/johnleider");
-}).catch((err) => {
-  console.error(`
-${(0, import_kolorist2.red)("\u2716")} ${err}
-`);
-  process.exit(1);
-});