debug

packages/astro/src/core/config.ts

@@ -69,7 +69,17 @@ export const AstroConfigSchema = z.object({
 		.optional()
 		.default('./dist')
 		.transform((val) => new URL(val)),
-	integrations: z.array(z.any()).default([]),
+	integrations: z.preprocess(
+		// preprocess
+		(val) => Array.isArray(val) ? val.flat(Infinity).filter(Boolean) : val,
+		// validate
+		z.array(z.object({ name: z.string(), hooks: z.object({}).passthrough().default({}) })).default([])
+			// validate: first-party integrations only
+			// TODO: Add `To use 3rd-party integrations or to create your own, use the --experimental-integrations flag.`,
+			.refine((arr) => arr.every(integration => integration.name.startsWith('@astrojs/')), {
+				message: `Astro integrations are still experimental, and only official integrations are currently supported`
+			}
+			)),
 	styleOptions: z
 		.object({
 			postcss: z

packages/astro/src/vite-plugin-jsx/index.ts

@@ -98,7 +98,7 @@ export default function jsx({ config, logging }: AstroPluginJSXOptions): Plugin
 					throw new Error(
 						`${colors.yellow(
 							id
-						)}\nUnable to resolve a renderer that handles JSX transforms! Please include a \`renderer\` plugin which supports JSX in your \`astro.config.mjs\` file.`
+						)}\nUnable to resolve a JSX renderer! Did you forget to include one? Add a JSX integration like \`@astrojs/react\` to your \`astro.config.mjs\` file.`
 					);
 				}
 				for (const [importSource, renderer] of possibleRenderers) {

packages/astro/test/config-validate.test.js

@@ -41,7 +41,31 @@ describe('Config Validation', () => {
 		expect(formattedError).to.equal(
 			`[config] Astro found issue(s) with your configuration:
   ! pages  Expected string, received object.
+  ! integrations.0  Expected object, received number.
   ! buildOptions.pageUrlFormat  Invalid input.`
 		);
 	});
+
+	it('ignores falsey "integration" values', async () => {
+		const result = await validateConfig({ integrations: [0, false, null, undefined] }, process.cwd());
+		expect(result.integrations).to.deep.equal([]);
+	});
+	it('normalizes "integration" values', async () => {
+		const result = await validateConfig({ integrations: [{ name: '@astrojs/a' }] }, process.cwd());
+		expect(result.integrations).to.deep.equal([{ name: '@astrojs/a', hooks: {} }]);
+	});
+	it('flattens array "integration" values', async () => {
+		const result = await validateConfig({ integrations: [{ name: '@astrojs/a' }, [{ name: '@astrojs/b' }, { name: '@astrojs/c' }]] }, process.cwd());
+		expect(result.integrations).to.deep.equal([{ name: '@astrojs/a', hooks: {} }, { name: '@astrojs/b', hooks: {} }, { name: '@astrojs/c', hooks: {} }]);
+	});
+	it('blocks third-party "integration" values', async () => {
+		const configError = await validateConfig({ integrations: [{ name: '@my-plugin/a' }]}, process.cwd()).catch((err) => err);
+		expect(configError instanceof z.ZodError).to.equal(true);
+		const formattedError = stripAnsi(formatConfigError(configError));
+		expect(formattedError).to.equal(
+			`[config] Astro found issue(s) with your configuration:
+  ! integrations  Astro integrations are still experimental, and only official integrations are currently supported.`
+		);
+	});
+
 });

packages/astro/test/tailwindcss.test.js

@@ -65,6 +65,7 @@ describe('Tailwind', () => {
 		before(async () => {
 			devServer = await fixture.startDevServer();
 			const html = await fixture.fetch('/').then((res) => res.text());
+			console.log(html);
 			$ = cheerio.load(html);
 		});
 
@@ -74,10 +75,12 @@ describe('Tailwind', () => {
 
 		it('resolves CSS in src/styles', async () => {
 			const href = $(`link[href$="/src/styles/global.css"]`).attr('href');
+			console.log({href});
 			const res = await fixture.fetch(href);
 			expect(res.status).to.equal(200);
 
 			const text = await res.text();
+			console.log({text});
 
 			expect(text, 'includes used component classes').to.match(/\.bg-purple-600/);
 

packages/integrations/tailwind/src/index.ts

@@ -1,4 +1,6 @@
 import type { AstroIntegration } from 'astro';
+import {fileURLToPath} from 'url';
+import path from 'path';
 import tailwindPlugin from 'tailwindcss';
 import autoprefixerPlugin from 'autoprefixer';
 
@@ -8,7 +10,7 @@ function getDefaultTailwindConfig(srcUrl: URL) {
 			extend: {},
 		},
 		plugins: [],
-		content: [`${srcUrl.pathname}/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}`],
+		content: [path.join(fileURLToPath(srcUrl), `**`, `*.{astro,html,js,jsx,svelte,ts,tsx,vue}`)],
 	};
 }
 
@@ -17,6 +19,7 @@ export default function (): AstroIntegration {
 		name: '@astrojs/tailwind',
 		hooks: {
 			'astro:config:setup': ({ config, injectScript }) => {
+				console.log({TWCONTENT: getDefaultTailwindConfig(config.src)});
 				// Inject the Tailwind postcss plugin
 				config.styleOptions.postcss.plugins.push(tailwindPlugin(getDefaultTailwindConfig(config.src)));
 				config.styleOptions.postcss.plugins.push(autoprefixerPlugin);