Fix cssesc from breaking browser code (#10194)

* Fix cssesc from breaking browser code * Include specific thing instead * Update .changeset/quick-bottles-march.md Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev> * Fix ISR * Remove query stripping altogether * Warn on client usage * Fix build * oops --------- Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
withastro · Feb 22, 2024 · 3cc2010 · 3cc2010
1 parent c856c72
commit 3cc2010
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 18 deletions.
diff --git a/.changeset/cuddly-ads-fail.md b/.changeset/cuddly-ads-fail.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/vercel": patch
+---
+
+Fix loading client-scripts in dev with ISR
diff --git a/.changeset/quick-bottles-march.md b/.changeset/quick-bottles-march.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes an issue related to content collections usage in browser context caused by `csssec`
diff --git a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts
@@ -61,13 +61,14 @@ export function astroContentVirtualModPlugin({
 				}
 			}
 		},
-		async load(id) {
+		async load(id, args) {
 			if (id === RESOLVED_VIRTUAL_MODULE_ID) {
 				const lookupMap = await generateLookupMap({
 					settings,
 					fs,
 				});
-				const code = await generateContentEntryFile({ settings, fs, lookupMap, IS_DEV, IS_SERVER });
+				const isClient = !args?.ssr;
+				const code = await generateContentEntryFile({ settings, fs, lookupMap, IS_DEV, IS_SERVER, isClient });
 
 				return {
 					code,
@@ -102,12 +103,14 @@ export async function generateContentEntryFile({
 	lookupMap,
 	IS_DEV,
 	IS_SERVER,
+	isClient
 }: {
 	settings: AstroSettings;
 	fs: typeof nodeFs;
 	lookupMap: ContentLookupMap;
 	IS_DEV: boolean;
 	IS_SERVER: boolean;
+	isClient: boolean;
 }) {
 	const contentPaths = getContentPaths(settings.config);
 	const relContentDir = rootRelativePath(settings.config.root, contentPaths.contentDir);
@@ -143,13 +146,15 @@ export async function generateContentEntryFile({
 		renderEntryGlobResult = getStringifiedCollectionFromLookup('render', relContentDir, lookupMap);
 	}
 
-	const virtualModContents = nodeFs
+	let virtualModContents = nodeFs
 		.readFileSync(contentPaths.virtualModTemplate, 'utf-8')
 		.replace('@@CONTENT_DIR@@', relContentDir)
 		.replace("'@@CONTENT_ENTRY_GLOB_PATH@@'", contentEntryGlobResult)
 		.replace("'@@DATA_ENTRY_GLOB_PATH@@'", dataEntryGlobResult)
 		.replace("'@@RENDER_ENTRY_GLOB_PATH@@'", renderEntryGlobResult)
-		.replace('/* @@LOOKUP_MAP_ASSIGNMENT@@ */', `lookupMap = ${JSON.stringify(lookupMap)};`);
+		.replace('/* @@LOOKUP_MAP_ASSIGNMENT@@ */', `lookupMap = ${JSON.stringify(lookupMap)};`) +
+		(isClient ? `
+console.warn('astro:content is only supported running server-side. Using it in the browser will lead to bloated bundles and slow down page load. In the future it will not be supported.');` : '');
 
 	return virtualModContents;
 }

diff --git a/packages/astro/src/core/build/plugins/plugin-content.ts b/packages/astro/src/core/build/plugins/plugin-content.ts
@@ -164,6 +164,7 @@ function vitePluginContent(
 				lookupMap,
 				IS_DEV: false,
 				IS_SERVER: false,
+				isClient: false,
 			});
 			this.emitFile({
 				type: 'prebuilt-chunk',

diff --git a/packages/astro/src/transitions/vite-plugin-transitions.ts b/packages/astro/src/transitions/vite-plugin-transitions.ts
@@ -10,6 +10,13 @@ const resolvedVirtualClientModuleId = '\0' + virtualClientModuleId;
 export default function astroTransitions({ settings }: { settings: AstroSettings }): vite.Plugin {
 	return {
 		name: 'astro:transitions',
+		config() {
+			return {
+				optimizeDeps: {
+					include: ['astro > cssesc'],
+				},
+			};
+		},
 		async resolveId(id) {
 			if (id === virtualModuleId) {
 				return resolvedVirtualModuleId;

diff --git a/packages/integrations/vercel/src/serverless/adapter.ts b/packages/integrations/vercel/src/serverless/adapter.ts
@@ -287,20 +287,6 @@ export default function vercelServerless({
 					);
 				}
 			},
-			'astro:server:setup'({ server }) {
-				// isr functions do not have access to search params, this middleware removes them for the dev mode
-				if (isr) {
-					const exclude_ = typeof isr === 'object' ? isr.exclude ?? [] : [];
-					// we create a regex to emulate vercel's production behavior
-					const exclude = exclude_.concat('/_image').map((ex) => new RegExp(escapeRegex(ex)));
-					server.middlewares.use(function removeIsrParams(req, _, next) {
-						const { pathname } = new URL(`https://example.com${req.url}`);
-						if (exclude.some((ex) => ex.test(pathname))) return next();
-						req.url = pathname;
-						return next();
-					});
-				}
-			},
 			'astro:build:ssr': async ({ entryPoints, middlewareEntryPoint }) => {
 				_entryPoints = entryPoints;
 				_middlewareEntryPoint = middlewareEntryPoint;