vitrify 0.10.5 → 0.11.0

package/dist/bin/build.js

@@ -9,7 +9,8 @@ export async function build(opts) {
         appDir: opts.appDir,
         publicDir: opts.publicDir,
         base: opts.base,
-        debug: opts.debug
+        debug: opts.debug,
+        productName: opts.productName
     });
     config.build = {
         ...config.build,

package/dist/bin/cli.js

@@ -30,7 +30,8 @@ cli
         base: options.base,
         appDir,
         publicDir: parsePath(options.publicDir, appDir),
-        debug: options.debug
+        debug: options.debug,
+        productName: options.productName
     };
     switch (options.mode) {
         case 'csr':

package/dist/bin/dev.js

@@ -101,7 +101,11 @@ ssr, framework = 'vue', host, appDir, publicDir }) {
             : new URL(`src/vite/${framework}/ssr/app.ts`, cliDir).pathname;
         ({ setup, onRendered, vitrifyConfig } = await vite.ssrLoadModule(entryUrl));
         const app = fastify({
-            logger: false,
+            logger: {
+                level: process.env.DEBUG
+                    ? 'debug'
+                    : process.env.PINO_LOG_LEVEL || 'info'
+            },
             https: vite.config.server.https,
             ...vitrifyConfig.vitrify?.ssr?.fastify
         });

package/dist/frameworks/vue/fastify-ssr-plugin.js

@@ -1,7 +1,6 @@
 import fastifyStatic from '@fastify/static';
 import { readFileSync } from 'fs';
-import { componentsModules, collectCss } from '../../helpers/collect-css-ssr.js';
-import { appendToHead } from '../../helpers/utils.js';
+import { addOrReplaceAppDiv, appendToBody, appendToHead } from '../../helpers/utils.js';
 const fastifySsrPlugin = async (fastify, options, done) => {
     options.baseUrl = options.baseUrl || '/';
     options.mode = options.mode || process.env.MODE || import.meta.env.MODE;
@@ -84,26 +83,34 @@ const fastifySsrPlugin = async (fastify, options, done) => {
                 catch (e) {
                     manifest = {};
                 }
-                const cssModules = [entryUrl];
-                // // @ts-ignore
-                // if (options.vite?.config.vitrify!.globalCss)
-                //   cssModules.push(...options.vite?.config.vitrify.globalCss)
-                const matchedModules = componentsModules(cssModules, vite);
-                const css = collectCss({
-                    mods: matchedModules
-                });
+                // const cssModules = [entryUrl]
+                // const matchedModules = componentsModules(cssModules, vite!)
+                // const css = collectCss({
+                //   mods: matchedModules
+                // })
                 const [appHtml, preloadLinks] = await render(url, manifest, ssrContext);
                 if (!ssrContext.initialState)
                     ssrContext.initialState = {};
                 ssrContext.initialState.provide = provide;
-                let html = template
-                    .replace(`<!--app-html-->`, appHtml)
-                    .replace('<!--product-name-->', options.productName || 'Product name')
-                    .replace('<!--dev-ssr-css-->', css)
-                    .replace('<!--initial-state-->', `<script>
-            __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
-            </script>`);
-                html = appendToHead(preloadLinks, html);
+                const initialStateScript = `
+        <script>
+        __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+        </script>`;
+                const renderHtml = (html) => {
+                    return appendToHead(preloadLinks, appendToBody(initialStateScript, addOrReplaceAppDiv(appHtml, html)));
+                };
+                let html = renderHtml(template);
+                // let html = template
+                //   .replace(`<!--app-html-->`, appHtml)
+                //   .replace('<!--product-name-->', options.productName || 'Product name')
+                //   // .replace('<!--dev-ssr-css-->', css)
+                //   .replace(
+                //     '<!--initial-state-->',
+                //     `<script>
+                //     __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+                //     </script>`
+                //   )
+                // html = appendToHead(preloadLinks, html)
                 if (options.onRendered?.length) {
                     for (const ssrFunction of options.onRendered) {
                         html = ssrFunction(html, ssrContext);
@@ -145,10 +152,21 @@ const fastifySsrPlugin = async (fastify, options, done) => {
             if (!ssrContext.initialState)
                 ssrContext.initialState = {};
             ssrContext.initialState.provide = provide;
-            let html = template.replace(`<!--app-html-->`, appHtml).replace('<!--initial-state-->', `<script>
-          __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
-          </script>`);
-            html = appendToHead(preloadLinks, html);
+            const initialStateScript = `
+      <script>
+      __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+      </script>`;
+            const renderHtml = (html) => {
+                return appendToHead(preloadLinks, appendToBody(initialStateScript, addOrReplaceAppDiv(appHtml, html)));
+            };
+            let html = renderHtml(template);
+            // let html = template.replace(`<!--app-html-->`, appHtml).replace(
+            //   '<!--initial-state-->',
+            //   `<script>
+            //     __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+            //     </script>`
+            // )
+            // html = appendToHead(preloadLinks, html)
             if (options.onRendered?.length) {
                 for (const ssrFunction of options.onRendered) {
                     html = ssrFunction(html, ssrContext);

package/dist/helpers/utils.js

@@ -22,5 +22,23 @@ export function resolveHostname(optionsHost) {
         : host;
     return { host, name };
 }
-export const appendToHead = (preloadLinks, html) => html.replace(/<\/head>/, preloadLinks + '</head>');
-export const appendToBody = (links, html) => html.replace(/<\/body>/, links + '</body>');
+export const appendToHead = (content, html) => html.replace(/<\/head>/, content + '</head>');
+export const appendToBody = (content, html) => html.replace(/<\/body>/, content + '</body>');
+export const addOrReplaceTitle = (title, html) => {
+    const currentTitle = html.match(/<title>.*<\/title>/);
+    const newTitle = `<title>${title}</title>`;
+    if (currentTitle)
+        html = html.replace(/<title>.*<\/title>/, newTitle);
+    else
+        html = appendToHead(newTitle, html);
+    return html;
+};
+export const addOrReplaceAppDiv = (content, html) => {
+    const currentAppDiv = html.match(/<div id="app">.*<\/div>/);
+    const newAppDiv = `<div id="app">${content}</div>`;
+    if (currentAppDiv)
+        html = html.replace(/<div id="app">.*<\/div>/, newAppDiv);
+    else
+        html = appendToBody(newAppDiv, html);
+    return html;
+};

package/dist/index.js

@@ -11,6 +11,7 @@ import builtinModules from 'builtin-modules';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { resolve } from './app-urls.js';
 import envPlugin from '@vitrify/plugin-env';
+import { addOrReplaceTitle, appendToBody } from './helpers/utils.js';
 const internalServerModules = [
     'util',
     'vitrify',
@@ -21,7 +22,10 @@ const internalServerModules = [
     '@fastify/middie',
     '@fastify',
     'node',
-    'critters'
+    'critters',
+    'node-fetch',
+    'ws',
+    'abort-controller'
 ];
 const configPluginMap = {
     quasar: () => import('./plugins/quasar.js').then((module) => module.QuasarPlugin)
@@ -108,7 +112,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, debug = false }) => {
+export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command = 'build', mode = 'production', framework = 'vue', pwa = false, debug = false, productName }) => {
     const { getAppDir, getCliDir, getCliViteDir, getSrcDir, getCwd } = await import('./app-urls.js');
     if (!appDir) {
         appDir = getAppDir();
@@ -162,15 +166,19 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     //       new URL(await resolve(val, cliDir!.href))
     //     )
     // })()
-    let productName = 'Product name';
-    try {
-        ;
-        ({ productName } = JSON.parse(readFileSync(new URL('package.json', appDir).pathname, {
-            encoding: 'utf-8'
-        })));
+    if (!productName) {
+        try {
+            ;
+            ({ productName } = JSON.parse(readFileSync(new URL('package.json', appDir).pathname, {
+                encoding: 'utf-8'
+            })));
+        }
+        catch (e) {
+            console.error('package.json not found');
+            productName = 'Product name';
+        }
     }
-    catch (e) {
-        console.error('package.json not found');
+    else {
     }
     const frameworkPlugins = [];
     for (const framework of Object.keys(configPluginMap)) {
@@ -202,16 +210,21 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             name: 'vitrify-transforms',
             enforce: 'pre',
             transform: (code, id) => {
-                if (['main.ts', 'vitrify'].every((val) => id.includes(val))) {
-                    code =
-                        `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code;
-                }
+                // if (['main.ts', 'vitrify'].every((val) => id.includes(val))) {
+                //   code =
+                //     `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code
+                // }
                 if (['RootComponent.vue', 'vitrify'].every((val) => id.includes(val))) {
+                    const css = `${globalCss
+                        .map((css) => `@import '${css}';`)
+                        .join('\n')}\n`;
                     const sass = [
                         ...Object.entries(sassVariables).map(([key, value]) => `${key}: ${value}`),
                         ...globalSass.map((sass) => `@import '${sass}'`)
                     ].join('\n');
-                    code = code.replace(/<style lang="sass">(.*?)<\/style>/, '<style lang="sass">' + sass + '</style>');
+                    code = code
+                        .replace(/<style>(.*?)<\/style>/, '<style>' + css + '</style>')
+                        .replace(/<style lang="sass">(.*?)<\/style>/, '<style lang="sass">' + sass + '</style>');
                     // code = code.replace(/<\/style>/, sass + '</style>')
                 }
                 return code;
@@ -347,29 +360,31 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                             entry = new URL('csr/entry.ts', frameworkDir).pathname;
                     }
                     const entryScript = `<script type="module" src="${entry}"></script>`;
-                    html = html
-                        .replace('<!--entry-script-->', entryScript)
-                        .replace('<!--product-name-->', productName);
-                    return html;
-                }
-            }
-        });
-        plugins.unshift({
-            name: 'product-name',
-            enforce: 'post',
-            config: (config, env) => {
-                if (config.vitrify?.productName)
-                    productName = config.vitrify?.productName;
-                return;
-            },
-            transformIndexHtml: {
-                enforce: 'post',
-                transform: (html) => {
-                    html = html.replace('<!--product-name-->', productName);
+                    // html = html.replace('<!--entry-script-->', entryScript)
+                    html = appendToBody(entryScript, html);
+                    if (productName)
+                        html = addOrReplaceTitle(productName, html);
+                    // html = html.replace('<!--product-name-->', productName)
                     return html;
                 }
             }
         });
+        // plugins.unshift({
+        //   name: 'product-name',
+        //   enforce: 'post',
+        //   config: (config: VitrifyConfig, env) => {
+        //     if (config.vitrify?.productName)
+        //       productName = config.vitrify?.productName
+        //     return
+        //   },
+        //   transformIndexHtml: {
+        //     enforce: 'post',
+        //     transform: (html) => {
+        //       html = html.replace('<!--product-name-->', productName)
+        //       return html
+        //     }
+        //   }
+        // })
         // @ts-ignore
         if (debug)
             plugins.push(visualizer());

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

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

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

@@ -34,12 +34,12 @@ export declare function createServer({ port, logLevel, ssr, framework, host, app
         isWorker: boolean;
         isProduction: boolean;
         env: Record<string, any>;
-        resolve: import("vite").ResolveOptions & {
+        resolve: Required<import("vite").ResolveOptions> & {
             alias: import("vite").Alias[];
         };
         plugins: readonly import("vite").Plugin[];
         server: import("vite").ResolvedServerOptions;
-        build: Required<import("vite").BuildOptions>;
+        build: import("vite").ResolvedBuildOptions;
         preview: import("vite").ResolvedPreviewOptions;
         ssr: import("vite").ResolvedSSROptions;
         assetsInclude: (file: string) => boolean;

package/dist/types/frameworks/vue/fastify-ssr-plugin.d.ts

@@ -11,7 +11,6 @@ export interface FastifySsrOptions {
     onRendered?: OnRenderedHook[];
     appDir?: URL;
     publicDir?: URL;
-    productName?: string;
     mode?: string;
     host?: string;
 }

package/dist/types/helpers/utils.d.ts

@@ -3,5 +3,7 @@ export interface Hostname {
     name: string;
 }
 export declare function resolveHostname(optionsHost: string | boolean | undefined): Hostname;
-export declare const appendToHead: (preloadLinks: string, html: string) => string;
-export declare const appendToBody: (links: string, html: string) => string;
+export declare const appendToHead: (content: string, html: string) => string;
+export declare const appendToBody: (content: string, html: string) => string;
+export declare const addOrReplaceTitle: (title: string, html: string) => string;
+export declare const addOrReplaceAppDiv: (content: string, html: string) => string;

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, debug }: {
+export declare const baseConfig: ({ ssr, appDir, publicDir, base, command, mode, framework, pwa, debug, productName }: {
     ssr?: "server" | "client" | "ssg" | "fastify" | undefined;
     appDir?: URL | undefined;
     publicDir?: URL | undefined;
@@ -13,6 +13,7 @@ export declare const baseConfig: ({ ssr, appDir, publicDir, base, command, mode,
     framework?: "vue" | undefined;
     pwa?: boolean | undefined;
     debug?: boolean | undefined;
+    productName?: string | undefined;
 }) => Promise<InlineConfig>;
 export declare const vitrifyDir: URL;
 export { prerender } from './frameworks/vue/prerender.js';

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "vitrify",
-  "version": "0.10.5",
+  "version": "0.11.0",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Vite as your Full Stack development tool",
   "type": "module",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/types/index.d.ts",
   "bin": {
     "vitrify": "./dist/bin/cli.js"
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/index.js"
     },
     "./build": {

package/src/node/bin/build.ts

@@ -9,6 +9,7 @@ export async function build(opts: {
   appDir?: URL
   publicDir?: URL
   debug?: boolean
+  productName?: string
 }) {
   const config = await baseConfig({
     command: 'build',
@@ -17,7 +18,8 @@ export async function build(opts: {
     appDir: opts.appDir,
     publicDir: opts.publicDir,
     base: opts.base,
-    debug: opts.debug
+    debug: opts.debug,
+    productName: opts.productName
   })
 
   config.build = {

package/src/node/bin/cli.ts

@@ -35,11 +35,13 @@ cli
       appDir?: URL
       publicDir?: URL
       debug?: boolean
+      productName?: string
     } = {
       base: options.base,
       appDir,
       publicDir: parsePath(options.publicDir, appDir),
-      debug: options.debug
+      debug: options.debug,
+      productName: options.productName
     }
 
     switch (options.mode) {

package/src/node/bin/dev.ts

@@ -159,7 +159,11 @@ export async function createServer({
 
     ;({ setup, onRendered, vitrifyConfig } = await vite.ssrLoadModule(entryUrl))
     const app = fastify({
-      logger: false,
+      logger: {
+        level: process.env.DEBUG
+          ? 'debug'
+          : process.env.PINO_LOG_LEVEL || 'info'
+      },
       https: vite.config.server.https,
       ...vitrifyConfig.vitrify?.ssr?.fastify
     } as FastifyServerOptions)

package/src/node/frameworks/vue/fastify-ssr-plugin.ts

@@ -6,7 +6,12 @@ import type {
 import fastifyStatic from '@fastify/static'
 import { readFileSync } from 'fs'
 import { componentsModules, collectCss } from '../../helpers/collect-css-ssr.js'
-import { appendToHead } from '../../helpers/utils.js'
+import {
+  addOrReplaceAppDiv,
+  addOrReplaceTitle,
+  appendToBody,
+  appendToHead
+} from '../../helpers/utils.js'
 import type { ViteDevServer } from 'vite'
 import type { OnRenderedHook } from '../../vitrify-config.js'
 export interface FastifySsrOptions {
@@ -21,7 +26,6 @@ export interface FastifySsrOptions {
   onRendered?: OnRenderedHook[]
   appDir?: URL
   publicDir?: URL
-  productName?: string
   mode?: string
   host?: string
 }
@@ -125,32 +129,41 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
           manifest = {}
         }
 
-        const cssModules = [entryUrl]
-        // // @ts-ignore
-        // if (options.vite?.config.vitrify!.globalCss)
-        //   cssModules.push(...options.vite?.config.vitrify.globalCss)
-        const matchedModules = componentsModules(cssModules, vite!)
-        const css = collectCss({
-          mods: matchedModules
-        })
+        // const cssModules = [entryUrl]
+        // const matchedModules = componentsModules(cssModules, vite!)
+        // const css = collectCss({
+        //   mods: matchedModules
+        // })
 
         const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
 
         if (!ssrContext.initialState) ssrContext.initialState = {}
         ssrContext.initialState.provide = provide
 
-        let html = template
-          .replace(`<!--app-html-->`, appHtml)
-          .replace('<!--product-name-->', options.productName || 'Product name')
-          .replace('<!--dev-ssr-css-->', css)
-          .replace(
-            '<!--initial-state-->',
-            `<script>
-            __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
-            </script>`
+        const initialStateScript = `
+        <script>
+        __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+        </script>`
+        const renderHtml = (html: string) => {
+          return appendToHead(
+            preloadLinks,
+            appendToBody(initialStateScript, addOrReplaceAppDiv(appHtml, html))
           )
+        }
+
+        let html = renderHtml(template)
+        // let html = template
+        //   .replace(`<!--app-html-->`, appHtml)
+        //   .replace('<!--product-name-->', options.productName || 'Product name')
+        //   // .replace('<!--dev-ssr-css-->', css)
+        //   .replace(
+        //     '<!--initial-state-->',
+        //     `<script>
+        //     __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+        //     </script>`
+        //   )
 
-        html = appendToHead(preloadLinks, html)
+        // html = appendToHead(preloadLinks, html)
 
         if (options.onRendered?.length) {
           for (const ssrFunction of options.onRendered) {
@@ -206,14 +219,27 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
       if (!ssrContext.initialState) ssrContext.initialState = {}
       ssrContext.initialState.provide = provide
 
-      let html = template.replace(`<!--app-html-->`, appHtml).replace(
-        '<!--initial-state-->',
-        `<script>
-          __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
-          </script>`
-      )
+      const initialStateScript = `
+      <script>
+      __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+      </script>`
+      const renderHtml = (html: string) => {
+        return appendToHead(
+          preloadLinks,
+          appendToBody(initialStateScript, addOrReplaceAppDiv(appHtml, html))
+        )
+      }
+
+      let html = renderHtml(template)
+
+      // let html = template.replace(`<!--app-html-->`, appHtml).replace(
+      //   '<!--initial-state-->',
+      //   `<script>
+      //     __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+      //     </script>`
+      // )
 
-      html = appendToHead(preloadLinks, html)
+      // html = appendToHead(preloadLinks, html)
 
       if (options.onRendered?.length) {
         for (const ssrFunction of options.onRendered) {

package/src/node/helpers/utils.ts

@@ -36,8 +36,24 @@ export function resolveHostname(
   return { host, name }
 }
 
-export const appendToHead = (preloadLinks: string, html: string) =>
-  html.replace(/<\/head>/, preloadLinks + '</head>')
+export const appendToHead = (content: string, html: string) =>
+  html.replace(/<\/head>/, content + '</head>')
 
-export const appendToBody = (links: string, html: string) =>
-  html.replace(/<\/body>/, links + '</body>')
+export const appendToBody = (content: string, html: string) =>
+  html.replace(/<\/body>/, content + '</body>')
+
+export const addOrReplaceTitle = (title: string, html: string) => {
+  const currentTitle = html.match(/<title>.*<\/title>/)
+  const newTitle = `<title>${title}</title>`
+  if (currentTitle) html = html.replace(/<title>.*<\/title>/, newTitle)
+  else html = appendToHead(newTitle, html)
+  return html
+}
+
+export const addOrReplaceAppDiv = (content: string, html: string) => {
+  const currentAppDiv = html.match(/<div id="app">.*<\/div>/)
+  const newAppDiv = `<div id="app">${content}</div>`
+  if (currentAppDiv) html = html.replace(/<div id="app">.*<\/div>/, newAppDiv)
+  else html = appendToBody(newAppDiv, html)
+  return html
+}

package/src/node/index.ts

@@ -24,6 +24,7 @@ import type { VitrifyPlugin } from './plugins/index.js'
 import { resolve } from './app-urls.js'
 import type { ManualChunksOption, RollupOptions } from 'rollup'
 import envPlugin from '@vitrify/plugin-env'
+import { addOrReplaceTitle, appendToBody } from './helpers/utils.js'
 
 const internalServerModules = [
   'util',
@@ -35,7 +36,10 @@ const internalServerModules = [
   '@fastify/middie',
   '@fastify',
   'node',
-  'critters'
+  'critters',
+  'node-fetch',
+  'ws',
+  'abort-controller'
 ]
 
 const configPluginMap: Record<string, () => Promise<VitrifyPlugin>> = {
@@ -149,7 +153,8 @@ export const baseConfig = async ({
   mode = 'production',
   framework = 'vue',
   pwa = false,
-  debug = false
+  debug = false,
+  productName
 }: {
   ssr?: 'client' | 'server' | 'ssg' | 'fastify'
   appDir?: URL
@@ -160,6 +165,7 @@ export const baseConfig = async ({
   framework?: 'vue'
   pwa?: boolean
   debug?: boolean
+  productName?: string
 }): Promise<InlineConfig> => {
   const { getAppDir, getCliDir, getCliViteDir, getSrcDir, getCwd } =
     await import('./app-urls.js')
@@ -228,15 +234,18 @@ export const baseConfig = async ({
   //     )
   // })()
 
-  let productName = 'Product name'
-  try {
-    ;({ productName } = JSON.parse(
-      readFileSync(new URL('package.json', appDir).pathname, {
-        encoding: 'utf-8'
-      })
-    ))
-  } catch (e) {
-    console.error('package.json not found')
+  if (!productName) {
+    try {
+      ;({ productName } = JSON.parse(
+        readFileSync(new URL('package.json', appDir).pathname, {
+          encoding: 'utf-8'
+        })
+      ))
+    } catch (e) {
+      console.error('package.json not found')
+      productName = 'Product name'
+    }
+  } else {
   }
 
   const frameworkPlugins = []
@@ -274,21 +283,27 @@ export const baseConfig = async ({
       name: 'vitrify-transforms',
       enforce: 'pre',
       transform: (code, id) => {
-        if (['main.ts', 'vitrify'].every((val) => id.includes(val))) {
-          code =
-            `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code
-        }
+        // if (['main.ts', 'vitrify'].every((val) => id.includes(val))) {
+        //   code =
+        //     `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code
+        // }
         if (['RootComponent.vue', 'vitrify'].every((val) => id.includes(val))) {
+          const css = `${globalCss
+            .map((css) => `@import '${css}';`)
+            .join('\n')}\n`
+
           const sass = [
             ...Object.entries(sassVariables).map(
               ([key, value]) => `${key}: ${value}`
             ),
             ...globalSass.map((sass) => `@import '${sass}'`)
           ].join('\n')
-          code = code.replace(
-            /<style lang="sass">(.*?)<\/style>/,
-            '<style lang="sass">' + sass + '</style>'
-          )
+          code = code
+            .replace(/<style>(.*?)<\/style>/, '<style>' + css + '</style>')
+            .replace(
+              /<style lang="sass">(.*?)<\/style>/,
+              '<style lang="sass">' + sass + '</style>'
+            )
           // code = code.replace(/<\/style>/, sass + '</style>')
         }
         return code
@@ -422,30 +437,31 @@ export const baseConfig = async ({
               entry = new URL('csr/entry.ts', frameworkDir).pathname
           }
           const entryScript = `<script type="module" src="${entry}"></script>`
-          html = html
-            .replace('<!--entry-script-->', entryScript)
-            .replace('<!--product-name-->', productName)
+          // html = html.replace('<!--entry-script-->', entryScript)
+          html = appendToBody(entryScript, html)
+          if (productName) html = addOrReplaceTitle(productName, html)
+          // html = html.replace('<!--product-name-->', productName)
           return html
         }
       }
     })
 
-    plugins.unshift({
-      name: 'product-name',
-      enforce: 'post',
-      config: (config: VitrifyConfig, env) => {
-        if (config.vitrify?.productName)
-          productName = config.vitrify?.productName
-        return
-      },
-      transformIndexHtml: {
-        enforce: 'post',
-        transform: (html) => {
-          html = html.replace('<!--product-name-->', productName)
-          return html
-        }
-      }
-    })
+    // plugins.unshift({
+    //   name: 'product-name',
+    //   enforce: 'post',
+    //   config: (config: VitrifyConfig, env) => {
+    //     if (config.vitrify?.productName)
+    //       productName = config.vitrify?.productName
+    //     return
+    //   },
+    //   transformIndexHtml: {
+    //     enforce: 'post',
+    //     transform: (html) => {
+    //       html = html.replace('<!--product-name-->', productName)
+    //       return html
+    //     }
+    //   }
+    // })
 
     // @ts-ignore
     if (debug) plugins.push(visualizer())

package/src/vite/vue/RootComponent.vue

@@ -24,4 +24,5 @@ onMountedVue(async () => {
 const render = () => h(App, props)
 </script>
 
+<style></style>
 <style lang="sass"></style>