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