Merge branch 'main' into fix/export-cookies-type

.changeset/mean-tips-search.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/tailwind': patch
+---
+
+Re-enable autoprefixer in dev

.changeset/twenty-pans-agree.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/netlify': minor
+---
+
+Add `builders` config option for Netlify On-demand Builders.

examples/with-tailwindcss/src/components/Button.astro

@@ -4,7 +4,7 @@
 ---
 
 <button
-	class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
+	class="appearance-none py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
 >
 	<slot />
 </button>

packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro

@@ -3,7 +3,7 @@ let { type = 'button' } = Astro.props;
 ---
 
 <button
-	class="py-2 px-4 lg:py-3 lg:px-5 bg-purple-600 text-white font-[900] rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
+	class="appearance-none py-2 px-4 lg:py-3 lg:px-5 bg-purple-600 text-white font-[900] rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
 	{type}
 >
 	<slot />

packages/astro/e2e/tailwindcss.test.js

@@ -33,6 +33,13 @@ test.describe('Tailwind CSS', () => {
 
 		const button = page.locator('button');
 
+		await expect(button, 'should have appearance none').toHaveClass(/appearance-none/);
+		await expect(button, 'should have appearance: none').toHaveCSS('appearance', 'none');
+		await expect(button, 'should have appearance-none with webkit prefix').toHaveCSS(
+			'-webkit-appearance',
+			'none'
+		);
+
 		await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
 		await expect(button, 'should have background color').toHaveCSS(
 			'background-color',

packages/integrations/netlify/README.md

@@ -117,6 +117,27 @@ And then point to the dist in your `netlify.toml`:
 directory = "dist/functions"
 ```
 
+### builders
+
+[Netlify On-demand Builders](https://docs.netlify.com/configure-builds/on-demand-builders/) are serverless functions used to build and cache page content on Netlify’s Edge CDN. You can enable these functions with the `builders` option:
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import netlify from '@astrojs/netlify/functions';
+
+export default defineConfig({
+  output: 'server',
+  adapter: netlify({
+    builders: true
+  }),
+});
+```
+
+On-demand Builders are only available with the `@astrojs/netlify/functions` adapter and are not compatible with Edge Functions.
+
+
+
 ### binaryMediaTypes
 
 > This option is only needed for the Functions adapter and is not needed for Edge Functions.

packages/integrations/netlify/src/integration-edge-functions.ts

@@ -163,7 +163,7 @@ export function netlifyEdgeFunctions({ dist }: NetlifyEdgeFunctionsOptions = {})
 			'astro:build:done': async ({ routes, dir }) => {
 				await bundleServerEntry(_buildConfig, _vite);
 				await createEdgeManifest(routes, entryFile, _config.root);
-				await createRedirects(_config, routes, dir, entryFile, true);
+				await createRedirects(_config, routes, dir, entryFile, 'edge-functions');
 			},
 		},
 	};

packages/integrations/netlify/src/integration-functions.ts

@@ -13,11 +13,13 @@ export function getAdapter(args: Args = {}): AstroAdapter {
 
 interface NetlifyFunctionsOptions {
 	dist?: URL;
+	builders?: boolean;
 	binaryMediaTypes?: string[];
 }
 
 function netlifyFunctions({
 	dist,
+	builders,
 	binaryMediaTypes,
 }: NetlifyFunctionsOptions = {}): AstroIntegration {
 	let _config: AstroConfig;
@@ -36,7 +38,7 @@ function netlifyFunctions({
 				});
 			},
 			'astro:config:done': ({ config, setAdapter }) => {
-				setAdapter(getAdapter({ binaryMediaTypes }));
+				setAdapter(getAdapter({ binaryMediaTypes, builders }));
 				_config = config;
 				entryFile = config.build.serverEntry.replace(/\.m?js/, '');
 
@@ -48,7 +50,8 @@ function netlifyFunctions({
 				}
 			},
 			'astro:build:done': async ({ routes, dir }) => {
-				await createRedirects(_config, routes, dir, entryFile, false);
+				const type = builders ? 'builders' : 'functions';
+				await createRedirects(_config, routes, dir, entryFile, type);
 			},
 		},
 	};

packages/integrations/netlify/src/netlify-functions.ts

@@ -1,5 +1,5 @@
 import { polyfill } from '@astrojs/webapi';
-import type { Handler } from '@netlify/functions';
+import { builder, Handler } from '@netlify/functions';
 import { SSRManifest } from 'astro';
 import { App } from 'astro/app';
 
@@ -8,6 +8,7 @@ polyfill(globalThis, {
 });
 
 export interface Args {
+	builders?: boolean;
 	binaryMediaTypes?: string[];
 }
 
@@ -20,6 +21,7 @@ const clientAddressSymbol = Symbol.for('astro.clientAddress');
 export const createExports = (manifest: SSRManifest, args: Args) => {
 	const app = new App(manifest);
 
+	const builders = args.builders ?? false;
 	const binaryMediaTypes = args.binaryMediaTypes ?? [];
 	const knownBinaryMediaTypes = new Set([
 		'audio/3gpp',
@@ -53,7 +55,7 @@ export const createExports = (manifest: SSRManifest, args: Args) => {
 		...binaryMediaTypes,
 	]);
 
-	const handler: Handler = async (event) => {
+	const myHandler: Handler = async (event) => {
 		const { httpMethod, headers, rawUrl, body: requestBody, isBase64Encoded } = event;
 		const init: RequestInit = {
 			method: httpMethod,
@@ -143,6 +145,8 @@ export const createExports = (manifest: SSRManifest, args: Args) => {
 		return fnResponse;
 	};
 
+	const handler = builders ? builder(myHandler) : myHandler;
+
 	return { handler };
 };
 

packages/integrations/netlify/src/shared.ts

@@ -14,10 +14,10 @@ export async function createRedirects(
 	routes: RouteData[],
 	dir: URL,
 	entryFile: string,
-	edge: boolean
+	type: 'functions' | 'edge-functions' | 'builders'
 ) {
 	const _redirectsURL = new URL('./_redirects', dir);
-	const kind = edge ? 'edge-functions' : 'functions';
+	const kind = type ?? 'functions';
 
 	const definitions: RedirectDefinition[] = [];
 

packages/integrations/tailwind/README.md

@@ -68,7 +68,7 @@ export default defineConfig({
 
 When you install the integration, Tailwind's utility classes should be ready to go right away. Head to the [Tailwind docs](https://tailwindcss.com/docs/utility-first) to learn how to use Tailwind, and if you see a utility class you want to try, add it to any HTML element to your project!
 
-[Autoprefixer](https://github.com/postcss/autoprefixer) is also setup automatically for production builds so Tailwind classes will work in older browsers.
+[Autoprefixer](https://github.com/postcss/autoprefixer) is also set up automatically when working in dev mode, and for production builds, so Tailwind classes will work in older browsers.
 
 https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b861-d6e1cc800b6c.mp4
 

packages/integrations/tailwind/src/index.ts

@@ -85,11 +85,7 @@ async function getPostCssConfig(
 	return postcssConfigResult;
 }
 
-async function getViteConfiguration(
-	isBuild: boolean,
-	tailwindConfig: TailwindConfig,
-	viteConfig: UserConfig
-) {
+async function getViteConfiguration(tailwindConfig: TailwindConfig, viteConfig: UserConfig) {
 	// We need to manually load postcss config files because when inlining the tailwind and autoprefixer plugins,
 	// that causes vite to ignore postcss config files
 	const postcssConfigResult = await getPostCssConfig(viteConfig.root, viteConfig.css?.postcss);
@@ -100,9 +96,7 @@ async function getViteConfiguration(
 		postcssConfigResult && postcssConfigResult.plugins ? postcssConfigResult.plugins.slice() : [];
 	postcssPlugins.push(tailwindPlugin(tailwindConfig));
 
-	if (isBuild) {
-		postcssPlugins.push(autoprefixerPlugin());
-	}
+	postcssPlugins.push(autoprefixerPlugin());
 	return {
 		css: {
 			postcss: {
@@ -140,7 +134,6 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
 		name: '@astrojs/tailwind',
 		hooks: {
 			'astro:config:setup': async ({
-				command,
 				config,
 				updateConfig,
 				injectScript,
@@ -166,7 +159,7 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
 					(userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);
 
 				updateConfig({
-					vite: await getViteConfiguration(command === 'build', tailwindConfig, config.vite),
+					vite: await getViteConfiguration(tailwindConfig, config.vite),
 				});
 
 				if (applyBaseStyles) {