diff --git a/.changeset/cyan-pigs-ring.md b/.changeset/cyan-pigs-ring.md new file mode 100644 index 000000000..9e03aa3c9 --- /dev/null +++ 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 index 743653a95..ebccafa34 100644 --- 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'; -
- +
+ + Markdown is also supported...
diff --git a/examples/with-tailwindcss/src/pages/markdown-page.md b/examples/with-tailwindcss/src/pages/markdown-page.md new file mode 100644 index 000000000..9aa98ffa9 --- /dev/null +++ b/examples/with-tailwindcss/src/pages/markdown-page.md @@ -0,0 +1,10 @@ +--- +title: "Markdown + Tailwind" +setup: | + import Button from '../components/Button.astro'; +--- + +
+ + Go home... +
\ No newline at end of file diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 52c06dff1..9e83af22d 100644 --- 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 index 306187ffd..166c82cdf 100644 --- a/packages/astro/src/core/build/generate.ts +++ b/packages/astro/src/core/build/generate.ts @@ -1,23 +1,23 @@ -import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup'; -import type { PageBuildData } from './types'; -import type { AstroConfig, AstroRenderer, ComponentInstance, EndpointHandler, SSRLoadedRenderer } from '../../@types/astro'; -import type { StaticBuildOptions } from './types'; -import type { BuildInternals } from '../../core/build/internal.js'; -import type { RenderOptions } from '../../core/render/core'; - import fs from 'fs'; +import { bgMagenta, black, cyan, dim, magenta } from 'kleur/colors'; import npath from 'path'; +import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup'; import { fileURLToPath } from 'url'; +import type { AstroConfig, AstroRenderer, ComponentInstance, EndpointHandler, SSRLoadedRenderer } from '../../@types/astro'; +import type { BuildInternals } from '../../core/build/internal.js'; import { debug, error, info } from '../../core/logger.js'; import { prependForwardSlash } from '../../core/path.js'; +import type { RenderOptions } from '../../core/render/core'; import { resolveDependency } from '../../core/util.js'; +import { BEFORE_HYDRATION_SCRIPT_ID } from '../../vite-plugin-scripts/index.js'; 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 { bgMagenta, black, cyan, dim, magenta } from 'kleur/colors'; +import { getOutFile, getOutFolder, getOutRoot } from './common.js'; +import type { PageBuildData, StaticBuildOptions } from './types'; import { getTimeStat } from './util.js'; + // Render is usually compute, which Node.js can't parallelize well. // In real world testing, dropping from 10->1 showed a notiable perf // improvement. In the future, we can revisit a smarter parallel @@ -214,7 +214,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 index 6ba82a2b7..0ea9f1d84 100644 --- 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 index 5f106d942..c963e42c8 100644 --- 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 index 829076c6c..8fcf7aafb 100644 --- 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