fix markdown page script injection

withastro · Mar 24, 2022 · 022c8cf · 022c8cf
1 parent 003df32
commit 022c8cf
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 30 deletions.
diff --git a/.changeset/cyan-pigs-ring.md b/.changeset/cyan-pigs-ring.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix a bug where tailwind integration wouldn't apply to markdown pages
diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro
@@ -14,8 +14,9 @@ import Button from '../components/Button.astro';
 	</head>
 
 	<body>
-		<div class="grid place-items-center h-screen">
-			<Button>Click Me!</Button>
+		<div class="grid place-items-center h-screen content-center">
+			<Button>Tailwind Button in Astro!</Button>
+			<a href="/markdown-page" class="p-4 underline">Markdown is also supported...</a>
 		</div>
 	</body>
 </html>
diff --git a/examples/with-tailwindcss/src/pages/markdown-page.md b/examples/with-tailwindcss/src/pages/markdown-page.md
@@ -0,0 +1,10 @@
+---
+title: "Markdown + Tailwind"
+setup: |
+    import Button from '../components/Button.astro';
+---
+
+<div class="grid place-items-center h-screen content-center">
+    <Button>Tailwind Button in Markdown!</Button>
+    <a href="/" class="p-4 underline">Go home...</a>
+</div>
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -465,7 +465,7 @@ export interface AstroUserConfig {
  * - "page": Injected into the JavaScript bundle of every page. Processed & resolved by Vite.
  * - "page-ssr": Injected into the frontmatter of every Astro page. Processed & resolved by Vite.
  */
-type InjectedScriptStage = 'before-hydration' | 'head-inline' | 'page' | 'page-ssr';
+export type InjectedScriptStage = 'before-hydration' | 'head-inline' | 'page' | 'page-ssr';
 
 /**
  * Resolved Astro Config

diff --git a/packages/astro/src/core/build/generate.ts b/packages/astro/src/core/build/generate.ts
@@ -15,6 +15,7 @@ import { call as callEndpoint } from '../endpoint/index.js';
 import { render } from '../render/core.js';
 import { createLinkStylesheetElementSet, createModuleScriptElementWithSrcSet } from '../render/ssr-element.js';
 import { getOutRoot, getOutFolder, getOutFile } from './common.js';
+import { BEFORE_HYDRATION_SCRIPT_ID } from '../../vite-plugin-scripts/index.js';
 
 // Render is usually compute, which Node.js can't parallelize well.
 // In real world testing, dropping from 10->1 showed a notiable perf
@@ -196,7 +197,7 @@ async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: G
 					// Return this as placeholder, which will be ignored by the browser.
 					// TODO: In the future, we hope to run this entire script through Vite,
 					// removing the need to maintain our own custom Vite-mimic resolve logic.
-					if (specifier === 'astro:scripts/before-hydration.js') {
+					if (specifier === BEFORE_HYDRATION_SCRIPT_ID) {
 						return 'data:text/javascript;charset=utf-8,//[no before-hydration script]';
 					}
 					throw new Error(`Cannot find the built path for ${specifier}`);

diff --git a/packages/astro/src/core/build/vite-plugin-ssr.ts b/packages/astro/src/core/build/vite-plugin-ssr.ts
@@ -7,6 +7,7 @@ import type { SerializedRouteInfo, SerializedSSRManifest } from '../app/types';
 
 import { chunkIsPage, rootRelativeFacadeId, getByFacadeId } from './generate.js';
 import { serializeRouteData } from '../routing/index.js';
+import { BEFORE_HYDRATION_SCRIPT_ID } from '../../vite-plugin-scripts/index.js';
 
 const virtualModuleId = '@astrojs-ssr-virtual-entry';
 const resolvedVirtualModuleId = '\0' + virtualModuleId;
@@ -107,7 +108,7 @@ function buildManifest(bundle: OutputBundle, opts: StaticBuildOptions, internals
 
 	// HACK! Patch this special one.
 	const entryModules = Object.fromEntries(internals.entrySpecifierToBundleMap.entries());
-	entryModules['astro:scripts/before-hydration.js'] = 'data:text/javascript;charset=utf-8,//[no before-hydration script]';
+	entryModules[BEFORE_HYDRATION_SCRIPT_ID] = 'data:text/javascript;charset=utf-8,//[no before-hydration script]';
 
 	const ssrManifest: SerializedSSRManifest = {
 		routes,

diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts
@@ -107,7 +107,8 @@ export async function generateHydrateScript(scriptOptions: HydrateScriptOptions,
 		: `await import("${await result.resolve(componentUrl)}");
   return () => {};
 `;
-
+	// TODO: If we can figure out tree-shaking in the final SSR build, we could safely
+	// use BEFORE_HYDRATION_SCRIPT_ID instead of 'astro:scripts/before-hydration.js'.
 	const hydrationScript = {
 		props: { type: 'module', 'data-astro-component-hydration': true },
 		children: `import setup from '${await result.resolve(hydrationSpecifier(hydrate))}';

diff --git a/packages/astro/src/vite-plugin-astro/index.ts b/packages/astro/src/vite-plugin-astro/index.ts
@@ -13,6 +13,7 @@ import { cachedCompilation } from './compile.js';
 import ancestor from 'common-ancestor-path';
 import { trackCSSDependencies, handleHotUpdate } from './hmr.js';
 import { isRelativePath, startsWithForwardSlash } from '../core/path.js';
+import { PAGE_SCRIPT_ID, PAGE_SSR_SCRIPT_ID } from '../vite-plugin-scripts/index.js';
 
 const FRONTMATTER_PARSE_REGEXP = /^\-\-\-(.*)^\-\-\-/ms;
 interface AstroPluginOptions {
@@ -93,9 +94,9 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 			const filename = normalizeFilename(parsedId.filename);
 			const fileUrl = new URL(`file://${filename}`);
 			let source = await fs.promises.readFile(fileUrl, 'utf-8');
-			const isPage = filename.startsWith(config.pages.pathname);
+			const isPage = fileUrl.pathname.startsWith(config.pages.pathname);
 			if (isPage && config._ctx.scripts.some((s) => s.stage === 'page')) {
-				source += `\n<script hoist src="astro:scripts/page.js" />`;
+				source += `\n<script hoist src="${PAGE_SCRIPT_ID}" />`;
 			}
 			if (query.astro) {
 				if (query.type === 'style') {
@@ -152,7 +153,7 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 				}
 				// Add handling to inject scripts into each page JS bundle, if needed.
 				if (isPage) {
-					SUFFIX += `\nimport "astro:scripts/page-ssr.js";`;
+					SUFFIX += `\nimport "${PAGE_SSR_SCRIPT_ID}";`;
 				}
 				return {
 					code: `${code}${SUFFIX}`,

diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts
@@ -4,6 +4,7 @@ import esbuild from 'esbuild';
 import fs from 'fs';
 import type { Plugin } from 'vite';
 import type { AstroConfig } from '../@types/astro';
+import { PAGE_SSR_SCRIPT_ID } from '../vite-plugin-scripts/index.js';
 
 interface AstroPluginOptions {
 	config: AstroConfig;
@@ -27,7 +28,7 @@ export default function markdown({ config }: AstroPluginOptions): Plugin {
 		enforce: 'pre', // run transforms before other plugins can
 		async load(id) {
 			if (id.endsWith('.md')) {
-				let source = await fs.promises.readFile(id, 'utf8');
+				const source = await fs.promises.readFile(id, 'utf8');
 
 				// Transform from `.md` to valid `.astro`
 				let render = config.markdownOptions.render;
@@ -42,13 +43,20 @@ export default function markdown({ config }: AstroPluginOptions): Plugin {
 				let renderResult = await render(source, renderOpts);
 				let { frontmatter, metadata, code: astroResult } = renderResult;
 
+				const filename = normalizeFilename(id);
+				const fileUrl = new URL(`file://${filename}`);
+				const isPage = fileUrl.pathname.startsWith(config.pages.pathname);
+				const hasInjectedScript = (isPage && config._ctx.scripts.some((s) => s.stage === 'page-ssr'));
+
 				// Extract special frontmatter keys
 				const { layout = '', components = '', setup = '', ...content } = frontmatter;
 				content.astro = metadata;
 				const prelude = `---
 ${layout ? `import Layout from '${layout}';` : ''}
 ${components ? `import * from '${components}';` : ''}
+${hasInjectedScript ? `import '${PAGE_SSR_SCRIPT_ID}';` : ''}
 ${setup}
+
 const $$content = ${JSON.stringify(content)}
 ---`;
 				const imports = `${layout ? `import Layout from '${layout}';` : ''}
@@ -60,12 +68,6 @@ ${setup}`.trim();
 					astroResult = `${prelude}\n${astroResult}`;
 				}
 
-				const filename = normalizeFilename(id);
-				const fileUrl = new URL(`file://${filename}`);
-				const isPage = filename.startsWith(config.pages.pathname);
-				if (isPage && config._ctx.scripts.some((s) => s.stage === 'page')) {
-					source += `\n<script hoist src="astro:scripts/page.js" />`;
-				}
 
 				// Transform from `.astro` to valid `.ts`
 				let { code: tsResult } = await transform(astroResult, {

diff --git a/packages/astro/src/vite-plugin-scripts/index.ts b/packages/astro/src/vite-plugin-scripts/index.ts
@@ -1,13 +1,13 @@
 import { Plugin as VitePlugin } from 'vite';
-import { AstroConfig } from '../@types/astro.js';
+import { AstroConfig, InjectedScriptStage } from '../@types/astro.js';
 
 // NOTE: We can't use the virtual "\0" ID convention because we need to
 // inject these as ESM imports into actual code, where they would not
 // resolve correctly.
 const SCRIPT_ID_PREFIX = `astro:scripts/`;
-const BEFORE_HYDRATION_SCRIPT_ID = `${SCRIPT_ID_PREFIX}before-hydration.js`;
-const PAGE_SCRIPT_ID = `${SCRIPT_ID_PREFIX}page.js`;
-const PAGE_SSR_SCRIPT_ID = `${SCRIPT_ID_PREFIX}page-ssr.js`;
+export const BEFORE_HYDRATION_SCRIPT_ID = `${SCRIPT_ID_PREFIX}${'before-hydration' as InjectedScriptStage}.js`;
+export const PAGE_SCRIPT_ID = `${SCRIPT_ID_PREFIX}${'page' as InjectedScriptStage}.js`;
+export const PAGE_SSR_SCRIPT_ID = `${SCRIPT_ID_PREFIX}${'page-ssr' as InjectedScriptStage}.js`;
 
 export default function astroScriptsPlugin({ config }: { config: AstroConfig }): VitePlugin {
 	return {

diff --git a/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro b/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro
@@ -2,11 +2,6 @@
 // Component Imports
 import Button from '../components/Button.astro';
 import Complex from '../components/Complex.astro';
-
-import "../styles/global.css";
-
-// Full Astro Component Syntax:
-// https://docs.astro.build/core-concepts/astro-components/
 ---
 
 <html lang="en">

diff --git a/packages/astro/test/fixtures/tailwindcss/src/pages/markdown-page.md b/packages/astro/test/fixtures/tailwindcss/src/pages/markdown-page.md
@@ -0,0 +1,11 @@
+---
+title: "Markdown + Tailwind"
+setup: |
+    import Button from '../components/Button.astro';
+    import Complex from '../components/Complex.astro';
+---
+
+<div class="grid place-items-center h-screen content-center">
+    <Button>Tailwind Button in Markdown!</Button>
+    <Complex />
+</div>
diff --git a/packages/astro/test/fixtures/tailwindcss/src/styles/global.css b/packages/astro/test/fixtures/tailwindcss/src/styles/global.css
diff --git a/packages/astro/test/tailwindcss.test.js b/packages/astro/test/tailwindcss.test.js
@@ -55,6 +55,14 @@ describe('Tailwind', () => {
 			expect(button.hasClass('w-10/12'), 'solidus').to.be.true;
 			expect(button.hasClass('2xl:w-[80%]'), 'complex class').to.be.true;
 		});
+
+		it('handles Markdown pages', async () => {
+			const html = await fixture.readFile('/markdown-page/index.html');
+			const $ = cheerio.load(html);
+			const bundledCSSHREF = $('link[rel=stylesheet][href^=/assets/]').attr('href');
+			const bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
+			expect(bundledCSS, 'includes used component classes').to.match(/\.bg-purple-600{/);
+		});
 	});
 
 	// with "build" handling CSS checking, the dev tests are mostly testing the paths resolve in dev
@@ -73,8 +81,8 @@ describe('Tailwind', () => {
 		});
 
 		it('resolves CSS in src/styles', async () => {
-			const href = $(`link[href$="/src/styles/global.css"]`).attr('href');
-			const res = await fixture.fetch(href);
+			const bundledCSSHREF = $('link[rel=stylesheet]').attr('href');
+			const res = await fixture.fetch(bundledCSSHREF);
 			expect(res.status).to.equal(200);
 
 			const text = await res.text();