diff options
| -rw-r--r-- | .changeset/angry-apricots-invite.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/core/ssr/index.ts | 14 | ||||
| -rw-r--r-- | packages/astro/src/vite-plugin-astro/compile.ts | 7 | ||||
| -rw-r--r-- | packages/astro/src/vite-plugin-astro/index.ts | 17 | ||||
| -rwxr-xr-x | packages/astro/vendor/vite/dist/client/client.mjs | 16 |
5 files changed, 55 insertions, 4 deletions
diff --git a/.changeset/angry-apricots-invite.md b/.changeset/angry-apricots-invite.md new file mode 100644 index 000000000..18db7ab25 --- /dev/null +++ b/.changeset/angry-apricots-invite.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes HMR of CSS that is imported from astro, when using the static build flag diff --git a/packages/astro/src/core/ssr/index.ts b/packages/astro/src/core/ssr/index.ts index 421e2dcce..e7299d20a 100644 --- a/packages/astro/src/core/ssr/index.ts +++ b/packages/astro/src/core/ssr/index.ts @@ -229,6 +229,18 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO ) : new Set<SSRElement>(); + // Inject HMR scripts + if (mode === 'development' && astroConfig.buildOptions.experimentalStaticBuild) { + scripts.add({ + props: { type: 'module', src: '/@vite/client' }, + children: '', + }); + scripts.add({ + props: { type: 'module', src: new URL('../../runtime/client/hmr.js', import.meta.url).pathname }, + children: '', + }); + } + const result = createResult({ astroConfig, logging, origin, params, pathname, renderers, scripts }); // Resolves specifiers in the inline hydrated scripts, such as "@astrojs/renderer-preact/client.js" result.resolve = async (s: string) => { @@ -249,7 +261,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO const tags: vite.HtmlTagDescriptor[] = []; // dev only: inject Astro HMR client - if (mode === 'development') { + if (mode === 'development' && !astroConfig.buildOptions.experimentalStaticBuild) { tags.push({ tag: 'script', attrs: { type: 'module' }, diff --git a/packages/astro/src/vite-plugin-astro/compile.ts b/packages/astro/src/vite-plugin-astro/compile.ts index 4c6ceccd7..d99c96f4a 100644 --- a/packages/astro/src/vite-plugin-astro/compile.ts +++ b/packages/astro/src/vite-plugin-astro/compile.ts @@ -50,6 +50,13 @@ async function compile(config: AstroConfig, filename: string, source: string, vi experimentalStaticExtraction: config.buildOptions.experimentalStaticBuild, // TODO add experimental flag here preprocessStyle: async (value: string, attrs: Record<string, string>) => { + // When using this flag CSS is added via <link> and therefore goes + // through Vite's CSS pipeline. We don't need to transform here, it will be + // transformed on CSS requests. + if (config.buildOptions.experimentalStaticBuild) { + return { code: value }; + } + const lang = `.${attrs?.lang || 'css'}`.toLowerCase(); try { const result = await transformWithVite({ diff --git a/packages/astro/src/vite-plugin-astro/index.ts b/packages/astro/src/vite-plugin-astro/index.ts index 418c7925a..a252a8e30 100644 --- a/packages/astro/src/vite-plugin-astro/index.ts +++ b/packages/astro/src/vite-plugin-astro/index.ts @@ -3,6 +3,7 @@ import type { AstroConfig } from '../@types/astro'; import type { LogOptions } from '../core/logger'; import esbuild from 'esbuild'; +import npath from 'path'; import { fileURLToPath } from 'url'; import { AstroDevServer } from '../core/dev/index.js'; import { getViteTransform, TransformHook } from './styles.js'; @@ -29,6 +30,11 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu } let viteTransform: TransformHook; + + // Variables for determing if an id starts with /src... + const srcRootWeb = config.src.pathname.slice(config.projectRoot.pathname.length - 1); + const isBrowserPath = (path: string) => path.startsWith(srcRootWeb); + return { name: '@astrojs/vite-plugin-astro', enforce: 'pre', // run transforms before other plugins can @@ -38,7 +44,16 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu // note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.) async resolveId(id) { // serve sub-part requests (*?astro) as virtual modules - if (parseAstroRequest(id).query.astro) { + const { query } = parseAstroRequest(id); + if (query.astro) { + // Convert /src/pages/index.astro?astro&type=style to /Users/name/ + // Because this needs to be the id for the Vite CSS plugin to property resolve + // relative @imports. + if (query.type === 'style' && isBrowserPath(id)) { + const outId = npath.posix.join(config.projectRoot.pathname, id); + return outId; + } + return id; } }, diff --git a/packages/astro/vendor/vite/dist/client/client.mjs b/packages/astro/vendor/vite/dist/client/client.mjs index 8a10e7ee1..53609982f 100755 --- a/packages/astro/vendor/vite/dist/client/client.mjs +++ b/packages/astro/vendor/vite/dist/client/client.mjs @@ -199,6 +199,16 @@ function warnFailedFetch(err, path) { socket.addEventListener('message', async ({ data }) => { handleMessage(JSON.parse(data)); }); + +/** + * This cleans up the query params and removes the `direct` param which is internal. + * Other query params are preserved. + */ +function cleanUrl(pathname) { + let url = new URL(pathname, location); + url.searchParams.delete('direct'); + return url.pathname + url.search; +} let isFirstUpdate = true; async function handleMessage(payload) { switch (payload.type) { @@ -230,11 +240,13 @@ async function handleMessage(payload) { // css-update // this is only sent when a css file referenced with <link> is updated let { path, timestamp } = update; - path = path.replace(/\?.*/, ''); + let searchUrl = cleanUrl(path); // can't use querySelector with `[href*=]` here since the link may be // using relative paths so we need to use link.href to grab the full // URL for the include check. - const el = [].slice.call(document.querySelectorAll(`link`)).find((e) => e.href.includes(path)); + const el = [].slice.call(document.querySelectorAll(`link`)).find((e) => { + return cleanUrl(e.href).includes(searchUrl) + }); if (el) { const newPath = `${base}${path.slice(1)}${path.includes('?') ? '&' : '?'}t=${timestamp}`; el.href = new URL(newPath, el.href).href; |