vitrify 0.5.1 → 0.5.4

package/dist/app-urls.js

@@ -1,5 +1,12 @@
 // import { resolve } from 'import-meta-resolve'
 import { existsSync } from 'fs';
+export const resolve = (packageName, base) => {
+    const packageUrl = new URL(`./node_modules/${packageName}/`, base);
+    if (existsSync(packageUrl.pathname)) {
+        return new URL('./', packageUrl);
+    }
+    throw new Error(`Package ${packageName} not found in ${base.pathname}.`);
+};
 export const getPkgJsonDir = (dir) => {
     const pkgJsonPath = new URL('package.json', dir);
     if (existsSync(pkgJsonPath.pathname)) {

package/dist/bin/build.js

@@ -8,11 +8,12 @@ export async function build(opts) {
         ssr: opts?.ssr,
         appDir: opts.appDir,
         publicDir: opts.publicDir,
-        base: opts.base
+        base: opts.base,
+        debug: opts.debug
     });
     config.build = {
         ...config.build,
-        minify: false,
+        minify: !opts.debug,
         outDir: opts.outDir,
         emptyOutDir: !!opts.outDir
     };

package/dist/bin/cli.js

@@ -11,6 +11,7 @@ cli
     .option('--appDir [appDir]', 'App directory')
     .option('--publicDir [publicDir]', 'Public directory')
     .option('--productName [productName]', 'Product name')
+    .option('--debug', 'Debug build')
     .action(async (options) => {
     const { build } = await import('./build.js');
     let appDir;
@@ -27,7 +28,8 @@ cli
     const args = {
         base: options.base,
         appDir,
-        publicDir: parsePath(options.publicDir, appDir)
+        publicDir: parsePath(options.publicDir, appDir),
+        debug: options.debug
     };
     switch (options.mode) {
         case 'csr':

package/dist/bin/dev.js

@@ -25,7 +25,6 @@ ssr, framework = 'vue', host, appDir, publicDir, base }) {
         base
     });
     config.logLevel = logLevel;
-    console.log(searchForWorkspaceRoot(appDir.pathname));
     config.server = {
         https: config.server?.https,
         hmr: {

package/dist/index.js

@@ -6,39 +6,17 @@ import path from 'path';
 import { pathToFileURL } from 'url';
 import { readFileSync } from 'fs';
 import builtinModules from 'builtin-modules';
-import { resolve } from 'import-meta-resolve';
-import { getPkgJsonDir } from './app-urls.js';
+// import { resolve } from 'import-meta-resolve'
+import { visualizer } from 'rollup-plugin-visualizer';
+import { getPkgJsonDir, resolve } from './app-urls.js';
 const internalServerModules = [
-    // 'fs',
-    // 'path',
-    // 'url',
-    // 'module',
-    // 'crypto',
-    // 'node:fs',
     'util',
-    'node:url',
-    'node:util',
-    'node:fs',
-    'node:process',
     'vitrify',
     'vitrify/dev',
-    // 'import-meta-resolve',
     'vite',
     'fastify',
-    '@fastify',
+    '@fastify/static',
     'node'
-    // 'middie',
-    // 'knex',
-    // 'bcrypt',
-    // 'objection',
-    // '@fastify/formbody',
-    // '@fastify/static',
-    // '@fastify/cors',
-    // '@fastify/cookie',
-    // 'mercurius',
-    // 'jose',
-    // 'oidc-provider',
-    // 'node-fetch'
 ];
 const configPluginMap = {
     quasar: () => import('./plugins/quasar.js').then((module) => module.QuasarPlugin)
@@ -55,6 +33,9 @@ const manualChunks = (id) => {
         if (name && manualChunkNames.includes(name))
             return name;
     }
+    else if (VIRTUAL_MODULES.some((virtualModule) => id.includes(virtualModule))) {
+        return VIRTUAL_MODULES.find((name) => id.includes(name));
+    }
     else if (id.includes('node_modules')) {
         return 'vendor';
     }
@@ -62,7 +43,9 @@ const manualChunks = (id) => {
 export const VIRTUAL_MODULES = [
     'virtual:vitrify-hooks',
     'virtual:global-css',
-    'virtual:static-imports'
+    'virtual:static-imports',
+    'vitrify.sass',
+    'vitrify.css'
 ];
 async function bundleConfigFile(fileName, isESM = false) {
     const result = await build({
@@ -112,7 +95,7 @@ async function bundleConfigFile(fileName, isESM = false) {
         dependencies: result.metafile ? Object.keys(result.metafile.inputs) : []
     };
 }
-export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command = 'build', mode = 'production', framework = 'vue', pwa = false }) => {
+export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command = 'build', mode = 'production', framework = 'vue', pwa = false, debug = false }) => {
     const { getAppDir, getCliDir, getCliViteDir, getSrcDir, getCwd } = await import('./app-urls.js');
     if (!appDir) {
         appDir = getAppDir();
@@ -152,7 +135,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     const packageUrls = vitrifyConfig.vitrify?.urls?.packages || {};
     await (async () => {
         for (const val of localPackages)
-            packageUrls[val] = getPkgJsonDir(new URL(await resolve(val, appDir.href)));
+            packageUrls[val] = getPkgJsonDir(new URL(await resolve(val, appDir)));
     })();
     // await (async () => {
     //   for (const val of cliPackages)
@@ -194,6 +177,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     let staticImports;
     let sassVariables;
     let additionalData;
+    let globalSass;
     let serverModules = internalServerModules;
     if (vitrifyConfig.vitrify?.ssr?.serverModules)
         serverModules = [
@@ -234,17 +218,20 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                 globalCss = config.vitrify?.globalCss || [];
                 staticImports = config.vitrify?.staticImports || {};
                 sassVariables = config.vitrify?.sass?.variables || {};
+                globalSass = config.vitrify?.sass?.global || [];
                 additionalData = config.vitrify?.sass?.additionalData || [];
                 return {
                     css: {
                         preprocessorOptions: {
-                            sass: {
-                                additionalData: [
-                                    ...Object.entries(sassVariables).map(([key, value]) => `${key}: ${value}`),
-                                    ...additionalData
-                                    // config.css?.preprocessorOptions?.sass.additionalData
-                                ].join('\n')
-                            }
+                        // sass: {
+                        //   additionalData: [
+                        //     ...Object.entries(sassVariables).map(
+                        //       ([key, value]) => `${key}: ${value}`
+                        //     )
+                        //     // ...additionalData
+                        //     // config.css?.preprocessorOptions?.sass.additionalData
+                        //   ].join('\n')
+                        // }
                         }
                     }
                 };
@@ -257,7 +244,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             },
             resolveId(id) {
                 if (VIRTUAL_MODULES.includes(id))
-                    return { id, moduleSideEffects: false };
+                    return { id };
                 return;
             },
             transform: (code, id) => {
@@ -300,6 +287,15 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                         .map(([key, value]) => `export { ${value.join(',')} } from '${key}';`)
                         .join('\n')}`;
                 }
+                else if (id === 'vitrify.sass') {
+                    return [
+                        ...Object.entries(sassVariables).map(([key, value]) => `${key}: ${value}`),
+                        ...globalSass.map((sass) => `@import '${sass}'`)
+                    ].join('\n');
+                }
+                else if (id === 'vitrify.css') {
+                    return `${globalCss.map((css) => `import '${css}'`).join('\n')}`;
+                }
                 return null;
             }
         }
@@ -357,6 +353,8 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                 }
             }
         });
+        if (debug)
+            plugins.push(visualizer());
     }
     const alias = [
         { find: 'src', replacement: srcDir.pathname },
@@ -377,7 +375,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     if (command === 'test')
         alias.push({
             find: 'vitest',
-            replacement: new URL(await resolve('vitest', cliDir.href)).pathname
+            replacement: new URL(await resolve('vitest', cliDir)).pathname
         });
     let rollupOptions = {};
     let noExternal = [
@@ -386,6 +384,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     const external = [...builtinModules, ...serverModules];
     if (ssr === 'server') {
         rollupOptions = {
+            ...rollupOptions,
             input: [
                 new URL('ssr/entry-server.ts', frameworkDir).pathname,
                 new URL('ssr/prerender.ts', frameworkDir).pathname,
@@ -393,7 +392,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             ],
             external,
             output: {
-                minifyInternalExports: false,
+                minifyInternalExports: !debug,
                 entryFileNames: '[name].mjs',
                 chunkFileNames: '[name].mjs',
                 format: 'es',
@@ -416,6 +415,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     }
     else if (ssr === 'fastify') {
         rollupOptions = {
+            ...rollupOptions,
             input: [new URL('server.ts', fastifyDir).pathname],
             external,
             output: {
@@ -441,13 +441,14 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     }
     else {
         rollupOptions = {
-            input: [
-                new URL('index.html', frameworkDir).pathname
-                // new URL('csr/server.ts', frameworkDir).pathname
-            ],
+            ...rollupOptions,
+            // input: [
+            //   new URL('index.html', frameworkDir).pathname
+            //   // new URL('csr/server.ts', frameworkDir).pathname
+            // ],
             external,
             output: {
-                minifyInternalExports: false,
+                minifyInternalExports: !debug,
                 entryFileNames: '[name].mjs',
                 chunkFileNames: '[name].mjs',
                 format: 'es',

package/dist/plugins/quasar.js

@@ -3,8 +3,7 @@ import Components from 'unplugin-vue-components/vite';
 // import { quasarDir as defaultQuasarDir } from '../app-urls.js'
 // import { QuasarResolver } from '../resolver.js';
 import { QuasarResolver } from 'unplugin-vue-components/resolvers';
-import { getPkgJsonDir } from '../app-urls.js';
-import { resolve } from 'import-meta-resolve';
+import { getPkgJsonDir, resolve } from '../app-urls.js';
 export const injectSsrContext = (html, ssrContext) => html
     .replace(/(<html[^>]*)(>)/i, (found, start, end) => {
     let matches;
@@ -59,7 +58,7 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                 const localPackages = ['@quasar/extras', 'quasar'];
                 await (async () => {
                     for (const val of localPackages)
-                        urls.packages[val] = getPkgJsonDir(new URL(await resolve(val, urls.app.href)));
+                        urls.packages[val] = getPkgJsonDir(new URL(await resolve(val, urls.app)));
                 })();
                 const onMountedHooks = [
                     async (instance) => {
@@ -93,7 +92,8 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                             onRendered: [injectSsrContext]
                         },
                         sass: {
-                            additionalData: [`@import 'quasar/src/css/index.sass'`]
+                            global: ['quasar/src/css/index.sass']
+                            // additionalData: [`@import 'quasar/src/css/index.sass'`]
                         }
                     }
                 };
@@ -149,20 +149,17 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                                 find: 'quasar/src',
                                 replacement: new URL('src/', urls?.packages?.quasar).pathname
                             },
-                            {
-                                find: new RegExp('^quasar$'),
-                                replacement: new URL('src/index.all.js', urls?.packages?.quasar)
-                                    .pathname
-                            },
                             // {
-                            //   find: 'quasar',
-                            //   replacement: new URL('src/index.all.js', urls?.packages?.quasar).pathname
+                            //   find: new RegExp('^quasar$'),
+                            //   replacement: new URL('src/index.all.js', urls?.packages?.quasar)
+                            //     .pathname
                             // },
                             {
                                 find: `@quasar/extras`,
                                 replacement: new URL('.', urls?.packages?.['@quasar/extras'])
                                     .pathname
                             }
+                            // { find: new RegExp('^quasar$'), replacement: 'virtual:quasar' }
                         ]
                     },
                     define: {
@@ -184,7 +181,7 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
         },
         {
             name: 'quasar-virtual-modules',
-            enforce: 'post',
+            enforce: 'pre',
             config: async (config, env) => ({
                 resolve: {
                     alias: [
@@ -196,8 +193,8 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                 switch (id) {
                     case 'virtual:quasar-plugins':
                         return 'virtual:quasar-plugins';
-                    case 'virtual:quasar':
-                        return { id: 'virtual:quasar', moduleSideEffects: false };
+                    case 'quasar':
+                        return { id: 'quasar', moduleSideEffects: false };
                     default:
                         return;
                 }
@@ -206,7 +203,7 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                 if (id === 'virtual:quasar-plugins') {
                     return `export { ${plugins.join(',')} } from 'quasar'`;
                 }
-                else if (id === 'virtual:quasar') {
+                else if (id === 'quasar') {
                     return `export * from 'quasar/src/plugins.js';
           export * from 'quasar/src/components.js';
           export * from 'quasar/src/composables.js';

package/dist/types/app-urls.d.ts

@@ -1,3 +1,4 @@
+export declare const resolve: (packageName: string, base: URL) => URL;
 export declare const getPkgJsonDir: (dir: URL) => URL;
 export declare const getAppDir: () => URL;
 export declare const getCliDir: () => URL;

package/dist/types/bin/build.d.ts

@@ -5,4 +5,5 @@ export declare function build(opts: {
     outDir: string;
     appDir?: URL;
     publicDir?: URL;
+    debug?: boolean;
 }): Promise<import("rollup").RollupOutput | import("rollup").RollupOutput[] | import("rollup").RollupWatcher>;

package/dist/types/index.d.ts

@@ -3,7 +3,7 @@ import type { BootFunction, VitrifyConfig } from './vitrify-config.js';
 import type { VitrifyContext } from './bin/run.js';
 import type { VitrifyPlugin } from './plugins/index.js';
 export declare const VIRTUAL_MODULES: string[];
-export declare const baseConfig: ({ ssr, appDir, publicDir, base, command, mode, framework, pwa }: {
+export declare const baseConfig: ({ ssr, appDir, publicDir, base, command, mode, framework, pwa, debug }: {
     ssr?: "server" | "client" | "ssg" | "fastify" | undefined;
     appDir?: URL | undefined;
     publicDir?: URL | undefined;
@@ -12,6 +12,7 @@ export declare const baseConfig: ({ ssr, appDir, publicDir, base, command, mode,
     mode?: "production" | "development" | undefined;
     framework?: "vue" | undefined;
     pwa?: boolean | undefined;
+    debug?: boolean | undefined;
 }) => Promise<InlineConfig>;
 export declare const vitrifyDir: URL;
 export type { VitrifyConfig, VitrifyPlugin, VitrifyContext, BootFunction };

package/dist/types/vitrify-config.d.ts

@@ -50,6 +50,7 @@ export interface VitrifyConfig extends UserConfig {
         sass?: {
             variables?: Record<string, string>;
             additionalData?: string[];
+            global?: string[];
         };
         /**
          * Product name of the application. Will be used for the HTML title tag

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.5.1",
+  "version": "0.5.4",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Pre-configured Vite CLI for your framework",
@@ -64,10 +64,10 @@
     "fastify": "^4.0.0",
     "glob": "^8.0.3",
     "happy-dom": "^5.2.0",
-    "local-pkg": "^0.4.1",
     "magic-string": "^0.26.2",
     "merge-deep": "^3.0.3",
     "readline": "^1.3.0",
+    "rollup-plugin-visualizer": "^5.6.0",
     "sass": "1.52.3",
     "ts-node": "^10.8.1",
     "unplugin-vue-components": "^0.19.6",
@@ -81,7 +81,6 @@
     "@types/node": "^17.0.41",
     "@types/ws": "^8.5.3",
     "@vue/runtime-core": "^3.2.37",
-    "import-meta-resolve": "^2.0.3",
     "quasar": "^2.7.1",
     "rollup": "^2.75.6",
     "typescript": "^4.7.3",
@@ -92,11 +91,9 @@
   "peerDependencies": {
     "@fastify/static": "^6.4.0",
     "fastify": "^4.0.0",
-    "fastify-plugin": "^3.0.1",
     "quasar": "^2.7.1",
     "vue": "^3.2.37",
-    "vue-router": "^4.0.15",
-    "import-meta-resolve": "^2.0.3"
+    "vue-router": "^4.0.15"
   },
   "publishConfig": {
     "access": "public",

package/src/node/app-urls.ts

@@ -1,6 +1,14 @@
 // import { resolve } from 'import-meta-resolve'
 import { existsSync } from 'fs'
 
+export const resolve = (packageName: string, base: URL) => {
+  const packageUrl = new URL(`./node_modules/${packageName}/`, base)
+  if (existsSync(packageUrl.pathname)) {
+    return new URL('./', packageUrl)
+  }
+  throw new Error(`Package ${packageName} not found in ${base.pathname}.`)
+}
+
 export const getPkgJsonDir = (dir: URL): URL => {
   const pkgJsonPath = new URL('package.json', dir)
   if (existsSync(pkgJsonPath.pathname)) {

package/src/node/bin/build.ts

@@ -8,6 +8,7 @@ export async function build(opts: {
   outDir: string
   appDir?: URL
   publicDir?: URL
+  debug?: boolean
 }) {
   const config = await baseConfig({
     command: 'build',
@@ -15,12 +16,13 @@ export async function build(opts: {
     ssr: opts?.ssr,
     appDir: opts.appDir,
     publicDir: opts.publicDir,
-    base: opts.base
+    base: opts.base,
+    debug: opts.debug
   })
 
   config.build = {
     ...config.build,
-    minify: false,
+    minify: !opts.debug,
     outDir: opts.outDir,
     emptyOutDir: !!opts.outDir
   }

package/src/node/bin/cli.ts

@@ -20,6 +20,7 @@ cli
   .option('--appDir [appDir]', 'App directory')
   .option('--publicDir [publicDir]', 'Public directory')
   .option('--productName [productName]', 'Product name')
+  .option('--debug', 'Debug build')
   .action(async (options) => {
     const { build } = await import('./build.js')
     let appDir: URL
@@ -38,10 +39,12 @@ cli
       base: string
       appDir?: URL
       publicDir?: URL
+      debug?: boolean
     } = {
       base: options.base,
       appDir,
-      publicDir: parsePath(options.publicDir, appDir)
+      publicDir: parsePath(options.publicDir, appDir),
+      debug: options.debug
     }
 
     switch (options.mode) {

package/src/node/bin/dev.ts

@@ -52,7 +52,6 @@ export async function createVitrifyDevServer({
 
   config.logLevel = logLevel
 
-  console.log(searchForWorkspaceRoot(appDir.pathname))
   config.server = {
     https: config.server?.https,
     hmr: {

package/src/node/index.ts

@@ -8,7 +8,8 @@ import path from 'path'
 import { pathToFileURL } from 'url'
 import { readFileSync } from 'fs'
 import builtinModules from 'builtin-modules'
-import { resolve } from 'import-meta-resolve'
+// import { resolve } from 'import-meta-resolve'
+import { visualizer } from 'rollup-plugin-visualizer'
 import type {
   StaticImports,
   BootFunction,
@@ -20,40 +21,17 @@ import type {
 } from './vitrify-config.js'
 import type { VitrifyContext } from './bin/run.js'
 import type { VitrifyPlugin } from './plugins/index.js'
-import { getPkgJsonDir } from './app-urls.js'
-import type { RollupOptions } from 'rollup'
+import { getPkgJsonDir, resolve } from './app-urls.js'
+import type { ManualChunksOption, RollupOptions } from 'rollup'
 
 const internalServerModules = [
-  // 'fs',
-  // 'path',
-  // 'url',
-  // 'module',
-  // 'crypto',
-  // 'node:fs',
   'util',
-  'node:url',
-  'node:util',
-  'node:fs',
-  'node:process',
   'vitrify',
   'vitrify/dev',
-  // 'import-meta-resolve',
   'vite',
   'fastify',
-  '@fastify',
+  '@fastify/static',
   'node'
-  // 'middie',
-  // 'knex',
-  // 'bcrypt',
-  // 'objection',
-  // '@fastify/formbody',
-  // '@fastify/static',
-  // '@fastify/cors',
-  // '@fastify/cookie',
-  // 'mercurius',
-  // 'jose',
-  // 'oidc-provider',
-  // 'node-fetch'
 ]
 
 const configPluginMap: Record<string, () => Promise<VitrifyPlugin>> = {
@@ -67,10 +45,14 @@ const manualChunkNames = [
   'fastify-csr-plugin',
   'server'
 ]
-const manualChunks = (id: string) => {
+const manualChunks: ManualChunksOption = (id: string) => {
   if (id.includes('vitrify/src/vite/')) {
     const name = id.split('/').at(-1)?.split('.').at(0)
     if (name && manualChunkNames.includes(name)) return name
+  } else if (
+    VIRTUAL_MODULES.some((virtualModule) => id.includes(virtualModule))
+  ) {
+    return VIRTUAL_MODULES.find((name) => id.includes(name))
   } else if (id.includes('node_modules')) {
     return 'vendor'
   }
@@ -79,7 +61,9 @@ const manualChunks = (id: string) => {
 export const VIRTUAL_MODULES = [
   'virtual:vitrify-hooks',
   'virtual:global-css',
-  'virtual:static-imports'
+  'virtual:static-imports',
+  'vitrify.sass',
+  'vitrify.css'
 ]
 
 async function bundleConfigFile(
@@ -148,7 +132,8 @@ export const baseConfig = async ({
   command = 'build',
   mode = 'production',
   framework = 'vue',
-  pwa = false
+  pwa = false,
+  debug = false
 }: {
   ssr?: 'client' | 'server' | 'ssg' | 'fastify'
   appDir?: URL
@@ -158,6 +143,7 @@ export const baseConfig = async ({
   mode?: 'production' | 'development'
   framework?: 'vue'
   pwa?: boolean
+  debug?: boolean
 }): Promise<InlineConfig> => {
   const { getAppDir, getCliDir, getCliViteDir, getSrcDir, getCwd } =
     await import('./app-urls.js')
@@ -212,9 +198,7 @@ export const baseConfig = async ({
     vitrifyConfig.vitrify?.urls?.packages || {}
   await (async () => {
     for (const val of localPackages)
-      packageUrls[val] = getPkgJsonDir(
-        new URL(await resolve(val, appDir!.href))
-      )
+      packageUrls[val] = getPkgJsonDir(new URL(await resolve(val, appDir)))
   })()
 
   // await (async () => {
@@ -263,6 +247,7 @@ export const baseConfig = async ({
   let staticImports: StaticImports
   let sassVariables: Record<string, string>
   let additionalData: string[]
+  let globalSass: string[]
   let serverModules: string[] = internalServerModules
 
   if (vitrifyConfig.vitrify?.ssr?.serverModules)
@@ -305,20 +290,21 @@ export const baseConfig = async ({
         globalCss = config.vitrify?.globalCss || []
         staticImports = config.vitrify?.staticImports || {}
         sassVariables = config.vitrify?.sass?.variables || {}
+        globalSass = config.vitrify?.sass?.global || []
         additionalData = config.vitrify?.sass?.additionalData || []
 
         return {
           css: {
             preprocessorOptions: {
-              sass: {
-                additionalData: [
-                  ...Object.entries(sassVariables).map(
-                    ([key, value]) => `${key}: ${value}`
-                  ),
-                  ...additionalData
-                  // config.css?.preprocessorOptions?.sass.additionalData
-                ].join('\n')
-              }
+              // sass: {
+              //   additionalData: [
+              //     ...Object.entries(sassVariables).map(
+              //       ([key, value]) => `${key}: ${value}`
+              //     )
+              //     // ...additionalData
+              //     // config.css?.preprocessorOptions?.sass.additionalData
+              //   ].join('\n')
+              // }
             }
           }
         }
@@ -330,8 +316,7 @@ export const baseConfig = async ({
         }
       },
       resolveId(id) {
-        if (VIRTUAL_MODULES.includes(id))
-          return { id, moduleSideEffects: false }
+        if (VIRTUAL_MODULES.includes(id)) return { id }
         return
       },
       transform: (code, id) => {
@@ -379,6 +364,15 @@ export const baseConfig = async ({
               ([key, value]) => `export { ${value.join(',')} } from '${key}';`
             )
             .join('\n')}`
+        } else if (id === 'vitrify.sass') {
+          return [
+            ...Object.entries(sassVariables).map(
+              ([key, value]) => `${key}: ${value}`
+            ),
+            ...globalSass.map((sass) => `@import '${sass}'`)
+          ].join('\n')
+        } else if (id === 'vitrify.css') {
+          return `${globalCss.map((css) => `import '${css}'`).join('\n')}`
         }
         return null
       }
@@ -438,6 +432,8 @@ export const baseConfig = async ({
         }
       }
     })
+
+    if (debug) plugins.push(visualizer())
   }
 
   const alias: Alias[] = [
@@ -460,7 +456,7 @@ export const baseConfig = async ({
   if (command === 'test')
     alias.push({
       find: 'vitest',
-      replacement: new URL(await resolve('vitest', cliDir!.href)).pathname
+      replacement: new URL(await resolve('vitest', cliDir)).pathname
     })
 
   let rollupOptions: RollupOptions = {}
@@ -471,6 +467,7 @@ export const baseConfig = async ({
 
   if (ssr === 'server') {
     rollupOptions = {
+      ...rollupOptions,
       input: [
         new URL('ssr/entry-server.ts', frameworkDir).pathname,
         new URL('ssr/prerender.ts', frameworkDir).pathname,
@@ -478,7 +475,7 @@ export const baseConfig = async ({
       ],
       external,
       output: {
-        minifyInternalExports: false,
+        minifyInternalExports: !debug,
         entryFileNames: '[name].mjs',
         chunkFileNames: '[name].mjs',
         format: 'es',
@@ -500,6 +497,7 @@ export const baseConfig = async ({
     ]
   } else if (ssr === 'fastify') {
     rollupOptions = {
+      ...rollupOptions,
       input: [new URL('server.ts', fastifyDir).pathname],
       external,
       output: {
@@ -524,13 +522,14 @@ export const baseConfig = async ({
     ]
   } else {
     rollupOptions = {
-      input: [
-        new URL('index.html', frameworkDir).pathname
-        // new URL('csr/server.ts', frameworkDir).pathname
-      ],
+      ...rollupOptions,
+      // input: [
+      //   new URL('index.html', frameworkDir).pathname
+      //   // new URL('csr/server.ts', frameworkDir).pathname
+      // ],
       external,
       output: {
-        minifyInternalExports: false,
+        minifyInternalExports: !debug,
         entryFileNames: '[name].mjs',
         chunkFileNames: '[name].mjs',
         format: 'es',

package/src/node/plugins/quasar.ts

@@ -12,8 +12,9 @@ import type {
 // import { QuasarResolver } from '../resolver.js';
 import { QuasarResolver } from 'unplugin-vue-components/resolvers'
 import type { VitrifyPlugin } from './index.js'
-import { getPkgJsonDir } from '../app-urls.js'
-import { resolve } from 'import-meta-resolve'
+import { getPkgJsonDir, resolve } from '../app-urls.js'
+
+// import { resolve } from 'import-meta-resolve'
 
 export interface QuasarConf {
   ctx: Record<string, any>
@@ -122,7 +123,7 @@ export const QuasarPlugin: VitrifyPlugin = async ({
         await (async () => {
           for (const val of localPackages)
             urls!.packages![val] = getPkgJsonDir(
-              new URL(await resolve(val, urls!.app!.href))
+              new URL(await resolve(val, urls!.app!))
             )
         })()
 
@@ -167,7 +168,8 @@ export const QuasarPlugin: VitrifyPlugin = async ({
               onRendered: [injectSsrContext]
             },
             sass: {
-              additionalData: [`@import 'quasar/src/css/index.sass'`]
+              global: ['quasar/src/css/index.sass']
+              // additionalData: [`@import 'quasar/src/css/index.sass'`]
             }
           }
         }
@@ -231,7 +233,6 @@ export const QuasarPlugin: VitrifyPlugin = async ({
                   urls?.packages?.quasar
                 ).pathname
               },
-
               {
                 find: 'quasar/directives',
                 replacement: new URL(
@@ -243,20 +244,17 @@ export const QuasarPlugin: VitrifyPlugin = async ({
                 find: 'quasar/src',
                 replacement: new URL('src/', urls?.packages?.quasar).pathname
               },
-              {
-                find: new RegExp('^quasar$'),
-                replacement: new URL('src/index.all.js', urls?.packages?.quasar)
-                  .pathname
-              },
               // {
-              //   find: 'quasar',
-              //   replacement: new URL('src/index.all.js', urls?.packages?.quasar).pathname
+              //   find: new RegExp('^quasar$'),
+              //   replacement: new URL('src/index.all.js', urls?.packages?.quasar)
+              //     .pathname
               // },
               {
                 find: `@quasar/extras`,
                 replacement: new URL('.', urls?.packages?.['@quasar/extras'])
                   .pathname
               }
+              // { find: new RegExp('^quasar$'), replacement: 'virtual:quasar' }
             ]
           },
           define: {
@@ -278,7 +276,7 @@ export const QuasarPlugin: VitrifyPlugin = async ({
     },
     {
       name: 'quasar-virtual-modules',
-      enforce: 'post',
+      enforce: 'pre',
       config: async (config, env) => ({
         resolve: {
           alias: [
@@ -290,8 +288,8 @@ export const QuasarPlugin: VitrifyPlugin = async ({
         switch (id) {
           case 'virtual:quasar-plugins':
             return 'virtual:quasar-plugins'
-          case 'virtual:quasar':
-            return { id: 'virtual:quasar', moduleSideEffects: false }
+          case 'quasar':
+            return { id: 'quasar', moduleSideEffects: false }
           default:
             return
         }
@@ -299,7 +297,7 @@ export const QuasarPlugin: VitrifyPlugin = async ({
       load(id) {
         if (id === 'virtual:quasar-plugins') {
           return `export { ${plugins.join(',')} } from 'quasar'`
-        } else if (id === 'virtual:quasar') {
+        } else if (id === 'quasar') {
           return `export * from 'quasar/src/plugins.js';
           export * from 'quasar/src/components.js';
           export * from 'quasar/src/composables.js';

package/src/node/vitrify-config.ts

@@ -1,4 +1,3 @@
-import type { FastifyInstance } from 'fastify'
 import type { Alias, UserConfig } from 'vite'
 import type { QuasarConf } from './plugins/quasar.js'
 import type { ComponentInternalInstance } from '@vue/runtime-core'
@@ -72,6 +71,7 @@ export interface VitrifyConfig extends UserConfig {
     sass?: {
       variables?: Record<string, string>
       additionalData?: string[]
+      global?: string[]
     }
     /**
      * Product name of the application. Will be used for the HTML title tag

package/src/vite/vue/csr/app.ts

@@ -4,22 +4,21 @@ import { getAppDir } from '../../../node/app-urls.js'
 import { onRendered, onSetup } from 'virtual:vitrify-hooks'
 import { fastifyCsrPlugin } from './fastify-csr-plugin.js'
 import type { ViteDevServer } from 'vite'
-import * as imr from 'import-meta-resolve'
-const { resolve } = imr
+
 // const appDir = getPkgJsonDir(import.meta.url)
 const getString = (str?: string) => str
 let baseUrl = getString(__BASE_URL__)
 const appDir = getAppDir()
 
 export const setupApp = async () => {
-  const vitrifyDir = new URL('../', await resolve('vitrify', import.meta.url))
+  // const vitrifyDir = new URL('../', await resolve('vitrify', new URL(import.meta.url)))
   return createApp({
     onSetup,
     appDir,
     baseUrl,
     onRendered,
     fastifyPlugin: fastifyCsrPlugin,
-    vitrifyDir,
+    // vitrifyDir,
     mode: import.meta.env.MODE
   })
 }

package/src/vite/vue/main.ts

@@ -1,3 +1,5 @@
+// import 'vitrify.css'
+import 'vitrify.sass'
 import App from 'src/App.vue'
 import createRouter from 'src/router'
 import {

package/src/vite/vue/ssr/app.ts

@@ -4,22 +4,21 @@ import { getAppDir } from '../../../node/app-urls.js'
 import { onRendered, onSetup } from 'virtual:vitrify-hooks'
 import { fastifySsrPlugin } from './fastify-ssr-plugin.js'
 import type { ViteDevServer } from 'vite'
-import * as imr from 'import-meta-resolve'
-const { resolve } = imr
+
 // const appDir = getPkgJsonDir(import.meta.url)
 const getString = (str?: string) => str
 let baseUrl = getString(__BASE_URL__)
 const appDir = getAppDir()
 
 export const setupApp = async () => {
-  const vitrifyDir = new URL('../', await resolve('vitrify', import.meta.url))
+  // const vitrifyDir = new URL('../', await resolve('vitrify', new URL(import.meta.url)))
   return createApp({
     onSetup,
     appDir,
     baseUrl,
     onRendered,
     fastifyPlugin: fastifySsrPlugin,
-    vitrifyDir,
+    // vitrifyDir,
     mode: import.meta.env.MODE
   })
 }