diff --git a/prerender.cjs b/prerender.cjs index 4761e51..c1747ff 100644 --- a/prerender.cjs +++ b/prerender.cjs @@ -103,7 +103,6 @@ const shopConfig = require("./src/config.js").default; const { renderPage } = require("./prerender/renderer.cjs"); const { collectAllCategories, - writeCombinedCssFile, } = require("./prerender/utils.cjs"); const { generateProductMetaTags, @@ -642,8 +641,7 @@ const renderApp = async (categoryData, socket) => { ); } - // Write the combined CSS file after all pages are rendered - writeCombinedCssFile(config.globalCssCollection, config.outputDir); + // No longer writing combined CSS file - each page has its own embedded CSS // Generate XML sitemap with all rendered pages console.log("\n🗺️ Generating XML sitemap..."); diff --git a/prerender/renderer.cjs b/prerender/renderer.cjs index 42e7d99..9eb585b 100644 --- a/prerender/renderer.cjs +++ b/prerender/renderer.cjs @@ -27,7 +27,7 @@ const renderPage = ( globalCssCollection, webpackEntrypoints, } = config; - const { writeCombinedCssFile, optimizeCss } = require("./utils.cjs"); + const { optimizeCss } = require("./utils.cjs"); // @note Set prerender fallback flag in global environment for CategoryBox during SSR if (typeof global !== "undefined" && global.window) { @@ -52,26 +52,20 @@ const renderPage = ( ); let renderedMarkup; + let pageSpecificCss = ""; // Declare outside try block for broader scope try { renderedMarkup = ReactDOMServer.renderToString(pageElement); const emotionChunks = extractCriticalToChunks(renderedMarkup); - // Collect CSS from this page + // Collect CSS from this page for direct inlining (no global accumulation) if (emotionChunks.styles.length > 0) { - const oldSize = globalCssCollection.size; - emotionChunks.styles.forEach((style) => { if (style.css) { - globalCssCollection.add(style.css); + pageSpecificCss += style.css + "\n"; } }); - - // Check if new styles were added - if (globalCssCollection.size > oldSize) { - // Write CSS file immediately when new styles are added - writeCombinedCssFile(globalCssCollection, outputDir); - } + if (!suppressLogs) console.log(` - CSS rules: ${emotionChunks.styles.length}`); } } catch (error) { console.error(`❌ Rendering failed for ${filename}:`, error); @@ -127,26 +121,12 @@ const renderPage = ( } }); - // Read and inline prerender CSS to eliminate render-blocking request - try { - const prerenderCssPath = path.resolve(__dirname, "..", outputDir, "prerender.css"); - if (fs.existsSync(prerenderCssPath)) { - const prerenderCssContent = fs.readFileSync(prerenderCssPath, "utf8"); - // Use advanced CSS optimization - const optimizedPrerenderCss = optimizeCss(prerenderCssContent); - inlinedCss += optimizedPrerenderCss; - if (!suppressLogs) console.log(` ✅ Inlined prerender CSS (${Math.round(optimizedPrerenderCss.length / 1024)}KB)`); - } else { - // Fallback to external loading if prerender.css doesn't exist yet - additionalTags += ``; - additionalTags += ``; - if (!suppressLogs) console.log(` ⚠️ prerender.css not found for inlining, using async loading`); - } - } catch (error) { - // Fallback to external loading - additionalTags += ``; - additionalTags += ``; - if (!suppressLogs) console.log(` ⚠️ Error reading prerender.css: ${error.message}, using async loading`); + // Inline page-specific CSS directly (no shared prerender.css file) + if (pageSpecificCss.trim()) { + // Use advanced CSS optimization on page-specific CSS + const optimizedPageCss = optimizeCss(pageSpecificCss); + inlinedCss += optimizedPageCss; + if (!suppressLogs) console.log(` ✅ Inlined page-specific CSS (${Math.round(optimizedPageCss.length / 1024)}KB)`); } // Add JavaScript files